The Meridian
Used by
180ConnectA contemporary take on professional services, retaining clarity and credibility while making room for character, expression, and a little more ambition.
UK charity · 1189234
Northfield Community Trust
Youth mentoring across three boroughs. Last filed accounts show a surplus for the third year running.
Who does the work
States
System palette
Shape
Text types
Select a type to highlight it in the card above. Select again to clear.
Rules
- 01
The card is a border, not a shadow
border border-rule bg-card rounded-panel. Shadows are only for things that float: popovers, dialogs, menus.
- 02
10px reads as a document
rounded-panel (10px) for cards, rounded-inset (6px) for controls and chips inside them. Never rounded-2xl.
- 03
Insets are paper, not another white card
Recessed content sits on bg-paper with rounded-inset. A border inside a border is noise.
- 04
Three inks, by meaning
ink is content, dim is context about content, faint is furniture. Never set text with opacity.
- 05
The accent says where you are; states say what is true
lead appears in four places only: active tab, links, focus ring, register keys. Buttons are ink. go / hold / stop each carry a dot as well as a colour.
- 06
Uppercase is for codes only
Mono, 10.5px, tracked, faint — for things that really are codes (UK CHARITY, PRIORITY). Never a heading style.
- 07
Content arrives in reading order
Blur-up entrances, staggered by section, never all at once. Reduced motion is honoured everywhere.
Accessibility
WCAG 2.2 colour contrast
Calculated from this system’s colours in both modes. These are contrast checks, not an overall accessibility score or certification.
Light · 8/13 pairs meet AA
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
- Heading on card17.49:1 · AAA
- Body on card10.31:1 · AAA
- Supporting text on card5.00:1 · AA
- Quiet text on card3.06:1 · Large text only
- Body on inset8.79:1 · AAA
- Link on card10.06:1 · AAA
- Primary button label2.44:1 · Below AA
- Ink button label17.49:1 · AAA
- Positive state4.45:1 · Large text only
- Waiting state5.13:1 · AA
- Negative state6.21:1 · AA
- Focus ring against card2.44:1 · Below AA
- Focus ring against ground2.08:1 · Below AA
Dark · 12/13 pairs meet AA
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
- Heading on card14.56:1 · AAA
- Body on card12.19:1 · AAA
- Supporting text on card6.85:1 · AA
- Quiet text on card4.14:1 · Large text only
- Body on inset11.15:1 · AAA
- Link on card7.91:1 · AAA
- Primary button label7.66:1 · AAA
- Ink button label15.82:1 · AAA
- Positive state7.44:1 · AAA
- Waiting state7.98:1 · AAA
- Negative state6.91:1 · AA
- Focus ring against card7.05:1 · AA non-text
- Focus ring against ground7.66:1 · AA non-text
Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1 (24px regular or approximately 18.67px bold). Non-text indicators: AA ≥ 3:1. Ratios are displayed rounded down; results use full precision.