# V7labs Design System

> A stark, high-contrast monochrome foundation punctuated by electric blue accents and aggressively tracked editorial typography.

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

## TL;DR
V7labs relies on a severe, high-contrast monochrome palette built on pure black (#000000) and white (#ffffff), using dark grays (#171717, #292929) for section banding. The typographic system pairs STK Bureau and Martina Plantijn Light with extremely tight negative letter-spacing (-2.56px at 64px) to create dense, authoritative headlines. Interactive elements heavily favor extreme pill radii (100px, 160px) which contrast sharply against the 0px radius used for structural layout containers and feature cards. Color is used sparingly, primarily an electric blue (#0000ee) and vibrant orange (#ff6300) reserved for text accents and specific UI indicators.

## Signature DNA
1. **Aggressive negative tracking:** Display typography (STK Bureau and Martina Plantijn Light) uses extremely tight letter-spacing (-2.56px at 64px, -1.44px at 36px) to create a dense, editorial headline texture.
2. **Extreme radius contrast:** The system juxtaposes sharp 0px structural containers against highly rounded 160px and 100px pill shapes for buttons and badges.
3. **Electric blue text accents:** While the surface palette is strictly monochrome, #0000ee is applied directly to text and hairline borders for high-visibility interactive signals.

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-foundation-black` | #000000 | Primary text, surface backgrounds, button backgrounds | 640 | 0.8 | computed_style |
| `color-foundation-white` | #ffffff | Surface backgrounds, primary text on dark, button backgrounds | 517 | 0.8 | computed_style |
| `color-foundation-gray-900` | #171717 | Dark section backgrounds | 68 | 0.8 | computed_style |
| `color-foundation-gray-800` | #1c1c1c | Dark footer backgrounds | 12 | 0.8 | computed_style |
| `color-foundation-gray-700` | #292929 | Secondary dark surface backgrounds | 211 | 0.8 | computed_style |
| `color-foundation-gray-100` | #f7f6f5 | Light feature card backgrounds | 29 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-blue` | #0000ee | Primary interactive text, badge borders | 246 | 0.8 | computed_style |
| `color-accent-orange` | #ff6300 | Secondary accent text, graphic elements | 37 | 0.8 | computed_style |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| STK Bureau | 400, 430 | Display, Heading, Body | Space Grotesk | Commercial |
| Martina Plantijn Light | 300, 400 | Display, Heading | EB Garamond | Commercial |
| Inter | 400, 500 | Body, Caption | Inter | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `type-display-xl` | 64px | 64px | -2.56px | 430 | Hero headlines | `h1.framer-text` |
| `type-display-lg` | 60px | 60px | -2.4px | 400 | Primary section headers | `p.framer-text` |
| `type-display-md` | 48px | 48px | -1.44px | 400 | Secondary section headers | `p.framer-text` |
| `type-display-sm` | 40px | 40px | -0.4px | 300 | Martina Plantijn display | `p.framer-text` |
| `type-heading-lg` | 36px | 36px | -1.44px | 430 | Feature group titles | `h4.framer-text` |
| `type-heading-md` | 30px | 32px | -0.9px | 400 | Card titles | `h2.framer-text` |
| `type-heading-sm` | 24px | 33.6px | -0.48px | 300 | Sub-titles | `p` |
| `type-body-lg` | 18px | 20px | -0.36px | 430 | Lead body copy | `p.framer-text` |
| `type-body-md` | 16px | 20px | -0.16px | 400 | Default body copy | `p.framer-text` |
| `type-body-sm` | 14px | 20px | -0.14px | 430 | Secondary body copy | `p.framer-text` |
| `type-caption` | 12px | 14px | -0.12px | 400 | Small labels, metadata | `p.framer-text` |

### Principles
1. **Tighten as you scale:** Letter spacing becomes progressively more negative as font size increases, reaching -2.56px at 64px.
2. **Mix grotesk and serif:** STK Bureau handles the primary structural hierarchy, while Martina Plantijn Light provides editorial contrast for specific display moments.
3. **Solid leading:** Line heights are kept extremely tight on display sizes (1:1 ratio, e.g., 64px size with 64px line height) to maintain block-like text shapes.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 73 |
| `space-2` | 8px | 49 |
| `space-3` | 12px | 56 |
| `space-4` | 16px | 27 |
| `space-5` | 20px | 13 |
| `space-6` | 24px | 30 |
| `space-15` | 60px | 4 |
| `space-30` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Structural containers, feature cards | 1136 occurrences |
| `radius-sm` | 2px | Small inputs | 23 occurrences |
| `radius-md` | 8px | Standard controls | 18 occurrences |
| `radius-lg` | 12px | Large controls | 5 occurrences |
| `radius-xl` | 33px | Glass panels | 3 occurrences |
| `radius-pill` | 100px | Badges, secondary buttons | 89 occurrences |
| `radius-pill-lg` | 160px | Primary interactive buttons | 27 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `elevation-none` | none | Default flat surfaces | Computed style |
| `elevation-low` | `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | Subtle card depth | 14 occurrences |
| `elevation-medium` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Hover states or elevated panels | 4 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing, https://v7labs.com/about
**Spec:** Background #ffffff / Text #000000 / Radius 160px / Padding 0px / Border 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Outline Badge
**Role:** Status indicators and decorative labels.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing, https://v7labs.com/about
**Spec:** Background transparent / Text #0000ee / Border #0000ee / Radius 100% / Padding 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 2: Patterns

#### Feature Card (Light)
**Role:** Standard content container for product features.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing
**Spec:** Background #f7f6f5 / Text #000000 / Radius 0px / Padding 24px / Border 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Dark Surface Band
**Role:** Full-width section backgrounds for contrast.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing
**Spec:** Background #292929 / Text #000000 / Radius 0px / Padding 0px / Border 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 3: Surface-specific

#### Glass Panel
**Role:** Elevated content container on dark backgrounds.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing, https://v7labs.com/about
**Spec:** Background rgba(255, 255, 255, 0.06) / Text #0000ee / Radius 33px / Padding 8px 16px 8px 8px / Border 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Footer Container
**Role:** Global site footer.
**Pages observed:** https://v7labs.com, https://v7labs.com/pricing, https://v7labs.com/about
**Spec:** Background rgba(28, 28, 28, 0.9) / Text #000000 / Radius 0px / Padding 0px / Border 0px
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Container max-width | Not captured in source |
| Section padding | 60px to 120px vertical |
| Grid columns | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Not captured in source |
| Desktop | 1440px | Not captured in source |

## Imagery & decoration
The brand relies on stark geometric contrast rather than lush photography. Decorative elements are minimal, often utilizing the #ff6300 orange for abstract data visualizations or technical diagrams. The UI avoids soft gradients, preferring solid monochrome blocks and sharp lines.

## Do's
- Use STK Bureau with tight negative tracking for all primary headlines.
- Maintain a strict 1:1 line-height ratio for display text.
- Use extreme pill radii (160px) for primary buttons to contrast with 0px structural containers.
- Apply #0000ee strictly as an accent for text or hairline borders, never as a large surface fill.
- Keep shadows extremely subtle (`rgba(0, 0, 0, 0.04) 0px 1px 3px 0px`) or entirely flat.

## Don'ts
- **Wrong:** Using #0000ee as a background color for a hero section.
  **Right:** Using #171717 or #000000 for the hero background, with #0000ee reserved for accent text.
  **Reason:** Blue is an accent token, not a foundation surface token.
- **Wrong:** Applying an 8px border radius to a feature card.
  **Right:** Applying a 0px border radius to the feature card.
  **Reason:** The system relies on the contrast between sharp 0px containers and 160px pill buttons.
- **Wrong:** Setting a 64px headline with normal letter spacing.
  **Right:** Setting a 64px headline with -2.56px letter spacing.
  **Reason:** The brand's typographic signature requires aggressive negative tracking at large sizes.

## Similar brands
- Vercel (high contrast monochrome, tight typography)
- Linear (dark mode bias, sharp geometric UI)
- Stripe (technical precision, specific vibrant accents)

## Quick start

**CSS Custom Properties**
```css
:root {
  --color-foundation-black: #000000;
  --color-foundation-white: #ffffff;
  --color-foundation-gray-900: #171717;
  --color-foundation-gray-800: #1c1c1c;
  --color-foundation-gray-700: #292929;
  --color-foundation-gray-100: #f7f6f5;
  --color-accent-blue: #0000ee;
  --color-accent-orange: #ff6300;

  --font-display: "STK Bureau", sans-serif;
  --font-display-serif: "Martina Plantijn Light", serif;
  --font-body: "Inter", sans-serif;

  --radius-none: 0px;
  --radius-pill: 100px;
  --radius-pill-lg: 160px;

  --shadow-low: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
}
```

## Agent prompt examples
1. "Create a feature card using the light theme. Set the background to #f7f6f5 with 0px border radius and 24px padding. Include a headline using STK Bureau at 30px with -0.9px letter spacing."
2. "Build a primary call-to-action button. Use a white background (#ffffff) with black text (#000000). Set the border radius to 160px and ensure there is no border or shadow."
3. "Design a dark section band using #292929 for the background. Add an outline badge inside it with a transparent background, #0000ee text, a 1px #0000ee border, and a 100% border radius."

## Known gaps
Hover, focus, and active states for interactive components were not captured in the source data. Container max-widths and responsive grid breakpoint shifts were also not explicitly defined in the computed style evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://v7labs.com | Desktop 1440px | 2026-06-06T05:00:51.382Z |
| Pricing | https://v7labs.com/pricing | Desktop 1440px | 2026-06-06T05:00:51.382Z |
| About | https://v7labs.com/about | Desktop 1440px | 2026-06-06T05:00:51.382Z |