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.
Avenir™
Avenir is a refined professional services template built on a calm navy-and-cream palette that radiates institutional authority without coldness. Every surface breathes — generous whitespace, editorial serif headlines set in Lora, and controlled mono labels from Fragment Mono create a hierarchy that feels curated rather than templated. The dark teal page surrounds and warm off-white card canvases signal depth and lift simultaneously, while a restrained accent yellow punctuates calls-to-action with just enough warmth to feel human. The system is deliberately legible under pressure: proof blocks, case study layouts, and sticky sidebars are all built to earn trust at every scroll position. Typography moves across a wide, coherent scale — from 88px display moments to 12px mono captions — anchored by negative letter-spacing in headings that keeps large text from feeling loose. Motion is subtle and purposeful, never decorative. The overall aesthetic is confident consultancy gravitas expressed through restraint.
Sections from Avenir™
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Full-Screen Video Hero with CTA
View section
Bento Grid Case Study Showcase
View section
Intro Heading with Feature Slider
View section
Centered Careers Hero with Images
View section
Sticky Navigation Bar with Mega Dropdowns
View section
Four Column Feature Cards Grid
View section
Multi-Column Footer With Navigation
View section
Services Bento Grid Layout
View section
Bento Grid with Video Testimonials
View section
Tabbed Services With Image Widget
View section
Open Roles Careers Listing
View section
Case Study Detail Page Layout
View section
Colors
Canvas
Dusk Stone
#e5e3e1
Depth input & inset background. Form fields, inset wells, and subtle section insets to indicate interactive or recessed depth.
Linen Lift
#ffffff
Elevated card surface. Pure white used for the highest-lift card and modal surfaces to pop clearly against the warm parchment base.
Slate Teal
#0b2e3c
Section surround & decorative depth. Applied at near-full opacity to outer page wrappers and dark section backgrounds to frame lifted cards.
Warm Parchment
#f7f6f5
Page canvas & text-on-dark. The base background color applied to all primary page surfaces and reversed text over dark fills.
Ink
Deep Navy
#0b2e3c
Primary ink & dark surface. Headlines, body copy, primary button fills, and the deep section backgrounds that frame content.
Accent
Mist Blue
#b8cdd4
Soft accent wash. Hover state backgrounds for primary and secondary buttons, providing a cool transitional tint.
Solar Accent
#ffe96f
Brand accent & CTA highlight. Accent buttons, circle-button fills, and decorative emphasis that introduces warmth without breaking the calm palette.
State — utility only
Blush Error
#d16c6c
Error state. Form validation errors and destructive feedback indicators only — never decorative.
Fern Success
#6fbf8a
Success state. Positive confirmation messages and success badges only — never decorative.
Amber Warning
#c9a24d
Warning state. Cautionary alerts and warning indicators only — never decorative.
Typography
The quick brown fox jumps
Primary heading typeface. All h0–h6 display and section headings — delivers old-world editorial gravitas that anchors the consultancy aesthetic.
The quick brown fox jumps
Body, buttons, and UI text. Clean modern grotesque that keeps prose and interactive elements precise and readable at all sizes.
The quick brown fox jumps
Labels, tags, and mono annotations. All-caps, tracked mono type used exclusively for category labels and functional metadata.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
24pxElement gap
16pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-6
6px--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
tags8pxcards12pxlarge20pxsmall8pxcircle9999pxinputs8pxbuttons8pxSurfaces
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 1Warm Parchment
Level 2Linen Lift
Level 3Dusk Stone
Level 4Navy Veil
Level 5Slate Teal
Do's and don'ts
- Use Lora at weight 400 for all headings h0–h6 — the light-to-normal serif weight is core to the editorial voice; never apply bold or semi-bold to display headlines.
- Apply strong negative letter-spacing to headings: −3px at h1/h2, −2px at h3, scaling down to −0.75px at h4 — this tight tracking is non-negotiable for display text to feel considered.
- Pair large editorial headlines over full-bleed photography with the warm-parchment text color at full opacity, relying on the image's natural contrast rather than adding text-shadow or overlays.
- Use Fragment Mono in all-caps with 0.75px letter-spacing for every label, tag, and metadata annotation — this mono voice creates a deliberate editorial counterpoint to the serif headings.
- Reserve the Solar Accent (#ffe96f) exclusively for the accent button variant and the small circle-button decoration — its warmth is powerful precisely because it appears sparingly.
- Maintain section padding at 80px minimum (small), scaling to 120px, 160px, and 200px for progressively more prominent sections — the spacious rhythm defines the premium feel.
- Embed small inline images or avatar chips within long editorial headlines to create the signature mixed-content heading style visible in the services section screenshots.
- Do not introduce additional typefaces — the Lora / Inter Tight / Fragment Mono trio is complete; adding a fourth family fractures the system's typographic tension.
- Do not use saturated or vivid accent colors beyond the defined Solar Accent and Mist Blue washes — the palette derives its authority from restraint.
- Do not round buttons with a pill radius — the 8px square-ish border-radius on buttons is a deliberate design choice; pill-shaped buttons would read as consumer SaaS, not consultancy.
- Do not apply bold weight (700+) to body text for emphasis — use the medium weight (500) for bold body copy; heavy weight destroys the editorial lightness.
- Do not use the error, success, or warning state colors (Blush Error, Fern Success, Amber Warning) as decorative accents or in illustrations — they are functional states only.
- Do not collapse section padding below 32px on mobile — even at the smallest breakpoint the spacious breathing room is a brand signal, not a luxury.
- Do not place dark text directly on the Solar Accent background without first verifying contrast ratio — the bright yellow is warm but not dark enough to guarantee WCAG AA at small sizes.
Example prompts
Hero section
Services card grid
Dark section with lifted inner card
Sticky sidebar case study layout
# 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