This is placeholder copy. Replace it with your own words about how you approach design systems.
Accent
Corners
Foundations
Neutral palette
Brand ramp
Type scale · system sans
121416202840
4px spacing grid
Tokens
Color roles
color.action.primaryindigo-600color.action.subtlebrand tintcolor.surface.defaultwhitecolor.text.primaryneutral-900color.status.positivegreen-600color.status.negativered-600
Type
type.heading.lg24 / 32 · 600type.body.md14 / 20 · 400type.caption12 / 16 · 500
Space
Radius
Components
Button
PrimarySecondaryGhost
Segmented control
30d90d1y
Table row
Acme CoActive$4,200
Sidebar
navigation
Page header · title + actions
Stat grid · 3-up
Chart panel
Data table · sortable
MRR$48.2k▲ 6.4%
Active accounts1,284▲ 2.1%
Churn1.8%▼ 0.3%
Top accountsAcme CoActive$4,200
GlobexActive$9,800
InitechTrial$0
UmbrellaPast due$6,400
Fictional demo product. Change the accent or corners, then explore the layers: the change reaches every layer that uses it.
Overview
Placeholder. What problem were you solving, and for whom?
Approach
Placeholder. How the layers relate: tokens feed components, components compose into patterns, patterns make up the product.
Outcome
Placeholder. What changed as a result.