---
version: alpha
name: V7
description: Confident AI-platform minimalism — a near-black ink on bright white canvas, a single electric mint-green accent reserved for CTAs and highlights, tight geometric sans-serif headlines, generous whitespace, and softly-rounded cards with whisper-light borders.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f8f7"
  surface-dark: "#0a0a0a"
  ink: "#0a0a0a"
  ink-secondary: "#5a5f5c"
  ink-muted: "#8a8f8c"

  # Accent — V7 electric mint, used only for CTAs / highlights
  primary: "#19e57f"
  primary-deep: "#00b85f"
  accent-soft: "#e6fbef"

  # Interactive
  link: "#0a0a0a"
  focus-ring: "#19e57f"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-700: "#3a3f3c"
  gray-500: "#5a5f5c"
  gray-400: "#8a8f8c"
  gray-200: "#e4e7e5"
  gray-100: "#eef1ef"
  gray-50: "#f7f8f7"

  # On-color
  on-primary: "#0a0a0a"
  on-dark: "#ffffff"

  # Borders
  border: "#e4e7e5"
  border-strong: "#d2d6d4"

typography:
  display-hero:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.4px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  mono-label:
    fontFamily: "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  # Primary CTA — bright mint with dark ink text
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px

  # Secondary — dark ink fill
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px

  # Ghost / outline
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
    borderColor: "{colors.border-strong}"

  # Eyebrow / kicker pill
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Standard card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  # Soft-surface feature card
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.gray-100}"

  # Metric card — large display number
  card-metric:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  # Dark inverted panel
  panel-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.xl}"
    padding: 48px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 32px
    borderColor: "{colors.border}"
---

# V7 Design System

## Overview

V7's website carries the visual confidence of an AI infrastructure company that wants to read as precise, fast, and enterprise-credible rather than playful or experimental. The canvas is overwhelmingly white (`{colors.background}`) with a near-black ink (`{colors.ink}`) that stops just short of pure black, lending the page a slightly softer, more designed feel. The composition leans on generous whitespace and a strict grid, letting product screenshots and metric claims ("21x faster", percentage reductions) breathe and dominate.

The signature move is restraint with a single jolt of color. V7's electric mint-green (`{colors.primary}`) appears almost exclusively on primary CTAs, highlight underlines, and accent moments — never as decorative wallpaper. Against the achromatic black-on-white system, that one saturated green does the entire job of brand recognition. It pairs with dark ink text rather than white, because the green is bright enough that black text reads cleanly on it, an unusual and distinctive choice that gives the buttons an energetic, almost neon character.

Typography is tight, geometric, and modern — a humanist-grotesque sans (closest open equivalent: Inter) with aggressive negative tracking at display sizes (-2.4px on the hero) that compresses headlines into a dense, engineered look. Body copy relaxes to neutral tracking for readability. The hierarchy is wide: a commanding 60px hero steps down through section headings and card titles into calm 17px body text, with a small uppercase-ish eyebrow label setting up each section.

Structurally, V7 favors softly-rounded cards (`{rounded.lg}`) with whisper-light 1px borders (`{colors.border}`) over heavy shadows, plus occasional fully-inverted dark panels (`{colors.surface-dark}`) to break the rhythm of the white page and frame product demos or testimonials with dramatic contrast.

**Key Characteristics:**
- Near-black ink (`{colors.ink}`) on a pure-white canvas — designed softness, not harsh pure black
- A single electric mint accent (`{colors.primary}`) reserved for CTAs and highlights — never decorative
- Dark ink text ON the green CTA (not white) — a distinctive, high-energy pairing
- Tight geometric sans (Inter-class) with -2.4px display tracking
- Pill-shaped buttons throughout
- Light 1px borders over shadows for card separation
- Inverted dark panels for product demos and emphasis sections
- Large display metric numbers as social proof

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Primary text, headings, secondary button fills. Not pure black — micro-warmth softens it.
- **Pure White** (`{colors.background}`): Page background and card surfaces.
- **Electric Mint** (`{colors.primary}`): The brand accent. Primary CTA fill and highlight color.
- **Deep Mint** (`{colors.primary-deep}`): Hover state for the mint CTA; accent text on light tints.

### Surface
- **Soft Surface** (`{colors.surface-soft}`): Subtle off-white feature-card background.
- **Dark Surface** (`{colors.surface-dark}`): Inverted panels framing product demos and testimonials.
- **Accent Soft** (`{colors.accent-soft}`): Pale mint tint behind eyebrow pills.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, placeholders.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Description copy.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder text.
- **Gray 200** (`{colors.gray-200}`): Default borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Soft-card borders.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Borders
- **Border** (`{colors.border}`): Standard 1px card and divider line.
- **Border Strong** (`{colors.border-strong}`): Ghost button and input outlines.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Arial, sans-serif` — a tight geometric humanist-grotesque close to V7's brand sans.
- **Monospace**: `Roboto Mono` for technical labels and code-adjacent metadata.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 60px hero — maximum impact, -2.4px tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature and metric cards |
| `body-large` | Hero subtitle, feature intros |
| `body` | Standard reading text |
| `body-small` | UI text, captions |
| `button-ui` | Buttons and links |
| `eyebrow` | Small section kicker labels |
| `caption` | Metadata, tags |
| `mono-label` | Technical labels |

### Principles
- **Compression at display sizes**: Hero and section headings use heavy negative tracking (-2.4px / -1.6px) for a dense, engineered look; tracking relaxes to neutral at body sizes.
- **Two weights, clear roles**: 400 for reading, 500–600 for UI and headings. No ultra-bold.
- **Eyebrow rhythm**: Each section opens with a small 13px eyebrow label in deep mint or muted ink to anchor hierarchy.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.4xl}`–`{spacing.5xl}`) between major sections for gallery-grade breathing room.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: centered single-column with generous top padding
- Feature sections: 2–3 column card grids
- Dark panels: full-width inverted blocks framing demos

### Whitespace Philosophy
- **Breathing room as confidence**: Heavy vertical padding between sections; the white space signals enterprise calm.
- **Color as punctuation**: The mint accent is rationed so its rare appearances read as deliberate emphasis.
- **Contrast breaks**: Inverted dark panels interrupt the white rhythm to spotlight product UI.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Standard card and divider separation |
| Soft Card (Level 2) | Border + faint `0 4px 16px rgba(10,10,10,0.04)` | Feature cards on hover |
| Dark Panel (Level 3) | `{colors.surface-dark}` fill, `{rounded.xl}` | Product demos, testimonial spotlights |
| Focus (Accessibility) | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: V7 prefers borders over shadows. Separation comes from hairline 1px lines and the dramatic figure-ground flip of inverted dark panels rather than layered drop shadows. Where shadows appear, they are whisper-level and warm-neutral.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 6px | Small inline elements |
| `sm` | 8px | Inputs |
| `md` | 12px | Small cards, tiles |
| `lg` | 16px | Standard and metric cards |
| `xl` | 24px | Dark panels, large containers |
| `pill` | 9999px | Buttons, badges, eyebrow pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric mint fill with dark ink text, full pill. The default CTA.
- **`button-secondary`** — Dark ink fill, white text, full pill.
- **`button-ghost`** — White surface with `{colors.border-strong}` 1px outline.

### Pills & Badges
- **`badge`** — Pale mint tint, deep-mint text, full pill — the section eyebrow.

### Cards
- **`card`** — White, `{rounded.lg}`, 1px `{colors.border}`. The workhorse.
- **`card-soft`** — Off-white surface for grouped feature content.
- **`card-metric`** — Large display number (60px weight 600) over a description.

### Panels
- **`panel-dark`** — Inverted near-black panel framing product demos and testimonials; white text, `{rounded.xl}`.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline. Focus switches the border to mint `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — White header, 15px weight 500 links, hairline bottom border, mint pill CTA right-aligned.

## Do's and Don'ts

### Do
- Ration the mint accent (`{colors.primary}`) to CTAs and highlights only
- Pair dark ink text ON the green button — it reads cleaner than white and is the brand signature
- Use `{colors.ink}` (near-black) instead of pure black for primary text
- Use pill radius on buttons and badges
- Prefer 1px borders over heavy shadows for card separation
- Use inverted dark panels to spotlight product UI
- Apply heavy negative tracking only at display/section sizes

### Don't
- Don't use the mint green as a large background fill or decoration
- Don't put white text on the green CTA — keep it dark ink
- Don't introduce a second saturated accent color
- Don't use heavy multi-layer drop shadows — the system is border-led
- Don't apply negative tracking to body copy
- Don't use sharp 0px corners on buttons — they're pills

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced padding |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1200px | Full layout |
| Large Desktop | >1200px | Centered, generous margins |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Nav links at 15px with adequate spacing
- Pill badges have 14px horizontal padding for tap comfort

### Collapsing Strategy
- Hero: 60px → scales down, maintains proportional negative tracking
- Navigation: horizontal links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Dark panels: maintain full-width edge treatment, reduce internal padding
- Section spacing: 96px+ → 48px on mobile

### Image Behavior
- Product screenshots framed inside dark panels at all sizes
- Hero retains generous top padding
- Logo grids: multi-column → 2-column → horizontal scroll

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Electric Mint `{colors.primary}` with dark ink text `{colors.on-primary}`
- Background: Pure White `{colors.background}`
- Heading text: Ink Black `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Focus ring: Electric Mint `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white. Headline 60px Inter weight 600, line-height 1.05, letter-spacing -2.4px, color `{colors.ink}`. Subtitle 20px weight 400, `{colors.ink-secondary}`. Mint pill CTA (`{colors.primary}` fill, dark ink text, 9999px radius, 14px 24px padding) plus a ghost button (white, 1px `{colors.border-strong}` outline)."
- "Design a card: white background, 1px `{colors.border}`, `{rounded.lg}` radius, 28px padding. Title 22px Inter weight 600, letter-spacing -0.44px. Body 17px weight 400 `{colors.ink-secondary}`."
- "Build an eyebrow pill: `{colors.accent-soft}` background, `{colors.primary-deep}` text, full pill, 13px weight 600."
- "Create a dark spotlight panel: `{colors.surface-dark}` fill, white text, `{rounded.xl}` radius, 48px padding, framing a product screenshot."

### Iteration Guide
1. The mint accent is rationed — CTAs and highlights only, never wallpaper
2. Dark ink text ON green is the brand signature — don't flip to white
3. Borders before shadows — 1px hairlines do the separation work
4. Negative tracking lives at display sizes; body copy stays neutral
5. Inverted dark panels break the white rhythm to spotlight product UI

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by V7. Brand names and trademarks belong to their respective owners.