Solvo Design System

Get DESIGN.md Download View template Works with

Solvo is a warm, tactile agency site that looks printed on uncoated paper. The whole page is two colours, oat beige #E8E4D9 and plum brown #573337, with a fine film grain over everything. Big Uncut Sans headlines mix a solid word and an outlined word. Paragraphs are large, mid-weight and slip into Playfair Display italic for a phrase or two. Photography is saturated and grainy, and it brings in the orange, sky blue and violet.

Four signatures make it recognisable:

Solid + outline headlines. Every big title sets one word filled and the next as a hairline outline in the same ink: Next level / digital / agency., Our Work, The Team. The outlined word has a transparent fill and a thin plum stroke.
Serif italics inside sans sentences. Lead paragraphs switch to Playfair Display italic mid-sentence: Explore our diverse portfolio to discover why….
Two colours plus grain. There are no greys, no white and no accent. Plum on oat everywhere, and a visible noise texture on the page and on every photo.
Ink rules as structure. 1px plum lines split every section, run vertically between columns, sit beside OUR CLIENTS, and become the skill bars.

Solvo is a light-only design.

Colors

Surfaces

canvas#E8E4D9

Page background (oat beige), under a grain texture

surface-1#E8E4D9

Solvo has no separate surface

Ink

on-primary#E8E4D9

Text on primary

ink#573337

All text, rules, outlines, the logo tile

ink-muted#573337

Body text is full ink

ink-faint#573337 · 20%

The start state of scroll-revealed paragraphs, never a resting colour

on-media#E8E4D9

Tags and text placed on photos

Action

primary#573337

Every filled button and chip: plum with oat text

primary-hover#573337

Lines & effects

line#573337

1px rules between sections, vertical column rules, skill bars

Typography

Uncut Sans · display-hero · shown in Inter (fallback)

The quick brown fox jumps

Next level / digital / agency. 130px · 500 · 0.9

Uncut Sans · headline-md · shown in Inter (fallback)

The quick brown fox jumps

Expertise, Skills & Specializations, with an optional Playfair italic word at the same size. 44px · 500 · 1.3 · -1px

Uncut Sans · body-lg · shown in Inter (fallback)

The quick brown fox jumps

Lead paragraphs (the main reading size). 28px · 500 · 1.2

Uncut Sans · title-md · shown in Inter (fallback)

The quick brown fox jumps

Team member names. 22px · 500 · 1 · -1px

Playfair Display · caption-serif

The quick brown fox jumps

Team roles, Co Founder. 19px · 400 · 1.3

Uncut Sans · label-button · shown in Inter (fallback)

The quick brown fox jumps

Form submit Send Message. 16px · 600 · 1.4 · 1px

Spacing & shape

Purpose	Value
Container	max 1400px, with 72px side padding (5% at 1440), so content runs from 72px to 1368px
Section rhythm	sections have no vertical padding of their own
Breakpoints	Webflow standard 991, 767 and 479px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	26px
`lg`	30px
`xl`	50px
`2xl`	100px

Layout spacing

Token	Value	Preview
`column-gap`	30px
`section-first`	50px
`page-x`	72px
`section`	100px
`nav-height`	105px

Border radius

xs4px

sm5px

md7px

full9999px

Motion

Scroll-lit paragraphs	SplitText words go from #573337 at 20% to full ink, scrubbed: top bottom → bottom 55, scrub: 0.8 (three paragraphs), with 0.8s expo tweens
Text rise on load and in view	y 100% → 0%, 500ms outBack or 600ms outBack; some blocks rise from 40–50px
Nav text roll on hover	Label moves to y −100% and a copy rises from y 100%, 300ms ease
Nav hide on scroll	Move to y −80px on scroll down, back on scroll up, 500ms
Image hover zoom	scale 1 → 1.1, 100ms ease
Skill bars	Width grows, 500ms ease
Colour and border changes	Background and text colour 400ms ease; border 200ms outSine
Rotations	200–500ms ease
Mouse parallax	Elements return to x 0, y 0 over 1000ms ease

Do’s and don’ts

Use only #E8E4D9 (canvas) and #573337 (ink) for the interface, and add a fine grain texture.
Set two-word titles as one solid word and one outlined word, at 110–130px, weight 500.
Put a 2–4 word Playfair Display italic phrase inside long body-lg paragraphs.
Separate sections with a full-width 1px #573337 rule and columns with vertical 1px rules.
Keep buttons small and nearly square: 4–5px radius, uppercase 15–16px/600 labels.
Use 7px radius on work images and an oat #E8E4D9 tag on top of each.
Add white, black, grey or an accent colour to the UI.
Use drop shadows, card backgrounds or bordered boxes.
Make buttons pills or round them past 5px.
Leave paragraphs at ink-faint (20%) once they are in view; it is only the scroll start state.
Set long passages in Playfair or in the outline style.
Add Roboto or a third family.

Example prompt

Any page in the Solvo style

Prompt

Build your page in the Solvo style. Use an #E8E4D9 background with a fine film-grain overlay, and #573337 for all text, lines and buttons; no white, black or other colours. Headlines are Uncut Sans 500: 130px hero, 110px section titles at line height 0.8, with the second word outlined (transparent fill, 1px #573337 text stroke). Paragraphs are 28px/500 line height 1.2, with a short Playfair Display italic phrase inside. Labels are uppercase 15–16px/600. Buttons: #573337 fill, #E8E4D9 text, 4px radius, 50px tall, padding 15px 20px. Separate sections with a full-width 1px #573337 rule and 50px space either side; put vertical 1px rules between columns. Container 1400px with 72px side padding. Work images have a 7px radius with a beige uppercase tag in the corner. No shadows.

# Solvo Design System

> Measured from the Solvo template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Solvo is a warm, tactile agency site that looks printed
on uncoated paper. The whole page is two colours, oat
beige #E8E4D9 and plum brown #573337, with a fine film
grain over everything. Big Uncut Sans headlines mix a
solid word and an outlined word. Paragraphs are large,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #E8E4D9     | Page background (oat be… |
| surface-1    | #E8E4D9     | Solvo has no separate s… |
| field        | #FFFFFF 0%  | Form inputs, which sit … |
| on-primary   | #E8E4D9     | Text on primary          |
| ink          | #573337     | All text, rules, outlin… |
| ink-muted    | #573337     | Body text is full ink    |
| ink-faint    | #573337 20% | The start state of scro… |
| on-media     | #E8E4D9     | Tags and text placed on… |
| primary      | #573337     | Every filled button and… |
| primary-hov… | #573337     |                          |
| line         | #573337     | 1px rules between secti… |
| glass        | #FFFFFF 0%  | The soft blurred halo b… |

## Typography

- display-hero: Uncut Sans 130px / 500
- display-section: Uncut Sans 110px / 500
- headline-md: Uncut Sans 44px / 500
- headline-sm: Uncut Sans 35px / 500

{
  "$description": "Solvo design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#573337",
      "$description": "Every filled button and chip: plum with oat text"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#573337"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#E8E4D9",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#E8E4D9",
      "$description": "Page background (oat beige), under a grain texture"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#E8E4D9",
      "$description": "Solvo has no separate surface"
    },
    "ink": {
      "$type": "color",
      "$value": "#573337",
      "$description": "All text, rules, outlines, the logo tile"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#573337",
      "$description": "Body text is full ink"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#57333733",
      "$description": "The start state of scroll-revealed paragraphs, never a resting colour"
    },
    "line": {
      "$type": "color",
      "$value": "#573337",
      "$description": "1px rules between sections, vertical column rules, skill bars"

/* Solvo theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-body, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #573337;
  --color-primary-hover: #573337;
  --color-on-primary: #E8E4D9;
  --color-canvas: #E8E4D9;
  --color-surface-1: #E8E4D9;
  --color-ink: #573337;
  --color-ink-muted: #573337;
  --color-ink-faint: #57333733;
  --color-line: #573337;
  --color-on-media: #E8E4D9;
  --color-glass: #FFFFFF00;
  --color-field: #FFFFFF00;

  /* Fonts */
  --font-sans: "Uncut Sans", "Inter", sans-serif;
  --font-uncut-sans: "Uncut Sans", "Inter", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 130px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-section: 110px;
  --text-display-section--line-height: 0.8;
  --text-display-section--letter-spacing: -1px;
  --text-display-section--font-weight: 500;
  --text-headline-md: 44px;
  --text-headline-md--line-height: 1.3;
  --text-headline-md--letter-spacing: -1px;
  --text-headline-md--font-weight: 500;
  --text-headline-sm: 35px;
  --text-headline-sm--line-height: 1.9;
  --text-headline-sm--letter-spacing: -1px;
  --text-headline-sm--font-weight: 500;
  --text-body-lg: 28px;
  --text-body-lg--line-height: 1.2;
  --text-body-lg--letter-spacing: 0px;
  --text-body-lg--font-weight: 500;
  --text-body-serif: 28px;

/* Solvo design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #573337; /* Every filled button and chip: plum with oat text */
  --color-primary-hover: #573337;
  --color-on-primary: #E8E4D9; /* Text on primary */
  --color-canvas: #E8E4D9; /* Page background (oat beige), under a grain texture */
  --color-surface-1: #E8E4D9; /* Solvo has no separate surface */
  --color-ink: #573337; /* All text, rules, outlines, the logo tile */
  --color-ink-muted: #573337; /* Body text is full ink */
  --color-ink-faint: #57333733; /* The start state of scroll-revealed paragraphs, never a resting colour */
  --color-line: #573337; /* 1px rules between sections, vertical column rules, skill bars */
  --color-on-media: #E8E4D9; /* Tags and text placed on photos */
  --color-glass: #FFFFFF00; /* The soft blurred halo behind the fixed nav */
  --color-field: #FFFFFF00; /* Form inputs, which sit straight on the canvas */

  /* Fonts */
  --font-uncut-sans: "Uncut Sans", "Inter", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 130px;
  --text-display-hero-font: var(--font-uncut-sans);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-section: 110px;
  --text-display-section-font: var(--font-uncut-sans);
  --text-display-section-weight: 500;
  --text-display-section-line-height: 0.8;
  --text-display-section-tracking: -1px;
  --text-headline-md: 44px;
  --text-headline-md-font: var(--font-uncut-sans);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.3;
  --text-headline-md-tracking: -1px;
  --text-headline-sm: 35px;
  --text-headline-sm-font: var(--font-uncut-sans);
  --text-headline-sm-weight: 500;
  --text-headline-sm-line-height: 1.9;
  --text-headline-sm-tracking: -1px;
  --text-body-lg: 28px;
  --text-body-lg-font: var(--font-uncut-sans);
  --text-body-lg-weight: 500;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Uncut Sans · display-hero · shown in Inter (fallback)

Uncut Sans · headline-md · shown in Inter (fallback)

Uncut Sans · body-lg · shown in Inter (fallback)

Uncut Sans · title-md · shown in Inter (fallback)

Playfair Display · caption-serif

Uncut Sans · label-button · shown in Inter (fallback)

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Solvo style

More design systems like this

Mōno™

Omnera

Nuvin

Moon Studio

Bring any of them to your AI tool