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 Craft
Consult Craft is the design language of a modern, ethically-minded consultancy — warm parchment surfaces meet deep forest ink, jolted alive by a single electric mint accent. The palette feels organic and unhurried, like a brick-walled coffeehouse meeting at golden hour, while crisp DM Sans typography keeps every claim sharp and businesslike. The system pairs generous 120px section rhythms with rounded 24px cards and pill-shaped CTA buttons, creating a confident but approachable cadence. Hand-drawn doodle line motifs and editorial photography of real people add personality without sacrificing the professional restraint expected of a consulting brand.
Sections from Consult Craft
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Hero with Image Right
View section
Testimonials
View section
Process
View section
Process
View section
Contact Form
View section
Navbar
View section
Team List
View section
Process
View section
Combo
View section
Services Tiles
View section
Integrations
View section
Stats
View section
Colors
Canvas
Warm Linen
#efeadf
Lifted canvas. Footer, alternating sections, and dropdown surfaces for gentle elevation.
Parchment Cream
#f4f1eb
Primary canvas. Page background, navbar surface, and copy on dark sections.
Porcelain White
#ffffff
Card surface. Pricing tiles, contact form, and form input backgrounds.
Ink
Ink Veil
#1c343329
Hairline divider. Borders beneath the navbar, footer, and quiet section separators.
Forest Ink
#1c3433
Primary text & dark surface. Headlines, body copy, dark hero blocks, and primary button fills.
Accent
Moss Whisper
#ceead5
Soft mint mist. Faded mint text overlaid on dark map and process backgrounds.
Sprout Hover
#5ee67a
Accent hover. Used exclusively as the hover state on Electric Mint CTAs.
Electric Mint
#75fb91
Brand accent. Highlighted words in headlines, primary CTA fills, and statistic emphasis.
Typography
The quick brown fox jumps
Universal family. Headings, body copy, navigation, and UI labels alike.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
48pxElement 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-56
56px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160pxBorder radius
cards24pxsmall6pxcircle9999pxbuttons8pxblock-header12pxSurfaces
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 1Parchment Cream
Level 2Warm Linen
Level 3Porcelain White
Level 4Forest Ink
Do's and don'ts
- Use Electric Mint sparingly — limit it to one accent word per headline, primary CTA fills, and statistic numbers.
- Pair Forest Ink hero blocks with Parchment Cream type and a 24px border-radius to evoke the signature 'inset card' hero.
- Set body copy in DM Sans Regular at 18px / 1.3 line-height; reserve 500 weight for headings and 700 for stat numerals.
- Maintain 120px top/bottom section padding on desktop to preserve the spacious editorial rhythm.
- Round all interactive elements (buttons, inputs, cards) to 8px or 24px — never share a card and a button at the same radius.
- Layer hand-drawn doodle SVGs and abstract line motifs at corners or behind hero copy to soften the otherwise rigorous grid.
- On dark sections, drop highlighted text to Moss Whisper (#ceead5) when Electric Mint would feel too loud.
- Don't introduce a second accent hue — the brand identity hinges on Electric Mint as the only chromatic spark.
- Don't use Electric Mint on long body text or large fills; it's an accent, not a surface color.
- Don't combine Forest Ink text on Warm Linen surfaces below 16px — contrast holds, but the warmth flattens at small sizes.
- Don't apply heavy drop shadows; this template uses wide, low-opacity shadows (30–50px blur, ~6–10% alpha) only.
- Don't break the 1400px main-container or remove the 24px side gutters — the layout depends on this generous frame.
- Don't use uppercase for headlines; DM Sans is set in sentence case throughout the brand.
- Don't mix in a second typeface — DM Sans carries every role from caption to display.
Example prompts
New landing hero
Pricing section
Editorial section
Contact card
# 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