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.
Mōno™ Studio
Mōno™ strips branding down to its structural essentials: pure white canvases, razor-black type, and editorial photography doing all the emotional heavy lifting. There are no gradients to hide behind and no decorative color to lean on — the discipline of the palette is the point, letting full-bleed imagery, hover-reveal video, and confident oversized type carry the premium feel. Every interface decision reinforces a studio-grade, almost architectural restraint: parenthetical micro-labels like "(Services)" and "(Pricing)", pill-shaped buttons with soft layered shadows, and massive display type set at tight negative tracking. Motion is present but quiet — sticky scroll reveals, smooth card flips, gentle opacity fades — never competing with the work itself.
Colors
Canvas
Footer Fog
#f7f7f7
Footer & utility section backdrop
Paper White
#ffffff
Base canvas & card surfaces
Whisper Smoke
#f5f5f5
Secondary canvas, section backgrounds
Ink
Pure Void
#000000
Primary text & ink
Faded Ghost
#ffffffb3
Muted overlay text on dark imagery
Charcoal Card
#222222
Dark card surfaces & image placeholders
Obsidian Panel
#141414
Darkest elevated panels, pricing dark tier
Accent
Blush Whisper
#ffd6e8
Rare decorative accent for subtle highlight moments
State — utility only
Pulse Green
#53a551
Live availability indicator
Typography
The quick brown fox jumps
Rare handwritten accent for signature moments
The quick brown fox jumps
Primary UI, body copy, headings
The quick brown fox jumps
Oversized hero/CTA display accents
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
250pxCard padding
40pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-60
60px--spacing-100
100px--spacing-120
120px--spacing-150
150px--spacing-250
250pxBorder radius
cards10pxsmall4pxcircle160pxpanels20pxbuttons30pxcontainer9.6pxbutton-pill160pxSurfaces
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 2Whisper Smoke
Level 3Charcoal Card
Level 4Obsidian Panel
Level 5Pure Void
Do's and don'ts
- Keep the palette locked to black, white, and whisper-gray — let photography and video supply all color energy.
- Use parenthetical micro-labels like "(Services)" or "(Pricing)" above section headers to maintain the editorial voice.
- Set display headlines in heavy negative tracking (-2px to -4px) at very large sizes for maximum visual weight.
- Apply the 30px-40px pill radius consistently across all primary buttons for a soft, floating pill aesthetic.
- Layer soft multi-step shadows beneath buttons and cards to create subtle depth without resorting to color.
- Use sticky, scroll-driven reveals for work cards, testimonials, and stats to add cinematic pacing.
- Reserve full-bleed, saturated project photography and video as the sole source of color and energy on the page.
- Don't introduce additional brand colors beyond black, white, and the rare blush accent — color belongs to imagery only.
- Don't shrink display type below its intended massive scale; impact depends on oversized, confident headlines.
- Don't use sharp, hard shadows — all elevation must read as soft, diffused, and barely-there.
- Don't skip the parenthetical section labels; they are a signature structural device, not decoration.
- Don't clutter the two-tier pricing layout with more than two plans — simplicity is the selling point.
- Don't add loud or bouncy animation easing; motion must stay smooth and restrained (cubic-bezier, no overshoot).
- Don't place dense paragraph text at default line-height; always use the tighter 1.1–1.3 rhythm for cohesion.
Example prompts
Hero section
Pricing block
Work grid
Testimonials
# 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