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.
Reforma
Reforma is a premium Webflow template built for established businesses, solo founders, and creative studios who need a web presence that reassures rather than performs. Its aesthetic is grounded in warm neutrality — a linen-toned canvas, deep burgundy ink, and a carefully limited palette of muted washes (blue, sage, plum, yellow) that surface as section accents without ever competing for attention. The typographic system pairs Sentient Variable, an editorial serif with gentle optical weight, against Google Sans Flex Variable for body and UI copy, creating a layered hierarchy that feels simultaneously journalistic and modern. Layout logic is spacious and deliberate: large section padding, full-bleed image grids with rounded corners, and a fixed pill-shaped navigation bar that floats above the page content. Scroll-triggered entrance animations (translate3d Y-offset to zero, opacity 0→1) give every section a composed, unhurried arrival. The template communicates trust not through decoration but through structural clarity — every element earns its position.
Sections from Reforma
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Scroll Flip Video Hero with Gallery
View section
Sticky Scroll Feature Cards with Images
View section
Split Hero with Video and Logo Marquee
View section
Client Logo Grid with Hover Testimonials
View section
Fixed Navbar with Mega Dropdowns
View section
How It Works Tabbed Feature Section
View section
Full-Screen Hero with Case Study Card
View section
Careers Hero with Floating Image Cards
View section
About & Features Dual Section
View section
Features Grid with Image Cards
View section
About Hero with Video and Text
View section
Sticky Tab Navigation with Scroll Content
View section
Colors
Canvas
Pale Stone
#e5e3e1
Input & depth surface. Form field backgrounds, inset areas, and divider tones.
Lifted White
#ffffff
Card & nav surface lift. Navigation bar background, testimonial cards, and elevated UI containers.
Antique Linen
#f7f6f5
Primary page canvas. Applied to the background of every major section and the footer.
Ink
Deep Burgundy
#241018
Primary text & dark surface. Headlines, body copy, primary button fills, and the logotype.
Accent
Ink Pool
#4a66d6
Accent text & icon highlight. Icon color in button groups, label dots, and link indicators.
Pale Sage
#dee6e1
Tertiary tinted wash. Sage-toned section backgrounds and card fill variants.
Morning Sky
#d6e0ea
Interactive accent wash. Secondary button hover backgrounds and tinted card panels.
Candlelit Cream
#f6efe4
Warm testimonial card wash. Yellow-tinted testimonial card backgrounds for visual rhythm.
State — utility only
Rose Dust
#d16c6c
Error state. Form validation error borders and inline error feedback.
Verdant Signal
#6fbf8a
Success state. Form submission success and positive feedback indicators.
Typography
The quick brown fox jumps
Label & caption typeface. Used exclusively for uppercase label components and small metadata tags at weight 500, providing a technical counterpoint to the serif headlines.
The quick brown fox jumps
Body, UI, and button typeface. Used at weight 400 for body copy and weight 500 for labels, buttons, and bold emphasis. Neutral and legible at all display sizes.
The quick brown fox jumps
Display & heading typeface. All H0–H6 elements use this optical serif at weight 300, with pronounced negative tracking at large sizes for a refined editorial quality.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
24pxElement gap
16pxSpacing scale
Purpose
Value
Preview
--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
80px--spacing-120
120px--spacing-160
160px--spacing-200
200pxBorder radius
pill9999pxtags8pxcards20pxlarge20pxsmall8pxinputs8pxmedium12pxbuttons32pxSurfaces
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 1Antique Linen
Level 2Lifted White
Level 3Pale Stone
Level 4Morning Sky Panel
Do's and don'ts
- Apply `border-radius: 32px` (the pill value) to all primary and secondary buttons consistently to maintain the signature rounded CTA shape.
- Use Sentient Variable at weight 300 for all headings H1–H4 and apply negative letter-spacing (-0.125rem to -0.187rem) at display sizes to preserve the editorial tightness the template depends on.
- Pair heading text with an italic `<em>` span on a key phrase per hero headline — this is the template's signature typographic gesture that injects warmth into large neutral headings.
- Limit section background colors to the four named washes (Morning Sky, Pale Sage, Candlelit Cream, Plum Wash) and use each no more than once per page to maintain variety without visual chaos.
- Always use lazy-loaded, high-quality portrait and lifestyle photography with rounded corners (12–20px) — imagery of real humans in candid moments is structurally load-bearing for the trust narrative.
- Maintain the generous section padding rhythm: small sections at 80px, medium at 120px, large at 160px vertical padding — compression collapses the spacious breathing room that defines the aesthetic.
- Use Fragment Mono in uppercase for all label components (category tags, section labels, metadata) to preserve the deliberate typographic contrast with the serif headlines.
- Do not introduce saturated or bright accent colors beyond the defined palette — the neon green (#90ff00) defined in CSS is a raw token not surfaced in the UI; introducing vivid hues destroys the muted credibility register.
- Do not use heading weights above 400 for Sentient Variable — increasing to semibold or bold collapses the light editorial feel into generic boldness that fights the design system's tone.
- Do not apply card shadows heavier than the nav-container shadow — depth in this system is created through background color shifts and rounded corners, not drop shadows.
- Do not stack more than two surface levels in a single view — layering Pale Stone inside a Lifted White card on Antique Linen is the maximum hierarchy; adding a fourth level creates visual noise.
- Do not use left-aligned body text columns wider than the 7-column (49.75rem) max-width token — Reforma's readability depends on controlled line length in long-form content areas.
- Do not skip the scroll-entrance animation (translate Y+50px opacity 0) on new sections — absent animation makes the layout feel static and loses the composed, unhurried reveal that is core to the brand's pacing.
- Do not replace the duo of Sentient Variable + Google Sans Flex with a single-family system — the contrast between the warm serif headlines and the neutral humanist body copy is the primary typographic mechanism.
Example prompts
New hero section
Testimonial marquee
Services listing
Section label
# 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