---
version: alpha
name: Lagoon Stretch
description: "Calm botanical fitness UI: lagoon-teal actions on warm stone neutrals, rounded Sora headlines and soft, low-shadow surfaces."
colors:
  background: "#faf8f4"
  foreground: "#1a1814"
  card: "#fffdf9"
  card-foreground: "#1a1814"
  popover: "#fffdf9"
  popover-foreground: "#1a1814"
  primary: "#146b74"
  primary-foreground: "#ffffff"
  secondary: "#f1eee8"
  secondary-foreground: "#2b2823"
  muted: "#f1eee8"
  muted-foreground: "#585349"
  accent: "#d5f6f7"
  accent-foreground: "#13464b"
  destructive: "#b83731"
  destructive-foreground: "#ffffff"
  success: "#2e671c"
  success-foreground: "#ffffff"
  warning: "#f9da88"
  warning-foreground: "#3f2c06"
  border: "#e2ded5"
  input: "#cac5ba"
  ring: "#148590"
  dark-background: "#1a1814"
  dark-foreground: "#faf8f4"
  dark-card: "#24211c"
  dark-card-foreground: "#faf8f4"
  dark-popover: "#2b2823"
  dark-popover-foreground: "#faf8f4"
  dark-primary: "#46bfc7"
  dark-primary-foreground: "#072c31"
  dark-secondary: "#413d35"
  dark-secondary-foreground: "#f1eee8"
  dark-muted: "#413d35"
  dark-muted-foreground: "#cac5ba"
  dark-accent: "#13464b"
  dark-accent-foreground: "#d5f6f7"
  dark-destructive: "#ea7262"
  dark-destructive-foreground: "#35090f"
  dark-success: "#72b853"
  dark-success-foreground: "#0e2309"
  dark-warning: "#d7a427"
  dark-warning-foreground: "#271a03"
  dark-border: "#413d35"
  dark-input: "#585349"
  dark-ring: "#46bfc7"
typography:
  display-lg:
    fontFamily: Sora
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.03em
  display-md:
    fontFamily: Sora
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Sora
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  heading-md:
    fontFamily: Sora
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  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 16px
    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 16px
    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
---

# Lagoon Stretch

## Overview

Lagoon Stretch is for fitness products built around steady habits rather than intensity: yoga, trail running, mobility and mindful strength. It replaces the usual neon-on-black fitness palette with river teal, leaf green and warm stone. Screens should read as calm and encouraging, with one clear action per view and generous space between sections.

Moods: calm, organic, natural, gentle. Built for: fitness, wellness, outdoor. 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

Lagoon (brand.700 #146b74 in light, brand.400 #46bfc7 in dark) is the only action hue. It carries primary buttons, links and the focus ring (brand.600 light, brand.400 dark). Neutrals are warm stone with a deliberate yellow-brown tint, used for every surface and text tone. Status scales follow the same chroma curve as brand: soft at 50–200, strongest at 400–600, deep and desaturated at 800–950. Success is a leaf green and warning a dried amber, both warm-leaning to sit with the stone neutrals. Danger is a clay red set far from teal in hue (ΔE2000 well above 18 in both modes), so errors never read as brand. In light mode, foreground on background and every *-foreground pair clear 5:1, and muted-foreground (neutral.700) clears 6:1 on both background and muted. In dark mode, background is neutral.950 #1a1814 and card is lifted one small step to #24211c. Popovers go to neutral.900 so they separate from cards. Dark primary brand.400 reaches 6.6:1 against its brand.950 foreground, so it reads bright without tipping into neon.

- **Primary** `#146b74` / dark `#46bfc7`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#faf8f4` / dark `#1a1814` on `#1a1814` / dark `#faf8f4`: page surface and body text.
- **Card** `#fffdf9` / dark `#24211c`: raised surfaces.
- **Secondary** `#f1eee8` / dark `#413d35`: secondary buttons and quiet controls.
- **Muted** `#f1eee8` / dark `#413d35` with **muted-foreground** `#585349` / dark `#cac5ba`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#d5f6f7` / dark `#13464b`: highlights, selected rows, badges.
- **Destructive** `#b83731` / dark `#ea7262`, **Success** `#2e671c` / dark `#72b853`, **Warning** `#f9da88` / dark `#d7a427`: status only, always paired with an icon or label.
- **Border** `#e2ded5` / dark `#413d35`, **Input** `#cac5ba` / dark `#585349`, **Ring** `#148590` / dark `#46bfc7`.

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

## Typography

The scale is a major third (1.25) from a 16px body: 12, 14, 16, 18, 20, 30, 38, 48. heading-lg skips the 25px step so heading tiers stay visually distinct. Sora (500/600/700) sets display-lg, display-md, heading-lg and heading-md. Tracking tightens with size: -0.03em at 48px, -0.025em at 38px, -0.02em at 30px and -0.01em at 20px. Plus Jakarta Sans (400/500/600/700) sets all functional text. Body sizes use 1.6 line height (body-sm 1.55) for comfortable reading of workout instructions. JetBrains Mono (400/500) is used for timers, rep counts and code, with tabular figures.

- Display: **Sora** (fallback system-ui, sans-serif)
- Interface: **Plus Jakarta Sans** (fallback system-ui, sans-serif)
- Mono: **JetBrains Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Sora | 48px | 1.08 | 600 |
| display-md | Sora | 38px | 1.12 | 600 |
| heading-lg | Sora | 30px | 1.2 | 600 |
| heading-md | Sora | 20px | 1.3 | 500 |
| heading-sm | Plus Jakarta Sans | 16px | 1.4 | 600 |
| body-lg | Plus Jakarta Sans | 18px | 1.6 | 400 |
| body-md | Plus Jakarta Sans | 16px | 1.6 | 400 |
| body-sm | Plus Jakarta Sans | 14px | 1.55 | 400 |
| label | Plus Jakarta Sans | 14px | 1.25 | 600 |
| caption | Plus Jakarta Sans | 12px | 1.4 | 500 |
| code | JetBrains Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px grid. Cards use 24px padding (space.6). Buttons and inputs are 44px tall, and content columns cap at 1120px. Major sections are separated by at least 32px (space.8), and by 48px (space.12) on marketing or summary screens.

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

## Elevation & Depth

Mostly flat. Cards sit on the page with a 1px border token and shadow.sm. shadow.md is for popovers and menus, and shadow.lg for sheets and dialogs. All shadows are tinted with warm brown rgba(43,40,35) instead of black. In dark mode, separation comes from surface lightness (background → card → popover) and the border token, not from shadow.

- sm: `0 1px 2px rgba(43, 40, 35, 0.06)`
- md: `0 6px 16px -4px rgba(43, 40, 35, 0.12)`
- lg: `0 20px 44px -10px rgba(43, 40, 35, 0.20)`

## Shapes

Rounded throughout. Controls use radius.md (10px), cards radius.lg (16px), and hero or media panels radius.xl (24px). radius.sm (6px) is the minimum, used for checkboxes and inline tags. radius.full is limited to badges, chips, avatars and progress tracks.

Radius scale: sm 6px, md 10px, lg 16px, xl 24px, 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 example Start workout). Make other actions secondary (neutral.100 surface, light) or ghost buttons.
- **Do:** Keep buttons and inputs at 44px height with radius.md (10px). Inputs use body-md (16px) so mobile browsers don't zoom on focus.
- **Do:** Use Sora only from heading-md (20px) up. Set workout copy, form labels, lists and buttons in Plus Jakarta Sans.
- **Do:** Set timers, rep counts and heart-rate figures in JetBrains Mono (code style) with font-variant-numeric: tabular-nums.
- **Do:** Show keyboard focus as a 2px ring using the ring token (brand.600 light, brand.400 dark) with a 2px offset.
- **Do:** Separate cards from the page with the 1px border token and shadow.sm. Use shadow.md for popovers and menus, and shadow.lg for sheets and dialogs.
- **Do:** Pair success, warning and destructive colors with an icon or text label so meaning never depends on color alone.
- **Do:** Leave at least space.8 (32px) between major sections, and space.12 (48px) on summary screens.
- **Don't:** Don't use destructive (danger.600 light, danger.400 dark) for streaks, intensity or effort indicators. Reserve it for errors and irreversible actions.
- **Don't:** Don't use pure black, pure white or cool grey page backgrounds. Light background is neutral.50, and dark background is neutral.950 with card #24211c.
- **Don't:** Don't use brand.500 or lighter as text or as the focus ring on light surfaces, because it falls below 3:1. Use brand.600 or darker.
- **Don't:** Don't place muted-foreground text on brand or status surfaces. Use the matching *-foreground token instead.
- **Don't:** Don't go below radius.sm (6px) on anything except dividers. Keep cards at radius.lg (16px).
- **Don't:** Don't set Sora below 20px, in all caps, or lighter than weight 500. Don't loosen letterSpacing on display-lg or display-md.
- **Don't:** Don't use neon colors, high-saturation gradients or black shadows. In dark mode, separate surfaces with lightness steps and the border token.
- **Don't:** Don't stack more than one accent surface (brand.100 light, brand.900 dark) per screen region. It is for selected states and gentle highlights.