Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Bonnie
Bonnie is a production-house portfolio dressed in warm parchment and confident black ink. The page breathes around oversized display lettering — its custom 'Bonnie' logotype carries a playful loop where letters thread through one another — while the rest of the layout stays disciplined: pill-shaped nav buttons, hairline rules, and full-bleed cinematic frames. The palette is intentionally austere — a single creamy off-white canvas, pure black ink, and the cinematic grain of full-bleed photography and video. Nothing competes with the work. Type carries the personality: light Outfit at 22px for body, but blown up to 120px for marquee headlines, all set with a soft 130% line-height that keeps the page feeling unhurried.
Sections from Bonnie
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Infinite Scrolling Logo Marquee
View section
Multi-Column Footer with Contact Info
View section
Parallax Hero Image
View section
Hero Video Showreel Section
View section
FAQ Accordion Section
View section
Client Testimonials Slider
View section
Sticky Gallery with Scroll Animation
View section
Sticky Value Cards Grid
View section
Gallery Grid Hero
View section
Contact Form with Social Links
View section
Fixed Header with Fullscreen Menu
View section
Split Hero with Video Lightbox
View section
Colors
Canvas
Linen Hover
#f5f3ec
Light button hover wash. Subtle warming of the cream canvas on interactive elements.
Parchment Cream
#fffdf5
Primary canvas. Page background and inverted button fills throughout the site.
Translucent Cream
#fffdf529
Floating navbar fill. A 16%-opacity cream that lets hero imagery bleed through fixed navigation.
Ink
Ghost Ink
#0000009e
Placeholder & muted text. Used at ~60% opacity over cream for input placeholders and de-emphasized labels.
Studio Ink
#000000
Primary ink & dark surface. Body text, headlines, footer, and dark CTA fills.
Hairline Ink
#18181880
Hairline borders on form fields. A softened ink at half-opacity for checkout inputs.
Warm Graphite
#272727
Dark button hover state. Used when dark CTAs are interacted with.
Typography
The quick brown fox jumps
Sole typeface — used for headlines, body, navigation, and forms.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1512pxSection gap
80pxCard padding
80pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-180
180pxBorder radius
pill70pxtile24pxbuttons70pxcard-top12pxtextarea24pxinput-pill90pxnavigation70pxSurfaces
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 1Parchment Cream
Level 2Linen Hover
Level 3Studio Ink
Level 4Warm Graphite
Do's and don'ts
- Apply a 70px border-radius to every interactive pill — nav links, CTAs, project tags, and contact inputs — to maintain the lozenge silhouette that defines the brand.
- Set body copy in Outfit Light (300) at 22px with 130% line-height; reserve heavier weights (500–700) only for stat numbers and the marquee 'bold-moving' phrase.
- Frame all photography and video as full-bleed, edge-to-edge sections at 100vh, with subtle rounded corners only on tile-based grid cards.
- Use 80px and 160px section padding to give the cream canvas room to breathe — never crowd headlines against section edges.
- Pair light pill CTAs (cream fill, ink border) with dark pill CTAs (ink fill, cream border) so primary and secondary actions are immediately legible.
- Anchor the footer in pure black with cream text and a 2px hairline divider above the contact grid — the only place where the palette inverts entirely.
- Wrap the page in the 1512px main-container with 40px gutters; let only marquee strips and big-image sections break out to 100vw.
- Don't introduce any new accent colors — the palette is strictly cream and ink, with photography providing all chromatic warmth.
- Don't use square or sharp-cornered buttons; sharp corners belong only to full-bleed image edges and form blocks.
- Don't set body text in heavy weights — Outfit at weight 300 is foundational and switching to 400+ for paragraphs breaks the airy feel.
- Don't pile drop-shadows or glows on tiles — depth comes from 1px ink borders and generous whitespace, not elevation.
- Don't shrink the marquee text below ~80px on desktop; the oversized 120px scrolling headline is a signature and must dominate.
- Don't crowd the navbar — keep it fixed, 90px tall, with translucent cream fill so hero imagery shows through.
- Don't use placeholder grey for muted text; use ink at 60% opacity (#0000009e) so muted copy still reads as part of the same ink family.
Example prompts
Landing hero
Project grid
Contact form
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