Sweatband Grape

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• 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.
• Keep buttons and inputs at their 44px height. Give icon-only buttons a 44×44px hit area.
• Pair success, warning and destructive with an icon or text label in badges, alerts and form errors so status never depends on color alone.
• Apply shadow.md (4px hard offset) to at most one featured card or popover per screen.
• 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.
• 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 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 set Playfair Display below 24px, in all caps, or in button labels, badges or table cells.
• Don't place more than one shadow.md element in the same viewport.
• Don't use brand.300 or lighter as text on neutral.50 or white. It falls below 4.5:1.
• 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 apply gradients or neon glows. The retro feel comes from flat color, serif headlines and warm paper tones.