Design System — v1.0
B2B SaaS Template · Dual theme
Design System
A restrained, institutional foundation built on warm paper neutrals, greige surfaces and hairline structure, with a single oxidised copper accent. Every token carries a light and a dark value, so appearance switches without a second design.
01 — Colour Tokens
Nine tokens · light + dark
Warm greige, oxidised copper
Background Base
#FBFAF8
Warm paper base for primary sections
Surface
#F3F1ED
Greige surface for bands and cards
Text Primary
#1A1815
Headings and body copy
Text Secondary
#78736B
Supporting text and metrics
Border / Structure
#E4E0D8
1px grid lines and component edges
Accent / Interactive
#A25E3C
Oxidised copper for CTAs and emphasis
Surface Raised
#FFFFFF
Card and panel surfaces above the base
Accent Soft
#F4E9E2
Hover states, chips and highlight tints
Ink
#1A1815
Inverted bands that flip in dark mode
Every token carries a light and a dark value — switch appearance to preview both.
02 — Typography
League Spartan / Inter
Typographic tension
Design System
Institutional clarity
Structured card header
Supporting subhead
Inline label heading
Table heading
Body copy sits at eighteen pixels with an airy 1.6 line height, keeping long-form paragraphs comfortable across wide measures.
Captions carry metadata, figures and footnotes in medium gray.
Overline label
03 — Buttons
Hover on canvas
Interactive elements
04 — Inputs & Controls
0px radius
Form primitives
Badges
Beta
Enterprise
SOC 2
05 — Containers & Grid
1px structure
Surfaces and structure
Base card
White surface, 1px border, 32px padding.
Surface card
Off-white surface for secondary emphasis.
Inverted card
Accent surface, reserved for a single emphasis per page.
Spacing scale — 8pt
8
16
24
32
64
128