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.
Culture Exchange
Culture Exchange reads like a gallery catalogue rebuilt for the web — a warm, almost-cream canvas punctuated by slabs of deep teal and sudden bursts of lilac and gold. Playfair Display's editorial serif carries the voice of a cultural institution (quiet, confident, a little theatrical), while Inter Tight handles the operational language of navigation, labels, and buttons with crisp neutrality. The system alternates between light, paper-like sections and inverted teal 'stage' sections, creating rhythm the way a printed program alternates text pages with full-bleed plates. Spacing is generous and unhurried — section paddings stretch from 80px to 200px — giving every exhibition, event, or journal entry room to breathe. Pill-shaped buttons in soft lilac, large uppercase display type, and tightly cropped portrait photography keep the tone human and current rather than stiff or institutional, positioning the brand as serious about art but never precious about it.
Sections from Culture Exchange
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Full-Width CTA with Floating Images
View section
Partners Stats and Feature Cards Grid
View section
Marquee Logo Strip With Video Center
View section
Sticky Logo Scroll Timeline Section
View section
Sticky Scroll Hero with Mask Reveal
View section
FAQ Accordion with Section Heading
View section
Sticky Scroll Tabs with Image Panel
View section
Events Page with Tabs and Video
View section
Split Content Sections with Media
View section
Full Width FAQ Accordion Section
View section
Full Footer with Newsletter Form
View section
Hero Section with Background Video
View section
Colors
Canvas
Bone White
#fffff8
Base page canvas
Soft Linen
#f6f3f0
Lifted card surface
Ink
Deep Teal Ink
#014140
Primary ink & dark surface
Accent
Mint Glass
#ccf7e3
CTA block background
Lilac Bloom
#eabfff
Primary button fill
Golden Pollen
#ffe96f
Decorative accent dot
State — utility only
Coral Alert
#ed7472
Error state
Honey Caution
#d5ad4b
Warning state
Verdant Signal
#5cce63
Success state
Typography
The quick brown fox jumps
Body copy, labels, navigation, buttons, small headings
The quick brown fox jumps
Display & heading serif — editorial, gallery-catalogue voice
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
160pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
tags32pxcards20pxsmall8pxinputs0pxbuttons24pxnavigation12pxSurfaces
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 1Bone White
Level 2Soft Linen
Level 3Deep Teal Ink
Level 4Teal Veil
Do's and don'ts
- Pair the Playfair Display serif for emotive headlines with Inter Tight for every functional label, nav item, or button.
- Alternate full-bleed Deep Teal Ink sections with Bone White sections to create an editorial, page-turning rhythm.
- Use the 24px pill radius consistently on all primary and small CTAs for a soft, approachable button language.
- Keep section padding generous (80–200px) — let hero statements and imagery have room to breathe.
- Apply Lilac Bloom sparingly as the primary action color against neutral teal/cream backgrounds.
- Crop portrait photography tightly and desaturate slightly so images feel curated rather than stock.
- Use uppercase, tracked-out label type (12px/10px) for tags, categories, and overline text only.
- Don't introduce additional saturated hues beyond lilac, gold, and mint — the palette stays deliberately restrained.
- Don't set serif type smaller than 20px; Playfair Display is reserved for headings, not body copy.
- Don't round corners above 32px except on fully pill-shaped tags and buttons — cards stay at 20px.
- Don't crowd sections with tight spacing; avoid gaps under 16px between grouped elements.
- Don't use pure black or pure white — always route through the teal-tinted dark and warm cream base tones.
- Don't mix the inverted teal sections with light-mode buttons; swap to secondary/accent button variants instead.
- Don't stretch body copy wider than the 6–8 column grid width; keep editorial text columns narrow for readability.
Example prompts
New hero section
Event card
Newsletter form
CTA block
# 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