/* ============================================================ REPS Design System — Colors & Type Source: reps/lib/core/designsystem/ (app_colors.dart, app_typography.dart, app_spacing.dart, app_radius.dart) + docs/architecture/Design System.md ============================================================ */ /* ---------- Fonts ---------- */ /* Geist is bundled locally. Anton + Inter loaded from Google Fonts (matches `google_fonts` package usage in Flutter app). */ /* Anton + Inter are loaded from the page ; the @import from the design export was removed to avoid a duplicate render-blocking font request. */ @font-face { font-family: 'Geist'; src: url('fonts/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('fonts/Geist-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------ LIGHT THEME (default) ------------------------------------------------------------ */ /* Surfaces */ --surface-primary: #FFFFFF; --surface-card: #F4F4F4; --surface-elevated: #FFFFFF; --surface-inverse: #000000; --surface-input: #E0E0E0; --surface-row: #EAEAEA; --surface-badge: #D6D6D6; --surface-btn-outline: #CCCCCC; /* Foreground */ --fg-primary: #000000; --fg-secondary: #333333; --fg-muted: #666666; --fg-inverse: #FFFFFF; /* Borders */ --border-card: #CCCCCC; --border-subtle: #E0E0E0; /* Accents ---------------------------------------------------------- The accent system is split by ROLE, not by hue: --accent-primary → FILL color. Action affordances only: primary CTAs, the "start" column in hero cards, completed-day circles on the weekly calendar. ALWAYS pairs with --fg-on-accent (white) sitting on top. --accent-ink → TEXT / THIN-OUTLINE color. For accent-colored TEXT, an ICON, or a 1–2px BORDER on a light surface, use this neutral ink instead of the fill (a hairline of the fill can read low-contrast). --accent-tint → Low-alpha fill of the accent hue, for subtle selection backgrounds and row highlights. Reserve the accent palette for ACTION (primary CTAs + current/next-set affordance). Use --fg-primary for STATE (completed checks, progress bar fills, streak numbers, completed chips). */ --accent-primary: #007AFF; /* iOS blue — PRIMARY; FILLS only */ --accent-primary-rgb: 0,122,255; /* triplet for rgba() tints */ --accent-ink: var(--fg-primary); /* text/outline role now uses neutral ink (was darker green — user preferred black) */ --accent-tint: rgba(0, 122, 255, 0.10); --accent-success: #007AFF; --accent-danger: #FF3B3B; --accent-warning: #FFD600; --fg-on-accent: #FFFFFF; /* Heatmap intensity ramp (light/dark shared) */ --heat-0: var(--surface-card); --heat-1: #B8DAFF; --heat-2: #66AFFF; --heat-3: var(--accent-primary); /* Device-like keyboard surfaces — iPhone keyboard, follows theme. Light: pale-gray tray, white letter keys, gray function keys. Dark values are overridden in [data-theme="dark"] below. */ --kbd-bg: #D1D4DB; --kbd-key: #FFFFFF; --kbd-key-alt: #ABB0BB; --kbd-fg: #000000; --kbd-fg-muted: rgba(0,0,0,0.55); --kbd-fg-faint: rgba(0,0,0,0.3); --kbd-key-shadow: rgba(0,0,0,0.30); --kbd-rod: linear-gradient(to bottom, #888, #e0e0e0 40%, #fff 50%, #e0e0e0 60%, #888); /* ------------------------------------------------------------ TYPE FAMILIES ------------------------------------------------------------ */ --font-heading: 'Anton', 'Oswald', 'Impact', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-caption: 'Geist', 'Inter', system-ui, sans-serif; /* ------------------------------------------------------------ SPACING (4px base) ------------------------------------------------------------ */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; /* Semantic spacing (from Pencil) */ --gap-card-inner: 12px; --gap-section: 24px; --card-padding: 16px; --screen-padding: 16px; --button-height: 48px; --icon-size: 20px; /* ------------------------------------------------------------ RADII ------------------------------------------------------------ */ --radius-none: 0; --radius-sm: 8px; /* steppers, segmented toggle */ --radius-md: 12px; /* history card, inputs */ --radius-lg: 16px; /* large cards */ --radius-xl: 24px; /* buttons, stat blocks, pills */ --radius-full: 20px; /* day circles (40px tall) */ --radius-circle: 999px; /* ------------------------------------------------------------ ELEVATION The app is visually FLAT — no shadows by default. Elevation is expressed through surface color steps (card → elevated → inverse). The rare shadow is a 1px green outline instead of a blur. */ --shadow-none: none; --shadow-sheet: 0 -6px 24px rgba(0, 0, 0, 0.08); /* bottom sheets */ --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.18); /* dialogs */ /* Accent "glow" used ONLY on the accent-bordered hero cards (NextWorkoutCard, CompletedSummaryCard, OnboardingCard). */ --accent-border: 1px solid var(--accent-primary); /* Bottom tab bar — active pill. Light: black-on-white inverse surface. Dark mode overrides below soften this to a gray so the active tab doesn't read as a glaring white slab. */ --tab-active-bg: #000000; --tab-active-fg: #FFFFFF; /* Splash screen — light: white field, accent wordmark; dark override below flips to accent field, black wordmark. */ --splash-field: var(--surface-primary); --splash-ink: var(--accent-primary); } [data-theme="dark"] { /* --accent-ink inherits from :root (now var(--fg-primary), which itself flips to white in dark mode — so no override needed here). */ --splash-field: var(--accent-primary); --splash-ink: #000000; --surface-primary: #0A0A0A; --surface-card: #141414; --surface-elevated: #1A1A1A; --surface-inverse: #FFFFFF; --surface-input: #262626; --surface-row: #1A1A1A; --surface-badge: #333333; --surface-btn-outline: #333333; --fg-primary: #F0F0F0; --fg-secondary: #CCCCCC; --fg-muted: #888888; --fg-inverse: #000000; --border-card: #333333; --border-subtle: #222222; /* Bottom tab bar — softer active pill in dark mode. */ --tab-active-bg: #2E2E2E; --tab-active-fg: #F0F0F0; /* iPhone keyboard — dark: near-black tray, translucent gray keys. */ --kbd-bg: #1B1B1D; --kbd-key: #6B6B6E; --kbd-key-alt: #43434A; --kbd-fg: #FFFFFF; --kbd-fg-muted: rgba(255,255,255,0.6); --kbd-fg-faint: rgba(255,255,255,0.3); --kbd-key-shadow: rgba(0,0,0,0.55); } /* ============================================================ SEMANTIC TYPE CLASSES Map 1:1 to AppTypography. Use these instead of raw size/weight. ============================================================ */ /* --- Anton: headings / display --- */ .t-display-lg { font-family: var(--font-heading); font-weight: 400; font-size: 32px; letter-spacing: 0.5px; line-height: 1.0; } .t-display-md { font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.0; } .t-display-sm { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.05; } /* card title */ .t-headline-lg { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.1; } /* onboarding title */ .t-headline-md { font-family: var(--font-heading); font-weight: 400; font-size: 18px; line-height: 1.1; } /* stat block value */ /* REPS wordmark style — Anton italic 48, letter-spacing 4, neon green */ .t-wordmark { font-family: var(--font-heading); font-size: 48px; font-weight: 400; font-style: italic; letter-spacing: 4px; color: var(--accent-primary); line-height: 1; } /* --- Inter: body / titles / buttons --- */ .t-title-lg { font-family: var(--font-body); font-size: 18px; font-weight: 600; } .t-title-md { font-family: var(--font-body); font-size: 16px; font-weight: 600; } .t-title-sm { font-family: var(--font-body); font-size: 15px; font-weight: 600; } .t-body-lg { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; } .t-body-md { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.5; } .t-body-sm { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.45; } .t-caption { font-family: var(--font-body); font-size: 12px; font-weight: 400; } .t-table-header { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .t-button-label { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .t-button-label-sm { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .t-num-key { font-family: var(--font-body); font-size: 22px; font-weight: 500; } .t-quick-change { font-family: var(--font-body); font-size: 15px; font-weight: 700; } .t-segment-active { font-family: var(--font-body); font-size: 13px; font-weight: 600; } .t-segment-inactive{ font-family: var(--font-body); font-size: 13px; font-weight: 500; } /* --- Geist: labels / eyebrows / captions --- */ .t-label-lg { font-family: var(--font-caption); font-size: 12px; font-weight: 500; letter-spacing: 1px; } .t-label-md { font-family: var(--font-caption); font-size: 14px; font-weight: 500; } .t-label-sm { font-family: var(--font-caption); font-size: 10px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .t-eyebrow { font-family: var(--font-caption); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } /* --- Semantic HTML tags (opinionated defaults for this system) --- */ body { font-family: var(--font-body); color: var(--fg-primary); background: var(--surface-primary); } h1 { font-family: var(--font-heading); font-weight: 400; font-size: 32px; letter-spacing: 0.5px; line-height: 1; margin: 0; } h2 { font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1; margin: 0; } h3 { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.05; margin: 0; } h4 { font-family: var(--font-heading); font-weight: 400; font-size: 18px; margin: 0; } p { font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin: 0; color: var(--fg-secondary); } small { font-family: var(--font-caption); font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--fg-muted); text-transform: uppercase; } code { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }