Design system board

Fernwick Design Co. · Design systems · Portland, OR

Ilse Marchetti keeps her studio's colours, type, spacing, corners and shadows in one place her team edits.

Any business ContentTables5 tables · 5 views · 1 form · 1 agent

Colors

Name	Group	Value	Read on	Usage note
background	Surfaces	{"light":"#ffffff","dark":"#0b0d12"}	—	The page itself. Everything else sits on it.
foreground	Surfaces	{"light":"#111827","dark":"#e8ebf1"}	background	Body text and icons on the page.
card	Surfaces	{"light":"#ffffff","dark":"#141821"}	—	Raised panels, dialogs and menus.
card-foreground	Surfaces	{"light":"#111827","dark":"#e8ebf1"}	card	Text inside a card.
muted	Muted	{"light":"#f1f4f8","dark":"#1c212c"}	—	Quiet fills: table headers, empty states, code blocks.
muted-foreground	Muted	{"light":"#6b7487","dark":"#9aa3b5"}	muted	Hints and captions on a muted fill. Check it on light.
primary	Primary	{"light":"#2f5bea","dark":"#6d8dff"}	—	The one main action on a screen.
primary-foreground	Primary	{"light":"#ffffff","dark":"#0b1230"}	primary	Label on a primary button.
border	Lines	{"light":"#e2e6ee","dark":"#262c38"}	—	Dividers and card edges. Never text.
input	Lines	{"light":"#646d80","dark":"#8d97aa"}	card	The outline of a field, so it is found without a label.
ring	Lines	{"light":"#2f5bea","dark":"#8aa4ff"}	—	Keyboard focus. Always visible, never removed.
destructive	Feedback	{"light":"#c62828","dark":"#f47a7a"}	background	Delete and errors. Ask before anything that cannot be undone.

Tables

12 sample rows · 5 columns

Every colour the product uses, light and dark, and what each is read on.

Name	Group	Value	Read on	Usage note
background	Surfaces	{"light":"#ffffff","dark":"#0b0d12"}	—	The page itself. Everything else sits on it.
foreground	Surfaces	{"light":"#111827","dark":"#e8ebf1"}	background	Body text and icons on the page.
card	Surfaces	{"light":"#ffffff","dark":"#141821"}	—	Raised panels, dialogs and menus.
card-foreground	Surfaces	{"light":"#111827","dark":"#e8ebf1"}	card	Text inside a card.
muted	Muted	{"light":"#f1f4f8","dark":"#1c212c"}	—	Quiet fills: table headers, empty states, code blocks.
muted-foreground	Muted	{"light":"#6b7487","dark":"#9aa3b5"}	muted	Hints and captions on a muted fill. Check it on light.
primary	Primary	{"light":"#2f5bea","dark":"#6d8dff"}	—	The one main action on a screen.
primary-foreground	Primary	{"light":"#ffffff","dark":"#0b1230"}	primary	Label on a primary button.
border	Lines	{"light":"#e2e6ee","dark":"#262c38"}	—	Dividers and card edges. Never text.
input	Lines	{"light":"#646d80","dark":"#8d97aa"}	card	The outline of a field, so it is found without a label.
ring	Lines	{"light":"#2f5bea","dark":"#8aa4ff"}	—	Keyboard focus. Always visible, never removed.
destructive	Feedback	{"light":"#c62828","dark":"#f47a7a"}	background	Delete and errors. Ask before anything that cannot be undone.

6 sample rows · 4 columns

The text styles: font, weight, size, line height and spacing.

Name	Group	Style	Usage note
display	Display	{"font":"system-ui","weight":700,"size":48,"lineHeight":56,"letterSpacing":-0.02}	One per page at most: a landing headline.
title	Headings	{"font":"system-ui","weight":600,"size":30,"lineHeight":38,"letterSpacing":-0.01}	The page title.
heading	Headings	{"font":"system-ui","weight":600,"size":20,"lineHeight":28,"letterSpacing":0}	Section headings inside a page.
body	Text	{"font":"system-ui","weight":400,"size":15,"lineHeight":24,"letterSpacing":0}	Everything people read.
caption	Text	{"font":"system-ui","weight":500,"size":12,"lineHeight":16,"letterSpacing":0.02}	Labels over values, timestamps, small print.
code	Code	{"font":"ui-monospace","weight":400,"size":13,"lineHeight":20,"letterSpacing":0}	Code, ids and values people copy.

6 sample rows · 3 columns

The spacing scale every layout is built from.

Name	Value	Usage note
space-1	4	Between an icon and its label.
space-2	8	Between related controls in a row.
space-3	12	Inside a compact card.
space-4	16	Default padding of a card or a dialog.
space-6	24	Between groups inside a section.
space-8	32	Between sections of a page.

4 sample rows · 3 columns

How round corners are, from chips to avatars.

Name	Value	Usage note
radius-sm	4	Chips, tags and small inputs.
radius-md	8	Buttons, fields and menus.
radius-lg	12	Cards, dialogs and panels.
radius-full	9,999	Avatars, pills and round buttons.

3 sample rows · 3 columns

Elevation: how far something floats above the page.

Name	Value	Usage note
shadow-sm	{"x":0,"y":1,"blur":2,"spread":0,"color":"#0f172a14"}	Cards resting on the page.
shadow-md	{"layers":[{"x":0,"y":4,"blur":8,"spread":-2,"color":"#0f172a1a"},{"x":0,"y":2,"blur":4,"spread":-2,"color":"#0f172a0f"}]}	Menus and popovers that float over content.
shadow-lg	{"layers":[{"x":0,"y":16,"blur":32,"spread":-8,"color":"#0f172a2e"},{"x":0,"y":6,"blur":12,"spread":-4,"color":"#0f172a14"}]}	Dialogs, the highest layer on screen.

Spring brake check postcards	Postcard	Brakes
Tire season search ads	Google Ads	Tires
Property manager fleet letters	Fleet outreach	Fleet service
Battery swap reminder texts	Text message	Batteries

Spring repotting season	Drive 400 soil and pot bundle sales	—
Low-light plants guide	Grow the newsletter by 600 subscribers	—
Winter care series	Cut winter returns by a quarter	—