---
version: alpha
name: Valerian
description: Gallery-dark creative-developer portfolio — pure-black canvas with lavender-white ink, a single electric-green signal color, oversized clamp-scaled Neue Haas Grotesk Display headlines and PP Neue Montreal body, near-zero radius, and editorial whitespace.

colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0e0e0e"
  surface-soft: "#2a2a2a"
  surface-raised: "#2b2b2b"
  ink: "#f6f2fe"
  ink-secondary: "#c7c1cb"
  ink-muted: "#a19d94"
  ink-faint: "#353535"

  # Signal accent
  accent: "#2fff00"
  on-accent: "#000000"

  # Borders / hairlines (flattened over black canvas)
  border: "#1a1a18"          # was #f6f2fe1f over #000
  border-faint: "#141413"    # was #f6f2fe14 over #000
  divider: "#2a2a2a"

  # On-color
  on-ink: "#000000"
  on-surface: "#f6f2fe"

  # Neutral helpers
  gray-300: "#d1d5dc"
  gray-pure-white: "#ffffff"

typography:
  display-hero:
    fontFamily: "Manrope, 'Neue Haas Grotesk Display', Arial, sans-serif"
    fontSize: 150px
    fontWeight: 350
    lineHeight: 0.95
    letterSpacing: -3px
  display-xl:
    fontFamily: "Manrope, 'Neue Haas Grotesk Display', Arial, sans-serif"
    fontSize: 72px
    fontWeight: 350
    lineHeight: 1.00
    letterSpacing: -2px
  section-heading:
    fontFamily: "Manrope, 'Neue Haas Grotesk Display', Arial, sans-serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  heading:
    fontFamily: "Manrope, 'Neue Haas Grotesk Display', Arial, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  title:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.4px
  caption:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px
  micro:
    fontFamily: "Manrope, 'PP Neue Montreal', Arial, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.6px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  # Accent / primary CTA — the rare green moment
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Ghost / outline button on black
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Inverted solid button (lavender-white on black)
  button-inverted:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Project / media card — dark raised, near-zero radius
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border}"

  card-raised:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border-faint}"

  # Pill tag / label
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Accent badge — green status
  badge-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Input on dark canvas
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.accent}"

  # Minimal top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Hairline divider between sections
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
---

# Valerian Design System

## Overview

Valerian is a creative-developer's portfolio that treats the browser like a black gallery wall. The canvas is pure black (`{colors.background}`), the text a soft lavender-white (`{colors.ink}`) rather than clinical pure white, and the entire interface is built around a single rule: silence everything, then let one electric-green signal (`{colors.accent}`) cut through. The result reads as confident, editorial, and unmistakably "studio" — work-first, chrome-last.

Typography carries the personality. Headlines are set in Neue Haas Grotesk Display at a light-to-medium weight and scaled with aggressive `clamp()` ranges — the hero can swell to 150px (`clamp(56px, 10vw, 150px)` in the live CSS), filling the viewport edge-to-edge with tight negative tracking. Body and UI copy step down to PP Neue Montreal, a humanist grotesque that keeps long-form reading warm and legible against the dark field. The pairing is two grotesques in conversation: one oversized and structural, one quiet and functional.

The geometry is deliberately flat. Radius is near-zero (`{rounded.none}`–`{rounded.sm}`); the most prominent rounded element is the pill — used for the rare accent CTA and small tags. There are almost no drop shadows; depth comes from barely-there hairline borders (`{colors.border}`, a 12%-opacity lavender flattened over black) and from raised near-black surfaces (`{colors.surface}` → `{colors.surface-raised}`). Whitespace does the heavy lifting, with large vertical rhythm between sections.

**Key Characteristics:**
- Pure-black canvas (`{colors.background}`) with lavender-white ink (`{colors.ink}`) — warm, not clinical
- A single electric-green signal color (`{colors.accent}`, `#2fff00`) used sparingly for CTAs and status
- Oversized `clamp()`-scaled Neue Haas Grotesk Display headlines with tight negative tracking
- PP Neue Montreal humanist grotesque for body and UI
- Near-zero radius; the pill is the only round shape, reserved for accents and tags
- Depth from hairline borders and raised near-black surfaces, not shadows
- Editorial whitespace and large section rhythm
- Restraint as the brand: color is a signal, never decoration

## Colors

### Canvas & Ink
- **Black Canvas** (`{colors.background}`): The page background — pure `#000000`.
- **Surface** (`{colors.surface}`): Cards, media wells, inputs — a near-black `#0e0e0e`.
- **Surface Soft** (`{colors.surface-soft}`): Muted chips and tags.
- **Surface Raised** (`{colors.surface-raised}`): Lifted dark panels.
- **Lavender Ink** (`{colors.ink}`): Primary text and headings — soft `#f6f2fe`, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted lavender for secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Warm-gray captions and meta.
- **Ink Faint** (`{colors.ink-faint}`): Disabled / lowest-emphasis text.

### Signal Accent
- **Electric Green** (`{colors.accent}`): The single brand signal — CTAs, hover, status dots. Used sparingly.
- **On Accent** (`{colors.on-accent}`): Black text on the green fill for maximum contrast.

### Borders & Dividers
- **Border** (`{colors.border}`): Hairline outline — 12%-opacity lavender flattened over black.
- **Border Faint** (`{colors.border-faint}`): The faintest separation, for raised panels.
- **Divider** (`{colors.divider}`): 1px section hairline.

### On-Color
- **On Ink** (`{colors.on-ink}`): Black text on lavender-white inverted buttons.

## Typography

### Font Family
- **Display**: `Neue Haas Grotesk Display` (Light 45 / Medium 65), fallback `Manrope, Arial, sans-serif`
- **Body / UI**: `PP Neue Montreal` (Book / Regular / Medium / Bold), fallback `Manrope, Arial, sans-serif`
- Both are grotesques; Display is structural and oversized, Montreal is humanist and functional.

### 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` | Viewport-filling hero (`clamp` up to 150px) |
| `display-xl` | Large statement headlines |
| `section-heading` | Section titles |
| `heading` | Sub-section headings |
| `sub-heading` | Lead-in copy, large intros |
| `title` | Card and project titles |
| `body-large` | Featured paragraphs |
| `body` | Standard reading text |
| `body-small` | UI text, secondary copy |
| `label` | Buttons, nav links, small UI |
| `caption` | Tags, metadata |
| `micro` | Tiny labels, legal |

### Principles
- **Oversized display, quiet body**: headlines push to extreme sizes with tight negative tracking; body stays calm and legible.
- **`clamp()` everywhere**: hero type scales fluidly with the viewport rather than at discrete breakpoints.
- **Light weights at large sizes**: Display is set Light/Medium (350–400), never heavy — scale provides the impact, not weight.
- **Lavender, not white**: ink is `#f6f2fe`, keeping text soft against pure black.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Editorial rhythm: large jumps from `{spacing.3xl}` to `{spacing.5xl}` between major sections.

### Grid & Container
- Full-bleed hero, edge-to-edge media
- Generous side margins on content blocks
- Asymmetric, editorial column layouts rather than rigid card grids

### Whitespace Philosophy
- **Gallery emptiness**: black space is the frame; work sits inside it.
- **Large vertical rhythm**: heavy padding between sections lets oversized type breathe.
- **Restraint**: chrome is hairline-thin so the work and the one green accent carry attention.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — flat editorial blocks, media |
| `sm` | 4px | Cards, inputs, subtle softening |
| `md` | 8px | Larger panels |
| `pill` | 9999px | Accent CTAs, tags, status pills |

## Components

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

### Buttons
- **`button-primary`** — The rare green moment: `{colors.accent}` fill, black text, pill.
- **`button-secondary`** — Ghost button: black fill, lavender ink, hairline border.
- **`button-inverted`** — Lavender-white fill with black text for high-contrast CTAs.

### Cards
- **`card`** — Near-black surface, hairline border, near-zero radius.
- **`card-raised`** — Slightly lifted dark panel for nested content.

### Badges & Tags
- **`badge`** — Muted dark pill with secondary lavender text.
- **`badge-accent`** — Green status pill with black text.

### Inputs
- **`input`** — Near-black surface, hairline border; focus swaps the border to `{colors.accent}`.

### Navigation
- **`nav-bar`** — Minimal black header, lavender label links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas pure black and the ink lavender-white (`#f6f2fe`), not pure white
- Reserve `{colors.accent}` green for CTAs, hover, and status — one signal, used sparingly
- Set headlines oversized with `clamp()` and tight negative tracking
- Use light/medium display weights — let size, not weight, create impact
- Build depth from hairline borders and raised near-black surfaces
- Lean on whitespace and editorial asymmetry

### Don't
- Don't flood the page with green — it stops being a signal
- Don't use heavy radius; this system is flat (pill is the only exception)
- Don't add drop shadows — depth is hairline and surface-based
- Don't use pure white text — the lavender tint is the brand
- Don't set display type heavy/bold at large sizes
- Don't crowd sections; the whitespace is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero clamps to ~56px floor |
| Tablet | 600–1024px | Two-column editorial blocks emerge |
| Desktop | 1024–1440px | Full asymmetric layout, large margins |
| Large | >1440px | Hero swells toward 150px, generous margins |

### Collapsing Strategy
- Hero: `clamp(56px, 10vw, 150px)` scales fluidly, tracking held proportionally
- Navigation: inline links → minimal toggle on mobile
- Media: edge-to-edge full-bleed at all sizes
- Section spacing: `{spacing.5xl}` → tightens on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black `{colors.background}`
- Heading + body text: Lavender Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent / CTA: Electric Green `{colors.accent}` (black text on it)
- Borders: hairline `{colors.border}`

### Example Component Prompts
- "Create a hero on pure black. Headline in Neue Haas Grotesk Display, `clamp(56px,10vw,150px)`, weight 350, line-height 0.95, letter-spacing -3px, color `{colors.ink}`. Sub-copy 20px PP Neue Montreal in `{colors.ink-secondary}`. One pill CTA: `{colors.accent}` fill, black text."
- "Design a project card: `{colors.surface}` background, hairline `{colors.border}`, 4px radius, no shadow. Title 24px weight 500 `{colors.ink}`, meta in `{colors.ink-muted}`."
- "Build a tag: `{colors.surface-soft}` pill, `{colors.ink-secondary}` text, 11px weight 500."

### Iteration Guide
1. Black canvas, lavender ink — never pure white text
2. Green is a signal: at most one or two green elements per view
3. Oversized clamp headlines, light display weight, tight negative tracking
4. Flat geometry — 0–4px radius, pill only for accents/tags
5. Depth = hairline borders + raised near-black surfaces, 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 Valerian. Brand names and trademarks belong to their respective owners.