/* ============================================================ * Maude design tokens * ------------------------------------------------------------ * Source of truth for color, type, spacing, radius, shadow, motion. * Every value here is reverse-engineered from web/templates/home.gohtml * as it stands at SHA HEAD on 2026-04-27. New work in handoff/ MUST * source values from these tokens — no more inline hex/rgba/px. * * Ownership * - Engineering owns the file; design proposes changes via PR. * - Tailwind config (tailwind.config in base.gohtml) MUST mirror * these names. See MAUDE_DESIGN.md §"Tailwind mapping". * - tokens.json is the machine-readable mirror; keep in sync. * ============================================================ */ :root { /* ---------------------------------------------------------- * 1. Color · base surfaces * -------------------------------------------------------- * Dark palette only — Maude has never had a light theme and * none is planned for v1. Hex codes are GitHub-Primer-derived * but pinned; do NOT switch to live Primer tokens. * ---------------------------------------------------------- */ --color-bg: #0d1117; /* app background, code blocks */ --color-panel: #161b22; /* header, sidebar, modal body */ --color-surface: #1c2128; /* cards, role chips, drawers */ --color-surface-hover: #242a33; /* surface :hover, code chip */ --color-border: #30363d; /* default 1px borders */ --color-border-soft: #21262d; /* row separators, table tr */ --color-border-soft-alpha-55: rgba(48, 54, 61, 0.55); /* --color-border at 55% alpha; first rung of a border alpha ladder. */ --color-rail-seam: var(--color-border-soft-alpha-55); /* Semantic alias: thin internal seam between content + activity rail. */ /* Text */ --color-text-primary: #e6edf3; /* body, headings */ --color-text-secondary: #8b949e; /* meta, captions, labels */ --color-text-placeholder:#6e7681; /* placeholder + muted text (skill_builder); sits between secondary (#8b949e) and quaternary (#484f58) */ --color-text-tertiary: #c9d1d9; /* table cells, message body */ --color-text-quaternary: #484f58; /* hover-darker secondary, gutter chrome */ /* Foreground used ON accent backgrounds (e.g., text inside a purple-fill * button). Currently a near-black with a faint purple tint, sized for * contrast against --color-accent-purple. If text on a non-purple accent * needs a different color, extend with --color-text-on-accent-. */ --color-text-on-accent: #1a0f2e; /* Foreground used ON the bright blue accent (--color-accent-blue, #58a6ff) * when blue is acting as the primary action surface (e.g. the Save button * on the Permissions/Access diff bar). Pure white reads cleaner than the * default near-white --color-text-primary at this saturation; matches the * grandfathered `text-white` already shipping in the Permissions diff bar * so the two diff bars render identically. */ --color-text-on-accent-blue: #ffffff; /* ---------------------------------------------------------- * 2. Color · accents (semantic) * -------------------------------------------------------- * Each accent has a fixed hex + a *fill ladder* of alpha values * used for soft fills, borders, glow rings. Pick from the * ladder rather than inventing new alphas. * * --hairline 0.04 table row hover, ghost surfaces * --soft 0.06 active card background * --soft-2 0.08 role-card.selected, glow ring * --fill 0.12 pill background, status fill (DEFAULT) * --fill-2 0.15 citation chip, active-skill fill * --emphasis 0.30 pill border (DEFAULT) * --emphasis-2 0.40 tag border, glow shadow * * If a use case calls for an alpha not on this ladder, add a * new step here rather than spot-rgba'ing in a stylesheet. * ---------------------------------------------------------- */ /* Purple — Maude brand, identity, primary CTA */ --color-accent-purple: #bc8cff; --color-accent-purple-hairline: rgba(188, 140, 255, 0.04); --color-accent-purple-soft: rgba(188, 140, 255, 0.06); --color-accent-purple-soft-2: rgba(188, 140, 255, 0.08); --color-accent-purple-fill: rgba(188, 140, 255, 0.12); --color-accent-purple-fill-2: rgba(188, 140, 255, 0.15); --color-accent-purple-emphasis: rgba(188, 140, 255, 0.30); --color-accent-purple-emphasis-2: rgba(188, 140, 255, 0.40); --color-accent-purple-emphasis-55: rgba(188, 140, 255, 0.55); /* off-ladder alpha rung — celebrate keyframe ring only. Mirrors the --color-border-soft-alpha-55 precedent for off-ladder rungs. */ /* Blue — links, info, account/CRM kinds, system */ --color-accent-blue: #58a6ff; --color-accent-blue-hairline: rgba(88, 166, 255, 0.04); --color-accent-blue-soft: rgba(88, 166, 255, 0.06); --color-accent-blue-soft-2: rgba(88, 166, 255, 0.08); --color-accent-blue-fill: rgba(88, 166, 255, 0.12); --color-accent-blue-fill-2: rgba(88, 166, 255, 0.15); --color-accent-blue-emphasis: rgba(88, 166, 255, 0.30); --color-accent-blue-emphasis-2: rgba(88, 166, 255, 0.40); /* Green — success, "done" tool state, contact/ticket kinds */ --color-accent-green: #3fb950; --color-accent-green-hairline: rgba(63, 185, 80, 0.04); --color-accent-green-soft: rgba(63, 185, 80, 0.06); --color-accent-green-soft-2: rgba(63, 185, 80, 0.08); --color-accent-green-fill: rgba(63, 185, 80, 0.12); --color-accent-green-fill-2: rgba(63, 185, 80, 0.15); --color-accent-green-emphasis: rgba(63, 185, 80, 0.30); --color-accent-green-emphasis-2: rgba(63, 185, 80, 0.40); /* Amber — warning, context-budget, email/ticket kinds. * NOTE: home.gohtml uses TWO amber hexes — #f59e0b (citations, * spark bars) and #d29922 (banners, tool errors). Both stay, * but new code should default to --color-accent-amber (#f59e0b) * unless matching an existing banner. */ --color-accent-amber: #f59e0b; --color-accent-amber-hairline: rgba(245, 158, 11, 0.04); --color-accent-amber-soft: rgba(245, 158, 11, 0.06); --color-accent-amber-soft-2: rgba(245, 158, 11, 0.08); --color-accent-amber-fill: rgba(245, 158, 11, 0.12); --color-accent-amber-fill-2: rgba(245, 158, 11, 0.15); --color-accent-amber-emphasis: rgba(245, 158, 11, 0.30); --color-accent-amber-emphasis-2: rgba(245, 158, 11, 0.40); --color-accent-amber-warm: #d29922; --color-accent-amber-warm-soft: rgba(210, 153, 34, 0.08); --color-accent-amber-warm-soft-2: rgba(210, 153, 34, 0.10); --color-accent-amber-warm-fill: rgba(210, 153, 34, 0.12); --color-accent-amber-warm-emphasis: rgba(210, 153, 34, 0.35); --color-accent-amber-warm-emphasis-2: rgba(210, 153, 34, 0.40); /* Red — error, destructive, tool failures */ --color-accent-red: #f85149; --color-accent-red-hairline: rgba(248, 81, 73, 0.04); --color-accent-red-soft: rgba(248, 81, 73, 0.06); --color-accent-red-soft-2: rgba(248, 81, 73, 0.08); --color-accent-red-soft-3: rgba(248, 81, 73, 0.10); --color-accent-red-fill: rgba(248, 81, 73, 0.12); --color-accent-red-emphasis: rgba(248, 81, 73, 0.35); --color-accent-red-emphasis-2: rgba(248, 81, 73, 0.40); /* Pink — skill chips, renewal/prompt citations */ --color-accent-pink: #ec4899; --color-accent-pink-fill-2: rgba(236, 72, 153, 0.15); /* Yellow — schedule/pending state. Distinct from --color-accent-amber: * amber (#f59e0b) is for "fresh" warnings + citations; yellow (#eab308) * is reserved for the schedule/pending state in activity.gohtml and * the kind-schedule chip. Don't substitute one for the other. */ --color-accent-yellow: #eab308; --color-accent-yellow-hairline: rgba(234, 179, 8, 0.04); --color-accent-yellow-soft: rgba(234, 179, 8, 0.06); --color-accent-yellow-soft-2: rgba(234, 179, 8, 0.08); --color-accent-yellow-fill: rgba(234, 179, 8, 0.12); --color-accent-yellow-fill-2: rgba(234, 179, 8, 0.15); --color-accent-yellow-emphasis: rgba(234, 179, 8, 0.30); --color-accent-yellow-emphasis-2: rgba(234, 179, 8, 0.40); /* Neutral fill — secondary chips, default citations */ --color-neutral-soft: rgba(139, 148, 158, 0.06); /* tool head hover */ --color-neutral-fill: rgba(139, 148, 158, 0.12); /* tag chip bg */ --color-neutral-fill-2: rgba(139, 148, 158, 0.15); /* doc citation bg */ --color-neutral-fill-3: rgba(139, 148, 158, 0.18); /* spark-bar idle */ /* Unknown — the muted identity for a missing/unavailable value, kept deliberately distinct from a real zero. Cooler + dimmer than the neutral-grey chips so a dashed "unknown" reads as "no data", not "0". Used by the entity-card .unk chip (entity-card.css). */ --color-unknown: #6b7480; /* unknown value text + icon */ --color-unknown-fill: rgba(107, 116, 128, 0.07); /* unknown chip background */ --color-unknown-line: rgba(107, 116, 128, 0.32); /* unknown chip dashed border */ /* Scrim — modal/popover backdrops, ordered light → strong */ --color-scrim-soft: rgba(0, 0, 0, 0.40); /* popover/dropdown backdrop */ --color-scrim-light: rgba(0, 0, 0, 0.55); --color-scrim-strong: rgba(0, 0, 0, 0.60); /* User message bubble (chat surface only) */ --color-user-bubble: #1a2332; /* ---------------------------------------------------------- * 2.5 Action primary * -------------------------------------------------------- * GitHub Primer's primary blue (#1f6feb) is Maude's "default * call to action" fill — visually distinct from the link/info * --color-accent-blue (#58a6ff). Lives outside the accent- * ladder convention because it has no soft / fill steps; it * is solid-fill only. Foreground on top is pure white. * * Added in Wave 2 so .btn-primary in shared.css drops its * grandfathered #1f6feb / #388bfd / #fff hex literals. * ---------------------------------------------------------- */ --color-action-primary: #1f6feb; --color-action-primary-hover: #388bfd; --color-text-on-action: #ffffff; /* ---------------------------------------------------------- * 2.6 Gradients * -------------------------------------------------------- * Brand gradients composed from accent solids. Both cite * var(--color-accent-*) so palette retunes propagate. Naming * is by usage (brand-text, header-line) not abstract * direction — these aren't reusable "purple-blue" decorations, * they're identity assets with one job each. * * Animation (e.g., the header-line's gradient-shift sweep) * stays in component CSS; tokens are values, not behaviors. * ---------------------------------------------------------- */ --gradient-brand-text: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-blue) 100%); --gradient-header-line: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-purple), var(--color-accent-green), var(--color-accent-blue)); /* ---------------------------------------------------------- * 3. Typography * -------------------------------------------------------- * Three families. Inter for everything, JetBrains Mono for * code/numerics, Instrument Serif ONLY for the "Maude" wordmark * and the welcome-greeting. Do not introduce a fourth family. * ---------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Instrument Serif', Georgia, serif; /* Type scale — px-anchored so it survives Tailwind's text-* rems. * Naming follows usage, not abstract size. */ --text-display-lg: 48px; /* welcome hero "Maude" wordmark */ --text-display-lg-lh: 1.0; --text-display-lg-ls: -0.02em; --text-display: 36px; /* welcome-greeting (serif, gradient) */ --text-display-lh: 1.1; --text-display-ls: -0.02em; --text-display-sm: 24px; /* admin page titles, large modal headings */ --text-display-sm-lh: 1.2; --text-display-sm-ls: -0.02em; --text-title: 22px; /* Maude wordmark, modal titles */ --text-title-lh: 1.2; --text-title-ls: -0.02em; --text-heading: 15px; /* palette input, section headings */ --text-heading-lh: 1.4; --text-body-lg: 16px; /* welcome subtitle, settings hints — Tailwind text-base equivalent */ --text-body-lg-lh: 1.55; --text-body: 14px; /* msg-content default, table th */ --text-body-lh: 1.65; --text-body-sm: 13px; /* code blocks, msg table td, conv items */ --text-body-sm-lh: 1.6; --text-card: 13.5px; /* welcome-card title, role-card header */ --text-card-lh: 1.4; --text-card-body: 12.5px; /* memory-card quote, ctx-banner-body */ --text-card-body-lh: 1.5; --text-label: 12px; /* tool-summary, msg sub-meta */ --text-label-lh: 1.4; --text-caption: 11.5px; /* role-card description, footer ts */ --text-caption-lh: 1.5; --text-meta: 11px; /* welcome-section-label, tool-latency */ --text-meta-lh: 1.4; --text-overline: 10.5px; /* role-card OVERLINE, kind labels */ --text-overline-lh: 1.2; --text-overline-ls: 0.06em; --text-micro: 10px; /* BETA badge, kind chips */ --text-micro-lh: 1.0; --text-micro-ls: 0.04em; /* Weights — only these four. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter-spacing — only these. */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.04em; --tracking-caps: 0.06em; /* ---------------------------------------------------------- * 4. Spacing — 4px grid * -------------------------------------------------------- * Codebase has drifted (0.4rem, 0.85rem, 12px, 14px, 18px all * appear inline). New code MUST pick from this scale. Existing * inline values are grandfathered until touched. * ---------------------------------------------------------- */ --space-0: 0; --space-hair: 1px; /* dense inline pill padding-y — the one sub-grid rung below --space-1; do not use for layout spacing */ --space-1: 2px; /* hairline gap, badge inset */ --space-2: 4px; /* tight inline gap (pill padding-y) */ --space-3: 6px; /* chip padding-y, list item gap */ --space-4: 8px; /* DEFAULT inline gap, card inner padding-y */ --space-5: 10px; /* card padding-x, button padding-y */ --space-6: 12px; /* card padding (DEFAULT), tool-card row */ --space-7: 14px; /* role-card padding, tool-card padding-x */ --space-8: 16px; /* msg-content gap, modal padding */ --space-9: 18px; /* memory-card padding (skill-card sm-screen) */ --space-10: 20px; /* skill-card padding-lg, sidebar gap */ --space-12: 24px; /* section gap */ --space-14: 28px; /* welcome-section margin */ --space-16: 32px; /* page gutter */ --space-18: 36px; /* welcome-hero margin */ /* Off-grid exceptions * -------------------------------------------------------- * Values that don't snap to the 4px grid because the design * constraint isn't grid-aligned. Document each one's * derivation so the next contributor doesn't "fix" it. * * --space-input-icon-pad 34px = 12px input pad + 16px icon * + 6px gap. Used by .form-input * with a leading icon. Rounding * to 32px shaves the gap; rounding * to 36px makes it too airy. */ --space-input-icon-pad: 34px; /* ---------------------------------------------------------- * 4.5 Icon size scale * -------------------------------------------------------- * Four icon sizes. Pick by where the icon lives: * xs 12px chip icons, kind chips inside dense rows * sm 14px button icons, file-row actions, composer toolbar * md 16px default lucide icon size, header chip icons * lg 20px role-card avatars, settings-tile icons * * Replaces inline Tailwind w-3 / w-3.5 / w-4 / w-5 (and h-*). * ---------------------------------------------------------- */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; /* ---------------------------------------------------------- * 5. Radius scale * -------------------------------------------------------- * Five steps + a pill. Choose by usage: * xs 3px inline tags, scrollbar, tiny chips * sm 4px inline code, dropdown items, inline pills * md 6px buttons, input chips, toolbar pills * lg 8px cards, code blocks, inputs, modals * xl 10px role-cards, welcome-cards, drawer surfaces * 2xl 12px message bubbles, ctx-banner, palette panel * 3xl 14px skill-card, modal panels, command-palette * pill 9999px status pills, kind chips, BETA badge, toggles * * 50% is reserved for true circles (avatars, status dots). * ---------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 14px; --radius-pill: 9999px; --radius-circle: 50%; /* ---------------------------------------------------------- * 6. Shadows * -------------------------------------------------------- * Five elevations + a focus ring + a glow. All shadows are * pure black with α — no colored shadows except --shadow-glow. * ---------------------------------------------------------- */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.30); /* welcome/skill card hover */ --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.40); /* dropdowns, skill-dropdown */ --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.50); /* settings/palette modal */ --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.40); /* right-side drawers */ /* Focus ring — applied via box-shadow (not outline) so it stacks * with border-color changes. Keep 3px width across the app. */ --shadow-focus: 0 0 0 3px var(--color-accent-purple-soft-2); --shadow-focus-blue: 0 0 0 3px var(--color-accent-blue-soft-2); --shadow-focus-red: 0 0 0 3px var(--color-accent-red-soft-2); /* error-state focus ring */ --shadow-focus-soft: 0 0 0 2px var(--color-accent-purple-soft-2); /* compact 2px variant of --shadow-focus for small chips / inline inputs */ /* Glow — used on send button and active-skill states only. * Don't sprinkle this — it loses meaning. */ --shadow-glow: 0 0 12px var(--color-accent-purple-emphasis-2); --shadow-glow-green: 0 0 12px var(--color-accent-green-emphasis-2); /* success/celebration glow */ /* ---------------------------------------------------------- * 7. Motion * -------------------------------------------------------- * Three durations, two easings. That's all. * * instant 100ms micro-feedback (tabs, search border) * fast 150ms DEFAULT — color/bg/border state changes * normal 200ms layout shifts, opacity fades, transforms * slow 250ms modals, drawers, palette enter * * Easing: * --ease-default cubic-bezier(0.4,0,0.2,1) Tailwind default * --ease-out cubic-bezier(0,0,0.2,1) enter animations * * NEVER use `transition: all` — list properties explicitly. * `all` defeats compositor optimization and animates layout * properties you didn't mean to. * ---------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 250ms; /* Loop duration for attention pulses (count-pulse, save-pulse, * tour-pulse). Separate from the state-transition ladder above — * this is for *looping* attention animations, not state changes. */ --duration-pulse: 2400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* celebration overshoot — success moments only (skill saved, completion). Not for default UI transitions. */ /* ---------------------------------------------------------- * 7.5 Border widths * -------------------------------------------------------- * Two widths only. Hairline is the default 1px stroke used * by buttons, inputs, cards, chips, badges, role separators. * Thick is the 2px gradient strip / active-tab indicator. * * Added in Wave 2 to back the `.btn` / `.form-input` / * `.header-line` recipes (previously grandfathered as raw * `1px` / `2px` literals via .lintignore). Reach for tokens * in new code; existing inline 1px/2px is grandfathered until * the file is next touched. * ---------------------------------------------------------- */ --border-width-hairline: 1px; --border-width-thick: 2px; --border-width-accent: 3px; /* entity-card left identity stripe (per-kind accent) */ /* ---------------------------------------------------------- * 8. Layout primitives * ---------------------------------------------------------- */ --layout-header-height: 44px; --layout-sidebar-width: 240px; --layout-drawer-width: 360px; --layout-message-max: 760px; /* msg-content max-width */ --layout-editor-max: 880px; /* center-pane content cap for editors */ --layout-skill-list-width: 340px; /* /skills library left pane (Design-21 PR-27) */ --layout-sb-walkthrough-rail: 320px; /* skill-builder walkthrough right rail (R0 PR-293) */ --layout-chat-column: 720px; /* chat reflow column (Claude.ai parity) */ --layout-chat-input: 680px; /* composer reflow column (40px narrower) */ --layout-input-min: 44px; /* mobile hit target */ --layout-cap-search-max: 280px; /* capabilities filter search box max-width (Design-32) */ --layout-cap-signal-col: 52px; /* capabilities signal column min-width (Design-32) */ --layout-cap-tools-col: 200px; /* capabilities exposed-tools column in the expanded row */ --layout-cap-tools-wider-col: 240px; /* wider tools column in the C+ expanded-row grid */ --layout-cap-expand-col-h: 220px; /* max-height of each scrollable column in the capability expanded row */ --layout-cap-context-max: 160px; /* capabilities AI context block max-height (Design-32) */ --layout-z-modal: 50; --layout-z-drawer: 40; --layout-z-popover: 30; --layout-z-toast: 60; }