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.
Max Bennet©
Max Bennet© builds its identity on a single bold decision: saturated vermillion red against warm cream, with nothing in between. Oversized condensed display type collapses navigation, hero statements, and footer CTAs into graphic events rather than ordinary copy — every headline becomes a poster. The system rewards confidence: huge type at negative letter-spacing, pill-shaped buttons, editorial photography cropped tight into masonry work cards, and Japanese character accents dropped into the About page as a cultural wink that most freelance portfolios wouldn't dare. Structurally the template is spacious and unapologetic — full-bleed red section blocks with heavily rounded corners act as giant content containers, sticky footers reveal themselves like a final punchline, and work cards pin and stack as you scroll. It's built for an independent practitioner who wants their site to read like a manifesto, not a brochure.
Colors
Canvas
Cream Canvas
#fbe7e4
Primary page background.
Charcoal Depth
#2a2a2d
Dark utility surface. Pricing links and secondary dark buttons.
Translucent Fog
#ffffffb3
Subtle overlay tint. Glass panels and soft dividers over imagery.
Ink
Paper White
#ffffff
Reversed text & button fill. Text on red blocks, button backgrounds.
Footer Stone
#c9c7c2
Muted footer neutral. Secondary footer text and fine print.
Near Black Ink
#000000
Secondary text ink. Body copy and headings on cream surfaces.
Accent
Signal Red
#f13427
Brand accent & ink. Section blocks, headline fills, buttons, nav text on dark grounds.
State — utility only
Warning Amber
#ec655c
Hover/transition utility hue. Button transition states and interactive feedback.
Typography
The quick brown fox jumps
Body copy & UI text. Paragraphs, nav links, form inputs, footer credits.
The quick brown fox jumps
Display & heading face. Used for hero titles, nav labels, buttons, section headers — the voice of the brand.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1300pxSection gap
250pxCard padding
20pxElement 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
cards20pxsmall7pxbuttons64pxcontainer10pxfooter-block40pxbutton-circle160pxSurfaces
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 1Cream Canvas
Level 2Signal Red Block
Level 3Charcoal Depth
Level 4Footer Overlay
Do's and don'ts
- Let the Coolvetica condensed display type run huge — 20–25vw equivalent — for hero statements and footer CTAs so the type becomes the imagery.
- Pair cream (#fbe7e4) page backgrounds with full-bleed signal red (#f13427) section blocks, always with soft rounded corners (20–40px).
- Keep buttons pill-shaped (border-radius ~64px or fully rounded) with uppercase condensed labels at 0.5px letter-spacing.
- Use tight masonry/sticky-stacked work cards for the portfolio grid rather than a loose, evenly spaced grid.
- Introduce Japanese or other non-Latin script accents sparingly in the About/Clients list to add cultural texture without diluting the red-and-cream palette.
- Reserve pure black and white strictly as ink/reversed-text roles — never as additional decorative surfaces.
- Close every page with the bold red 'LET'S TALK' footer block treated as a visual signature, not just a form.
- Don't introduce a second accent color — the palette lives and dies by cream + signal red.
- Don't shrink the display headlines down to conventional sizes; the oversized scale is the brand's core signature.
- Don't use sharp, unrounded corners anywhere — every container, button, and image carries soft radii.
- Don't crowd sections with tight spacing; this system is built on generous 100–250px section padding.
- Don't mix in serif or rounded display fonts — Coolvetica condensed is the single voice for all display type.
- Don't place body copy in the condensed display face; always switch to Inter for paragraphs and UI labels.
- Don't flatten the sticky, pinning scroll interactions for work cards into static grids — motion is part of the brand feel.
Example prompts
Hero section
Work card grid
CTA footer
About page accent
# 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