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.
Montoya
Montoya is an uncompromisingly black canvas interrupted by jolts of electric color — a hand-lettered yellow comic accent, hot orange and tomato project panels, and stark black-and-white portraiture shot like a fashion editorial rather than a case-study slide. Oversized condensed type, stretched from 100px navigation links to a sticky 330px hero headline, does the shouting, while a quieter Instrument Sans handles labels, forms, and body copy so the system never loses legibility under its own bravado. Every button is a stark white pill, every card is flat black-on-charcoal with hard square corners, and every accent color is used in isolation — never blended — so the palette reads as confident punctuation rather than noise.
Colors
Canvas
Void Black
#000000
Primary canvas & ink. Base page background and primary text/button fill across nearly every section.
Charcoal Lift
#181818
Lifted surface. Service cards, pricing boxes, pill badges, and cart container backgrounds.
Ink
Bone White
#ffffff
Primary text & button fill. Headlines, navigation, body copy, and solid CTA buttons on black.
Slate Grey
#757575
Secondary text. Muted captions, figma-text opacity labels, and de-emphasized UI copy.
Accent
Dusk Mauve
#826f8d
Muted secondary accent. Reserved for subtle hover tints and rare decorative borders.
Taxi Yellow
#ffea00
Signature comic accent. Hand-lettered highlight words in headlines and bright category pill tags.
Tomato Flare
#ff5900
Secondary comic accent. Drop-shadow outlines on lettered badges and alternate highlight treatments.
Sunset Orange
#ff8800
Editorial photo accent. Full-bleed color panels behind portrait imagery in the hero and portfolio grid.
State — utility only
Alert Red
#e60004
Destructive action. Cart remove-item button and error-state indicators.
Typography
The quick brown fox jumps
Body copy, form fields, labels, and small UI text where legibility matters more than spectacle.
The quick brown fox jumps
Oversized display headlines, navigation links, and section titles — the brand's loudest voice.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1200pxSection gap
120pxCard padding
40pxElement gap
30pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-150
150px--spacing-200
200pxBorder radius
cards2pxpills20pxfields30pxbuttons100pxcircular9999pxSurfaces
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 1Void Black
Level 2Charcoal Lift
Level 3Ink Overlay
Do's and don'ts
- Set page backgrounds to Void Black (#000000) and let white condensed type carry all primary messaging.
- Reserve Taxi Yellow exclusively for the hand-lettered comic accent word inside headlines (e.g. "New York", "Team").
- Apply a 100px pill radius to all primary buttons for the rounded, confident CTA shape.
- Uppercase all headline, label, and navigation text to match the condensed display font's industrial tone.
- Use full-bleed, high-contrast portrait or product photography cropped into an irregular overlapping grid.
- Keep card surfaces at Charcoal Lift (#181818) with sharp or near-zero corner radius to preserve the raw editorial grid.
- Pair every accent color — yellow, orange, tomato — with pure black or white, never blending two accents together.
- Don't introduce soft, rounded sans-serif fonts for headlines — the condensed, squeezed look is the brand's signature.
- Don't use muted pastels; the palette is binary black/white punctuated by electric accent bursts.
- Don't place large blocks of color behind body copy; keep paragraphs on black or charcoal only.
- Don't round the corners of portfolio image tiles or pricing cards — sharp edges preserve the editorial grid.
- Don't overcrowd the hero; let oversized type and a single comic-accent word breathe against black space.
- Don't use serif typefaces anywhere; the system is built entirely on grotesque/condensed sans families.
- Don't apply soft blurred drop shadows; prefer hard, offset shadows (e.g. 3px 3px, zero blur) for a sticker feel.
Example prompts
Hero section
Service cards
Testimonial block
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