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.
Solvo
Solvo is a warm, editorial design system for agencies that treat their own site as a flagship portfolio piece. Cream and wheat backgrounds ground every page while deep plum-red ink carries all type, giving the studio a confident, bookish warmth rather than cold corporate neutrality. Display type pairs an upright grotesk with sweeping italic Playfair Display script, so headlines read like a magazine pull-quote — 'We'de *love to* collaborate.' Vivid colour-blocked project imagery in burnt orange, violet, and cobalt punctuates the restrained palette, making the work grid and hero visuals feel curated against the neutral canvas. Thin hairline rules, dotted halftone world maps, and looping video portrait cards add tactile texture without ever breaking the quiet, considered rhythm of the layout.
Colors
Canvas
Ghost Linen
#f1f1f7
Cool lifted surface. Occasional light panel and form background contrast.
Wheat Canvas
#e8e4d9
Primary page background. Used behind nearly every section, nav, and card.
Parchment Fade
#c7c2b3
Hover surface. Button hover background, keeping contrast soft against wheat.
Ink
Faded Wine
#573337
Primary text & ink. Headlines, body copy, button fills, borders, and hairline rules.
Stone Grey
#8f8f8f
Muted utility tone. Secondary labels and disabled states.
Midnight Plum
#171919
Deepest ink. Reserved for maximum-contrast overlays and dark UI accents.
Accent
Violet Ink
#6b5ca8
Secondary project accent. Alternates with clay and cobalt across work-grid tiles.
Cobalt Tide
#3f5e8c
Tertiary project accent. Cool counterpoint used in the work grid and badges.
Sunbaked Clay
#d4753a
Signature accent. Hero gradients, blob shapes, colour-blocked project thumbnails.
State — utility only
Signal Chartreuse
#9bfa13
Interaction utility. Cursor-hover badge dot and live-state micro-signals only.
Typography
The quick brown fox jumps
Primary UI and body typeface — navigation, paragraphs, labels, buttons.
The quick brown fox jumps
Editorial display accent — italic words inside headlines for warmth and contrast.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1400pxSection gap
100pxCard padding
40pxElement gap
30pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-100
100pxBorder radius
cards5pxsmall3pxbadges7pxbuttons4pxcircle-button9999pxSurfaces
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 1Wheat Canvas
Level 2Faded Wine Panel
Level 3Parchment Fade
Level 4Ghost Linen
Do's and don'ts
- Pair an upright sans headline with an italic Playfair word for editorial rhythm, as in 'We'de love to collaborate.'
- Keep body copy and all UI chrome in Faded Wine on Wheat Canvas for maximum legibility and warmth.
- Use hairline 1px Faded Wine rules to divide sections instead of heavy borders or shadows.
- Reserve saturated clay, violet, and cobalt strictly for project thumbnails and client-facing imagery, never for text.
- Apply the pill-shaped uppercase button with letter-spacing for all primary CTAs, including the fixed nav 'Contact' button.
- Let photography and halftone dot-maps carry visual energy while backgrounds stay flat and quiet.
- Use looping muted video portraits for team cards to add motion without sound or noise.
- Maintain generous 100px section gaps and 50px internal rhythm to preserve the magazine-like pacing.
- Don't set entire headlines in italic Playfair — reserve it for single emphasized words or phrases only.
- Don't introduce cool blues or greens into the ink/text palette; keep type strictly wine-on-wheat.
- Don't crowd the work grid with more than four projects per row; whitespace is part of the curation.
- Don't use pure black or pure white surfaces; always warm them with wheat or ghost linen tints.
- Don't apply drop shadows to cards — depth comes from hairline borders and color blocking, not elevation.
- Don't stretch the accent hues (clay, violet, cobalt) into backgrounds or large surface fills.
- Don't skip the uppercase letter-spacing treatment on nav links and buttons — it's core to the voice.
Example prompts
Hero section
Work grid tile
Team card
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