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.
We Consult
We Consult is a polished consultancy template built around a deep forest-green canvas and a soft mint accent — a palette that reads as composed, professional, and unhurried. The serif headlines (Zodiak) carry quiet authority while Satoshi handles body copy with a clean, modern cadence. Pill-shaped buttons, generous rounded tiles, and confident negative space give the system a refined editorial calm. The layout breathes through 120px section rhythms and 12px-radius tiles that nest cleanly on tinted surfaces. Imagery is photographic and human — laughter in libraries, conversations in cafés — softened with a dark overlay or framed by a mint outline so the warmth of skin tones and natural light meets the cool authority of the brand greens.
Sections from We Consult
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Three Step Process Timeline
View section
Hero with Animated Gallery
View section
Contact Cards Grid Section
View section
Footer with Newsletter Form
View section
Map Background with Logo Grid
View section
Consulting Services Bento Grid
View section
Video Showcase with Testimonial Marquee
View section
Numbered Process Steps
View section
Hero Stats Gallery About
View section
Hero with Logo Banner
View section
Hero Banner with Overlay
View section
Navigation Bar with Dropdowns
View section
Colors
Canvas
Morning Mist
#ecf6f2
Default light canvas. Page background on light sections and primary text color on dark surfaces.
Whisper Sage
#daebe3
Lifted surface tint. Tinted cards, contact tiles, and quiet section bands above the base canvas.
Ink
Faded Ink
#1b323399
Muted ink. Captions, secondary metadata, and decorative oversized numerals at 30–60% opacity.
Moss Shadow
#253c3d
Footer top band. A barely-lighter green that creates a soft inset within the dark footer.
Forest Hover
#223e3f
Dark hover state. Subtle lift on dark CTAs and card hovers without breaking palette discipline.
Deep Evergreen
#1b3233
Primary ink & dark canvas. Page background for hero/dark sections, headline color on light surfaces, primary button fill.
Accent
Mint Accent
#ceead5
Primary accent. Pill buttons, abstract shapes, decorative outlines, and headline text on dark canvases.
Typography
The quick brown fox jumps
Body, UI, and subtitles. Delivers clean, modern copy and form labels.
The quick brown fox jumps
Display & headings. Carries the editorial, consultative authority of the brand.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
40pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-56
56px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
cards12pxpills64pxsmall8pxcircle9999pxbuttons50pxSurfaces
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 1Morning Mist
Level 2Whisper Sage
Level 3Mint Accent
Level 4Deep Evergreen
Do's and don'ts
- Pair Zodiak serif headlines with Satoshi body copy — never mix the roles.
- Use 50px radius on all primary, ghost, and dark CTAs to maintain the pill-shaped button language.
- Lift tiles with 12px-radius rounded surfaces in Whisper Sage or Morning Mist — let tonal layering do the work of shadows.
- Reserve Mint Accent for moments of emphasis: pill buttons, abstract shapes, headline text on dark, and decorative outlines.
- Hold 120px top/bottom padding on full sections to preserve the spacious editorial cadence.
- Use the abstract pill+circle motif as a quiet wayfinder near headings and brand marks.
- When placing photography on dark sections, use a mint-outlined frame or rounded-arch crop to soften the contrast.
- Don't introduce additional saturated colors — the palette lives entirely in evergreen, mint, and sage.
- Don't use heavy drop shadows; the system communicates depth through tonal surfaces only.
- Don't set Zodiak below 24px — its character disappears at small sizes; switch to Satoshi instead.
- Don't use square corners on buttons or cards; pill (50–64px) and 12px tile radii are the only allowed shapes.
- Don't place Deep Evergreen text on Mint Accent in tight UI — keep that pairing for large display text only.
- Don't overcrowd hero sections — the design relies on generous left-aligned headlines paired with a single image cluster.
- Don't mix font weights aggressively in body copy; Satoshi 400 is the default voice.
Example prompts
New hero section
Feature/USP grid
Contact card
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