LovelaceBrand
Download assets

Color

Greens for introductions, building, and technical depth.

Select a swatch to copy its hex value.

Technical depth

Light, open greens introduce Ada and invite exploration. Emerald carries the builder story. Forest gives code and infrastructure a focused setting. This is a shift in emphasis, not a different identity.

Use headings, examples, and navigation to explain technical depth. Color supports that structure; it never replaces it.

Shared canvas

App bar
Content can have its own tonal surface.

App bars and sidebars belong to the same frame. Give them the same surface color. Use MD3 tonal selection, state layers, shape, and spacing to establish hierarchy inside that frame.

Contrast

Computing
on your side.

Keep the message as clear as the shape.
8.16:1Meets AA for normal text.