Lagoon Stretch

• DisplaySora
• BodyPlus Jakarta Sans
• MonoJetBrains Mono

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.

Color

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.

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.

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.

Elevation

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.

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.

Do

• Use one primary button per view (for example Start workout). Make other actions secondary (neutral.100 surface, light) or ghost buttons.
• Keep buttons and inputs at 44px height with radius.md (10px). Inputs use body-md (16px) so mobile browsers don't zoom on focus.
• Use Sora only from heading-md (20px) up. Set workout copy, form labels, lists and buttons in Plus Jakarta Sans.
• Set timers, rep counts and heart-rate figures in JetBrains Mono (code style) with font-variant-numeric: tabular-nums.
• Show keyboard focus as a 2px ring using the ring token (brand.600 light, brand.400 dark) with a 2px offset.
• 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.
• Pair success, warning and destructive colors with an icon or text label so meaning never depends on color alone.
• 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 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 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 place muted-foreground text on brand or status surfaces. Use the matching *-foreground token instead.
• Don't go below radius.sm (6px) on anything except dividers. Keep cards at radius.lg (16px).
• 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 use neon colors, high-saturation gradients or black shadows. In dark mode, separate surfaces with lightness steps and the border token.
• 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.