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.
Fabrik
Fabrik is a crisp, white-floored studio system built for agencies that treat typography as the hero. Oversized serif display type collides with tight uppercase monospace labels, creating a hierarchy that reads expensive before a single sentence is parsed. Black ink, whitesmoke canvas, and a single punchy orange accent carry the entire palette — no gradients, no noise, just confident contrast and generous negative space. Every section breathes: pill-shaped buttons, rounded 20px+ containers, and soft dark inversions (near-black panels) punctuate the white rhythm to keep long scrolls dynamic. Scroll-triggered motion and a sticky, blurred circular nav keep the experience feeling alive and considered, while dense monospace micro-labels (SERVICES, TESTIMONIALS, FAQ) ground the oversized headlines in an editorial, almost architectural structure.
Colors
Canvas
Paper White
#ffffff
Lifted surface & card fill. Hero container, testimonial cards, footer nav pill background.
Frosted Glass
#e9e9e9
Translucent nav backdrop. Blurred circular navigation menu background.
Graphite Panel
#2a2a2d
Dark utility surface. Pricing link chips, secondary dark card fills inside hero.
Whisper Canvas
#f5f5f5
Base page background. Sits behind the floating white hero and cards for a soft, paper-like foundation.
Ink
Faded Stone
#808083
Secondary / muted text. Eyebrow labels, captions, dimmed service lists, disabled-feeling copy.
Midnight Ink
#020108
Primary text & dark surfaces. Headlines, body copy, inverted section backgrounds, primary button text on light.
Hairline Gray
#dbdbdb
Dividers & borders. FAQ toggle rules, subtle separators between stacked content.
Accent
Signal Orange
#f65600
Brand accent & primary CTA. Buttons, link hovers, decorative script text, active states.
Typography
The quick brown fox jumps
Primary body & UI sans. Paragraphs, buttons, form fields, nav links.
The quick brown fox jumps
Micro-labels & eyebrow text. Uppercase tags like SERVICES, dot-wrapper labels, footer captions.
The quick brown fox jumps
Display & heading serif. Used for hero titles, section headlines, and emphasized script-like words.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
250pxCard padding
25pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-10
10px--spacing-16
16px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-120
120px--spacing-250
250pxBorder radius
hero34pxcards20pxfield4pxbuttons30pxbutton-circle160pxpage-container10pxsmall-elements10pxSurfaces
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 1Whisper Canvas
Level 2Paper White
Level 3Frosted Glass
Level 4Midnight Ink
Level 5Graphite Panel
Do's and don'ts
- Pair the oversized serif display font with tight, uppercase monospace labels to create immediate hierarchy contrast.
- Keep buttons fully pill-shaped (30px+ radius) with solid orange or black fills and a simple opacity-dip hover.
- Use Signal Orange sparingly — one CTA, one script accent word, or one icon per section, never as a full background outside of dedicated CTA blocks.
- Float the hero and major content blocks as rounded white containers (20–34px radius) atop the whisper-gray page canvas.
- Let uppercase mono eyebrow text (dot-wrapper style) introduce every section before the big serif headline lands.
- Invert full sections to Midnight Ink for rhythm breaks (footer, mid-page CTA) rather than scattering dark cards randomly.
- Animate text and images on scroll with gentle, continuous easing — nothing should snap or bounce abruptly.
- Don't introduce a second accent color; the palette lives and dies by black, white, and one orange.
- Don't set body copy in the serif display font — reserve it strictly for headlines and emphasized script words.
- Don't use sharp 0–4px corners on buttons or hero containers; the brand is built on soft, generous rounding.
- Don't crowd sections — padding is intentionally spacious (250px top/bottom); compressing it breaks the editorial pacing.
- Don't mix multiple uppercase label styles; keep all eyebrow/meta text in the monospace family at low opacity.
- Don't place orange CTAs on orange backgrounds — contrast must stay stark between ink, canvas, and accent.
- Don't use drop shadows aggressively; surfaces separate via color and radius, not heavy elevation.
Example prompts
Hero section
Pricing block
Testimonial grid
Dark CTA panel
# 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