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.
Horizon Consult
Horizon Consult is a consulting studio's calling card dressed in warm parchment and onyx ink. The palette is unapologetically tactile — a peachy off-white canvas pairs with deep black sections that arrive with rounded 80px shoulders, as if the page itself were a series of layered cards stacked on a desk. Type does the heavy lifting: oversized Plus Jakarta Sans display lines anchor every section while Satoshi handles the conversational body voice. The template feels editorial and confident — generous whitespace, soft 24px card radii, subtle elevation tints, and a single decorative gesture (rotated photo diamonds, marquee text). There is no accent color competing for attention; the drama lives in the contrast between cream and black, and in the weight of the headline.
Sections from Horizon Consult
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Hero About Section Two Column
View section
Services Grid with Social Proof
View section
Vision Statement Connection Flow
View section
Case Study Detail Page
View section
Services Hero with Animated Images
View section
Video Hero with Scroll Animation
View section
Case Studies Grid Section
View section
Testimonial Slider with Media
View section
Hero with Animated Gallery Marquee
View section
Animated Hero About Section
View section
Hero Section with Background Image
View section
Newsletter Footer with Links
View section
Colors
Canvas
Dusted Clay
#f0dfd5
Lifted surface. Testimonial tiles, contact input fields, subtle elevation against the page.
Warm Parchment
#faebe3
Primary canvas. Page background and primary inverse text on dark sections.
Ink
Onyx Ink
#000000
Primary text & ink. Headlines, body copy, primary button fills, dark section backgrounds.
Whisper Ink
#00000099
Tertiary ink. Placeholder text, fine print, and de-emphasized footer copy at ~60% opacity.
Midnight Soot
#1e1c1b
Lifted dark surface. Bento feature cards and tiles inside black sections.
Stone Divider
#cccccc
Inactive icon and social-link state. Resting color before hover ink takeover.
Muted Graphite
#000000e6
Secondary ink. Uppercase eyebrow labels and footer meta text at ~80% opacity.
Typography
The quick brown fox jumps
Body & UI. Subtitles, paragraph copy, buttons, form fields, navigation, eyebrow labels.
The quick brown fox jumps
Display & headings. Oversized H1/H2/H3, marquee text, big stat numbers.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
120pxCard padding
40pxElement 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-56
56px--spacing-64
64px--spacing-72
72px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-144
144px--spacing-180
180pxBorder radius
pill9999pxcards16pxbuttons8pxsmall-tiles12pximage-frames24pxinput-fields8pxfeature-cards24pxsection-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 1Warm Parchment Canvas
Level 2Dusted Clay Tile
Level 3Onyx Section
Level 4Midnight Soot Card
Do's and don'ts
- Use 80px top-corner radii on full-width sections that switch background tone — it is the signature 'stacked card' gesture of the brand.
- Pair Plus Jakarta Sans 700 for display headlines (64–106px) with Satoshi 500 for body — never invert the roles.
- Build dark sections directly under light ones using #000000 with #1e1c1b feature cards inside; this two-tier dark hierarchy is core to the system.
- Apply 24px radii to feature/bento cards and image frames, and 8px to buttons and inputs — these two radii do almost everything.
- Use the uppercase 12px 700-weight 'top-text' eyebrow above every H2 to establish section rhythm.
- Leave generous 120–180px vertical breathing room between major sections; this template earns its presence through whitespace.
- Treat photos as content objects — wrap them in 24px-radius frames, and feel free to rotate or pill-shape them for editorial flair.
- Don't introduce additional accent or saturated colors into the chrome — the brand is strictly cream/black with elevation tints.
- Don't mix radius scales mid-component; a 24px card should not contain 16px buttons or 12px inputs without intent.
- Don't lighten body text on Warm Parchment below #00000099 — opacity tints are precise (60% / 80%) and shouldn't drift.
- Don't use Satoshi for display sizes above 32px; it's a body face here, and large Jakarta is the only display voice.
- Don't drop shadows on cards — elevation comes from background tone (Dusted Clay or Midnight Soot), never from blur.
- Don't square off the section transitions; flat black-on-cream edges break the layered-card metaphor.
Example prompts
New light hero section
Dark services bento
Pricing trio
# 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