---
version: alpha
name: Viviens Creative
description: Gallery-grade editorial restraint for a creative talent agency — near-pure white canvas, ink-black text, a single understated grotesque typeface, full-bleed imagery and hairline rules carrying all the structure, with radius kept at zero so photography reads as the brand.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f5f3"
  ink: "#0d0d0d"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent — sparing warm neutral / link
  primary: "#1a1a1a"
  link: "#0d0d0d"
  link-hover: "#5c5c5c"

  # Lines + hairlines
  border: "#e6e4e0"
  border-strong: "#0d0d0d"
  divider: "#eceae6"

  # Neutral scale
  gray-900: "#0d0d0d"
  gray-600: "#5c5c5c"
  gray-400: "#8a8a8a"
  gray-200: "#d6d3ce"
  gray-100: "#eceae6"
  gray-50: "#f6f5f3"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Overlay
  overlay: "#0d0d0d"
  selection-bg: "#0d0d0d"
  selection-text: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -1.92px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.6px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Primary CTA — ink block, square edges
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — hairline outline on white
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  # Text link with underline-on-hover
  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  # Talent / project card — image-led, no chrome
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 16px 0px

  # Muted meta label under cards
  card-meta:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 0px

  # Eyebrow / category label
  label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 0px

  # Form input — hairline underline field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderColor: "{colors.border}"

  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderColor: "{colors.border-strong}"

  # Footer
  footer:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    padding: 64px 40px
    borderColor: "{colors.border}"
---

# Viviens Creative Design System

## Overview

Viviens Creative is a creative talent agency, and its site behaves exactly as an agency representing photographers and stylists should — it gets out of the way so the work can speak. The canvas is near-pure white (`{colors.background}`), text is a soft ink black (`{colors.ink}`), and almost everything structural is carried by full-bleed imagery and hairline rules. There is no decorative color, no gradient, no rounded card chrome competing with the photography. The interface is a frame, not a feature.

The typographic voice is a single quiet grotesque (Inter standing in for the kind of neutral Helvetica-adjacent sans these agencies favor), used across the whole system. Headlines run large with tight negative tracking so they read as composed, editorial statements rather than marketing shouts; body and meta copy sit small, calm, and generously leaded. Weight does almost all the hierarchy work — 400 for nearly everything, a step to 500 only for the smallest labels and card titles. The restraint is the point: the type should never out-design the image beside it.

What makes the system distinctive is its commitment to squared edges and hairlines. Radius is effectively zero (`{rounded.none}`) everywhere it matters — buttons, inputs, cards, and image crops all keep hard right angles, echoing the gridded, gallery-wall logic of a portfolio book. Borders are whisper-thin warm-gray hairlines (`{colors.border}`) for soft separation, escalating to a full ink line (`{colors.border-strong}`) only when an element needs to assert itself, like a secondary button outline or a focused field.

**Key Characteristics:**
- Near-pure white canvas with soft ink-black text — gallery emptiness, image-first
- A single neutral grotesque used system-wide, hierarchy via size and weight only
- Large headlines with tight negative tracking (-1.92px at hero), small calm body copy
- Zero radius everywhere — hard squared edges echoing a portfolio grid
- Warm-gray hairlines for soft separation; full ink lines for emphasis
- No decorative color, gradients, or shadows — photography is the only color
- Underline-on-hover inline links; ink-block primary buttons with square corners

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, buttons, strong rules. A soft near-black, not pure, to avoid harshness against white.
- **White** (`{colors.background}`): Page background, all surfaces, button text on ink.
- **Pure Black** (`{colors.ink-pure}`): Reserved for full-strength imagery overlays and edge cases.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Meta copy, captions, footer text, hover states.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrow labels, category tags, disabled text.

### Lines
- **Border** (`{colors.border}`): Warm-gray hairlines between sections and around inputs.
- **Border Strong** (`{colors.border-strong}`): Ink outline for secondary buttons and focused fields.
- **Divider** (`{colors.divider}`): Subtle horizontal rules in lists and grids.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted labels, placeholders.
- **Gray 200** (`{colors.gray-200}`): Stronger dividers.
- **Gray 100** (`{colors.gray-100}`): Hairline dividers.
- **Gray 50** (`{colors.gray-50}`): Soft surface tint for the footer.

### Surface
- **Surface Soft** (`{colors.surface-soft}`): The one off-white — used for the footer band to ground the page.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif`. A single neutral grotesque carries the entire system.

### 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` | 64px hero statement, tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, talent names |
| `card-title` | Card / talent labels |
| `body-large` | Lead paragraphs, about copy |
| `body` | Standard reading text |
| `body-small` | Footer, secondary UI |
| `nav-link` | Navigation, button labels |
| `label-mono` | Eyebrows, category tags (slight positive tracking) |
| `caption` | Image captions, meta |

### Principles
- **One typeface, infinite restraint**: a single grotesque across the whole system. Hierarchy comes from size and weight, never from a second family.
- **Tracking scales with size**: tight negative tracking on large headlines (-1.92px at 64px) relaxing to zero at body sizes.
- **Two weights**: 400 for nearly everything, 500 only for small labels and card titles. No bold display type.
- **Calm body, composed heads**: generous line-height on small copy, tight line-height on large display.

## Layout

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

### Grid & Container
- Wide content max width with edge-to-edge image grids
- Talent / project grids: 2–3 columns, square-cropped imagery
- Hero: single-column statement with large top padding

### Whitespace Philosophy
- **Image-first emptiness**: photography fills the frame; white space and hairlines do the rest.
- **Big vertical rhythm**: sections separated by `{spacing.4xl}`–`{spacing.5xl}` of air, not color blocks.
- **Hairline structure**: separation comes from `{colors.border}` rules and spacing, never from boxes or shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | The default — page, cards, images |
| Hairline | `1px solid {colors.border}` | Section and input separation |
| Ink rule | `1px solid {colors.border-strong}` | Emphasis, secondary buttons, focus |
| Focus | `1px solid {colors.border-strong}` underline | Keyboard / field focus |

**Shadow philosophy**: there is none. Depth is flat by design — the system relies on imagery, hairlines, and whitespace, never on drop shadows or elevation. Cards sit flush on the canvas.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything structural — buttons, inputs, cards, image crops |
| `xs` | 2px | Rare micro-softening |
| `sm` | 4px | Optional softened element |
| `pill` | 9999px | Reserved for rare tag pills only |

## Components

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

### Buttons
- **`button-primary`** — ink block, white text, square corners. The default CTA.
- **`button-secondary`** — white with a full ink hairline outline, square corners.

### Navigation
- **`nav-bar`** — white sticky header, small neutral links, bottom hairline.

### Cards
- **`card`** — image-led, no chrome, square crop. Title and meta sit beneath in plain type.
- **`card-meta`** — muted caption line under the image.

### Labels
- **`label`** — small muted eyebrow with slight positive tracking for categories.

### Inputs
- **`input`** — underline-style field on white; focus darkens the hairline to ink.

### Footer
- **`footer`** — soft off-white band, secondary text, top hairline.

## Do's and Don'ts

### Do
- Keep the canvas white and let photography be the only color
- Use a single grotesque; build hierarchy from size and weight
- Keep radius at zero on buttons, inputs, cards, and image crops
- Use warm-gray hairlines for soft separation, ink lines for emphasis
- Track headlines tight and negative; keep body copy calm and untracked
- Separate sections with whitespace and hairlines, not color blocks

### Don't
- Don't introduce decorative color, gradients, or drop shadows
- Don't round corners — squared edges are the brand
- Don't add a second typeface or bold display weights
- Don't box cards in borders that compete with the imagery
- Don't add positive tracking to body copy
- Don't let UI chrome out-design the photography

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column image stack, tight padding |
| Tablet | 600–1024px | 2-column grids |
| Desktop | 1024–1440px | 2–3 column grids, full layout |
| Large | >1440px | Centered, generous margins |

### Touch Targets
- Buttons use comfortable vertical padding (14px)
- Nav links spaced for tap comfort
- Underline-field inputs keep a large tap area

### Collapsing Strategy
- Hero: 64px → scales down, tracking held proportionally
- Navigation: horizontal links → hamburger menu
- Talent grids: 3-column → 2-column → single column
- Section spacing: 140px → compressed on mobile
- Footer: multi-column → stacked

### Image Behavior
- Square / portrait crops maintained across breakpoints
- Full-bleed imagery edge-to-edge on mobile
- No border radius at any size

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Hairline: `1px solid {colors.border}`
- Emphasis line: `1px solid {colors.border-strong}`

### Example Component Prompts
- "Hero on white: headline at 64px weight 400, line-height 1.04, letter-spacing -1.92px, color `{colors.ink}`. Lead paragraph at 18px weight 400, `{colors.ink-secondary}`. Square ink CTA (`{colors.ink}`, 0 radius, 14px 28px padding)."
- "Talent card: square-cropped image, no border, title beneath at 20px weight 500 `{colors.ink}`, meta line at 12px weight 400 `{colors.ink-secondary}`. Zero radius."
- "Navigation: white sticky header, 14px weight 400 links in `{colors.ink}`, bottom hairline `{colors.border}`. Square ink CTA right-aligned."
- "Underline input: white field, 10px 0 padding, bottom border `{colors.border}`; on focus darken to `{colors.border-strong}`."

### Iteration Guide
1. Radius stays at 0 — squared edges are non-negotiable
2. One typeface only; size and weight carry all hierarchy
3. Tracking is negative on large heads, zero on body
4. Color is the photography; chrome stays achromatic ink and white
5. Separation comes from hairlines and whitespace, never shadows

---

## 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 Viviens Creative. Brand names and trademarks belong to their respective owners.