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.
aiaiaiai
aiaiaiai is a hushed, gallery-grade canvas built for creative agencies who let the work do the talking. Off-white pages stretch edge to edge while heavy Inter typography — set in vw units so it scales like a poster — anchors every section with confident, almost monumental weight. The palette is intentionally monastic: a single near-black ink against a soft warm-grey surface, punctuated only by translucent washes and a single signal-green status dot. Generous vertical rhythm, oversized headlines that rotate and animate, and pill-shaped buttons with mix-blend-mode navigation give the template its quiet swagger.
Sections from aiaiaiai
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Interactive Services Section with Animations
View section
Contact Form Section
View section
Footer with Animated Logo Marquee
View section
Value Proposition with Statistics
View section
Interactive Services Accordion List
View section
Services Slider With Navigation
View section
Fixed Navigation with Mobile Menu
View section
Team Story Image Text Layout
View section
Animated Hero With Project Grid
View section
Project Portfolio Detail Page
View section
Client Testimonials Slider Section
View section
Portfolio Grid with Hover Overlays
View section
Colors
Canvas
Pure White
#ffffff
Lifted surface. Card interiors, side menu, fixed CTA pill, and inverted button fills.
Veiled White
#ffffff52
Translucent overlay on dark imagery. Used for borders and subtle washes on top of dark photography.
Off-White Canvas
#f4f4f4
Primary page surface. The default warm off-white background for every section and the footer.
Ink
Muted Ink
#121212a3
Secondary text tone. Captions, labels, and supporting copy at 64% ink opacity.
Ghosted Ink
#12121252
Tertiary text & rotating headlines. Used for the second-line poetic phrases that animate behind the primary headline at 32% opacity.
Whisper Ink
#12121229
Hairline borders & translucent card fills. Section dividers, sales card backgrounds, and form field underlines at 16% opacity.
Obsidian Ink
#121212
Primary text & accent ink. Headlines, body copy, button fills, and the lone brand accent — same hex serves as both --dark and --accent.
State — utility only
Signal Green
#27ea31
Availability status dot. Decorates the “Available for new projects” pill in the navbar — the only saturated hue in the system.
Typography
The quick brown fox jumps
Single typeface across the entire system. Carries display, headings, body, labels, and form fields — distinguished only by weight, size, and tight negative tracking.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
160pxCard padding
64pxElement gap
32pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-28
28px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-56
56px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160pxBorder radius
big40pxsmall16pxmedium24pxxsmall10pxbuttons9999pxregular32pxxxsmall8pxfixed-pill9999pxSurfaces
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 1Off-White Canvas
Level 2Pure White
Level 3Whisper Ink Wash
Level 4Obsidian Ink
Do's and don'ts
- Scale typography in vw units so headlines breathe proportionally with the viewport — every heading and body size in the system already does.
- Pair primary headlines with a 32%-opacity ghosted echo (text-h1 + text-dark-32) to create the signature two-line poetic stack.
- Use 9999px border-radius pill buttons for every CTA, including the fixed bottom-right action and the navbar availability indicator.
- Lay sections out with 80–160px vertical padding and place dividers (1px whisper-ink hairlines) between major content blocks.
- Apply mix-blend-mode: difference on the navbar and sticky marquee text so they invert cleanly over both light canvas and dark imagery.
- Keep cards on Pure White (#ffffff) sitting on the Off-White Canvas (#f4f4f4) — the 4-point delta is the entire surface system.
- Reserve the signal-green dot exclusively for the “Available for new projects” status — it is the only saturated color in the brand.
- Don't introduce additional accent colors; the entire palette is monochrome plus one status green and that restraint is the brand.
- Don't use letter-spacing of 0 on display or heading text — every heading rides between -0.05em and -0.08em for that compressed editorial bite.
- Don't substitute a serif or script for headlines; Inter is the single voice across display, body, labels, and forms.
- Don't apply heavy shadows or glows — only the two whisper-soft shadows (card-soft, fixed-cta) are sanctioned.
- Don't shrink section padding below 80px on desktop; the spacious rhythm is what makes the work feel gallery-hung.
- Don't fill cards with solid bright color — surfaces are limited to canvas, white, translucent ink wash, or full obsidian.
- Don't underline body links by default; rely on the animated cta-underline reveal on cta-secondary links instead.
Example prompts
Hero section
Testimonial card
Primary CTA
Navbar
# 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