/* * Laelaps Design Tokens * Source of truth for all Laelaps web/app styles. * Reference: knowledge/laelaps/laelaps-brand-kit.md * * Usage: * Import this file once at the root of the app. * Reference tokens via var(--token-name). * Never hardcode hex values -- always use a token. * * Dark mode is the default. Light mode overrides live in the * @media (prefers-color-scheme: light) block and the [data-theme="light"] * selector for manual toggling. */ /* ===================================================================== BRAND CORE The four canonical brand colors. Do not modify. ===================================================================== */ :root { --brand-navy: #090E21; --brand-amber: #F5A623; --brand-white: #FFFFFF; --brand-black: #000000; } /* ===================================================================== DARK MODE (default) ===================================================================== */ :root { /* ------------------------------------------------------------------- SURFACE RAMP Navy elevates upward from canvas. Each step is lighter than the last. Canvas -> surface -> surface-raised -> surface-overlay ------------------------------------------------------------------- */ --c-canvas: #090E21; /* primary background, app canvas */ --c-surface: #0F1633; /* card backgrounds at rest */ --c-surface-raised: #162045; /* elevated panels, bottom sheets */ --c-surface-overlay: #1C2858; /* modals, tooltips, context menus */ /* ------------------------------------------------------------------- BORDERS Subtle to strong. All within the navy family, cool-shifted. ------------------------------------------------------------------- */ --c-border-subtle: #22336A; /* quiet separators, section dividers */ --c-border: #2E4380; /* standard component borders */ --c-border-strong: #3C558A; /* emphasis borders (not for focus rings) */ /* ------------------------------------------------------------------- TEXT Primary achieves ~15.5:1 on canvas (AAA). Secondary achieves ~5.5:1 on canvas (AA). Disabled is intentionally below 4.5:1 -- for disabled controls only. Inverse is for text on amber or white fills. ------------------------------------------------------------------- */ --c-text-primary: #EEF0FA; /* headings, body copy */ --c-text-secondary: #8A94BF; /* labels, captions, metadata */ --c-text-disabled: #3D4878; /* disabled control labels -- low contrast by design */ --c-text-inverse: #090E21; /* text on amber fills or white fills */ /* ------------------------------------------------------------------- AMBER ACCENT Amber is rationed. One amber element per view. It is the star in the mark, the live-case indicator, the crisis CTA. ------------------------------------------------------------------- */ --c-amber: #F5A623; /* THE accent: star, CTA, live alert */ --c-amber-hover: #C8820F; /* hover and pressed states on amber buttons */ --c-amber-deep: #9C6108; /* amber text on light surfaces (light mode) */ --c-amber-muted: #3D2A08; /* amber bg tint: badge backgrounds, alerts */ --c-amber-text: #F5A623; /* amber as text/icon on navy: 9.7:1 (AAA) */ /* ------------------------------------------------------------------- NEUTRAL GRAYS (cool-tinted, hue ~230) Harmonize with navy rather than reading as generic warm gray. ------------------------------------------------------------------- */ --c-neutral-50: #F5F6FB; /* light mode canvas */ --c-neutral-100: #E8EAF5; /* light mode surface */ --c-neutral-200: #CDD2E8; /* light mode borders */ --c-neutral-300: #A8B0D0; /* disabled text in light mode */ --c-neutral-400: #7880A8; /* secondary text in light mode / muted on dark */ --c-neutral-500: #526088; /* mid-tone labels */ --c-neutral-600: #3A4870; /* muted on dark */ --c-neutral-700: #263058; /* near-border */ --c-neutral-800: #172040; /* deep neutral surface */ --c-neutral-900: #0D1430; /* near-canvas */ /* ------------------------------------------------------------------- SEMANTIC COLORS Warning shares the amber hex. Distinguish warning from the live-case indicator by always pairing it with an explicit icon and copy. ------------------------------------------------------------------- */ --c-success: #22C55E; /* reunion, save confirmed, sighting accepted */ --c-success-muted: #14532D; /* success background tint */ --c-warning: #F5A623; /* non-critical caution (amber -- always + icon) */ --c-warning-muted: #3D2A08; /* warning background tint */ --c-error: #F43F5E; /* failed action, destructive confirm */ --c-error-muted: #4C1020; /* error background tint */ --c-info: #60A5FA; /* system tips, secondary guidance, 7.3:1 AAA */ --c-info-muted: #1E3A5F; /* info background tint */ /* ------------------------------------------------------------------- FOCUS RING Applied to all focusable elements. Visible on both dark and light surfaces. Never remove focus rings -- WCAG 2.1 SC 2.4.7. ------------------------------------------------------------------- */ --c-focus-ring: #F5A623; /* amber focus ring: high visibility on navy */ --focus-ring: 0 0 0 2px var(--c-canvas), 0 0 0 4px var(--c-focus-ring); } /* ===================================================================== LIGHT MODE OVERRIDES Applied via OS preference or [data-theme="light"] on the root element. ===================================================================== */ @media (prefers-color-scheme: light) { :root { --c-canvas: #F5F6FB; --c-surface: #FFFFFF; --c-surface-raised: #F0F2FA; --c-surface-overlay: #FFFFFF; --c-border-subtle: #CDD2E8; --c-border: #A8B0D0; --c-border-strong: #7880A8; --c-text-primary: #090E21; --c-text-secondary: #526088; --c-text-disabled: #A8B0D0; --c-text-inverse: #FFFFFF; /* In light mode, amber fills (#F5A623) still pair with text-inverse (navy) on top. Amber as standalone text on white uses amber-deep. */ --c-amber: #F5A623; --c-amber-hover: #C8820F; --c-amber-text: #9C6108; /* amber-deep achieves ~4.8:1 on white (AA) */ --c-success: #16A34A; --c-success-muted: #DCFCE7; --c-warning: #C8820F; --c-warning-muted: #FEF3C7; --c-error: #BE123C; --c-error-muted: #FFE4E6; --c-info: #3B82F6; --c-info-muted: #DBEAFE; --c-focus-ring: #090E21; /* navy focus ring on light surfaces */ } } [data-theme="light"] { --c-canvas: #F5F6FB; --c-surface: #FFFFFF; --c-surface-raised: #F0F2FA; --c-surface-overlay: #FFFFFF; --c-border-subtle: #CDD2E8; --c-border: #A8B0D0; --c-border-strong: #7880A8; --c-text-primary: #090E21; --c-text-secondary: #526088; --c-text-disabled: #A8B0D0; --c-text-inverse: #FFFFFF; --c-amber: #F5A623; --c-amber-hover: #C8820F; --c-amber-text: #9C6108; --c-success: #16A34A; --c-success-muted: #DCFCE7; --c-warning: #C8820F; --c-warning-muted: #FEF3C7; --c-error: #BE123C; --c-error-muted: #FFE4E6; --c-info: #3B82F6; --c-info-muted: #DBEAFE; --c-focus-ring: #090E21; } /* ===================================================================== TYPOGRAPHY ===================================================================== */ :root { /* Font stacks */ --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Work Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; /* Type scale (fluid base: 16px = 1rem) */ --text-xs: 0.6875rem; /* 11px -- caption, overline */ --text-sm: 0.8125rem; /* 13px -- body-s, data, button */ --text-base: 0.9375rem; /* 15px -- body-m (default) */ --text-md: 1.125rem; /* 18px -- body-l */ --text-lg: 1.375rem; /* 22px -- h3 */ --text-xl: 1.75rem; /* 28px -- h2 */ --text-2xl: 2.25rem; /* 36px -- h1 */ --text-3xl: 3.0rem; /* 48px -- display-l */ --text-4xl: 4.5rem; /* 72px -- display-xl */ /* Line heights */ --leading-tight: 1.05; /* display -- compressed for large headlines */ --leading-snug: 1.15; /* h1-h2 */ --leading-normal: 1.25; /* h3, body-l */ --leading-relaxed:1.55; /* body-m, body-s -- generous for stressed readers */ --leading-loose: 1.6; /* body-l on long-form */ /* Letter-spacing */ --tracking-tighter: -0.03em; /* display-xl */ --tracking-tight: -0.02em; /* display-l */ --tracking-snug: -0.01em; /* h1, h2 */ --tracking-normal: 0; --tracking-wide: +0.01em; /* body-s */ --tracking-wider: +0.02em; /* button, caption */ --tracking-widest: +0.12em; /* overline (all-caps label) */ /* Font weights used */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; } /* Tabular data class -- apply to coordinates, timestamps, distances, counts */ .data, [data-type="data"] { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--text-sm); line-height: var(--leading-relaxed); font-feature-settings: "tnum" 1, "zero" 1; /* tabular figures + slashed zero */ } /* ===================================================================== SPACING Base unit 4px. Primary rhythm in 8px steps. ===================================================================== */ :root { --space-0: 0px; --space-1: 4px; /* xs -- icon padding, hairline gaps */ --space-2: 8px; /* sm -- tight internal padding */ --space-3: 12px; /* -- label-to-input gap, chip padding */ --space-4: 16px; /* md -- default component padding */ --space-5: 24px; /* -- section sub-gap */ --space-6: 32px; /* lg -- section gap */ --space-7: 48px; /* xl -- major section spacing */ --space-8: 64px; /* 2xl -- hero and page-level spacing */ --space-9: 96px; /* 3xl -- hero top padding on wide screens */ } /* ===================================================================== BORDER RADIUS ===================================================================== */ :root { --radius-sm: 6px; /* inputs, small chips, tags */ --radius-md: 10px; /* buttons, standard cards */ --radius-lg: 16px; /* sheets, modals, logo containment plate */ --radius-xl: 24px; /* hero cards, large feature surfaces */ --radius-full: 9999px; /* pills, avatars, floating action button */ } /* ===================================================================== ELEVATION / SHADOW On dark UI, elevation reads through a lighter surface color PLUS a soft shadow. Do not rely on shadow alone. ===================================================================== */ :root { /* Level 0 = canvas: no shadow */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.40); /* card resting */ --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45); /* sheet / bottom panel */ --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50); /* modal / FAB */ --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.60);/* full-screen overlay */ } /* ===================================================================== MOTION Durations and easing curves. Respect prefers-reduced-motion: all animations should disable or collapse to a cross-fade when the user has requested reduced motion. ===================================================================== */ :root { --dur-instant: 100ms; /* tiny state flips: toggle, checkbox */ --dur-fast: 150ms; /* buttons, hovers, small UI feedback */ --dur-base: 250ms; /* most transitions, cards, sheets */ --dur-slow: 400ms; /* screen transitions, map fly-to, modal entry */ --dur-deliberate: 600ms; /* constellation assembly, hero moments */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* default in/out */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* elements entering */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* elements leaving */ --ease-spring: cubic-bezier(0.2, 0, 0, 1.2); /* lead-node arrival: subtle overshoot, use sparingly */ } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-deliberate: 0ms; } } /* ===================================================================== LAYOUT ===================================================================== */ :root { --max-content: 1200px; /* maximum content width on desktop */ --grid-cols-sm: 4; /* mobile 4-column */ --grid-cols-md: 8; /* tablet 8-column */ --grid-cols-lg: 12; /* desktop 12-column */ --gutter-sm: 16px; /* mobile gutter */ --gutter-md: 24px; /* tablet gutter */ --gutter-lg: 24px; /* desktop gutter */ --margin-sm: 16px; /* mobile side margin */ --margin-md: 24px; /* tablet side margin */ --margin-lg: 32px; /* desktop side margin */ } /* ===================================================================== COMPONENT SHORTHANDS Pre-composed token combinations for common patterns. Engineers should use these rather than assembling tokens individually. ===================================================================== */ :root { /* Primary CTA button (crisis / most urgent) -- amber fill, navy text */ --btn-primary-bg: var(--c-amber); --btn-primary-bg-hover:var(--c-amber-hover); --btn-primary-text: var(--c-text-inverse); --btn-primary-radius: var(--radius-md); /* Secondary button -- transparent, outlined */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--c-surface); --btn-secondary-border: var(--c-border); --btn-secondary-text: var(--c-text-primary); --btn-secondary-radius: var(--radius-md); /* Card */ --card-bg: var(--c-surface); --card-border: var(--c-border-subtle); --card-radius: var(--radius-md); --card-shadow: var(--shadow-1); --card-pad: var(--space-4); /* Modal / Sheet */ --modal-bg: var(--c-surface-overlay); --modal-radius: var(--radius-lg); --modal-shadow: var(--shadow-3); /* Input */ --input-bg: var(--c-surface); --input-border: var(--c-border); --input-border-focus:var(--c-amber); --input-text: var(--c-text-primary); --input-placeholder: var(--c-text-secondary); --input-radius: var(--radius-sm); /* Badge / chip */ --badge-amber-bg: var(--c-amber-muted); --badge-amber-text: var(--c-amber-text); --badge-radius: var(--radius-full); --badge-pad-x: var(--space-2); --badge-pad-y: var(--space-1); }