Insert Fuel · the standard
Every swatch below reads its colour out of the running stylesheet and every ratio is computed as this page renders. It cannot drift from what ships. The brand anchors are the one thing typed by hand, because they come off the Canva kit, and if the kit and the CSS ever disagree the kit wins.
Navy in the product because a card has to sit on something and a well has to sit under it. Black in the feed because a post is flat and has no layers to build.
In the app
Navy
#03012C
Pure black has a luminance of exactly zero, so there is nothing below it. No sunken well, no pressed state, no disabled surface. That is the real reason behind “never use pure black”, and it only applies where things stack.
In social
Black
#000000
A post has no layers, so the objection disappears. Black gives maximum punch on a phone, the brand yellow hits 15.69:1 against it, and the Canva kit’s own dark page already uses it.
How far apart a text colour and its background are in brightness. The only colour measurement that does not depend on whose screen it is, which is exactly why it matters for a team spread across three countries.
| under 3:1 | fails | Decoration only. A fill, a bar, a dot. Never a word. |
| 3:1 | large only | 24px and up, or 18px bold. Headlines, not labels. |
| 4.5:1 | the floor | Normal body text. Everything must clear this. |
| 7:1 | comfortable | Anyone, any screen. Aim here for text people read all day. |
| 21:1 | the ceiling | Pure black on pure white. Nothing goes higher. |
The source of truth. Every neutral in the app is a tint of Gray or Navy, so the greys belong to the brand rather than to Tailwind. Never invent a colour; derive it.
It only works in one direction, and the numbers force the rule rather than suggesting it. One yellow thing per screen: the current state, the primary action, or the number someone came to read.
| Colour | on white | on navy | on black | So it is |
|---|---|---|---|---|
| Blue | 6.10:1 | 3.30:1 | 3.44:1 | safe as text anywhere |
| Light Blue | 2.49:1 | 8.07:1 | 8.43:1 | a fill on light, text on dark |
| Yellow | 1.34:1 | 15.02:1 | 15.69:1 | a fill on light, text on dark |
| Light Orange | 1.81:1 | 11.13:1 | 11.62:1 | a fill on light, text on dark |
| Dark Orange | 3.13:1 | 6.43:1 | 6.71:1 | a fill on light, text on dark |
| Red | 5.01:1 | 4.01:1 | 4.19:1 | safe as text anywhere |
| Gray | 4.74:1 | 4.24:1 | 4.43:1 | safe as text anywhere |
Read out of the running stylesheet as you look at it, in whichever mode you are in. Ratios are against the primary text colour. Flip the theme and every number here moves.
h1 is a rank, not a size. It means the most important heading on this page, which is what a screen reader announces. A landing page and a Tasks page each have exactly one, and they are doing opposite jobs: the marketing h1 is a poster that stops a stranger, the app h1 is a label for someone who already chose the page.
| Rank | Marketing | App | Face |
|---|---|---|---|
| Hero | 44 → 88px, 900 | — | Helvetica Now Display |
| h1 | 36 → 56px, 700 | 30px, 700 | Display / Inter |
| h2 | 28 → 40px, 700 | 24px, 600 | Display / Inter |
| h3 | 22 → 28px, 700 | 18px, 600 | Display / Inter |
| h4 | 16px, 600 | 14px, 600 | Inter both |
| Body | 17px, 400 | 14px, 400 | Inter |
| Figures | tabular | tabular | JetBrains Mono |
The font rule is the same rule. Helvetica Now Display is drawn to be seen large, which is what Display means in the name and why the app read blurry when it was set on 10px labels. Everything on the marketing scale is 28px and up, so that is where the brand face belongs. Marketing is big and is Display; app is small and is Inter. Weights are 400, 700 and 900, because those are the three files we own and a faked 500 is a smeared 400.
Root stays at 16px. It is the rem basis, not the text size: dropping it to 14 shrinks every padding and gap in the app by an eighth, which is a bug that shipped here for an hour.
Drawn by control(), the same function the app calls. One radius family stepped by audience: 6px in-app for staff who scan all day, 8px on cards, 10px on marketing CTAs where a stranger decides. Not pills, and flat: a border is the edge, not a glow.
One filled button per screen. The alpha keeps thirteen of its top controls transparent and fills exactly one, which is why its primary action is obvious. If two things are filled, neither reads as primary.
Brand colours mostly fail as text on white, so the dot, ring, border and fill carry the colour verbatim while the word darkens by the smallest amount that clears 4.5:1. On dark grounds the text is the brand colour itself.
Red means a problem or a top-priority alert and nothing else. It is never a stylistic choice and never a background for something merely important.
One composition system cropped into every format, never six designs. Same wordmark position, same counter, one statement, one accent element, the rail and the URL along the bottom in brand Gray.
| Slot | Light social | Dark social |
|---|---|---|
| Ground | #F7F7F5 | #000000 |
| Type | #000000 | #FFFFFF |
| Accent | #FFDD4A | #FFDD4A |
| Rails and URL | #6E7191 | #6E7191 |
Formats: Instagram 1080×1350, Story 1080×1920, LinkedIn 1200×1200 and 1200×627, X 1600×900, YouTube 1280×720. All crops of one layout.
Before adding anything: does this help someone understand where they are, what is happening, or what to do next? If not, remove it.
The metaphor lives in names and motifs, never in place of a plain label. The finishes are called Showroom, Night Drive and Carbon, and the setting they sit under still says light and dark. Racing words on the outside, plain words wherever somebody has to act.