Foundations
Colour
Each colour is named for what it does. Click any block to copy its value, and read the rules beside each scale, because knowing the value is rarely the hard part.
Source of truth: varick-site/app/globals.css · varick-charts chart-spec.md · varick-docs/SKILL.md · varick-app
The one rule
Varick runs two palettes. Getting this wrong is the most common way something ends up looking off-brand.
Documents outlive the app. A memo from 2024 and an invoice from today have to read as one company, so the document palette is deliberately narrower and frozen. The web can move faster.
Do
- Web and product UI: links, focus rings, active states, selected rows.
- Charts, as the second series (
--chart-2). - Marketing imagery and social templates, as a tint.
Don’t
- Any document the company issues: memo, proposal, report, invoice, engagement letter.
- Print of any kind.
- Deck body pages. Navy carries the hierarchy there.
The scales
Four palettes, each with the rules that govern it.
Base colour / Brand
Core
Description and usage
Four values carry the brand. Navy is the leading colour everywhere: headings, the wordmark, table header fills, and the first chart series.
If you only remember these, you can still build something that reads as Varick.
Rules
- Navy
- The default for anything structural or emphatic. Never decorative.
- Ink
- Body text and values. Near-black, never pure black.
- White
- The canvas. Cards, tooltips, page ground.
- Accent blue
- Web and product only. Never in a document or in print.
Product colour / Web
Web and product
Description and usage
The supporting set for anything rendered in a browser. Accent blue and its wash are legal here and nowhere else.
Muted and page sit between white and the hairline, and exist so a card can separate from its ground without a border.
Rules
- Accent wash
- Tinted fills behind accent content, and the selection background.
- Accent text
- Accent-coloured text, because #3B7CF6 lands under 4.5:1.
- Page
- The ground behind cards. One step off white.
Product colour / State
Semantic
Description and usage
State colours read off the Varick OS app. They were not documented here before, which meant a live product surface carried four hues the design system did not know about.
Teal exists so an informational state does not have to borrow accent blue, which reads as interactive.
Rules
- Success
- Completed runs, healthy status, a positive delta.
- Warning
- Needs attention, degraded, approaching a limit.
- Danger
- Failed runs and destructive actions. Never for emphasis.
- Teal
- In progress and informational. Never for a clickable thing.
Data visualisation
Chart ramp
Description and usage
Five steps from navy through grey, plus the accent as the second series. Monochromatic plus one blue.
Read as one continuous ramp, which is how a stacked bar or a multi-series line actually presents it.
Rules
- Chart 1
- The first and most important series. Always navy.
- Chart 2
- The second series. The only place accent blue appears in a chart.
- Past five
- Interpolate between navy and grey. Never introduce a new hue.
Base colour / Print
Documents and print
Description and usage
Navy plus greys. That is the whole palette: no accent blue, no gradients, no second hue.
Hierarchy comes from navy, size and small caps, never from weight. The bold faces are not in the package.
Rules
- Navy
- Headings, title, labels, table header fill, bullets.
- Navy mid
- Indicative gantt bars. Nothing else, ever.
- BAND
- Band and callout fill, behind a 2px navy left bar.
Neutral
Fills and hairlines
Description and usage
The neutrals that sit between the canvas and the hairline. Also read off the app.
Hairline soft exists for a divider inside a container that already has a border, where the standard hairline reads as a double rule.
Rules
- Fill
- Inert surfaces inside a card.
- Hairline soft
- A divider inside an already-bordered container.
Where each one goes
The same question from the other direction: you have a surface, you need a colour.
| Surface | Background | Text | Border |
|---|---|---|---|
| Page | #FFFFFF | #111111 | n/a |
| Card | #FFFFFF | #111111 | #EBEBEB plus --shadow-card |
| Card on a ground | #FBFBFB behind, #FFFFFF card | #111111 | #EBEBEB |
| Inert surface in a card | #F6F6F6 | #111111 | n/a |
| Callout / band | #F3F6FB | #3F3F3F | #002870 left bar, 2px |
| Table header | #002870 | #FFFFFF | n/a |
| Primary button | #002870 | #FFFFFF | n/a |
| Secondary button | #FFFFFF | #111111 | #EBEBEB, #DEDEDE on hover |
| Selection | #E8F1FE | #002870 | n/a |
| Success state | rgba(62,124,74,0.10) | #3E7C4A | n/a |
| Error | #FDF6F5 | #D55F5A | #D55F5A left bar |
Accessibility
Body copy needs 4.5:1. Text at 24px or larger, and UI borders, need 3:1.
Three tokens fail as body copy on white and are restricted accordingly. The greys that pass on white do not all pass on a tinted ground, so a caption inside a band or a wash needs checking rather than assuming.
| Token | Do not use it for | Use instead |
|---|---|---|
| --fg-low #B1B1B1 | Any text at all. It is 2.1:1 on white and no longer used for content anywhere on this site. | --muted-foreground #757575 at 4.6:1. |
| --border #EBEBEB | Text of any size, and any border that must be perceivable on its own. | --hairline-hover #DEDEDE for emphasis. |
| --brand #3B7CF6 | Small text on white. It lands just under 4.5:1. | --accent-foreground #2F6BE0. |
| --muted-foreground on a tint | It passes on white at 4.6:1 but drops to 3.7 to 4.4:1 on wash, band, muted and page. | --ink-soft #3F3F3F on any tinted ground. |