Bevy Editor Mockup

An HTML+CSS mockup of a Bevy Editor, dual-licensed under Apache-2.0 and MIT.

The font-size is set to 12px so it's closer to the font size an editor would likely use. Since the entire CSS is made with rem units, you can change the font size of the page to try different scaling:

12px

NEW: Check out the Full Editor mockup page!

Color Palette

These colors are inspired by the Bevy Website and coreh's design system RFC.

UI 01
#18181a

Used for the background of input fields.

Click to copy hex
UI 02
#232326

Used for the background of panels.

Click to copy hex
UI 03
#39393e

Used for the background of the window, for buttons, and for sub-panels.

Click to copy hex
UI 04
#7c7c87

Used for icons on panels.

Click to copy hex
UI 05
#ffffff

Used for text and icons.

Click to copy hex
Error/Danger
#cc3b40

Used for errors and dangerous actions.

Click to copy hex
Warning
#f8a34e

Used for warnings.

Click to copy hex
Success
#4baf40

Used for success.

Click to copy hex
Light
#fcd34d

Used to represent light-related things.

Click to copy hex
Resource
#10b981

Used to represent resource-related things.

Click to copy hex
Asset
#a156d6

Used to represent assets.

Click to copy hex
Code
#ea7c45

Used to represent code-related things.

Click to copy hex

UI Elements

These are some standard UI elements like buttons and text fields.

64
Global Transform
Cool Slider
64
Transform
Translation
Sprite
Color
Point Light
Color
Intensity
64
Custom Component

Check out the Full Editor mockup page!

Thanks for checking this out!

I'd love to hear your feedback on this mockup! You can @-mention me in the Bevy Discord with <@427114333000957952>.