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.
Rowan Blake
Rowan Blake runs on an unapologetically stark foundation — a white canvas, razor-black uppercase type, and a single signal-red accent that appears only when it matters: hover states, the subscribe button, the 'Say Hello' tab. Every page opens with a full-bleed video or photo hero, letting silhouettes, neon-lit portraits, and motion-blurred fashion do the emotional work while the UI itself stays quiet and structural. The layout leans on oversized display type (the "Featured(04)" treatment) as a graphic device as much as a heading, paired with tight, matter-of-fact body copy and a credibility wall of award-badged project cards. It's a studio-credential aesthetic: confident, monochrome-first, with color used like a signature rather than a palette.
Colors
Canvas
Fog Gray
#f7f7f7
Subtle block headers & card backgrounds
Paper White
#ffffff
Page canvas
Divider Gray
#d8dfe0
Hairline dividers & borders
Ink
Jet Black
#000000
Primary text & ink
Mist Sage
#d9dae2
Muted body text on dark surfaces
Smoke Overlay
#00000080
Hero image/video darkening overlay
Accent
Pulse Red
#f9031c
Secondary accent, hover states
Signal Red
#f9031c
Accent & call-to-action punctuation
Ember Orange
#ff6a1a
Imagery-driven warm accent
Typography
The quick brown fox jumps
Primary UI, body copy, navigation, forms
The quick brown fox jumps
Oversized display headlines, marquee text, big statement type
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1440pxSection gap
70pxCard padding
35pxElement gap
25pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-70
70px--spacing-100
100px--spacing-120
120pxBorder radius
cards0pxmedia0pxpills0pxbuttons0pxicon-circle0pxSurfaces
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 2Fog Gray
Level 3Jet Black
Level 4Smoke Overlay
Do's and don'ts
- Keep the canvas pure white and text pure black — let red appear only as a deliberate accent, never as a base color.
- Use full-bleed video or photo heroes with a dark overlay so white headline text stays legible.
- Reserve the oversized Coolvetica Condensed display type for singular statement moments like 'Featured(04)' or the footer marquee.
- Pair project titles with comma-separated award/category tags (e.g. 'CSS Award, UI, UX, Development') to reinforce the credibility-wall feel.
- Keep buttons sharp-cornered (0px radius) and uppercase to match the studio's architectural tone.
- Use hover-reveal video previews for service lists to add motion without cluttering the static layout.
- Maintain generous negative space between sections (70–120px) so bold imagery and type have room to breathe.
- Don't introduce additional saturated accent colors — signal red is the only color allowed beyond black, white, and grayscale imagery.
- Don't round corners on buttons, cards, or images; the brand relies on sharp, confident edges.
- Don't shrink the hero headline below a bold, large-format treatment — it must dominate the first viewport.
- Don't overload pages with more than one oversized display-type statement per section.
- Don't use light or thin font weights for body copy; the type system stays medium-to-bold throughout.
- Don't center-align body paragraphs — the layout is built on strict left alignment and asymmetric grids.
- Don't place the red accent on large surfaces; it's a punctuation mark, not a background color.
Example prompts
Hero section
Project card
Section divider
CTA footer
# 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