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.
Consult AI
Consult AI is a calm, modern consulting brand built around a single decisive accent: a confident electric blue that punctuates an otherwise neutral, paper-soft canvas. The voice is professional yet approachable — pill-shaped CTAs, generous whitespace, and oversized Satoshi headlines establish authority without rigidity. The template leans on a duotone discipline: warm off-white backgrounds, near-black ink, and brilliant signal-blue moments where it matters — accent words, primary buttons, statistics, and decorative accent sections. Imagery is bright, optimistic, and human, framed in soft 24px rounded rectangles that echo the buttons and tabs.
Sections from Consult AI
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Industries Showcase Tabs Section
View section
Case Study Hero Stats
View section
FAQ Accordion Section
View section
Centered CTA Ball Section
View section
AI Growth Stats Section
View section
Three Step Process Timeline
View section
Navigation Bar with Dropdown
View section
AI Consulting Hero Section
View section
AI Services with Moving Banner
View section
Video Hero with Lightbox
View section
Split Hero with Stats
View section
Company Values Tabs Section
View section
Colors
Canvas
Paper Mist
#efefef
Primary canvas. Page background across all default sections, sets the calm neutral foundation.
Snow White
#fcfcfc
Lifted surface & inverse text. Footer, cards on accent, and text sitting on dark or blue fills.
Ink
Stone Grey
#c2c2c5
Hairline & divider. Borders for navbar pills, dropdown frames, and footer rules.
Midnight Graphite
#212331
Primary text & ink. Headlines, body copy, and dark overlays for hero imagery.
Accent
Powder Tag
#dce4f0
Tag and tab background. Soft blue-tinted neutral for inline tags and unselected pill tabs.
Signal Blue
#126fff
Brand accent. Primary CTAs, accent words, statistics, decorative blocks, and link emphasis.
Horizon Blue
#2c7fff
Accent-on-accent tag fill. Used for tags placed on Signal Blue sections.
Typography
The quick brown fox jumps
Single-family system used for all UI, body, and display copy.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
120pxCard padding
40pxElement gap
32pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
tag5pxhero32pxpill60pxcards16pxsmall12pxcircle9999pximages24pxbuttons80pxSurfaces
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 Mist
Level 2Snow White
Level 3Signal Blue
Level 4Midnight Graphite
Do's and don'ts
- Pair Midnight Graphite headlines with a single Signal Blue accent word per heading — for example, 'AI oriented — consulting' or 'Awarded for a reason'.
- Use the 80px pill radius for every primary, ghost, and outline CTA, keeping a 40px circular icon-chip nested at the right edge.
- Frame all hero and feature imagery in a 24px rounded rectangle; use 32px for full-bleed dark hero blocks.
- Reserve the Powder Tag (#dce4f0) chip with double Signal Blue side-borders for short eyebrow labels above headlines.
- Set major sections at 120px top/bottom padding inside a 1440px max-width container with 24px gutters.
- Switch text to Snow White whenever a section uses the Signal Blue or photographic dark fill.
- Use Satoshi at weight 500 for everything; drop to 300 only for oversized manifesto type at 80px+.
- Don't introduce a second accent hue — Signal Blue is the only saturated color; everything else stays neutral.
- Don't apply drop shadows to cards or buttons; rely on color contrast and rounded geometry for depth.
- Don't use Signal Blue for body copy — it is reserved for accent words, stats, links, and primary CTAs.
- Don't square off corners — buttons are 80px pills, images are 24px, tags are 5px with side bars.
- Don't crowd the layout: maintain 32px element gaps and 64–120px section gaps even on dense pages.
- Don't mix heading weights within a single headline — keep regular and accent spans both at weight 500.
- Don't place tags on Signal Blue sections without swapping their side-border color to Paper Mist.
Example prompts
Hero section
Feature grid
Accent CTA section
Stats row
# 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