# Liv-ex Design System

> A structured, data-driven canvas anchored by deep burgundy and ochre, utilizing light-weight display serifs and generous cream-toned surfaces to evoke the authority of a financial exchange for fine wine.

**Source:** https://liv-ex.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Liv-ex employs a "monochrome-plus" system where a deep Burgundy `#870032` and an earthy Yellow-1 `#ad6500` serve as the primary functional anchors against a warm foundation of White `#ffffff` and Cream `#fffbf7`. The typography is a high-contrast pairing of **Sora** (used at weight 300 for display) and **DM Sans** for body and interactive elements. Layouts are characterized by large, rounded-corner surfaces (`{radii.card}` 16px) and significant vertical breathing room, often utilizing alternating background bands of Grey `#f1eded` and soft Yellow-3 `#fff5eb`. Interactive elements are strictly defined by 8px or pill-shaped radii, maintaining a professional yet accessible fintech aesthetic.

## Signature DNA
1. **Light-weight Display Serif** (Sora at weight 300 is used for all major H1 and H2 headings, creating an elegant, editorial feel that contrasts with the dense market data it represents. Observed on all analyzed pages.)
2. **The "Tuscany" Banding** (Frequent use of alternating full-width sections in `#f1eded` and `#fff5eb` to separate content blocks without using heavy dividers. Observed on Homepage and About pages.)
3. **Functional Color Coding** (Burgundy `#870032` is reserved for primary global actions and brand identity, while Ochre `#ad6500` is used for secondary conversion points like "Become a Member". Observed on Homepage and Pricing.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary page background, button text | 45 | 1 | `--color-white` |
| `{colors.black}` | `#1b1d19` | Primary body text | 52 | 1 | `--color-black` |
| `{colors.grey}` | `#f1eded` | Section backgrounds, subtle borders | 27 | 1 | `--color-grey` |
| `{colors.cream}` | `#fffbf7` | Alternative section backgrounds | 6 | 1 | `--color-cream` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{colors.burgundy}` | `#870032` | Primary CTA, headings, brand marks | 66 | 1 | `--color-burgundy` |
| `{colors.yellow-1}` | `#ad6500` | Secondary CTA, membership accents | 22 | 1 | `--color-yellow-1` |
| `{colors.green-1}` | `#717b4a` | Resources section background | 8 | 1 | `--color-green-1` |
| `{colors.yellow-3}` | `#fff5eb` | Card backgrounds (accent) | 9 | 1 | `--color-yellow-3` |
| `{colors.pink-1}` | `#e05f7b` | Decorative borders (decorative_only) | 16 | 1 | `--color-pink-1` |
| `{colors.green-2}` | `#d0dc9c` | Decorative surfaces (decorative_only) | 4 | 1 | `--color-green-2` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sora | 300, 350, 400, 700 | Display & Headings | Sora (Google Fonts) | OFL |
| DM Sans | 350, 400, 500 | Body, UI, Buttons | DM Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 52px | 72.8px | normal | 300 | Hero H1 | `h1.hero__heading` |
| `{type.display-lg}` | 40px | 56px | normal | 300 | Section H2 | `h2.text-h2` |
| `{type.heading-md}` | 28px | 39.2px | normal | 400 | Sub-headings | `h2.text-h3` |
| `{type.heading-sm}` | 24px | 33.6px | normal | 300 | Card titles | `h4.text-h4` |
| `{type.body-lg}` | 20px | 30px | normal | 350 | Hero intro | `p.hero__description` |
| `{type.body-md}` | 18px | 25.2px | normal | 350 | Standard body | `div.text-p2` |
| `{type.body-sm}` | 16px | 24px | normal | 400 | Secondary text | `section.hero.theme-grey` |
| `{type.button}` | 15px | 15px | 0.9px | 500 | CTA labels | `a.text-button` |

### Principles
1. **Weight Contrast:** Display type (Sora) must always be at least 100 units lighter than the body text (DM Sans) it accompanies to maintain the editorial signature.
2. **Looser Tracking on Buttons:** Small caps or button text uses a positive letter-spacing of 0.9px for legibility.
3. **Tight Display Leading:** Large display sizes (52px) maintain a line-height ratio of approx 1.4x to keep hero blocks cohesive.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 22 |
| `{space.sm}` | 16px | 25 |
| `{space.md}` | 24px | 40 |
| `{space.lg}` | 32px | 72 |
| `{space.xl}` | 40px | 25 |
| `{space.section}` | 100px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 292 occurrences |
| `{radius.sm}` | 8px | Primary/Secondary buttons | Rounded Button component |
| `{radius.md}` | 16px | Content cards, feature blocks | Card component |
| `{radius.pill}` | 9999px | Tags, cookie banner buttons | Pill Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | No box-shadows observed in component specs |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary page actions
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.burgundy}` (#870032) or `{colors.yellow-1}` (#ad6500) / Text `{colors.white}` (#ffffff) / Radius 8px / Padding 0px 18px / Typography 15px 500
**States observed:** Default | Hover: Not captured | Active: Captured

#### Surface
**Role:** Structural layout containers
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.cream}` (#fffbf7) / Border none / Radius 0px / Padding 100px 0px
**States observed:** Default

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and expertise blocks
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.grey}` (#f1eded) or `{colors.yellow-3}` (#fff5eb) / Radius 16px / Padding 32px 20px 40px
**States observed:** Default

#### Resource Card
**Role:** Blog and news feed items
**Pages observed:** Homepage, About
**Spec:** Background `{colors.grey}` (#f1eded) / Radius 16px / Padding 32px / Typography 16px 400
**States observed:** Default

### Tier 3: Surface-specific

#### Membership Banner
**Role:** High-conversion membership prompt
**Pages observed:** Homepage, About
**Spec:** Background `{colors.yellow-3}` (#fff5eb) / Radius 0px / Padding 160px 0px / Text `{colors.black}` (#1b1d19)
**States observed:** Default

#### Navigation Bar
**Role:** Global site header
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.white}` (#ffffff) / Border-bottom 1px `{colors.grey}` (#f1eded) / Height 80px (implied by spacing)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px (approx) |
| Section Gap | 100px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, 100% width buttons, reduced padding (20px) |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), 100px section padding |

## Imagery & decoration
Liv-ex uses stylized, flat-vector wine bottle silhouettes and cork patterns in brand colors (`#870032`, `#ad6500`). It avoids stock photography in favor of high-contrast graphic motifs that reinforce the "Exchange" identity.

## Do's
- Use Sora weight 300 for all H1 and H2 headings.
- Apply 16px border radius to all content cards.
- Use `#870032` for the primary "Log In" or "Become a Member" actions.
- Alternate section backgrounds between `#ffffff`, `#f1eded`, and `#fffbf7`.
- Maintain 100px vertical padding between major content sections.

## Don'ts
- **Wrong:** Using `#ad6500` for the main site logo or primary navigation. **Right:** Use `#870032`. **Reason:** Burgundy is the primary brand identifier; Ochre is a secondary conversion accent.
- **Wrong:** Applying box-shadows to cards. **Right:** Use flat backgrounds or 1px borders. **Reason:** The system is strictly flat/monochrome.
- **Wrong:** Using Sora Bold for body text. **Right:** Use DM Sans 400. **Reason:** Sora is reserved for display/headings.
- **Wrong:** Using a sub-brand color like Green-1 `#717b4a` for global buttons. **Right:** Use Burgundy `#870032`.

## Similar brands
- Financial Times (Editorial/Data mix)
- Berry Bros. & Rudd (Wine heritage)
- Revolut (Fintech structure)
- The Economist (Typography-first authority)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-burgundy: #870032;
  --color-yellow-1: #ad6500;
  --color-black: #1b1d19;
  --color-white: #ffffff;
  --color-grey: #f1eded;
  --color-cream: #fffbf7;
  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-card: 16px;
  --radius-button: 8px;
}
```

## Agent prompt examples
- "Create a feature section with a `#fffbf7` background, a Sora 300 heading in `#870032`, and a 3-column grid of cards with 16px border-radius."
- "Generate a primary CTA button using `#870032` background, white DM Sans 500 text, and 8px border-radius."
- "Design a resource card with a `#f1eded` background, 16px radius, and DM Sans 400 body text."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale for display sizes was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://liv-ex.com | 1440px | 2026-06-06 |
| Pricing | https://liv-ex.com/pricing | 1440px | 2026-06-06 |
| About | https://liv-ex.com/about | 1440px | 2026-06-06 |