---
version: alpha
name: Viens-La
description: Expressive studio maximalism — oversized grotesk headlines on a near-black canvas, electric accent pops (lime, hot pink, blue) used as confident single-color statements, generous rounded chrome, and a playful editorial rhythm that treats type as the hero.
colors:
  # Canvas + ink
  background: "#0c0c0e"
  surface: "#141417"
  surface-soft: "#1c1c20"
  ink: "#f5f5f2"
  ink-secondary: "#a8a8a4"
  ink-muted: "#6f6f6c"

  # Light-section inversion
  surface-light: "#f5f5f2"
  ink-on-light: "#0c0c0e"

  # Electric accents — used as confident single-color pops
  primary: "#c8ff00"        # signature acid lime
  accent-pink: "#ff4dd2"
  accent-blue: "#2b59ff"
  accent-coral: "#ff5a3c"

  # Borders / dividers
  border: "#2a2a2e"
  border-light: "#dededa"

  # On-color
  on-primary: "#0c0c0e"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.5px
  caption:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.on-accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  badge-mono:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Viens-La Design System

## Overview

Viens-La presents itself the way a confident studio talks at a party — loud, warm, and unmistakably itself. The canvas is a near-black charcoal (`{colors.background}`) that lets oversized condensed headlines and a single electric accent do all the shouting. This is maximalism with discipline: the noise lives in scale and color contrast, not in clutter. Type is the hero, color is the punctuation, and whitespace keeps the whole thing from tipping into chaos.

The headline voice is a tall, tightly-tracked grotesk display (Anton standing in for the studio's condensed display face) set at billboard sizes with line-height pulled below 1.0 so multi-line headlines stack like posters. Underneath, Space Grotesk carries every readable surface — sub-heads, body, UI labels — its quirky geometric character keeping even functional text on-brand. Space Mono appears in small uppercase labels and indices, the "studio catalog" voice that signals craft.

Color is deployed as a series of confident single-color statements rather than gradients or blends. The signature acid lime (`{colors.primary}`) anchors primary actions and hero accents; hot pink (`{colors.accent-pink}`), electric blue (`{colors.accent-blue}`), and coral (`{colors.accent-coral}`) rotate through cards and badges so each section feels freshly dressed. Sections occasionally invert to a warm off-white (`{colors.surface-light}`) for editorial breathing room, and chrome leans heavily on generous pill and large-radius shapes that read friendly rather than corporate.

**Key Characteristics:**
- Near-black charcoal canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`)
- Oversized condensed grotesk display headlines, line-height below 1.0, negative tracking
- Space Grotesk for all readable text — geometric, slightly playful
- Space Mono uppercase labels for indices and metadata
- One electric accent per moment: acid lime, hot pink, electric blue, coral
- Color as confident single-color pops, never gradient washes
- Generous rounded chrome — pills for buttons, large radii for cards
- Occasional inverted off-white sections for editorial rhythm

## Colors

### Canvas & Ink
- **Charcoal Canvas** (`{colors.background}`): Primary page background.
- **Surface** (`{colors.surface}`): Cards, panels, raised chrome.
- **Surface Soft** (`{colors.surface-soft}`): Secondary fills, mono badge backgrounds.
- **Off-White Ink** (`{colors.ink}`): Primary headings and body on dark.
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Muted Ink** (`{colors.ink-muted}`): Disabled, faint metadata.

### Light Inversion
- **Surface Light** (`{colors.surface-light}`): Inverted editorial sections.
- **Ink on Light** (`{colors.ink-on-light}`): Text inside light sections.

### Electric Accents
- **Acid Lime** (`{colors.primary}`): Signature accent, primary CTA fills, hero pops.
- **Hot Pink** (`{colors.accent-pink}`): Badges, highlight cards.
- **Electric Blue** (`{colors.accent-blue}`): Alternate accent cards and links.
- **Coral** (`{colors.accent-coral}`): Tertiary accent, warm highlights.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers on dark.
- **Border Light** (`{colors.border-light}`): Dividers inside light sections.

### On-Color
- **On Primary** (`{colors.on-primary}`): Dark text on lime fills.
- **On Accent** (`{colors.on-accent}`): White text on pink/blue/coral fills.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesk), fallbacks `Impact, sans-serif`
- **Primary**: `Space Grotesk`, fallbacks `Arial, sans-serif`
- **Monospace**: `Space Mono`, fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 96px billboard hero headline |
| `display` | 64px large statement headings |
| `section-heading` | Section titles (Space Grotesk) |
| `sub-heading` | Sub-sections, intros |
| `card-title` | Project / feature card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `button-ui` | Buttons and links |
| `label-mono` | Uppercase indices, metadata |
| `caption` | Tags, small labels |

### Principles
- **Type is the hero**: Display headlines run at poster scale with sub-1.0 line-height so multi-line text stacks like a printed poster.
- **Two voices**: A condensed display face announces; Space Grotesk reads. Never set body in the display face.
- **Mono for craft**: Space Mono uppercase labels mark studio indices and metadata — a quiet signal of editorial intent.
- **Restrained weights**: Display stays at its single drawn weight; Space Grotesk works in 400 (read), 500/600 (interact, announce).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) driving generous section breaks.

### Grid & Container
- Max content width approximately 1280px
- Hero: oversized headline left-aligned or centered, single column
- Project grids: 2-column asymmetric layouts that break to single column
- Inverted off-white sections introduce editorial rhythm between dark sections

### Whitespace Philosophy
- **Loud but legible**: Massive type is counterbalanced by generous surrounding space.
- **Color rhythm**: Each section earns one accent; restraint per moment keeps the maximalism coherent.
- **Section breaks**: 96px–140px vertical padding between major blocks.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Canvas, text blocks |
| Outlined (Level 1) | `1px solid {colors.border}` | Cards, panels on dark |
| Accent Card (Level 2) | Solid accent fill, no border | Highlight / featured cards |
| Focus | `2px solid {colors.primary}` | Keyboard focus on interactive elements |

Depth comes from color contrast and outline, not heavy shadows. Cards sit flat on the canvas, separated by a hairline border or a bold accent fill.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery |
| `sm` | 8px | Small inline chips |
| `md` | 16px | Inputs, small cards |
| `lg` | 24px | Standard cards, panels |
| `xl` | 32px | Large feature containers |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Acid lime fill, dark text, full pill. The default CTA. Hover inverts to off-white ink fill.
- **`button-secondary`** — Surface fill with `{colors.border}` outline, pill shape.

### Pills & Badges
- **`badge`** — Hot pink fill, white text, full pill.
- **`badge-mono`** — Soft surface, secondary ink, Space Mono uppercase label.

### Cards
- **`card`** — Surface fill, hairline border, large 24px radius.
- **`card-accent`** — Solid lime fill with dark text for featured / highlight moments.

### Inputs
- **`input`** — Surface fill, border outline, 16px radius. Focus swaps border to acid lime.

### Navigation
- **`nav-bar`** — Charcoal bar, off-white links, Space Grotesk 15px weight 600, bottom hairline border.

## Do's and Don'ts

### Do
- Set headlines in the condensed display face at poster scale with sub-1.0 line-height
- Use one electric accent per section — lime, pink, blue, or coral
- Treat color as a confident single-color statement, not a gradient
- Keep all readable text in Space Grotesk
- Use generous pill and large-radius chrome
- Invert to off-white sections for editorial rhythm

### Don't
- Don't set body copy in the display face
- Don't blend accents into gradients — keep them as solid pops
- Don't crowd the canvas; massive type needs surrounding whitespace
- Don't introduce heavy drop shadows — depth is border + color
- Don't use more than one dominant accent in a single section
- Don't tighten body line-height — only display goes below 1.0

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, mono labels persist |
| Tablet | 600–1024px | 2-column grids begin, padding expands |
| Desktop | 1024–1280px | Full asymmetric layouts |
| Large Desktop | >1280px | Centered, generous margins |

### Touch Targets
- Buttons use 16px vertical padding for comfortable tap area
- Nav links spaced generously
- Badges keep 14px horizontal padding

### Collapsing Strategy
- Hero: 96px display scales down proportionally, keeps negative tracking
- Project grids: 2-column asymmetric → single column
- Navigation: horizontal links → hamburger menu
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Charcoal `{colors.background}`
- Heading text: Off-white `{colors.ink}`
- Body text: Secondary ink `{colors.ink-secondary}`
- Primary CTA: Acid lime `{colors.primary}` with dark text `{colors.on-primary}`
- Accent pops: `{colors.accent-pink}`, `{colors.accent-blue}`, `{colors.accent-coral}`
- Focus ring: Acid lime `{colors.primary}`

### Example Component Prompts
- "Create a hero on charcoal `{colors.background}`. Headline in Anton at 96px, line-height 0.95, letter-spacing -2px, color `{colors.ink}`. Sub-copy in Space Grotesk 20px weight 400, `{colors.ink-secondary}`. Acid lime pill CTA (`{colors.primary}` fill, dark text, 9999px radius, 16px 32px padding)."
- "Design an accent card: solid acid lime `{colors.primary}` background, dark text `{colors.on-primary}`, 24px radius, 32px padding. Title in Space Grotesk 22px weight 600."
- "Build a mono badge: `{colors.surface-soft}` background, `{colors.ink-secondary}` text, Space Mono uppercase 13px, 9999px radius, 6px 14px padding."

### Iteration Guide
1. Display face for headlines only; Space Grotesk for everything readable
2. One accent per section — solid fills, never gradients
3. Pill buttons, large-radius cards, hairline borders for depth
4. Sub-1.0 line-height belongs to display type only
5. Invert to off-white sections to pace the dark canvas

---

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