Design system — Editorial

Quillstone Review · Design systems — publishing and media · Providence, RI

Marguerite Okonjo starts Quillstone Review's design system from the Editorial starter and adapts it to the brand.

Any business ContentTables8 tables · 8 views · 1 form · 1 agent

All colours

Colors

Name	Group	Value	Read on	Usage note
background	Surfaces	{"light":"#faf7f1","dark":"#17140f"}	—	The page itself. Everything else sits on it.
foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	background	Body text and icons on the page.
card	Surfaces	{"light":"#fffdf8","dark":"#1f1b15"}	—	Raised panels, dialogs and menus.
card-foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	card	Text inside a card.
popover	Surfaces	{"light":"#fffdf8","dark":"#25201a"}	—	Menus, tooltips and pickers that float over content.
popover-foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	popover	Text inside a menu or tooltip.
muted	Muted	{"light":"#f1ebdf","dark":"#29241c"}	—	Quiet fills: table headers, empty states, code blocks.
muted-foreground	Muted	{"light":"#665847","dark":"#b2a691"}	muted	Hints and captions. Also reads on the page and on cards.
primary	Primary	{"light":"#8a2b1f","dark":"#e8937f"}	—	The one main action on a screen.
primary-foreground	Primary	{"light":"#fffaf3","dark":"#2a0c06"}	primary	Label on a primary button.
secondary	Secondary	{"light":"#ebe3d4","dark":"#302a21"}	—	Second actions and quiet selected states.
secondary-foreground	Secondary	{"light":"#2b241b","dark":"#e7dfd0"}	secondary	Label on a secondary button.

9 more rows

Tables

Colors

21 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":"#faf7f1","dark":"#17140f"}	—	The page itself. Everything else sits on it.
foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	background	Body text and icons on the page.
card	Surfaces	{"light":"#fffdf8","dark":"#1f1b15"}	—	Raised panels, dialogs and menus.
card-foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	card	Text inside a card.
popover	Surfaces	{"light":"#fffdf8","dark":"#25201a"}	—	Menus, tooltips and pickers that float over content.
popover-foreground	Surfaces	{"light":"#211b14","dark":"#ece5d8"}	popover	Text inside a menu or tooltip.
muted	Muted	{"light":"#f1ebdf","dark":"#29241c"}	—	Quiet fills: table headers, empty states, code blocks.
muted-foreground	Muted	{"light":"#665847","dark":"#b2a691"}	muted	Hints and captions. Also reads on the page and on cards.
primary	Primary	{"light":"#8a2b1f","dark":"#e8937f"}	—	The one main action on a screen.
primary-foreground	Primary	{"light":"#fffaf3","dark":"#2a0c06"}	primary	Label on a primary button.
secondary	Secondary	{"light":"#ebe3d4","dark":"#302a21"}	—	Second actions and quiet selected states.
secondary-foreground	Secondary	{"light":"#2b241b","dark":"#e7dfd0"}	secondary	Label on a secondary button.

9 more rows

Typography

7 sample rows · 4 columns

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

Name	Group	Style	Usage note
display	Display	{"font":"Fraunces, 'Iowan Old Style', Georgia, serif","weight":600,"size":52,"lineHeight":58,"letterSpacing":-0.02}	A cover line or an essay title.
title	Headings	{"font":"Fraunces, 'Iowan Old Style', Georgia, serif","weight":600,"size":32,"lineHeight":40,"letterSpacing":-0.01}	The page title.
heading	Headings	{"font":"Fraunces, 'Iowan Old Style', Georgia, serif","weight":600,"size":22,"lineHeight":30,"letterSpacing":0}	Section headings inside a piece.
body	Text	{"font":"'Source Serif 4', 'Iowan Old Style', Georgia, serif","weight":400,"size":18,"lineHeight":30,"letterSpacing":0}	Long reading, at about 65 characters a line.
standfirst	Text	{"font":"'Source Serif 4', 'Iowan Old Style', Georgia, serif","weight":400,"size":21,"lineHeight":32,"letterSpacing":0}	The opening paragraph under a title.
label	Text	{"font":"'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","weight":600,"size":12,"lineHeight":16,"letterSpacing":0.08}	Kickers, bylines and buttons, in small capitals.
code	Code	{"font":"ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace","weight":400,"size":14,"lineHeight":22,"letterSpacing":0}	Code and values people copy.

Spacing

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.
space-4	16	Padding of a card.
space-6	24	Between paragraphs and figures.
space-10	40	Between sections of a piece.
space-16	64	Above a title, around a pull quote.

Corner radius

3 sample rows · 3 columns

How round corners are, from chips to avatars.

Name	Value	Usage note
radius-sm	2	Tags and inputs.
radius-md	4	Buttons, fields and menus.
radius-lg	6	Cards and figures.

Shadows

3 sample rows · 3 columns

Elevation: how far something floats above the page, in light and dark.

Name	Value	Usage note
shadow-sm	{"light":{"x":0,"y":1,"blur":0,"spread":0,"color":"#3b2a1414"},"dark":{"x":0,"y":1,"blur":0,"spread":0,"color":"#00000080"}}	A hairline lift for cards on paper.
shadow-md	{"light":{"x":0,"y":8,"blur":24,"spread":-8,"color":"#3b2a1424"},"dark":{"x":0,"y":8,"blur":24,"spread":-8,"color":"#000000b3"}}	Menus and the image lightbox.
shadow-lg	{"light":{"x":0,"y":20,"blur":48,"spread":-16,"color":"#3b2a1433"},"dark":{"x":0,"y":20,"blur":48,"spread":-16,"color":"#000000cc"}}	Dialogs and the reading drawer.

Opacity

3 sample rows · 3 columns

How see-through things get: disabled controls, tints and overlays.

Name	Value	Usage note
opacity-disabled	0.5	A control that cannot be used yet.
opacity-caption	0.85	An image caption laid over the picture.
opacity-overlay	0.7	The dim behind a lightbox.

Motion

3 sample rows · 3 columns

How fast things move and how they ease in and out.

Name	Value	Usage note
motion-fast	{"duration":150,"easing":"ease-out"}	Hover, press and focus.
motion-base	{"duration":240,"easing":"ease-in-out"}	Menus and drawers.
motion-page	{"duration":400,"easing":"ease-in-out"}	Fading a new page or image in.

Components

8 sample rows · 4 columns

Each component family, drawn as it looks in light and dark, with where to use it.

Name	Group	Sample	Usage note
Button	Actions	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:600;line-height:1;height:36px;padding:0 16px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.08em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.p{background:var(--primary);color:var(--primary-foreground)}.p.h{filter:brightness(1.08)}.p.f{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.p:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w r"><button class="b p">Save</button><button class="b p h">Hover</button><button class="b p f">Focus</button><button class="b p" disabled>Disabled</button></div>	The one main action of a screen. Never two primary buttons side by side.
Button variants	Actions	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:600;line-height:1;height:36px;padding:0 16px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.08em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.s{background:var(--secondary);color:var(--secondary-foreground)}.o{background:transparent;color:var(--foreground);border-color:var(--border)}.q{background:transparent;color:var(--muted-foreground);box-shadow:none}.d{background:var(--destructive);color:var(--destructive-foreground)}</style><div class="w r"><button class="b s">Secondary</button><button class="b o">Outline</button><button class="b q">Quiet</button><button class="b d">Delete</button></div>	Outline and quiet for everything else; delete only for what cannot be undone.
Text field	Inputs	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.f{display:grid;gap:6px;max-width:320px}.l{font-size:12px;font-weight:600;color:var(--foreground)}.i{font:inherit;font-size:14px;height:36px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--input);background:var(--background);color:var(--foreground);transition:box-shadow var(--motion-fast, 120ms ease-out)}.i:focus,.i.f{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.h{font-size:12px;color:var(--muted-foreground)}.e .i{border-color:var(--destructive)}.e .h{color:var(--destructive)}</style><div class="w g"><label class="f"><span class="l">Email</span><input class="i" placeholder="name@company.com"><span class="h">We send the receipt here.</span></label><label class="f"><span class="l">Name</span><input class="i f" value="Dana Ruiz"><span class="h">Focused.</span></label><label class="f e"><span class="l">Phone</span><input class="i" value="555-01"><span class="h">Enter all ten digits.</span></label></div>	Every field has a visible label above it and a hint or error below.
Card	Containers	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}.b{font:inherit;font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:12px;font-weight:600;line-height:1;height:36px;padding:0 16px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:0.08em;transition:filter var(--motion-fast, 120ms ease-out),transform var(--motion-fast, 120ms ease-out);}.c{max-width:380px;padding:16px;border-radius:var(--radius-lg, 6px);border:1px solid var(--border);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-sm, none)}.k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.t{margin:0 0 4px;font-family:Fraunces, 'Iowan Old Style', Georgia, serif;font-size:18px;font-weight:600}.m{margin:0 0 14px;font-size:13px;color:var(--muted-foreground)}.a{display:flex;gap:8px}.p{background:var(--primary);color:var(--primary-foreground)}.o{background:transparent;color:var(--card-foreground);border-color:var(--border);box-shadow:none}</style><div class="w c"><p class="k">Report</p><h3 class="t">Quarterly summary</h3><p class="m">Updated 2 hours ago by Dana Ruiz</p><div class="a"><button class="b p">Open</button><button class="b o">Share</button></div></div>	One idea per card: a kicker, a title, one line of detail and at most two actions.
Badge	Status	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.r{display:flex;flex-wrap:wrap;gap:8px}.x{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-sm, 2px);font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--foreground);background:var(--muted)}.x i{width:7px;height:7px;border-radius:50%;background:currentColor}.ok{color:var(--success)}.wa{color:var(--warning)}.er{color:var(--destructive)}.pr{background:var(--primary);color:var(--primary-foreground);border-color:transparent}</style><div class="w r"><span class="x">Draft</span><span class="x pr">New</span><span class="x ok"><i></i>Live</span><span class="x wa"><i></i>Waiting</span><span class="x er"><i></i>Failed</span></div>	A status always pairs its colour with a word.
Toggle list	Selection	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.l{display:grid;max-width:440px;border:1px solid var(--border);border-radius:var(--radius-lg, 6px);background:var(--card)}.o{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;color:var(--card-foreground)}.o+.o{border-top:1px solid var(--border)}.o small{display:block;font-size:12px;color:var(--muted-foreground)}.t{appearance:none;flex:none;width:36px;height:22px;border-radius:var(--radius-full, 999px);background:var(--input);position:relative;cursor:pointer;margin:0;transition:background var(--motion-fast, 120ms ease-out)}.t::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--background);transition:transform var(--motion-fast, 120ms ease-out)}.t:checked{background:var(--primary)}.t:checked::after{transform:translateX(14px)}.t:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}</style><div class="w l"><label class="o"><span>Email alerts<small>When a task is assigned to you</small></span><input type="checkbox" class="t" checked></label><label class="o"><span>Weekly digest<small>Every Monday morning</small></span><input type="checkbox" class="t"></label><label class="o"><span>Text messages<small>Needs a verified phone</small></span><input type="checkbox" class="t" disabled></label></div>	A switch acts at once. When a choice needs a Save, use a checkbox.
Collapsible list	Disclosure	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.d{max-width:500px;border:1px solid var(--border);border-radius:var(--radius-lg, 6px);background:var(--card);color:var(--card-foreground)}details+details{border-top:1px solid var(--border)}summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--muted-foreground)}details[open] summary::after{content:"\2212"}p{margin:0;padding:0 16px 14px;font-size:13px;color:var(--muted-foreground)}</style><div class="w d"><details open><summary>What is included</summary><p>Every table, view and page in the template.</p></details><details><summary>Who can see it</summary><p>Everyone in your organization.</p></details><details><summary>Can I undo it</summary><p>Yes, from the history of each item.</p></details></div>	For answers people look up once. Never hide a step people must take.
Tabs	Disclosure	<style>.w{font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif}.t{display:flex;gap:4px;border-bottom:1px solid var(--border)}.t span{padding:10px 14px;font-size:14px;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;text-transform:uppercase;letter-spacing:0.08em}.t .on{color:var(--foreground);font-weight:600;border-color:var(--primary)}</style><div class="w t"><span class="on">Overview</span><span>Activity</span><span>Settings</span></div>	Tabs switch views of one thing. Three to five, short names.

Oak Whistle	Design that holds up	Deep green, #1F4D3A
Whistle Kids	Learn by making	Sunny yellow, #F2B705
Oak Whistle Events	Rooms worth remembering	Burnt orange, #C4501B

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

Routewise	https://routewise-demo.net	Direct
FieldNest	https://fieldnest-demo.net	Direct
Tradeloop	https://tradeloop-demo.net	Indirect
Dispatchly	https://dispatchly-demo.net	Direct

Thistlewick blog	Owned	14,200
Instagram	Social	8,900
LinkedIn	Social	5,300
Weekly email	Email	11,800

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	—

Oak Barrel Cookware	$3,500	30
Spice Trail Co.	$1,800	45
Fresh Haven Meal Kits	$4,200	30
Cinder Gas Grills	$2,600	60

All colours

Tables

Colors

Typography

Spacing

Corner radius

Shadows

Opacity

Motion

Components

Related templates