Build a complete design system in Sketch: foundation tokens, component library, icon system, pattern templates, and a token export pipeline that generates CSS custom properties from a single Sketch source.
A design system is more than a component library — it is the shared language between design and engineering. This project builds a production-quality Sketch design system from tokens to patterns, ready to serve as the single source of truth for a real product team and feed a code token pipeline.
Organise the system across three Sketch Library files to separate concerns and keep update diffs focused:
1core-library.sketch -> published as Cloud Library
2 Color Variables:
3 Brand/Primary #2563EB, Brand/Secondary #7C3AED
4 Text/Primary #111827, Text/Secondary #6B7280
5 Background/Surface #FFFFFF, Background/Page #F9FAFB
6 Border/Default #E5E7EB, State/Error #EF4444
7 Text Styles:
8 Display/XL, Heading/1-4, Body/Regular, Body/Small, Caption
9 Layer Styles:
10 Surface/Card, Surface/Modal, Border/Subtle, Elevation/1-3
11
12components-library.sketch -> imports core-library
13 Symbols: Button, Input, Card, Badge, Tag,
14 Modal, Toast, Tooltip, Dropdown, NavBar
15
16patterns-library.sketch -> imports components-library
17 Symbols: AuthPage, DashboardLayout, SettingsPage,
18 MarketingHero, PricingTableChanges to core tokens do not require touching the components file. Component changes do not affect pattern templates unless you explicitly pull the Library update.
Tokens are named design decisions. Define them in three tiers so a single primitive change cascades everywhere:
1Tier 1 — Primitive (raw values)
2 Blue-600 = #2563EB
3 Neutral-900 = #111827
4 Neutral-100 = #F3F4F6
5
6Tier 2 — Semantic (intent-named, references primitives)
7 Brand/Primary = Blue-600
8 Text/Primary = Neutral-900
9 Background/Subtle = Neutral-100
10
11Tier 3 — Component (specific usage, references semantic)
12 Button/Background/Default = Brand/Primary
13 Heading/Color = Text/Primary
14 Card/Background = Background/Surface
15
16Brand refresh: change Blue-600 primitive -> Brand/Primary
17updates -> every button, link, and highlight everywhere.In Sketch, implement Tier 2 and Tier 3 as Color Variables in the core-library file. Tier 1 primitives are documented in a table on the Cover artboard.
Icons need consistent viewBox, stroke weight, and naming before the first one is drawn. Define the grid: 24x24pt viewBox, 2pt stroke weight as a Layer Style so a global change updates all icons simultaneously. Name every icon Symbol with category/action convention:
1Icon system naming:
2 Icon/Navigation/Home nav-home.svg
3 Icon/Navigation/Search nav-search.svg
4 Icon/Action/Plus action-plus.svg
5 Icon/Action/Delete action-delete.svg
6 Icon/Status/Check status-check.svg
7 Icon/Status/Warning status-warning.svg
8 Icon/File/Upload file-upload.svg
9
10# After export, optimise entire directory
11npx svgo ./icons/ --recursive
12# Then strip width/height attributes for CSS-sized inline useGroup all icon Symbol masters on one artboard per category on the Components page. Export all at 1x SVG — vector icons need only one density.
Patterns are reusable page-level compositions assembled from component Symbols. A Dashboard Pattern Symbol nests NavBar, Sidebar, ContentArea, and DataCard Symbols in a 12-column grid layout. Patterns are the most valuable handoff artifact — a developer implementing a new page sees exactly which components to use, in what layout, at what spacing, without having to interpret a flat screenshot.
1Pattern: Dashboard Layout
2 NavBar/Desktop Symbol (full width, fixed top)
3 Sidebar/Navigation Symbol (240pt wide, full height)
4 Content area:
5 PageHeader Symbol
6 Stats row: 3x DataCard/Metric Symbols
7 Chart area: DataCard/Chart Symbol
8 Table: DataTable Symbol
9 All spacing: 24pt gaps, 32pt page padding
10
11Update Button Symbol in components-library
12-> Dashboard Layout Pattern updates automatically
13-> Zero manual work across all pattern artboardsExport Sketch tokens as JSON using a design token plugin, then process through Style Dictionary to generate platform-specific outputs from one source:
1// tokens.json (Style Dictionary input, exported from Sketch)
2{
3 "color": {
4 "brand": {
5 "primary": { "value": "#2563EB", "type": "color" },
6 "secondary": { "value": "#7C3AED", "type": "color" }
7 },
8 "text": {
9 "primary": { "value": "#111827", "type": "color" }
10 }
11 },
12 "spacing": {
13 "4": { "value": "4px" },
14 "8": { "value": "8px" },
15 "16": { "value": "16px" },
16 "24": { "value": "24px" }
17 }
18}1/* Style Dictionary output: tokens.css */
2:root {
3 --color-brand-primary: #2563EB;
4 --color-brand-secondary: #7C3AED;
5 --color-text-primary: #111827;
6 --spacing-4: 4px;
7 --spacing-8: 8px;
8 --spacing-16: 16px;
9 --spacing-24: 24px;
10}Run Style Dictionary in the same CI step that exports Sketch assets — one command keeps design tokens and code tokens in perfect sync.
Your progress is saved in this browser, on this device only.