Design language
A system you can check
The colours, type and shapes on this site are not a matter of taste. They are rules written into the code, and they are verified on every change. The same rules govern the systems we build for clients.
Why we bother
A design system is an operating tool, not decoration
A business system lives for years and more than one person works on it. Without written rules it breaks into dialects by the second year: three greys, five button sizes, a form that behaves differently on every screen.
A decision is made once
A shade, a spacing, a corner radius is settled once and written into a token. The next screen does not decide again; it takes what is already there.
Accessibility is not checked by eye
A script measures the contrast of every pair the site actually renders. Touch a colour, drop a ratio below the standard, and the change does not pass the check.
A new person gets up to speed faster
The rules are written down and findable. A developer joining in month five does not have to guess why one thing is gold and another is not.
Colour
Eighty per cent of the surface is neutral
The ratio is 80% neutral ground, 15% ink, 5% accent. In this system gold is warmth, not legibility, and each of its tones has exactly one place it is allowed.
Nothing below is typed in by hand. Every plate is painted with the same token the rest of the site uses, and the contrast ratios are computed from it when the page is built.
Neutral — light ground
White
--cbk-paper · #ffffff
The default background.
Spring Wood
--cbk-paper-warm · #f9f6f3
Warm sections and content documents.
Surface
--cbk-surface · #f7f7f7
Card and form background.
Surface Sunk
--cbk-surface-sunk · #f0f0f1
Sunken surfaces — a code box in a card, a disabled field.
Line
--cbk-line · #eaeaeb
Dividers and hairline frames. Graphics, never text.
Line Strong
--cbk-line-strong · #d8d8da
Table rules, the frame of an active field.
1.42 : 1 on white — passes (min 1.35 : 1)
Mute
--cbk-mute · #a8a8a8
Decoration only on light — never text.
Medium Gray
--cbk-ink-soft · #6f7071
Secondary text, captions, placeholders.
4.96 : 1 on white — passes (min 4.5 : 1)
Ink Mid
--cbk-ink-mid · #3f4143
Subheadings and icons where full ink is too hard.
10.25 : 1 on white — passes (min 4.5 : 1)
Charcoal
--cbk-ink · #1c1d1f
All body text, dark planes, primary buttons.
16.87 : 1 on white — passes (min 4.5 : 1)
Neutral — dark ground
Dark Sunk
--cbk-dark-sunk · #141516
Sunken surfaces on dark — a code box, an input.
Dark Base
--cbk-dark · #1c1d1f
The base dark plane. The same tone as ink.
Dark Raised
--cbk-dark-raised · #26282a
A card or raised plane on dark.
Dark Line
--cbk-dark-line · #35383a
Dividers on dark.
1.43 : 1 on charcoal — passes (min 1.35 : 1)
Dark Line Strong
--cbk-dark-line-strong · #4a4d50
Frames and table rules on dark.
On Dark
--cbk-on-dark · #ffffff
Primary text on dark.
16.87 : 1 on charcoal — passes (min 4.5 : 1)
On Dark Soft
--cbk-on-dark-soft · #a8a8a8
Secondary text on dark — the same shade that is banned on light.
7.09 : 1 on charcoal — passes (min 4.5 : 1)
On Dark Mute
--cbk-on-dark-mute · #7e8082
Disabled state and decoration on dark.
4.26 : 1 on charcoal — passes (min 3 : 1)
The warm family
Gold 50
--cbk-gold-50 · #fdf3e3
The lightest sequential step in charts. Not a flat surface.
Gold 100
--cbk-gold-100 · #f2dcb0
Text selection, the second sequential step.
Sand
--cbk-sand · #e7c584
Dark surfaces only: accent text, rules, numbers.
Dark surfaces only
10.22 : 1 on charcoal — passes (min 4.5 : 1)
Bronze
--cbk-bronze · #d39121
The module inside the mark; graphics on dark.
Dark surfaces only
6.30 : 1 on charcoal — passes (min 3 : 1)
Tussock
--cbk-tussock · #bc8947
Graphics on light: rules, icons, frames. Not text.
3.08 : 1 on white — passes (min 3 : 1)
Deep Gold
--cbk-gold-deep · #8d6116
The only gold allowed to set type on light. Accent text and links.
5.45 : 1 on white — passes (min 4.5 : 1)
Gold 900
--cbk-gold-900 · #5c3f0e
Link hover on light, the darkest sequential step.
9.67 : 1 on white — passes (min 4.5 : 1)
State — light ground
OK
--cbk-ok · #1b6f48
Success — always with an icon and a word.
5.58 : 1 on its own plate — passes (min 4.5 : 1)
OK Background
--cbk-ok-bg · #eaf7f0
The plate behind a success message.
OK Line
--cbk-ok-line · #b3dfc9
The frame of a success message.
1.47 : 1 on white — passes (min 1.35 : 1)
Info
--cbk-info · #136b75
Supporting information.
5.39 : 1 on its own plate — passes (min 4.5 : 1)
Info Background
--cbk-info-bg · #e5f1f8
The plate behind an informational message.
Info Line
--cbk-info-line · #b9dee4
The frame of an informational message.
1.44 : 1 on white — passes (min 1.35 : 1)
Warn
--cbk-warn · #985301
A warning.
4.86 : 1 on its own plate — passes (min 4.5 : 1)
Warn Background
--cbk-warn-bg · #fbe7c6
The plate behind a warning — deliberately more orange than Gold 50 so a warning does not read as a brand block.
Warn Line
--cbk-warn-line · #f0d6a8
The frame of a warning.
1.41 : 1 on white — passes (min 1.35 : 1)
Danger
--cbk-danger · #c02222
An error.
5.31 : 1 on its own plate — passes (min 4.5 : 1)
Danger Background
--cbk-danger-bg · #feedec
The plate behind an error message.
Danger Line
--cbk-danger-line · #f7c6c3
The frame of an error message.
1.52 : 1 on white — passes (min 1.35 : 1)
State — dark ground
OK on Dark
--cbk-ok-dark · #2ebb79
Success on dark. It would not pass on light.
6.83 : 1 on charcoal — passes (min 4.5 : 1)
OK Background on Dark
--cbk-ok-bg-dark · #16301f
The plate behind success on dark.
Danger on Dark
--cbk-danger-dark · #ff6b6b
An error on dark.
6.08 : 1 on charcoal — passes (min 4.5 : 1)
Danger Background on Dark
--cbk-danger-bg-dark · #331817
The plate behind an error on dark.
Why not just gold
The difference between two golds is measurable
Sand and Deep Gold look related. On white the difference between them is the difference between text you can read and text that misses the standard. That is why Sand never carries type on a light ground.
Sand
#e7c584 on white
1.65 : 1 — fails (min 4.5 : 1)
Dark surfaces only: accent text, rules, numbers.
Deep Gold
#8d6116 on white
5.45 : 1 — passes (min 4.5 : 1)
The only gold allowed to set type on light. Accent text and links.
Both figures are computed from the values above, not copied in. This page deliberately does not render a sample of illegible text — a number makes the point.
Type
One typeface, nine sizes
Inter for everything. A second typeface would mean a second decision at every heading. The sizes are fluid: between a phone and a wide screen they scale rather than switch.
Software that copies your process
Custom business systems
We start with analysis, not development
We are still here after go-live
Příliš žluťoučký kůň úpěl ďábelské ódy.
Příliš žluťoučký kůň úpěl ďábelské ódy.
Příliš žluťoučký kůň úpěl ďábelské ódy.
Custom business systems
Capitals belong in the eyebrow above a heading. Never in the heading itself, and never in the company name.
Shape and rhythm
Depth is a plane and a hairline
The module in the mark is a square, so icons and number tiles are squares with a radius, not circles. Shadows are not used at all.
Four radii
4, 8, 12 and 16 pixels. Nothing between them and nothing above them. A fully rounded pill appears nowhere in the stylesheet.
One divider
A hairline. A card is told apart from its ground by its own plane and a one-pixel frame, never by a shadow.
Alternating planes
Light and dark sections alternate. Three dark ones never run together, and the footer counts as one of them.
Motion
Motion may introduce content, nothing more
A block fades in once as it comes into view, and that is the end of it. The content is fully readable without JavaScript, and the system setting for reduced motion switches the animation off entirely.
What you get from it
This is not about our website
The rules above govern the systems we build for clients too. The difference is not that they look nicer. It is what you can do with them after a year in production.
Changing a colour is one change
Not a search through the whole stylesheet. A token is rewritten in one place and takes effect everywhere it belongs.
Accessibility is evidenced, not asserted
Contrast is a number, not an opinion. For systems under regulatory supervision that is the difference between demonstrable and not.
Handover is not a loss
The rules sit in the repository next to the code. When another team takes the system over, they inherit the reasons and not just the files.
First step
Want a system you can check like this?
We start with a fixed-price analysis. Tell us what grinds in your company and we will reply within two working days.