CadrifyDESIGN.md alpha

Cadrify is campaign software for British political parties: voter data, door-knocking rounds, polling day, volunteers, leaflet drops and paperwork. The look is British civic design crossed with quiet operational software. It should feel like a well-run council form or a good public-sector service, not a start-up landing page.

primary#2C5A8C
background#FFFFFF
primary-hover#1F3F66
primary-pressed#163059
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayInter · 32px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-lgInter · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-mdInter · 19px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-smInter · 16px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-smInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-mdInter · 13px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-smInter · 11.5px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeIBM Plex Mono · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

marketing-bodySource Sans 3 · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

2px
4px
6px
999px

Spacing

Base: 4px
4px
8px
12px
16px
24px
24px
32px
48px
64px
64px
96px

Cadrify is campaign software for British political parties: voter data, door-knocking rounds, polling day, volunteers, leaflet drops and paperwork. The look is British civic design crossed with quiet operational software. It should feel like a well-run council form or a good public-sector service, not a start-up landing page.

Components

Buttons

Inputs

Chips

default

status-pill

active

draft

info

error

panel

default

table-header

default

hover

Elevation & Depth

button
level-1
level-2
level-3

Do's & Don'ts

Do

Keep the canvas white and draw structure with 1px hairlines.
Spend colour only on actions and state. If something is coloured, it means something.
Show data as data: a figure, a label or a table cell, not a sentence restating what the table already shows.
Use sentence case everywhere, including table headings and buttons.
Keep rows dense and one line high, with grey only on hover.
Keep monospace for real identifiers (GSS codes, elector numbers, timestamps).
Say what happened and what to do in errors, empty states and destructive confirmations.

Don't

Don't use cream, paper, beige, stone or ivory backgrounds, or terracotta and coral accents with them.
Don't put a coloured or italic accent phrase inside a headline.
Don't put eyebrow or kicker labels above headings, or use tracked uppercase small text as a labelling style.
Don't use monospace for decoration, or a serif display headline on a sans page.
Don't use gradients, glassmorphism or coloured shadows.
Don't explain how a figure is worked out or where data comes from on the page, and don't add keys that spell out what a highlight means.
Don't use amber or crimson decoratively, and don't use ink lighter than #616B80 for text.
Download .md
Eugene McCarthy Eugene McCarthy @eugene-mccarthy
License MIT
Uploaded today
Version v1
File size 13.3 KB
Downloads 0
Copies 0
bold dark devtools landing-page mobile-app

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/eugene-mccarthy/cadrify and implement it in my code

Don't have the MCP? Install it here