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.
Nova Coach
Nova Coach is the visual language of a personal coach who feels both grounded and aspirational — a practice that takes itself seriously without losing its sense of play. Cream-paper canvases hold elegant Source Serif 4 headlines beside cleanly set Inter body copy, with italic pull-quotes that breathe like handwritten margin notes. Pastel sticker tags — buttery yellow, sage green, sky blue, lavender purple — float at hand-drawn angles around arched portraits and rounded-corner videos, lending the layout a scrapbook warmth. Sections stack like layered paper: the cream page tucks under deep midnight panels with 80px rounded shoulders, each transition cushioned by a -80px pull-up that creates the signature peeking edge. Buttons are full pill-shaped charcoal lozenges, cards wear 24px corners with a 6px hard offset shadow, and every surface is bordered, considered, and quietly confident — retro-modern, tender, and unmistakably brand-led.
Sections from Nova Coach
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Hero Services Sticky Cards
View section
Sticky Process Cards Animation
View section
Process Steps Sticky Layout
View section
Blog Grid with CTA
View section
Footer with Moving Tags
View section
Hero Section with Image
View section
Blog Post Detail Page
View section
Personal Coach Hero Section
View section
Filterable Blog Grid with Category Tags
View section
Hero About with Moving Logos
View section
Three Step Process Section
View section
About Me Feature Section
View section
Colors
Canvas
Linen Mist
#ecece7
Lifted canvas. Secondary section backgrounds and rounded panels stacked above the cream base.
Paper Cream
#f2f2ef
Primary canvas. Page background, footer, light-mode hero surfaces, light button fills.
Ink
Deep Tide
#15252b
Elevated dark surface. Subtle lift inside dark-rounded sections for cards or quote blocks.
Midnight Ink
#07181f
Primary text & ink. Headlines, body copy, dark sections, primary button fills, all hard-shadow offsets.
Accent
Sky Sticker
#c8e7ff
Cool sticker accent. Story panels, mid-tier pricing tile, blog tag chips.
Sage Sticker
#c7d7c5
Calm sticker accent. Pricing tiles, decorative tags, soft callouts and process circles.
Butter Sticker
#fde68a
Warm sticker accent. Pricing tiles, floating tags, accent highlights inside dark quotes.
Lavender Sticker
#c5b6ff
Playful sticker accent. Floating tags, play-button fills, decorative section frames.
Typography
The quick brown fox jumps
Body copy, navigation, buttons, form fields, captions, footer microcopy.
The quick brown fox jumps
Headlines, display quotes, pricing titles, sticker tag labels — every elegant moment of voice.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
120pxCard padding
52pxElement 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-48
48px--spacing-64
64px--spacing-72
72px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
tags60pxcards24pxsmall16pxfields120pxbuttons70pxarch-portrait310pxsection-shoulders80pxSurfaces
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 1Paper Cream Page
Level 2Linen Mist Lift
Level 3Midnight Ink Panel
Level 4Deep Tide Card
Do's and don'ts
- Stack sections with 80px rounded top corners and a -80px negative margin so each panel tucks under the next like layered paper.
- Set primary CTAs as full midnight-ink pills with 70px radius and 16px/28px padding — never square them off.
- Pair Source Serif 4 (weight 500, tight tracking) for every headline with Inter (weight 400–500) for every supporting line; never invert the roles.
- Use floating sticker tags (yellow, sage, sky, lavender) at hand-drawn rotations between -12° and +13° — pin them to corners of imagery, not inline with text.
- Frame hero portraits inside arched masks (310px top radius, 18px bottom radius) with a 3px midnight border and 8px hard-offset shadow.
- Combine bordered cards with the signature 6px 6px 0 0 hard offset shadow for testimonials, pricing tiles, and social links.
- Italicize a single fragment of every display headline (using Source Serif italic) to add that handwritten emphasis.
- Keep section vertical rhythm generous — 120px to 200px of padding-bottom on hero and feature sections.
- Don't introduce gradients, drop shadows with blur, or glassmorphism — Nova Coach lives entirely on flat color and hard offset shadows.
- Don't tilt body copy, navigation, or CTAs; rotation is reserved exclusively for sticker-tag accents.
- Don't add new accent hues outside the four pastel stickers — yellow, sage, sky, and lavender are the entire decorative palette.
- Don't square the corners of pills, fields, or panels; everything rounds (70px buttons, 120px fields, 24px cards, 80px section shoulders).
- Don't set headlines in Inter or body copy in Source Serif — the type pairing is non-negotiable.
- Don't crowd sticker tags together; each tag should feel like a single hand-placed accent against breathing space.
- Don't use pure black (#000) for ink — always use Midnight Ink #07181f, including for borders and offset shadows.
- Don't shrink section padding below 80px on desktop; the brand depends on spacious, calm vertical pacing.
Example prompts
New pricing card
Hero portrait module
Dark quote section
Sticker tag
# 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