/* ========================================================================== FELLO: DESIGN TOKENS Extracted verbatim from the macOS app source (no color invented or rounded): • Brand palette (light + dark) → leanring-buddy/SettingsWindowTheme.swift • Record dot → leanring-buddy/SettingsWindowCompanyPanes.swift • Activity state colors → leanring-buddy/Skins/FelloSkin.swift (resolving DS.Colors.activity* tokens) • Type ladder / radii / spacing / motion / state layers → leanring-buddy/DesignSystem.swift • Typeface + raw brand constants → Fello brand board (Söhne, navy/cream/sage/coral/mist) Colors defined in Swift as "colorX.opacity(n)" are expressed here as rgba() of the exact underlying hex. Light is the default; dark is applied via [data-theme="dark"] and via prefers-color-scheme when no theme is pinned. ========================================================================== */ :root { color-scheme: light dark; /* ── RAW BRAND CONSTANTS (identical in both themes) ───────────────────── */ --fello-navy: #1F2937; /* Deep Navy: primary ink & fills */ --fello-cream: #F8F6F1; /* Warm Cream: the ground */ --fello-sage: #A8C5B0; /* Sage: on / healthy / success */ --fello-coral: #E7A97E; /* Warm Coral: warmth & caution */ --fello-mist: #DCE6EE; /* Mist Blue: soft selection surfaces */ --fello-record-dot: #E06A50; /* the one red-ish allowed (record convention) */ /* ── TYPEFACE ─────────────────────────────────────────────────────────── */ --fello-font-sans: "Söhne", "Sohne", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --fello-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fello-weight-regular: 400; --fello-weight-medium: 500; --fello-weight-semibold: 600; --fello-weight-bold: 700; /* ── SURFACES (light) ─────────────────────────────────────────────────── */ --fello-canvas: #F8F6F1; /* window / page ground */ --fello-card: #FFFFFF; /* card on the canvas */ --fello-field: #F5F2EB; /* input fill inside cards */ --fello-sidebar: #F3F0E8; /* recessed rail */ --fello-hover-fill: rgba(31, 41, 55, 0.05); /* ── LINES (light) ────────────────────────────────────────────────────── */ --fello-border: #E8E3D8; --fello-border-strong: #D5CEBF; /* hover / focus borders */ --fello-hairline: rgba(31, 41, 55, 0.08); /* ── TEXT (light) ─────────────────────────────────────────────────────── */ --fello-text-primary: #1F2937; --fello-text-secondary: #5A6373; --fello-text-tertiary: #8B93A1; /* ── PRIMARY ACTION (light: navy on cream) ────────────────────────────── */ --fello-button-fill: #1F2937; --fello-button-fill-hover: #2B3849; --fello-button-text: #F8F6F1; /* ── ACCENT / SELECTION (light) ───────────────────────────────────────── */ --fello-accent-text: #1F2937; /* selected nav, links, checks */ --fello-accent-subtle: #DCE6EE; /* selection pill, banners */ /* ── SEMANTICS (light) ────────────────────────────────────────────────── */ --fello-control-on: #A8C5B0; /* sage: ON in BOTH themes */ --fello-sage-subtle: rgba(168, 197, 176, 0.28); --fello-success: #4E7A5C; /* deepened sage for contrast */ --fello-success-dot: #6E9A7C; --fello-danger: #C25B52; --fello-danger-soft: rgba(194, 91, 82, 0.10); --fello-warn: #B06B3B; /* deepened coral on cream */ /* ── IDENTITY (light) ─────────────────────────────────────────────────── */ --fello-avatar-fill: #1F2937; --fello-avatar-text: #F8F6F1; --fello-logo-ink: #1F2937; /* the "f." mark; dot = sage */ --fello-track-off: rgba(31, 41, 55, 0.15); /* switch track when OFF */ /* ── COMPANION ACTIVITY STATES ──────────────────────────────────────────── Theme-INDEPENDENT: these are painted onto the user's own screen by the cursor body and the Dynamic Island, and never change with page theme. Default skin = Wisp (SkinActivityPalette.standard). */ --fello-state-idle: #3380FF; /* cursor at rest (overlayCursorBlue) */ --fello-state-listening: #2dd4bf; /* teal: mic live */ --fello-state-thinking: #8b5cf6; /* violet: model thinking */ --fello-state-deeper: #8b5cf6; /* same violet; depth = faster orbit */ --fello-state-speaking: #60a5fa; /* lighter blue: talking */ --fello-state-guide-prep: #22d3ee; /* cyan: reading screen for a guide */ --fello-state-success: #4ade80; /* green: the success check only */ --fello-state-notch-brand: #60a5fa; /* notch speaking / "guiding" */ --fello-state-standby: #6E8A99; /* neutral armed-idle badge */ /* Alternate "Lumen" skin: cooler, lower-saturation register (optional). */ --fello-lumen-idle: #D0DCEF; --fello-lumen-listening: #5FD6C8; --fello-lumen-thinking: #A78BF0; --fello-lumen-speaking: #8FB4FF; --fello-lumen-guide-prep: #7FE8F2; --fello-lumen-deeper: #A78BF0; --fello-lumen-notch-brand: #A6C8FF; --fello-lumen-standby: #8FA3B5; /* ── NOTCH / DYNAMIC ISLAND CHROME ──────────────────────────────────────── Always dark, regardless of page theme (it renders on the user's menu bar). These are the dark brand tokens the island pins itself to. */ --fello-notch-fill: #1D2430; /* card, dark */ --fello-notch-field: #252E3B; /* inner pills */ --fello-notch-text: #EFEEE9; /* warm off-white */ --fello-notch-muted: #7E8794; --fello-notch-icon: #C9D7E4; /* accentText, dark */ --fello-notch-radius: 14px; /* ── LEGACY DS DARK PALETTE (floating HUDs) ─────────────────────────────── The workflow-recording bar and the other floating HUDs still render on the app's ORIGINAL dark palette (DesignSystem.swift), not the brand palette: black-at-82% fill, Radix-ish greys, Tailwind blue-600 for the Save action. Kept as tokens so a site mockup of that HUD is exact rather than eyeballed. Do NOT reach for these for page chrome; they are product-replica colours. */ --fello-ds-border: #373B39; --fello-ds-text-primary: #ECEEED; --fello-ds-text-tertiary: #828A84; --fello-ds-accent: #2563eb; /* ── TYPE LADDER: EXACT app values (macOS pt; 1pt = 1px @1x) ─────────── */ --fello-text-micro: 9px; /* affordance glyphs only, never running text */ --fello-text-caption: 11px; /* captions, section headers: small floor */ --fello-text-footnote: 12px; /* secondary labels, value pills, badges */ --fello-text-body: 13px; /* the scale anchor */ --fello-text-label: 14px; /* emphasized labels, wordmark, in-panel CTA */ --fello-text-title: 16px; /* largest app step: headings / CTA labels */ /* Web reading scale: DERIVED for marketing (not present in source). The app ladder is UI chrome and is unreadable as page copy. */ --fello-web-caption: 0.875rem; /* 14px */ --fello-web-small: 1rem; /* 16px */ --fello-web-body: 1.0625rem; /* 17px: page anchor */ --fello-web-lead: 1.25rem; /* 20px */ --fello-web-h4: 1.5rem; /* 24px */ --fello-web-h3: 2rem; /* 32px */ --fello-web-h2: 2.75rem; /* 44px */ --fello-web-h1: 4rem; /* 64px */ --fello-leading-tight: 1.1; --fello-leading-heading: 1.18; --fello-leading-body: 1.55; --fello-tracking-tight: -0.02em; --fello-tracking-label: 0.7px; /* card label kerning, from source */ /* ── SPACING (DS.Spacing) ─────────────────────────────────────────────── */ --fello-space-xs: 4px; --fello-space-sm: 8px; --fello-space-md: 12px; --fello-space-lg: 16px; --fello-space-xl: 20px; --fello-space-2xl: 24px; --fello-space-3xl: 32px; /* ── RADII (DS.CornerRadius + settings-window components) ─────────────── */ --fello-radius-sm: 6px; /* tags, badges, icon buttons */ --fello-radius-pill7: 7px; /* value pill (dropdown label) */ --fello-radius-md: 8px; /* buttons, input fields */ --fello-radius-lg: 10px; /* cards, dialogs, bubbles */ --fello-radius-xl: 12px; /* panels, settings cards */ --fello-radius-notch: 14px; /* Dynamic Island chips */ --fello-radius-full: 9999px;/* pill / capsule (DS pill = .infinity) */ /* ── STATE LAYER OPACITIES (Material-style, from DS.StateLayer) ───────── */ --fello-state-hover: 0.08; --fello-state-focus: 0.12; --fello-state-pressed: 0.12; --fello-state-dragged: 0.16; --fello-disabled-opacity: 0.45; /* disabled buttons in the settings window */ /* ── MOTION: durations (DS.Motion.Duration) ──────────────────────────── */ --fello-duration-instant: 100ms; /* press-scale taps */ --fello-duration-fast: 150ms; /* hover / press feedback */ --fello-duration-quick: 200ms; /* snappy fades */ --fello-duration-normal: 250ms; /* content + affordance reveals */ --fello-duration-slow: 400ms; /* fade-outs, color cross-fades */ --fello-duration-settle: 450ms; /* one-shot pop / settle */ --fello-duration-draw: 700ms; /* outline trace-on */ --fello-duration-lean: 1300ms; /* expressive pointing lean */ --fello-delay-tooltip: 600ms; --fello-delay-hover-close: 120ms; /* ── MOTION: breathing loop PERIODS (all multiples of 2.4s base) ─────── */ --fello-breath-half: 1.2s; /* 0.5×: pings, nods, HUD pulses */ --fello-breath-short: 1.8s; /* 0.75×: dropdown bob, scroll comet */ --fello-breath: 2.4s; /* 1× base: badges, bars, button glow */ --fello-breath-long: 3.6s; /* 1.5×: listening bob */ --fello-breath-slow: 4.8s; /* 2×: idlest loops */ /* ── MOTION: easings ───────────────────────────────────────────────────── The two shared SwiftUI springs, approximated as CSS curves: track = interactiveSpring(response 0.2, damping 0.6) : position follow settle = spring(response 0.45, damping 0.85) : grow / land toggle = spring(response 0.25, damping 0.75) : switch knob */ --fello-ease-track: cubic-bezier(0.20, 0.90, 0.25, 1.12); --fello-ease-settle: cubic-bezier(0.32, 0.72, 0.28, 1.00); --fello-ease-toggle: cubic-bezier(0.34, 0.80, 0.30, 1.00); --fello-ease-out: cubic-bezier(0.00, 0.00, 0.58, 1.00); --fello-ease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00); /* ── SHADOWS ────────────────────────────────────────────────────────────── From source (SwiftUI blur radius ≈ half a CSS blur, doubled here). */ --fello-shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.28); --fello-shadow-tooltip: 0 8px 28px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.26); /* Cards in-app carry a 1px border, not a shadow. For the marketing page, a soft navy-tinted lift keeps it on-brand: */ --fello-shadow-card: 0 1px 2px rgba(31, 41, 55, 0.04), 0 8px 24px rgba(31, 41, 55, 0.06); } /* ========================================================================== DARK THEME: the navy-derived rendering of the same brand. Sage still means ON/healthy; the primary action inverts to cream-on-navy. ========================================================================== */ :root[data-theme="dark"] { --fello-canvas: #161C25; --fello-card: #1D2430; --fello-field: #252E3B; --fello-sidebar: #131922; --fello-hover-fill: rgba(255, 255, 255, 0.05); --fello-border: #2D3644; --fello-border-strong: #465162; --fello-hairline: rgba(255, 255, 255, 0.07); --fello-text-primary: #EFEEE9; --fello-text-secondary: #AAB2BE; --fello-text-tertiary: #7E8794; --fello-button-fill: #F8F6F1; --fello-button-fill-hover: #FFFFFF; --fello-button-text: #1F2937; --fello-accent-text: #C9D7E4; --fello-accent-subtle: rgba(220, 230, 238, 0.10); --fello-control-on: #A8C5B0; --fello-sage-subtle: rgba(168, 197, 176, 0.16); --fello-success: #A8C5B0; --fello-success-dot: #A8C5B0; --fello-danger: #E08A80; --fello-danger-soft: rgba(224, 138, 128, 0.14); --fello-warn: #E7A97E; --fello-avatar-fill: #2E3A50; --fello-avatar-text: #F8F6F1; --fello-logo-ink: #F8F6F1; --fello-track-off: rgba(255, 255, 255, 0.16); --fello-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fello-canvas: #161C25; --fello-card: #1D2430; --fello-field: #252E3B; --fello-sidebar: #131922; --fello-hover-fill: rgba(255, 255, 255, 0.05); --fello-border: #2D3644; --fello-border-strong: #465162; --fello-hairline: rgba(255, 255, 255, 0.07); --fello-text-primary: #EFEEE9; --fello-text-secondary: #AAB2BE; --fello-text-tertiary: #7E8794; --fello-button-fill: #F8F6F1; --fello-button-fill-hover: #FFFFFF; --fello-button-text: #1F2937; --fello-accent-text: #C9D7E4; --fello-accent-subtle: rgba(220, 230, 238, 0.10); --fello-control-on: #A8C5B0; --fello-sage-subtle: rgba(168, 197, 176, 0.16); --fello-success: #A8C5B0; --fello-success-dot: #A8C5B0; --fello-danger: #E08A80; --fello-danger-soft: rgba(224, 138, 128, 0.14); --fello-warn: #E7A97E; --fello-avatar-fill: #2E3A50; --fello-avatar-text: #F8F6F1; --fello-logo-ink: #F8F6F1; --fello-track-off: rgba(255, 255, 255, 0.16); --fello-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.35); } } /* ========================================================================== Minimal application layer: safe defaults for the cream marketing page. ========================================================================== */ body { background: var(--fello-canvas); color: var(--fello-text-primary); font-family: var(--fello-font-sans); font-size: var(--fello-web-body); line-height: var(--fello-leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--fello-text-primary); font-weight: var(--fello-weight-semibold); letter-spacing: var(--fello-tracking-tight); line-height: var(--fello-leading-heading); } .fello-card { background: var(--fello-card); border: 1px solid var(--fello-border); border-radius: var(--fello-radius-xl); box-shadow: var(--fello-shadow-card); } .fello-button-primary { background: var(--fello-button-fill); color: var(--fello-button-text); border: 0; border-radius: var(--fello-radius-md); font: var(--fello-weight-semibold) var(--fello-web-small)/1 var(--fello-font-sans); padding: 0.75rem 1.25rem; cursor: pointer; transition: background-color var(--fello-duration-fast) var(--fello-ease-out), transform var(--fello-duration-instant) var(--fello-ease-out); } .fello-button-primary:hover { background: var(--fello-button-fill-hover); } .fello-button-primary:active { transform: scale(0.97); } .fello-button-quiet { background: transparent; color: var(--fello-text-secondary); border: 1px solid var(--fello-border); border-radius: var(--fello-radius-md); padding: 0.625rem 1rem; cursor: pointer; transition: color var(--fello-duration-fast) var(--fello-ease-out), background-color var(--fello-duration-fast) var(--fello-ease-out), border-color var(--fello-duration-fast) var(--fello-ease-out); } .fello-button-quiet:hover { color: var(--fello-text-primary); background: var(--fello-hover-fill); border-color: var(--fello-border-strong); } .fello-pill-selected { /* mist selection surface */ background: var(--fello-accent-subtle); color: var(--fello-accent-text); border-radius: var(--fello-radius-md); } .fello-rule { background: var(--fello-hairline); height: 1px; border: 0; } /* Product-mockup state dot: swap the custom property per state. */ .fello-state-dot { width: 10px; height: 10px; border-radius: var(--fello-radius-full); background: var(--fello-state-idle); transition: background-color var(--fello-duration-slow) var(--fello-ease-in-out); } .fello-state-dot[data-state="listening"] { background: var(--fello-state-listening); } .fello-state-dot[data-state="thinking"] { background: var(--fello-state-thinking); } .fello-state-dot[data-state="speaking"] { background: var(--fello-state-speaking); } .fello-state-dot[data-state="guide-prep"] { background: var(--fello-state-guide-prep); } .fello-state-dot[data-state="success"] { background: var(--fello-state-success); } .fello-state-dot[data-state="standby"] { background: var(--fello-state-standby); } @keyframes fello-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .fello-breathing { animation: fello-breathe var(--fello-breath) var(--fello-ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { /* The app honors Reduce Motion on every animating surface: match it. */ .fello-breathing { animation: none; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }