Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Nord
Nord runs on a stark black-and-white foundation that behaves like a gallery wall — pure white sections with heavyweight black type let the work do the shouting, while an inverted black hero and footer bookend each page like velvet curtains. The brand voice is maximalist-minimalist: huge, compressed Instrument Sans display type sits beside tiny uppercase micro-labels, and the only chromatic accent — a hot orange-red — is reserved for interactive cues and CTA text, so it reads as a signature rather than a decoration. Colour in Nord lives almost entirely in the photography and video content (yellow leather, red ceramics, teal gradients) rather than in the UI chrome itself, which stays disciplined in black, white, and warm greys. This restraint is what makes the colour-blocked project imagery explode off the page — the system is a frame built specifically to let bold client work be the loudest thing in the room.
Colors
Canvas
Mist Grey
#f1f3f8
Lifted surface, subtle fills
Paper White
#ffffff
Base canvas
Hairline Grey
#d8dfe0
Dividers and borders
Ink
Ash Body
#d9dae2
Muted body text on dark surfaces
Void Black
#000000
Primary ink & dark surface
Button Black
#222222
Default button fill
Charcoal Hover
#444444
Button hover state
Accent
Dusk Lilac
#dfdbe6
Hover state for lifted surfaces
Signal Orange
#ff4800
Interactive accent & link text
Typography
The quick brown fox jumps
Primary typeface for all headings, body copy, and UI
The quick brown fox jumps
Rare condensed display use (password/utility screens)
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
150pxCard padding
35pxElement gap
25pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-35
35px--spacing-50
50px--spacing-70
70px--spacing-100
100px--spacing-150
150px--spacing-220
220px--spacing-300
300pxBorder radius
cards20pxsmall6pxcircle9999pxbuttons10pxwork-cards20pxtestimonials25pxpricing-cards15pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Paper White
Level 2Mist Grey
Level 3Dusk Lilac
Level 4Void Black
Do's and don'ts
- Keep the UI chrome strictly black and white; reserve Signal Orange exclusively for links, hover accents, and small interactive marks.
- Let photography and video carry all saturated colour — colour-block the work grid, not the navigation or buttons.
- Set hero and hero-adjacent headlines in massive, tightly-leaded Instrument Sans (line-height ~0.9–1.0) for maximum density.
- Invert full sections (hero, footer) to pure black with white type to punctuate the all-white body sections.
- Round buttons and cards generously (10px buttons, 20px cards) to soften the otherwise hard monochrome grid.
- Use uppercase, letter-spaced micro-labels (12–13px) for timestamps, tags, and social links to create a technical, editorial rhythm.
- Pair award badges and client logos in muted monochrome so they read as credibility marks, not decoration.
- Don't introduce a second brand colour beyond Signal Orange — all other hue must come from imagery.
- Don't shrink the display headline below ~7vw on hero sections; the oversized scale is the signature move.
- Don't use heavy drop shadows on cards — rely on flat black borders at ~14% opacity instead.
- Don't mix in serif or script typefaces; Instrument Sans carries the entire voice from caption to display.
- Don't crowd the white sections — maintain the 150px section padding rhythm so imagery has room to breathe.
- Don't desaturate the work-grid photography to match the UI; the contrast between mono chrome and vivid imagery is the point.
- Don't use rounded pill buttons; the 10px soft-square radius is the established button shape, not full rounding.
Example prompts
Hero section
Work grid card
CTA button
Article card
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide