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.
Nerdstack
Nerdstack is a developer-tool brand that translates dense engineering systems into something legible and human. The aesthetic pairs warm off-white paper surfaces with deep ink-black type, then lets pastel utility hues — coral, orchid, mint, sky, sand, peach — surface as small badges, gradient washes, and category markers. The result is a calm, technical feeling: documentation-clean, with just enough warmth to feel inviting rather than clinical. Typography leans on a low-contrast, slightly geometric sans (StackSans) for both headlines and body, paired with a monospaced label voice (Fragment Mono) for taxonomy. Layouts breathe — generous section padding, soft 20px container radii, and floating card components shadowed onto cream paper. When the surface flips to dark, the brand stays restrained: a single deep ink (#231f23) under the same pastel accent system.
Sections from Nerdstack
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Navigation Bar with Mega Menu
View section
CTA Section with Buttons
View section
Hero with Dashboard
View section
Social Proof Hero with Video
View section
Bento Feature Grid
View section
Performance Metrics Stats Section
View section
Feature Showcase With Interactive Widgets
View section
Case Study Carousel Slider
View section
Split Case Study Card
View section
Blog Slider With Navigation
View section
Hero Section with Rotating Elements
View section
Feature Comparison Table
View section
Colors
Canvas
Ash Depth
#ececec
Recessed depth surface. Input fields, subtle chip wells, and inset zones beneath the canvas.
Lift White
#ffffff
Lifted card surface. Pure white used for elevated cards, dropdowns, and floating tiles above the cream.
Linen Base
#f6f3f0
Alternate page canvas. Slightly warmer cream used for full-bleed background washes and hero stages.
Paper Cream
#f7f6f5
Primary canvas. Warm off-white background that anchors every page surface and section.
Ink
Midnight Ink
#231f23
Primary text & ink. Headlines, body copy, primary button fills, and dark surfaces.
Graphite Lift
#322d32
Dark-mode lifted surface. Cards and form blocks elevated against obsidian backgrounds.
Obsidian Depth
#1a171a
Deepest dark surface. Dark-mode hero backgrounds and inverted code panels.
Accent
Cache Sand
#f4e7c7
Warm tag accent. Footer pills, blog category chips, and warm gradient endpoints.
Core Coral
#ed7472
Critical accent & error tone. Marks debug critical states, error chips, and warm gradient stops.
Packet Sky
#d7e9ff
Cleanup & info accent. Cool pastel for review tags, debug icon backdrops, and informational chips.
Syntax Mint
#ccfdcf
Success & banner accent. Pass states, announcement banners, and docs category tags.
Qubit Orchid
#cebffa
Issue category accent. Soft lavender tile backgrounds for issue-found tags and product icons.
Violet Quill
#4c3e5e
Brand accent. Reserved for occasional emphasis, brand marks, and subdued highlights.
Latency Peach
#ffe1d6
Warning accent & gradient halo. Warning markers, peach text accents, and the signature CTA gradient bloom.
State — utility only
Signal Amber
#d5ad4b
Warning state. Reserved for caution indicators and validation feedback only.
Verdant Pass
#5cce63
Success state. Reserved for confirmed-pass indicators and form success feedback.
Typography
The quick brown fox jumps
Labels & taxonomy. Uppercased monospace voice for category tags, table headers, and small metadata.
The quick brown fox jumps
Body & UI. Light-weight default for paragraphs, buttons, navigation, and form fields.
The quick brown fox jumps
Display & headings. A low-contrast geometric sans that carries every H0–H6 with confident, slightly compressed letterforms.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
160pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
pill999pxtags8pxcards20pxsmall8pxcircle24pxinputs8pxbuttons8pxdefault12pxnavigation20pxSurfaces
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 1Linen Base
Level 2Paper Cream
Level 3Ash Depth
Level 4Lift White
Level 5Obsidian Depth
Level 6Graphite Lift
Do's and don'ts
- Anchor every page on Paper Cream (#f7f6f5) and let Lift White cards float above it with a soft 0 4px 80px rgba(35,31,35,0.08) shadow.
- Pair StackSans Headline at 64–88px with a tight -1px to -2px tracking for hero displays — keep weight at 400, never bold.
- Use the pastel accents (Coral, Orchid, Mint, Sky, Sand, Peach) only as small icon tile backgrounds, category tags, or blurred gradient halos behind hero scenes.
- Apply 20px (general--large) radii to cards, navbars, and footer containers; reserve 8px radii for buttons, tags, and inputs.
- Set body copy to StackSans Text 16px / 1.5 at weight 300 in Midnight Ink, and downshift secondary copy to the 64% dark tone (#231f23a3).
- Use Fragment Mono uppercase at 10–12px with 0.75px tracking for category labels, table headers, and metadata — never for body or buttons.
- Build the signature CTA halo as a 600px blurred radial gradient from Core Coral into Cache Sand, sitting behind centered headlines.
- Keep section padding at 80px / 120px / 160px / 200px steps to preserve the spacious editorial rhythm.
- Don't saturate the pastel accents into large flat color fields — they exist as small chips, icon backings, and soft gradient stops only.
- Don't introduce additional brand hues outside the six named pastels plus Violet Quill; the palette is intentionally curated.
- Don't bold StackSans for headlines — the type system relies on weight 400 paired with negative tracking, not heavier weights.
- Don't place primary buttons on Ash Depth or Paper Cream without the full Midnight Ink fill; ghost buttons must carry the dark-8 tint background.
- Don't use Signal Amber or Verdant Pass as decorative colors — they are reserved exclusively for warning and success state feedback.
- Don't replace Fragment Mono labels with the headline or body family; the monospace voice is what marks taxonomy and metadata.
- Don't tighten section padding below 80px on desktop — the brand reads as cramped and loses its documentation-paper feel.
- Don't mix radii on a single component — buttons stay at 8px, cards stay at 20px, never blend the two scales.
Example prompts
New marketing section
Pricing card
Hero CTA stage
Testimonial tile
# 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