Oction Labs — Brand System
Colour
Colour tokens
Ink
Carbon
Graphite
Steel
Mist
White
Coral
Coral deep
Oction Labs - Colour
Transcribed from the brand book p.12-13. All values are authoritative.
1. Colour system / values (p.12)
| Token | Name | HEX | RGB | CMYK | HSL | Role |
|---|---|---|---|---|---|---|
| Ink | Ink | #0A0A0B |
10 10 11 | 9 9 0 96 | 240° 5% 4% | Primary surface & primary text on light. 60-70% of any composition. |
| Carbon | Carbon | #17191D |
23 25 29 | 21 14 0 89 | 220° 12% 10% | Elevated dark surfaces, cards on ink. |
| Graphite | Graphite | #4A4D52 |
74 77 82 | 10 6 0 68 | 218° 5% 31% | Secondary text on light surfaces. |
| Steel | Steel | #9CA0A8 |
156 160 168 | 7 5 0 34 | 220° 6% 64% | Tertiary text on ink, hairlines, disabled states. |
| Mist | Mist | #ECEDEF |
236 237 239 | 1 1 0 6 | 220° 9% 93% | Light surfaces, dividers on white. |
| White | White | #FFFFFF |
255 255 255 | 0 0 0 0 | 0° 0% 100% | Reversed mark and text on ink. |
| Coral | Coral | #FF4B26 |
255 75 38 | 0 71 85 0 | 10° 100% 57% | The core dot, plus rules/buttons. Max 5% of any layout outside the mark. |
| Coral deep | Coral deep | #C2330F |
194 51 15 | 0 74 92 24 | 12° 86% 41% | Coral for small text on light surfaces (WCAG AA-safe). |
2. Contrast (WCAG 2.1, from p.12)
| Pair | Ratio | Rating |
|---|---|---|
| White / Ink | 19.8:1 | AAA |
| Ink / White | 19.8:1 | AAA |
| Ink / Mist | 16.9:1 | AAA |
| Graphite / White | 8.5:1 | AA |
| Coral / Ink | 5.9:1 | AA |
| Coral / White | 3.3:1 | large-text only |
| Coral deep / White | 5.6:1 | AA |
Rule: coral text below 18 px on white must use Coral deep #C2330F (Coral #FF4B26 on
white is large-text-only).
3. Usage & proportion (p.13)
Target proportions for a healthy composition: Ink 62% · White/Mist 20% · Greys 13% · Coral 5%.
- Mostly ink, breathing through white, structured with greys, signed with a single coral gesture.
- The 5% coral budget covers rules, one primary button, one highlight - choose one per surface, not all three.
- The dot in the mark is exempt from the budget: it is identity, not decoration.
- On light-first surfaces (documents, letterhead) the proportions invert (white leads, ink follows) but the coral discipline is identical.
4. Forbidden (p.13)
- ❌ Gradients of any kind.
- ❌ Additional accent hues (no blues, greens, etc. - the palette is closed).
- ❌ Tints of coral - coral is used at 100% or not at all, never at reduced opacity as a fill.
- ❌ Coral text below 18 px on white (use Coral deep).
5. Tokens (copy/paste)
:root{
--ink:#0A0A0B; --carbon:#17191D; --graphite:#4A4D52; --steel:#9CA0A8;
--mist:#ECEDEF; --white:#FFFFFF; --coral:#FF4B26; --coral-deep:#C2330F;
}
{
"ink":"#0A0A0B","carbon":"#17191D","graphite":"#4A4D52","steel":"#9CA0A8",
"mist":"#ECEDEF","white":"#FFFFFF","coral":"#FF4B26","coralDeep":"#C2330F"
}