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.
Evermind
Evermind is a modular, eco-conscious design system built for consultancies, wellness brands, and purpose-led teams. The aesthetic blends warm sand-toned canvases with deep forest-ink surfaces, accented by a single electric chartreuse — Everglow — that signals action without shouting. Serif headlines in Merriweather lend an editorial, almost architectural calm, while a sans-serif body face keeps interfaces crisp and modern. The template feels like sustainable infrastructure: pixel-perfect grids, generous whitespace, soft 16px container radii, and pill-shaped buttons that float over rich landscape photography. Every section breathes — alternating light and dark canvases create a rhythm of openness and depth, mirroring the brand's promise of clarity, warmth, and adaptability.
Sections from Evermind
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Multi-Level Navigation Dropdown Bar
View section
Animated Hero with Scrolling Gallery
View section
Video Background Footer CTA
View section
Success Stories Testimonial Slider
View section
Hero About with Floating Images
View section
About Section with Images
View section
Video Hero with Call-to-Action
View section
Tabbed Features Section Layout
View section
Testimonials Slider with Case Studies
View section
Service Hero With Split Images
View section
Tabbed Content with Parallax Images
View section
Timeline Progress Tracker Section
View section
Colors
Canvas
Eversand Mist
#f4f3ea
Primary canvas. Warm off-white background for default light sections, body copy surfaces, and footer.
Eversand Sage
#e6e8dd
Lifted canvas. Form panels, card surfaces, and the navigation bar fill on light pages.
Eversand Veil
#e6e8ddcc
Translucent navigation veil. Backdrop-blurred surface for floating navbars and overlay cards.
Ink
Forest Haze
#16231b99
Semi-transparent forest wash. Image overlays and depth gradients atop hero photography.
Midnight Moss
#1a1a17
Primary text & dark canvas. Body ink on light surfaces and full-bleed background for dark sections.
Everstone Shadow
#3f403c
Tertiary dark surface. Testimonial cards, eyebrow ink on light, and quiet contrast layers.
Accent
Everglow Chartreuse
#b6e400
Signature accent. Submit buttons, eyebrow dots, highlight chips, focus rings, and circular link badges.
State — utility only
Ember Warning
#c9372d
Error state. Form validation messages and destructive system feedback only.
Typography
The quick brown fox jumps
Modern sans for h0, h5–h6, body, labels, and UI. Balances the serif with technical precision.
The quick brown fox jumps
Editorial headline serif for h1–h4. Carries the calm, architectural voice of the brand.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
24pxElement gap
32pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80pxBorder radius
none0pxpill9999pxlarge16pxsmall8pxbuttons32pxSurfaces
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 1Eversand Mist
Level 2Eversand Sage
Level 3Eversand Veil
Level 4Midnight Moss
Level 5Everstone Shadow
Do's and don'ts
- Pair Merriweather serif headlines (h1–h4) with Dotsans body and labels to keep the editorial-meets-technical voice intact.
- Use Everglow Chartreuse sparingly — reserve it for the primary submit button, eyebrow dots, and one chartreuse 'last' avatar in trust groups.
- Apply 32px border-radius to all CTA buttons and 16px to cards, footers, and form blocks for the signature softened-architecture feel.
- Alternate light (Eversand Mist) and dark (Midnight Moss) sections to create the rhythm of breathing space the template depends on.
- Layer translucent navigation (Eversand Veil) with a 32px backdrop-blur over hero imagery so the navbar feels lightweight and grounded.
- Use small uppercase labels with a green eyebrow dot to introduce sections — never skip the dot, it is the brand's punctuation.
- Set generous section padding using the 80/120/160px scale to maintain the spacious, eco-conscious cadence.
- Don't introduce additional saturated accents — Everglow is the only chromatic voice; everything else is sand, moss, or stone.
- Don't use Merriweather for body copy or buttons — keep the serif strictly for h1–h4 display roles.
- Don't square the corners of buttons or cards; sharp 0px radii break the soft, organic geometry.
- Don't drop Everglow on large fills — it loses its signaling power; cap it to 8–32px circles, dots, and pill button backgrounds.
- Don't crowd dark sections with bright fills; rely on transparency tiers (light-8, light-16, light-32) for layering on Midnight Moss.
- Don't break the 4px spacing rhythm — every gap, padding, and inset is a multiple of 4 from 0 to 80.
- Don't use Ember Warning decoratively — it is reserved exclusively for form errors and destructive states.
Example prompts
New hero section
Pricing tier card
Story section on dark
Contact form
# 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