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.
Franco
Franco is a serif-led editorial template where deep forest greens meet warm parchment cream — a design system tuned for storytelling agencies, eco-conscious brands, and creative studios that want their work framed by landscape photography and quiet typography. Sections alternate between cream canvases and inky forest panels, each anchored by oversized Instrument Serif headlines that breathe across full-bleed video and imagery. The overall feel is grounded and unhurried: tight letter-spacing on display type, generous 120px section rhythms, soft 8–32px radii, and uppercase DM Mono labels acting as quiet wayfinders. Buttons stay small and humble. Imagery does the heavy lifting — sun-dappled forests, Georgian facades, hands holding fruit — while the type system stays almost monastic in restraint.
Sections from FRANCO
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 Video Background
View section
Tabs with Feature Icons
View section
Modern Footer with Big Logo
View section
Careers Hero Section
View section
Tabs with Visual Content Switch
View section
Sticky Scrolling Cards
View section
Navigation Bar with Dropdown
View section
Text Section Two Column Layout
View section
Hero with Rating Badge
View section
Contact Details Cards
View section
Hero Text with Inline Images
View section
Customer Success Stories Grid
View section
Colors
Canvas
Fog Line
#ffffff29
Hairline border on forest. Dividers and input outlines on dark surfaces.
Linen Mist
#ece7d9
Secondary surface. Lifted cards, marquee panels, and tinted feature sections within the light theme.
Morning Haze
#ffffff99
Translucent light overlay. Frosted button fills and soft veils over imagery.
Parchment Cream
#f9f5eb
Primary canvas. Page backgrounds, light buttons, and copy reversed onto dark sections.
Ink
Moss Veil
#16231b29
Hairline border on cream. Dividers, input outlines, and quiet edges between sections.
Forest Ink
#16231b
Primary text & deep canvas. Body copy on cream, full surfaces on dark sections, and primary button fills.
Shaded Grove
#16231b99
Translucent ink overlay. Subdued labels, placeholder text, and image gradient stops.
Typography
The quick brown fox jumps
Eyebrow labels & metadata. Uppercase tracked-out tags, navigation badges, and category markers.
The quick brown fox jumps
Body & UI. Carries paragraphs, buttons, form fields, and navigation.
The quick brown fox jumps
Display & editorial headings. Sets the romantic, hand-set tone for hero and section titles.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
24pxElement gap
32pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-96
96px--spacing-120
120px--spacing-144
144px--spacing-160
160pxBorder radius
big40pxcards16pxround9999pxsmall16pxmedium24pxxsmall12pxbuttons8pxregular32pxxxsmall8pxxxxsmall4pxSurfaces
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 2Linen Mist
Level 3Forest Ink
Level 4Morning Haze
Do's and don'ts
- Set every display headline in Instrument Serif at 88–112px with -0.02em tracking and 90% line-height — the romantic, slightly compressed proportions are the signature.
- Reserve DM Mono uppercase 12px labels with 0.02em tracking for eyebrows and metadata only — pair them with serif headings, never compete with them.
- Alternate sections between Parchment Cream (#f9f5eb) and Forest Ink (#16231b) panels to create the template's editorial cream/forest rhythm.
- Use 120px top/bottom padding as the default section gap; reach for 144–160px only on hero or marquee sections.
- Apply 8px radius to buttons and inputs, 16px to cards, and 32–40px only to large mockup containers — keep the system humble.
- Layer frosted Morning Haze (#ffffff99) buttons with backdrop-filter blur(16px) over photography, never solid fills, when the CTA sits on imagery.
- Always pair photography with a soft gradient or overlay so cream type stays legible — forests, facades, and natural light are non-negotiable.
- Don't introduce additional accent hues — the palette is exclusively cream, forest green, and linen; saturated colors break the meditative tone.
- Don't set body copy in Instrument Serif; it is reserved for headings, blockquotes, and editorial moments only.
- Don't use bold weights above 500 — the entire system runs at 400/500 to preserve the airy, hand-set feel.
- Don't use heavy drop shadows; rely on the single soft 0 2px 30px rgba(119,119,119,0.06) lift for cards.
- Don't pill-shape buttons (9999px radius is reserved for icon-only circles like the article scroll-down button).
- Don't tighten section padding below 80px on desktop — Franco breathes; cramping it kills the editorial pacing.
- Don't mix Inter and Instrument Serif in the same heading; choose one voice per line.
Example prompts
Landing hero
Feature section
CTA panel
Pricing 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