---
version: alpha
name: Dance Figures
description: A painterly gallery portfolio for contemporary figurative dance paintings — warm off-white canvas, serif-led editorial typography (Georgia), and a dusty muted palette of mauve, rose, and slate blue lifted straight from the artwork. Parallax-driven, image-first, gallery-quiet.
colors:
  # Canvas + ink
  background: "#e9e3de"        # warm off-white linen ground (rgb 233,228,223 family)
  surface: "#ffffff"          # white image plate / card
  surface-soft: "#edebed"     # cool gray panel
  ink: "#1f2937"              # dark slate — primary text
  ink-secondary: "#374151"    # secondary slate text
  ink-muted: "#6b7280"        # captions, metadata
  ink-pure: "#000000"

  # Painting-derived accents (muted, dusty)
  primary: "#2c3d58"          # deep slate blue — the anchor accent
  rose: "#b88393"             # dusty rose
  mauve: "#98717a"            # muted mauve
  plum: "#6a4756"             # deep plum
  sky: "#6e90c0"              # soft sky blue
  amber: "#b45309"            # burnt amber highlight
  gold: "#ce9d3d"             # muted gold

  # Soft painterly tints (flattened from rgba/rgb washes)
  tint-blush: "#eccbcc"       # pale blush wash (rgb 236,203,204)
  tint-clay: "#d9cfc9"        # warm clay (rgb 217,207,201)
  tint-sand: "#c7b1a4"        # sand (rgb 199,177,164)
  tint-taupe: "#b29f86"       # taupe (rgb 178,159,134)
  tint-periwinkle: "#8e86b2"  # soft periwinkle (rgb 142,134,178)

  # Neutral scale
  gray-200: "#e5e7eb"
  gray-300: "#e3e3e3"
  border: "#d8d2cc"           # warm hairline border over the linen ground
  divider: "#c2b6c2"          # mauve-tinted divider (rgb 194,182,194)

  # Overlays (flattened over canvas)
  scrim: "#1a1a1a"            # dark image scrim (rgba 0,0,0,0.5 over dark imagery)
  glass: "#f7f5f2"            # near-white translucent header (rgba 255,255,255,0.95)

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

typography:
  display-hero:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1px
  display-title:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.25px
  collection-title:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  card-title:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Georgia, 'Times New Roman', serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  ui-label:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px
  eyebrow:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 2px
  caption:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 50px
  full: 9999px

components:
  # Primary action — slate-blue fill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 28px

  # Outline / ghost on the linen ground
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    rounded: "{rounded.pill}"
    padding: 12px 28px
    borderColor: "{colors.ink}"

  # Eyebrow pill (collection tag)
  badge:
    backgroundColor: "{colors.tint-blush}"
    textColor: "{colors.plum}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Image plate — the core gallery unit
  card-artwork:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: 0px
    borderColor: "{colors.border}"

  # Collection / info card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.border}"

  # Translucent gallery header
  nav-bar:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-label}"
    padding: 20px 40px
    borderColor: "{colors.divider}"

  # Caption block under artwork
  caption-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: 12px 0px

  # Dark scrim overlay on full-bleed imagery
  image-overlay:
    backgroundColor: "{colors.scrim}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-large}"
    padding: 40px

  # Hairline divider rule
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
    width: 100%
---

# Dance Figures Design System

## Overview

Dance Figures is a browser-based gallery portfolio for contemporary figurative paintings of dancers — work built up from layered plastic sheets that capture gesture and motion. The site behaves less like a website and more like a hung exhibition: a custom parallax scroll moves large-scale artwork past the viewer at varying depths, and the interface deliberately recedes so the paintings hold the room. Chrome is whisper-quiet; the artwork is loud.

The palette is not invented — it is lifted directly from the canvases. Dusty rose (`{colors.rose}`), muted mauve (`{colors.mauve}`), deep plum (`{colors.plum}`), soft sky blue (`{colors.sky}`), and burnt amber (`{colors.amber}`) all read like pigments mixed on a palette rather than swatches pulled from a UI kit. They sit on a warm off-white linen ground (`{colors.background}`) — never pure white — so the page itself feels like primed canvas or gallery wall. Text is dark slate (`{colors.ink}`), softened away from true black to match the painterly warmth.

Typography is editorial and serif-led. Georgia carries every headline, collection title, and lead paragraph, giving the site the cadence of a printed exhibition catalogue. A clean system sans (Inter, with the native UI stack behind it) handles small functional text — labels, captions, navigation — so the serif voice stays reserved for the things that should feel authored. The contrast between a humanist serif for content and a neutral sans for chrome is the typographic signature.

**Key Characteristics:**
- Warm off-white linen canvas (`{colors.background}`) — gallery wall, never pure white
- Georgia serif for all display and reading text; Inter/system sans for UI chrome
- Painting-derived dusty palette: rose, mauve, plum, sky, amber, gold
- Parallax-driven, image-first layout — chrome recedes, artwork dominates
- Soft painterly tint washes (`{colors.tint-blush}`, `{colors.tint-sand}`) for backgrounds and accents
- Translucent near-white gallery header (`{colors.glass}`)
- Pill-shaped actions (`{rounded.pill}` = 50px) and barely-there hairline rules
- Generous whitespace and tall vertical rhythm between works

## Colors

### Canvas & Ink
- **Linen Ground** (`{colors.background}`): The default canvas — a warm off-white. Everything sits on it.
- **White Plate** (`{colors.surface}`): Image mats and info cards, where a crisper white frames the art.
- **Slate Ink** (`{colors.ink}`): Primary text — dark slate, softened from black.
- **Secondary Slate** (`{colors.ink-secondary}`): Sub-text and supporting copy.
- **Muted Ink** (`{colors.ink-muted}`): Captions, dates, artwork metadata.

### Painting Accents
- **Slate Blue** (`{colors.primary}`): The anchor accent — primary actions, active links.
- **Dusty Rose** (`{colors.rose}`): Warm figurative tone from the paintings.
- **Muted Mauve** (`{colors.mauve}`): Secondary warm accent.
- **Deep Plum** (`{colors.plum}`): Rich shadow tone, badge text.
- **Soft Sky** (`{colors.sky}`): Cool atmospheric accent.
- **Burnt Amber** (`{colors.amber}`): Highlight / hover warmth.
- **Muted Gold** (`{colors.gold}`): Rare gilded accent.

### Painterly Tints
- **Blush** (`{colors.tint-blush}`): Pale wash for badges and soft panels.
- **Clay** (`{colors.tint-clay}`): Warm neutral wash.
- **Sand** (`{colors.tint-sand}`): Earthen background tint.
- **Taupe** (`{colors.tint-taupe}`): Deeper earth wash.
- **Periwinkle** (`{colors.tint-periwinkle}`): Cool lavender wash.

### Lines & Overlays
- **Warm Border** (`{colors.border}`): Hairline framing on plates and cards.
- **Mauve Divider** (`{colors.divider}`): Tinted section rules.
- **Image Scrim** (`{colors.scrim}`): Dark overlay for legible text over imagery.
- **Glass Header** (`{colors.glass}`): Near-white translucent nav fill.

## Typography

### Font Family
- **Display & Reading**: `Georgia, 'Times New Roman', serif` — humanist serif for headlines, titles, lead paragraphs.
- **UI & Captions**: `Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif` — neutral sans for functional text.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px Georgia — opening title / cover |
| `display-title` | Large gallery section title |
| `section-heading` | Section headings |
| `collection-title` | Collection / series names |
| `card-title` | Individual artwork titles |
| `body-large` | Georgia lead paragraph / curatorial intro |
| `body` | Inter standard reading text |
| `body-small` | Secondary descriptive text |
| `ui-label` | Buttons, nav links |
| `eyebrow` | Tracked uppercase tags |
| `caption` | Artwork metadata, dates, dimensions |

### Principles
- **Serif speaks, sans labels**: Georgia is reserved for authored content; Inter handles utility. Never swap their roles.
- **Catalogue cadence**: Headlines run at near-1.1 line-height with slight negative tracking — printed-catalogue rhythm.
- **Uppercase tracking for eyebrows**: 2px letter-spacing on the tiny eyebrow labels signals "exhibition section".
- **Quiet weights**: Georgia stays at regular weight; emphasis comes from size and space, not bold.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base rhythm is generous — note the large jumps (`{spacing.2xl}` 64px → `{spacing.4xl}` 160px) that create gallery-sized vertical gaps between works.

### Grid & Container
- Image-first single-column flow for the main gallery, with full-bleed and inset works alternating
- Parallax layers: foreground artwork, mid-ground captions, background tint washes move at different speeds
- Max reading width ~720px for curatorial text; artwork breaks to full viewport width
- Translucent sticky header floats over the scrolling gallery

### Whitespace Philosophy
- **Gallery wall**: The linen ground is the negative space — works are hung with deliberate air around them.
- **Vertical breathing room**: Tall gaps (`{spacing.3xl}`–`{spacing.4xl}`) separate collections so each work is encountered alone.
- **Restraint as deference**: Minimal chrome, no heavy containers — the design defers to the paintings.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page ground, text |
| Hairline | `1px {colors.border}` frame | Image plates, cards |
| Parallax depth | Layered scroll speeds | Spatial depth between artwork and ground |
| Scrim | `{colors.scrim}` overlay | Text legibility over full-bleed imagery |

**Depth Philosophy**: Dance Figures gets its dimensionality from motion, not shadow. The custom parallax scroll separates planes — artwork, captions, and soft tint washes drift at different rates so the gallery feels deep without a single drop-shadow. Where flat depth is needed, a single warm hairline frames an image plate. Heavy shadows would break the gallery-wall illusion.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, dividers |
| `xs` | 3px | Tight image mats |
| `sm` | 4px | Artwork plates |
| `md` | 8px | Info cards |
| `lg` | 16px | Larger panels |
| `pill` | 50px | Buttons, tags |
| `full` | 9999px | Avatars, dots |

## Components

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

### Buttons
- **`button-primary`** — Slate-blue (`{colors.primary}`) pill, white label. The single confident action.
- **`button-ghost`** — Outline on the linen ground; quiet secondary action.

### Tags & Badges
- **`badge`** — Blush wash (`{colors.tint-blush}`) with plum text; tracked uppercase eyebrow type for collection labels.

### Cards
- **`card-artwork`** — White plate, hairline border, no radius drama; the core gallery unit.
- **`card`** — Curatorial info card, 8px radius, generous 32px padding.

### Navigation
- **`nav-bar`** — Translucent near-white (`{colors.glass}`) sticky header floating over the gallery, mauve hairline beneath.

### Distinctive Components
- **Parallax Gallery**: Large-scale works scroll past at layered depths; the defining interaction.
- **Caption Block**: Quiet Inter metadata (`{components.caption-block}`) beneath each work — title, medium, year.
- **Image Overlay**: Dark scrim (`{components.image-overlay}`) carrying serif text over full-bleed paintings.

## Do's and Don'ts

### Do
- Sit everything on the warm linen ground (`{colors.background}`), never pure white
- Use Georgia for all headlines, titles, and lead reading text
- Pull accents from the painting palette — rose, mauve, plum, sky, amber
- Let artwork run full-bleed; keep chrome minimal and translucent
- Use parallax and whitespace for depth instead of shadows
- Reserve uppercase 2px-tracked eyebrows for collection labels

### Don't
- Don't use pure-white page backgrounds — it kills the gallery-wall warmth
- Don't set body UI text in Georgia or headlines in Inter — keep their roles
- Don't add heavy drop-shadows; depth comes from motion and hairlines
- Don't saturate the accents — they are dusty, muted pigments, not bright UI colors
- Don't crowd the works; preserve the tall vertical gaps between collections
- Don't let chrome compete with the paintings — defer

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column stacked works, reduced parallax, tighter padding |
| Tablet | 600–1024px | Larger plates, parallax restored, header inset |
| Desktop | 1024–1440px | Full parallax gallery, full-bleed works |
| Large | >1440px | Centered gallery with generous side margins |

### Touch Targets
- Pill buttons keep 12px vertical padding for comfortable taps
- Nav links spaced generously in the translucent header
- Parallax intensity reduces on touch devices to protect scroll performance

### Collapsing Strategy
- Hero: 64px Georgia scales down proportionally, keeps negative tracking
- Gallery: alternating inset/full-bleed → uniform single column on mobile
- Captions: stay beneath their work at all sizes
- Header: full links → condensed/menu on mobile, glass fill preserved
- Section spacing: 160px gaps → ~64px on mobile

### Image Behavior
- Full-bleed paintings maintain aspect ratio, parallax depth reduced on small screens
- Image plates keep their warm hairline border at all sizes
- Tint washes simplify on mobile to protect performance

---

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