The chip pixel-O, its clear space and its misuse cases.
| Prop | Type | Notes |
|---|---|---|
| size | number | Height of the mark in px; never below 20 |
| withWordmark | boolean | Show the "Optimistic" lockup |
| chip | boolean | Set the mark in a rounded app-icon tile |
| accent | fixed | Exactly one warm pixel at 45° — not configurable |
The Logo is the brand's signature: one mark, one warm pixel, from a single SVG source. It is not an Icon or an Avatar and never restyled.
Keep one grid unit of empty space on every side.
Below 20px the pixel grid blurs — use the chip instead.
Use the mark as shipped, on a dark field with room to breathe.
Don't rotate, skew or flip the mark. It sits square, always.
Use the rounded chip for app tiles and small favicons.
Don't recolour it. One warm pixel is the entire point.
| Token | Value | Role |
|---|---|---|
| --logo-grid | 9 × 9 | Pixel grid the ring is drawn on |
| --logo-pixel | #F4F4F5 | Ring squares |
| --logo-accent | #FF7A00 | The one warm pixel (45°) |
| --logo-chip-bg | #1C1C1E | App-icon tile fill |
| --logo-min | 20px | Smallest legible mark |
| --logo-clear | 1 grid unit | Minimum clear space all sides |
<span class="o-logo"> <svg viewBox="0 0 56 56"><!-- 9-grid pixel ring, one #ff7a00 cell --></svg> <span class="o-logo__word">Optimistic</span> </span> <!-- app icon --> <span class="o-logo-chip"><svg viewBox="0 0 56 56">…</svg></span>