Logo
Last Updated: September 2026Logos render Commure, Athelas, or Air brand marks for product chrome, with logomark and mono options.
Source CodeAnatomy
link- 1Lockup
- 2Logomark
Variants
linkBrands
brand accepts "commure" | "athelas" | "air".
Logomark
logomark renders the compact symbol without the wordmark.
Mono
mono uses foreground primary fill for dark/light surfaces.
As button
render swaps the host element (e.g. button) via useRender.
Usage Guidelines
linkWhen to use
- •To render Commure, Athelas, or Air brand marks in product chrome.
- •In sidebars, headers, and auth screens that need a consistent logo.
- •When logomark-only or mono treatments are required for density or contrast.
When not to use
- •For arbitrary UI icons — use Icon.
- •As a decorative watermark that competes with primary content.
- •When a custom partner mark is required — supply that asset separately.
Use logomark in dense chrome; keep the full lockup for marketing or splash.
Don't force the full wordmark into a narrow sidebar — switch to logomark.
Prefer mono when the surface or theme would wash out brand gradients.
Don't place full-color logos on busy photography without checking contrast.
Behaviors
linkBrand dispatch
- •brand selects Commure, Athelas, or Air SVG implementations.
- •Brand files under brands/ are private — always go through Logo.
Treatments
- •logomark — symbol only.
- •mono — fills use --ds-color-fg-primary for theme-safe single color.
- •Both can combine (mono logomark).
Polymorphism
- •Default host is a span wrapping the SVG.
- •render / onClick support link or button hosts without leaking SVG attributes.
Content Guidelines
linkPlacement
- •One primary logo per chrome region (header or sidebar).
- •Keep clear space around the mark — avoid crowding with Tags or chips.
Brand choice
- •Pick the brand that matches the product surface (Commure / Athelas / Air).
- •Do not invent alternate wordmarks or recolor outside mono.
Accessibility
linkText & Labels
- •When Logo is the sole home control, give the host an accessible name (aria-label or visible text).
- •Decorative logos adjacent to a product title can be aria-hidden on the SVG host.
ARIA attributes
- •Default span is not a landmark — wrap in a link/button when it navigates.
- •Prefer render={<a href="/" />} or a Button host for interactive logos.
Keyboard Support
- •Non-interactive by default.
- •With a button/link host, Tab focuses the host; Enter/Space activates.
WCAG Compliance Standards
FAQs
linkWhich brands are supported?
"commure" | "athelas" | "air". Pass brand as a required prop.
mono vs logomark?
mono changes color treatment (theme-safe single fill). logomark switches to the compact symbol. Use either or both.
Can I import brands/*.tsx directly?
No — those modules are private. Use <Logo brand="…" /> as the public entry point.