---
version: alpha
name: Sweatband Grape
description: "Retro-modern fitness UI: grape-violet actions on cream paper neutrals, with Playfair headlines that nod to 70s gym posters."
colors:
  background: "#faf6ee"
  foreground: "#1b1614"
  card: "#ffffff"
  card-foreground: "#1b1614"
  popover: "#ffffff"
  popover-foreground: "#1b1614"
  primary: "#7d3cc2"
  primary-foreground: "#ffffff"
  secondary: "#f1ebe0"
  secondary-foreground: "#2c2623"
  muted: "#f1ebe0"
  muted-foreground: "#585046"
  accent: "#efe5ff"
  accent-foreground: "#371857"
  destructive: "#c12a2c"
  destructive-foreground: "#ffffff"
  success: "#266723"
  success-foreground: "#ffffff"
  warning: "#ffdb85"
  warning-foreground: "#432a00"
  border: "#e0d8ca"
  input: "#c9bfaf"
  ring: "#9556dc"
  dark-background: "#1b1614"
  dark-foreground: "#faf6ee"
  dark-card: "#2c2623"
  dark-card-foreground: "#faf6ee"
  dark-popover: "#2c2623"
  dark-popover-foreground: "#faf6ee"
  dark-primary: "#ae7df0"
  dark-primary-foreground: "#220c3a"
  dark-secondary: "#403a33"
  dark-secondary-foreground: "#f1ebe0"
  dark-muted: "#403a33"
  dark-muted-foreground: "#c9bfaf"
  dark-accent: "#371857"
  dark-accent-foreground: "#efe5ff"
  dark-destructive: "#f66b62"
  dark-destructive-foreground: "#3a0408"
  dark-success: "#62b952"
  dark-success-foreground: "#0a240b"
  dark-warning: "#e0a21c"
  dark-warning-foreground: "#281700"
  dark-border: "#403a33"
  dark-input: "#585046"
  dark-ring: "#ae7df0"
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.025em
  display-md:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  heading-lg:
    fontFamily: Playfair Display
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Source Sans 3
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.005em
  heading-sm:
    fontFamily: Source Sans 3
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  body-lg:
    fontFamily: Source Sans 3
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Source Sans 3
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Source Sans 3
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Source Sans 3
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Source Sans 3
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.04em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 14px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Sweatband Grape

## Overview

Sweatband Grape is for fitness apps, studio booking and workout trackers. It borrows from 70s and 80s gym posters and class schedules: cream paper (neutral.50), deep grape (brand.600) and high-contrast Playfair Display headlines. Spacing, contrast and sizing stay modern. Controls are 44px tall, body text is 16px at 1.55 line height, and every text pair clears 4.5:1 in both modes, so screens stay readable mid-workout.

Moods: retro, energetic, confident, warm. Built for: fitness, wellness, sports-coaching. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Grape violet (brand, hue ~290) is the only action color. It is used for primary buttons, links, ring and selected states. Light primary is brand.600 (#7d3cc2) with white text, at about 6.4:1. Dark primary is brand.400 (#ae7df0) with brand.950 text, at about 5.9:1. Neutrals are tinted warm cream to espresso on purpose to set the print feel against the cool violet, and the 900/950 steps carry a faint plum undertone to tie them to the brand. Success is a slightly warm leaf green that sits next to the amber warning, so status colors share the cream palette's temperature. Destructive is a true red: danger.600 in light mode (white text, about 5.8:1) and danger.400 in dark mode. Its hue differs from the violet primary by well over ΔE 18 in both modes. Every scale darkens monotonically from 50 to 950. Dark mode is designed rather than inverted. The background is espresso neutral.950, card and popover are lifted one step to neutral.900, and muted-foreground is neutral.300 at about 9.9:1 on background.

- **Primary** `#7d3cc2` / dark `#ae7df0`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf6ee` / dark `#1b1614` on `#1b1614` / dark `#faf6ee`: page surface and body text.
- **Card** `#ffffff` / dark `#2c2623`: raised surfaces.
- **Secondary** `#f1ebe0` / dark `#403a33`: secondary buttons and quiet controls.
- **Muted** `#f1ebe0` / dark `#403a33` with **muted-foreground** `#585046` / dark `#c9bfaf`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#efe5ff` / dark `#371857`: highlights, selected rows, badges.
- **Destructive** `#c12a2c` / dark `#f66b62`, **Success** `#266723` / dark `#62b952`, **Warning** `#ffdb85` / dark `#e0a21c`: status only, always paired with an icon or label.
- **Border** `#e0d8ca` / dark `#403a33`, **Input** `#c9bfaf` / dark `#585046`, **Ring** `#9556dc` / dark `#ae7df0`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Heading sizes step by about ×1.4: 20, 28, 40, 56px (heading-md, heading-lg, display-md, display-lg). Text sizes step by 2px: 12, 14, 16, 18px. Playfair Display (600–800) carries display-lg, display-md and heading-lg only, never below 24px. Letter spacing tightens as size grows: -0.025em at 56px, -0.02em at 40px, -0.015em at 28px. Source Sans 3 (400–700) handles all UI: buttons (label, 14px/600, rendered at 700 in buttons), forms (body-md, 16px), tables (body-sm, 14px) and body copy (body-md, 1.55 line height). IBM Plex Mono (400/500) is for timers, reps, weights and IDs, set with typography.code at 14px/500, so its fixed-width figures do not shift as values change.

- Display: **Playfair Display** (fallback Georgia, serif)
- Interface: **Source Sans 3** (fallback system-ui, sans-serif)
- Mono: **IBM Plex Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Playfair Display | 56px | 1.05 | 800 |
| display-md | Playfair Display | 40px | 1.1 | 700 |
| heading-lg | Playfair Display | 28px | 1.2 | 700 |
| heading-md | Source Sans 3 | 20px | 1.3 | 700 |
| heading-sm | Source Sans 3 | 16px | 1.4 | 700 |
| body-lg | Source Sans 3 | 18px | 1.6 | 400 |
| body-md | Source Sans 3 | 16px | 1.55 | 400 |
| body-sm | Source Sans 3 | 14px | 1.5 | 400 |
| label | Source Sans 3 | 14px | 1.25 | 600 |
| caption | Source Sans 3 | 12px | 1.4 | 600 |
| code | IBM Plex Mono | 14px | 1.5 | 500 |

## Layout

Comfortable density on a 4px grid. Content max-width is 1120px. Buttons and inputs are 44px tall. Cards use 24px padding (space.6). Sections stack with 48px (space.12) or 64px (space.16) gaps so each block reads like a poster panel. Form fields sit 16px (space.4) apart.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Mostly flat. A 1px border token separates surfaces: neutral.200 in light mode, neutral.800 in dark mode. Cards use shadow.sm, a warm 8% shadow. shadow.md is a hard 4px offset violet-tinted shadow, a print-misregistration nod limited to one featured card or popover per screen. shadow.lg is a soft deep shadow reserved for dialogs. In dark mode, lift comes from surface steps (neutral.950 to neutral.900) rather than from shadows.

- sm: `0 1px 2px rgba(44, 38, 35, 0.08)`
- md: `4px 4px 0 rgba(55, 24, 87, 0.16)`
- lg: `0 20px 44px -10px rgba(34, 12, 58, 0.32)`

## Shapes

Medium radii: radius.md 8px on buttons and inputs, radius.lg 14px on cards, radius.xl 20px on dialogs and sheets, radius.full on badges and chips. Corners are rounded enough to feel friendly and retro without looking bubbly.

Radius scale: sm 4px, md 8px, lg 14px, xl 20px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view for the main action, such as 'Start workout' or 'Book class'. Render every other button as secondary (neutral.100 fill in light mode, neutral.800 in dark mode) or ghost.
- **Do:** Set Playfair Display only at heading-lg (28px), display-md (40px) and display-lg (56px). Use Source Sans 3 for buttons, inputs, tables and body copy.
- **Do:** Show timers, reps, weights and heart-rate values in IBM Plex Mono at typography.code (14px/500) or larger so digits do not shift as values update.
- **Do:** Keep buttons and inputs at their 44px height. Give icon-only buttons a 44×44px hit area.
- **Do:** Pair success, warning and destructive with an icon or text label in badges, alerts and form errors so status never depends on color alone.
- **Do:** Apply shadow.md (4px hard offset) to at most one featured card or popover per screen.
- **Do:** In light mode, place white cards on the neutral.50 background and separate them with the 1px border token (neutral.200). In dark mode, separate them by placing neutral.900 cards on the neutral.950 background.
- **Do:** Show focus with a 2px ring token outline at a 2px offset on every interactive element. Use brand.500 in light mode and brand.400 in dark mode.
- **Don't:** Don't use destructive red for calls to action, streaks or energy highlights. Reserve it for delete, cancel and error states.
- **Don't:** Don't use pure black (#000), pure white text in dark mode, or cool greys. Take text, borders and surfaces from the warm neutral ramp.
- **Don't:** Don't set Playfair Display below 24px, in all caps, or in button labels, badges or table cells.
- **Don't:** Don't place more than one shadow.md element in the same viewport.
- **Don't:** Don't use brand.300 or lighter as text on neutral.50 or white. It falls below 4.5:1.
- **Don't:** Don't use neutral.500 or lighter for body or helper text on light surfaces. Use muted-foreground (neutral.700), which reaches about 6.6:1 on muted.
- **Don't:** Don't apply gradients or neon glows. The retro feel comes from flat color, serif headlines and warm paper tones.