# V5systems.us Design System

> Warm parchment foundations anchored by deep oxblood primary actions and light-weight serif display typography.

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

## TL;DR
V5systems.us (Balkan Dating) utilizes a "monochrome" system type that leans heavily into a warm, heritage-inspired palette. The interface is built on a foundation of `#faf6f0` (Background) and `#f5ede0` (Muted surfaces), creating a papery, non-digital feel. Brand authority is established through the use of **Playfair Display** at a signature weight of 300 for large headlines, paired with a high-contrast primary accent of `#8b1a1a` (Oxblood) for critical CTAs. The system avoids pure blacks, opting instead for `#1a1008` (Deep Espresso) for text and shadows, maintaining a warm chromatic temperature across all components.

## Signature DNA
1. **Heritage Serif Display** (Playfair Display at weight 300/700 is used for all major storytelling headers and price points, creating an editorial, trustworthy atmosphere. Observed on `v5systems.us` and `about`.)
2. **Oxblood Punctuation** (The primary color `#8b1a1a` is reserved for high-intent actions and status indicators, contrasting sharply against the cream `#faf6f0` canvas. Observed across all analyzed pages.)
3. **Warm Depth** (Shadows and text avoid neutral grays, using `#1a1008` to ensure even the elevation feels integrated into the warm brand palette. Observed in `Rounded Button` and `Card` components.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--background` | `#faf6f0` | Page floor and primary surface background | 62 | 1 | Computed Style |
| `--card` | `#ffffff` | Elevated surface background (popovers/cards) | 5 | 1 | Computed Style |
| `--foreground` | `#1a1008` | Primary text and high-contrast labels | 140 | 1 | Computed Style |
| `--muted` | `#f5ede0` | Secondary section backgrounds and disabled states | 39 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--primary` | `#8b1a1a` | Primary CTA background, borders, and brand emphasis | 57 | 1 | Computed Style |
| `--accent` | `#c8860a` | Secondary highlights, rings, and interactive borders | 36 | 1 | Computed Style |
| `--border` | `#e0cebd` | Default hairline dividers and component borders | 36 | 1 | Computed Style |
| `--secondary` | `#1a2744` | Alternative button backgrounds (decorative_only) | 4 | 1 | Computed Style |
| `accent-blue` | `#2f7bbf` | Informational text and pricing highlights | 14 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--destructive` | `#c0392b` | Error states and destructive actions | 25 | 1 | Computed Style |
| `success-text` | `#1e7e34` | Confirmation and positive validation | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Playfair Display | 400, 600, 700 | Display, Headings, Price points | Playfair Display (Google) | OFL |
| Inter | 400, 500, 600, 700 | Body, UI Labels, Buttons | Inter (Google) | OFL |
| system-ui | 300, 400, 500, 600 | Hero Display, Sub-headers | - | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 60px | 75px | normal | 300 | Hero H1 | `h1.inline-block` |
| `display-lg` | 56px | 64.4px | normal | 700 | Section Hero | `h1#hero-heading` |
| `display-md` | 44px | 44px | normal | 700 | Price amounts | `span.price-amount` |
| `heading-lg` | 36px | 43.2px | normal | 700 | Section heads | `h2#pain-heading` |
| `heading-md` | 30px | 39px | normal | 400 | Sub-section heads | `h2.text-3xl` |
| `heading-sm` | 24px | 31.2px | normal | 300 | Card titles | `h3.md:inline-block` |
| `body-lg` | 18px | 28.8px | normal | 400 | Intro paragraphs | `p.cta-subheadline` |
| `body-md` | 16px | 25.6px | normal | 400 | Default body | `section#find-your...` |
| `button` | 14px | 14px | 0.28px | 600 | CTA Labels | `a.btn.btn-primary` |
| `caption` | 12px | 19.2px | 0.36px | 700 | Badges/Metadata | `div.story-badge` |

### Principles
1. **Display weight contrast:** Use weight 300 for `system-ui` display text to create an airy, modern feel, but use weight 700 for `Playfair Display` to signal traditional authority.
2. **Tight Display Leading:** Large display sizes (44px+) use 1.0x line-height to keep word clusters visually unified.
3. **Generous Body Tracking:** Small labels (12px-14px) utilize letter-spacing between 0.28px and 0.6px to maintain legibility on textured backgrounds.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-1` | 8px | 22 |
| `space-2` | 16px | 87 |
| `space-3` | 24px | 52 |
| `space-section` | 96px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Section containers, inputs | 473 occurrences |
| `radius-sm` | 8px | Primary buttons | `Rounded Button` |
| `radius-md` | 12px | Feature cards, badges | `Card` |
| `radius-pill` | 9999px | Status tags, decorative pills | `Card (pill)` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `shadow-sm` | `rgba(26, 16, 8, 0.08) 0px 1px 3px 0px` | Default buttons and cards | `Rounded Button` |
| `shadow-brand` | `rgba(139, 26, 26, 0.404) 0px 4px 20px 0px` | Hover states on primary actions | `shadows[1]` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** `v5systems.us`
**Spec:** Background: `#8b1a1a` | Text: `#faf6f0` | Border: 2px `#8b1a1a` | Radius: `8px` | Padding: `12px 24px` | Typography: `14px/600`
**States observed:** Default | Hover: Captured (Shadow increase)

#### Surface
**Role:** Content sectioning and layout containers
**Pages observed:** `pricing`, `about`
**Spec:** Background: `transparent` | Text: `#404040` | Border: 1px `#ebebeb` | Radius: `0px` | Padding: `40px 0px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific value propositions
**Pages observed:** `v5systems.us`
**Spec:** Background: `#f0e8dc` | Text: `#8b1a1a` | Border: 1px `#e0cebd` | Radius: `12px` | Shadow: `none`
**States observed:** Default: Captured

#### Status Badge
**Role:** Small metadata or category labels
**Pages observed:** `v5systems.us`
**Spec:** Background: `#8b1a1a` | Text: `#faf6f0` | Radius: `9999px` | Padding: `4px 12px` | Typography: `12px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Plan selection and feature comparison
**Pages observed:** `v5systems.us`
**Spec:** Background: `transparent` | Text: `#1a1008` | Border: 1px `#e0cebd` | Radius: `0px` | Padding: `20px 24px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px |
| Section Padding | 96px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | H1 reduces to 36px; Padding reduces to 16px |
| Desktop | 1440px | 96px section spacing; 1200px container |

## Imagery & decoration
The brand uses high-contrast, warm-toned photography of couples. Decorative elements include a repeating "zigzag" or "sawtooth" divider pattern in `#8b1a1a` and `#c8860a` to separate major sections.

## Do's
- Use `#faf6f0` as the primary background to maintain the "parchment" feel.
- Set display headers in Playfair Display weight 700 for authority.
- Use `#8b1a1a` for all primary "Join" or "Start" actions.
- Maintain 96px vertical spacing between major homepage sections.
- Apply `radius-sm` (8px) to buttons but keep section containers `radius-none`.

## Don'ts
- Do not use pure black (#000000); use `#1a1008` for all dark text and shadows.
- Do not use `#2f7bbf` (Accent Blue) for primary buttons; it is reserved for informational highlights.
- Do not use weight 400 for `system-ui` display text; stick to the signature weight 300.
- Do not mix the zigzag divider colors within a single section transition.

## Similar brands
- Hinge (Editorial typography, warm palette)
- Kinfolk (Type-first, generous whitespace)
- Masterclass (High-contrast serif display)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --background: #faf6f0;
  --foreground: #1a1008;
  --primary: #8b1a1a;
  --accent: #c8860a;
  --muted: #f5ede0;
  --border: #e0cebd;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-sm: rgba(26, 16, 8, 0.08) 0px 1px 3px 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the V5systems oxblood color #8b1a1a, 8px border radius, and 14px Inter Semibold text."
- "Create a feature card with a #f0e8dc background, 12px border radius, and a 1px border in #e0cebd."
- "Layout a hero section with a weight 300 system-ui headline at 60px over a #faf6f0 background."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://v5systems.us | 1440x900 | 2026-06-06 |
| About | https://v5systems.us/about | 1440x900 | 2026-06-06 |
| Pricing | https://v5systems.us/pricing | 1440x900 | 2026-06-06 |