Brand
The Cosmo brand identity. Logos for the Cosmo product and the Sett parent company. Wordmarks and voice guidelines arrive later.
Logos
Canonical SVGs for the Sett parent brand and the Cosmo product mark. Both ship with fill="currentColor" so consumers theme them via the parent color property, no per-theme SVG variants needed.
Cosmo logo - product mark
Native ratio 132x35. Constrain by height, let width auto.
Sett logo - parent brand
Native ratio 86x30. Use sparingly; Cosmo is the user-facing mark inside the product.
Color treatments via currentColor
When the SVG markup is inlined (or loaded via <object>), the parent's color property drives the fill. <img> embeds are sandboxed and won't inherit, the demos below use <object> for the dark and accent surfaces.
Asset reference
| Asset | Path | Use for |
|---|---|---|
| Cosmo logo | assets/cosmo-logo.svg | Product mark - topbars, sidebars, marketing for the Cosmo app |
| Sett logo | assets/sett-logo.svg | Parent brand - corporate footer, multi-product surfaces, signed-out screens |
Source-of-truth path. The same files ship in production at cosmo-prod/packages/front/src/design-system/assets/. The local copy here mirrors production for the website / showcase.
Recommended usage - inline SVG (themable).
<span style="color: var(--ink-700);">
<svg width="132" height="35" viewBox="0 0 132 35" ...>
<path d="..." fill="currentColor" />
<!-- ...remaining paths... -->
</svg>
</span>img usage - faster but not themable.
<img src="assets/cosmo-logo.svg" alt="Cosmo" style="height:24px;width:auto;" />object usage - themable and cacheable.
<span style="color: var(--accent);">
<object type="image/svg+xml" data="assets/cosmo-logo.svg" style="height:24px;pointer-events:none;"></object>
</span>Wordmark
Coming soon.
Voice and tone
Coming soon.
Glossary
Coming soon.