Media

Logo

The product mark and the wordmark beside it, as one lockup. Use it in a navbar, a sidebar brand slot, or above a sign-in form. The mark paints from the theme tokens, so it follows whatever theme the page is in.

Basic

Mark alone

Set wordmark to false for a slot too narrow to carry the name, or for a header that already spells the product out in its own words.

Sizes

Three named steps rather than a pixel count. Each step sets the mark and the wordmark together, which is what keeps two copies of the lockup from drifting apart at the same nominal size.

Theme

Every face and the wordmark paint from the mark-* tokens, which carry the brand book's colors for each theme: the same lockup the documentation site ships as a file. They are separate from the brand ramp because that ramp darkens for text contrast in the light theme, and a mark painted from it lit its top face darker than its front. A host that overrides --color-brand leaves the mark alone. Override the --color-mark-* tokens to recolor it.

The component carries no prefers-color-scheme query of its own, and that is deliberate. A media query asks the operating system, while the theme is set by data-theme on <html>, so a mark painted off the media query disagrees with the rest of the page for any reader whose chosen theme is not their desktop's. Flip the theme with the toggle in the header and the mark repaints with everything else.

Accessibility

The mark is decoration and is hidden from assistive technology either way, so a link that holds only the mark has to carry its own name. With the wordmark on, the name is read once as "LyEve", not in the fragments the accented E splits it into.

API