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.
For:Human
For:Human is a warm, editorial Webflow template that pairs creamy off-white parchment surfaces with deep ink-black sections and a single jolt of electric chartreuse. The aesthetic feels human and considered — think gallery catalog meets modern lookbook — built around oversized neue-grotesque headlines, a monospaced label voice, and confident negative space. The palette is honest and earthy: bone, sand, ink, and a glow-stick accent reserved for moments that matter. Imagery leans into raw nature — sunlit hills, stone, cactus, cabin — letting photography carry the emotion while typography provides quiet authority.
Sections from For Human
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Animated Features Gallery Marquee
View section
Hero with Background Video
View section
Mega Menu Navigation Bar
View section
Interactive Feature Tabs Showcase
View section
Testimonials Slider Section
View section
Feature Cards with Video
View section
Hero with Parallax Video
View section
Features Grid with Icons
View section
Alternating Feature Cards
View section
About Section with Parallax
View section
Footer with Newsletter Signup
View section
Hero Section with Background Image
View section
Colors
Canvas
Bone Mist
#f0eee9
Default page background. Body and most light sections sit on this warm bone tone.
Sand Stone
#d6d1c4
Lifted neutral surface. Used for secondary heroes and warm accent sections.
Parchment Cream
#fcfaf5
Primary canvas. Lightest base for hero sections, cart panels, and pricing tiles.
Ink
Midnight Ink
#1f1915
Primary text and dark surface. Headlines, body copy, button fills, and the entire dark theme.
Moonlight Ivory
#fffdf6
Light text and inverted surface. Used on dark sections and as primary button text on dark grounds.
Accent
Lime Haze
#d4fd80a3
Hover state for accent elements. A 64% softening of Electric Lime.
Electric Lime
#d4fd80
Singular accent. Reserved for primary CTAs, announcement bar, cart badges, and key highlights.
State — utility only
Ember Red
#fa4149
Error and alert state only. Form validation, destructive actions — never decorative.
Typography
The quick brown fox jumps
Primary family. Headlines, body copy, buttons — carries the entire visual voice.
The quick brown fox jumps
Secondary family. Reserved for uppercase labels, eyebrows, captions, and announcement bars.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-8
8px--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
160px--spacing-168
168pxBorder radius
pill9999pxcards16pxsmall4pxinputs8pxpanels24pxbuttons8pxhairline2pxSurfaces
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 2Bone Mist
Level 3Sand Stone
Level 4Midnight Ink
Do's and don'ts
- Reserve Electric Lime (#d4fd80) exclusively for primary CTAs, the announcement bar, cart badges, and the single most important highlight per section — never decorate with it.
- Use LT Superior Mono in 10–12px uppercase with 1px letter-spacing for every label, eyebrow, and category tag — it is the connective tissue of the system.
- Set headlines in LT Superior at weight 500 with aggressive negative tracking (−2px to −6px on display sizes) to achieve the editorial display feel.
- Pair every section title with a pill-shaped label-master tag above it, separated by a 1px hairline divider with 32–64px of breathing room.
- Apply 8px radius to buttons and inputs, 16px to cards, and full-pill radius only to label tags and small badges — keep these tiers strict.
- Use full-bleed photography of natural textures (stone, foliage, mountains, hills) in warm sunset or muted daylight tones — let images carry the emotion.
- Honor the spacing rhythm: 80, 96, 120, 160px section padding; 168px hero top padding; 32px main container gutters.
- Don't introduce additional accent colors — Electric Lime is the only saturated hue; everything else lives on the bone-to-ink axis.
- Don't use Ember Red for anything decorative — it is strictly reserved for form errors and validation states.
- Don't set body or button text below weight 500; the entire system is medium-weighted, never light or regular.
- Don't mix LT Superior and LT Superior Mono within the same line — labels are mono, everything else is sans.
- Don't round large surfaces beyond 24px or use sharp 0px corners on cards; the warm geometry depends on the 8/16/24 ladder.
- Don't drop drop-shadows on cards or sections — depth comes from surface tone shifts (bone → sand → ink), not elevation shadows.
- Don't crowd the hero — the 120px display headline needs full negative space and a single label above it to breathe.
Example prompts
Hero section
Pricing card
Dark intro section
# 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