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.
Forerunner
Forerunner is a forward-leaning brand template built for visionary studios and bold founders. The system pairs a near-black ink against warm bone-white canvases and lifts everything with a single jolt of electric chartreuse — a color that punches through the layout the way a highlighter punches through a notebook page. The typography is anchored by Raveo, a tightly-spaced contemporary sans whose negative tracking and medium weight give headlines an architectural confidence. The layout language is generous and modern: floating pill-shaped navbars, fully-rounded buttons, oversized hero typography, and large soft-cornered cards that lift off gradient washes. Surfaces alternate between bone-white, dim parchment, and deep ink, often connected by smooth vertical gradients that bleed into the accent green. Motion is subtle and purposeful — fades, parallax images, and slider transitions — keeping the focus on the brand, not the chrome.
Sections from Forerunner
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Hero Video Background Section
View section
Intelligent Template Features Tabs
View section
Navigation with Mega Menu Dropdown
View section
Features Grid with CTA Header
View section
About Section with Parallax Image
View section
Newsletter Subscription Footer Section
View section
Product Feature CTA Section
View section
Feature Cards with Image Marquee
View section
Hero Section with Company Logos
View section
Video Hero with Grid
View section
Customer Testimonials Slider Section
View section
Trust Logos with Features Section
View section
Colors
Canvas
Bone Canvas
#f8f7f5
Primary canvas. Page background, lifted card surfaces, and footer base.
Paper Light
#ffffff
Pure white surface. Navbar fill, form fields, testimonial cards, and pricing tiers.
Parchment Mist
#efede6
Secondary canvas. Section breaks, mega-menu page tiles, and gradient destinations.
Ink
Deep Ink
#181e25
Primary text & dark surface. Headlines, body copy, dark hero sections, and primary button fills.
Ink Whisper
#181e25a3
Muted ink. Secondary copy, captions, and meta information on light backgrounds.
Obsidian Deck
#222229
Tertiary dark surface. Slightly warmer dark used as a third tonal layer beneath deep-ink.
Accent
Chartreuse Haze
#d6fd70a3
Soft accent wash. Used for hover states and translucent gradients fading into canvas.
Chartreuse Jolt
#d6fd70
Hero accent. Sole brand color — banners, primary CTAs, gradient washes, and highlights.
State — utility only
Ember Alert
#fa4149
Error & alert state. Reserved for form validation and destructive actions only.
Typography
The quick brown fox jumps
Sole typeface — display, headings, body, labels, and UI
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
24pxElement 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-48
48px--spacing-64
64px--spacing-80
80px--spacing-96
96px--spacing-120
120px--spacing-160
160pxBorder radius
cards8pxlarge24pxsmall8pxmedium16pxnavbar16pxbuttons32pxpill-full9999pxSurfaces
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 1Bone Canvas
Level 2Parchment Mist
Level 3Paper Light
Level 4Deep Ink
Level 5Obsidian Deck
Do's and don'ts
- Use Chartreuse Jolt as the single hero accent — banners, primary CTAs, and gradient washes — never as body copy or large surfaces.
- Apply 32px (pill) border-radius to every primary and secondary button so the rounded silhouette stays consistent across the system.
- Float the navbar inside a 16px-rounded white container with 32px horizontal padding and let it sit over content with a translucent blur variant when scrolled.
- Pair dark sections (Deep Ink) with white cards lifted at 8px radius and 24px padding to create the signature stacked-tile rhythm.
- Build vertical gradients from Bone Canvas into Chartreuse Jolt or Parchment Mist on hero and pricing sections to telegraph forward motion.
- Set headlines in Raveo Medium with aggressive negative tracking (-0.04em to -0.0625em) and 100% line-height for the architectural display look.
- Use 120px–160px section padding on desktop to honor the spacious editorial cadence of the original.
- Don't introduce a second saturated accent — Forerunner is monochrome plus one chartreuse jolt, full stop.
- Don't use Chartreuse Jolt for body text or large background fields; reserve it for buttons, banners, highlights, and gradient ends.
- Don't apply rectangular or heavily-rounded (>32px) buttons — break the pill rhythm and the system collapses.
- Don't replace Raveo with a different body sans; the entire scale was tuned to its tracking and x-height.
- Don't crowd hero typography — give display headlines room to breathe with at least 40px gaps to surrounding elements.
- Don't use Ember Alert decoratively; it is reserved exclusively for form errors and destructive states.
- Don't drop card radius below 8px on testimonial, pricing, or contact tiles — softness is part of the brand voice.
Example prompts
New marketing landing page
Pricing section
Dark feature section
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