Logo
The Octen mark: a circular 'O' icon paired with the Octen wordmark, set in Fraunces. Assets are sourced from the brand deck and live at /public/brand — see docs/design-system/00-philosophy.md for provenance.
Primary lockup
Icon + wordmark. The Logo component swaps the wordmark automatically between the light-theme (black) and dark-theme (white) sources — no manual variant switching needed in product code.
<Logo size="xl" /> — variant="auto" (the default) picks the right wordmark for the surrounding theme automatically.
Icon mark
The standalone 'O' icon, for favicons, avatars, and compact placements.
Signal (default)
Brand green
Black
WhiteWordmark only
Black on light surfaces, white on dark surfaces.
Sizes
Icon + wordmark scale together via the size prop.
16px20px24px32px44pxClear space & minimum size
Minimum clear space equals the height of the icon mark on every side. Below 16px icon height, drop the wordmark and use the icon mark alone.
Usage
- Use the white wordmark/icon on dark or photographic backgrounds.
- Keep at least one icon-width of clear space around the mark.
- Use the signal-green icon only on black/near-black surfaces — it fails contrast on light backgrounds.
- Scale the lockup proportionally (icon and wordmark move together).
- Don't recolor the wordmark to anything other than black or white.
- Don't stretch, skew, or rotate the mark.
- Don't add drop shadows, outlines, or gradients to the logo itself.
- Don't place the brand-green icon directly on a light background — use black or the darker accent-strong green context instead.
Asset reference
| File | Use |
|---|---|
| /brand/octen-icon-signal.svg | Icon on black/dark surfaces (default) |
| /brand/octen-icon.svg | Icon, brand green — light-surface accents |
| /brand/octen-icon-black.svg | Icon, monochrome black |
| /brand/octen-icon-white.svg | Icon, monochrome white |
| /brand/octen-wordmark-black.svg | Wordmark for light surfaces |
| /brand/octen-wordmark-white.svg | Wordmark for dark surfaces |