/* ===================================================================== * Redmineflux Design System · tokens.css · v1.3 * --------------------------------------------------------------------- * Single source of truth for all design tokens. Every section sketch * and every generated page imports this file. No inline overrides of * these values — if a new need emerges, bump the version with a * changelog entry at the bottom of this file. * * Direction: enterprise-polished, serif-led display typography, sage * paper surface, dark slate primary, mint-teal accent. Built to survive * 3+ years of enterprise + AI/agentic-era UI drift. * * Versions: * v1.0 · 2026-04-22 · initial freeze * v1.1 · 2026-04-22 · blog + video token families (additive) * v1.2 · 2026-04-23 · responsive containers + --bg-surface-warm * (SPEC-02, SPEC-04/05/06) * v1.3 · 2026-04-24 · spacing audit (--section-py 96→64 etc.) + * --bg-surface-sage alias for alternating-band * clarity (resolves token-naming drift in * SPEC-22/23/24/30+) * * See full changelog at bottom of file. * ===================================================================== */ :root { /* ===== COLOUR · SURFACE =========================================== */ --bg-page: #F1F5F0; /* sage paper — primary page background */ --bg-surface: #FFFFFF; /* white — cards, persona panels, forms */ --bg-muted: #FAFAF7; /* off-white — feature cards, nested tiles */ --bg-surface-warm: #F7F1E8; /* v1.2 · warm cream — right-panel backdrops, showcase tints (SPEC-04/05/06) */ --bg-surface-sage: #F1F5F0; /* v1.3 · sage alias of --bg-page — for alternating-band rhythm in long pages (SPEC-22/23/24/30+) */ --bg-dark: #0F172A; /* deep slate — dark bands, footer, CTAs */ --bg-dark-soft: #1E293B; /* dark slate hover / secondary dark surface */ /* ===== COLOUR · TEXT ============================================== */ --text-heading: #0F172A; /* headings, strong body */ --text-body: #475569; /* default body, paragraph */ --text-muted: #475569; /* captions, trust strip, placeholders — Slate-600, ~7.6:1 on white (WCAG AA, normal text) */ --text-subtle: #64748B; /* separators rendered as text dots — Slate-500, ~4.78:1 on white (WCAG AA, normal text) */ --text-inverse: #FFFFFF; /* on dark backgrounds */ --text-inverse-muted: #CBD5E1; /* secondary on dark */ /* ===== COLOUR · ACCENT ============================================ */ --accent: #35C190; /* mint-teal — brand accent, swipe-underline, success (decorative use) */ --accent-hover: #2DA87D; /* accent pressed / hover */ --accent-soft: rgba(53, 193, 144, 0.12); /* tinted accent wash */ --accent-text: #0F8A60; /* AA-passing accent for text on light surfaces, ~5.2:1 on white */ /* ===== COLOUR · ACTION ============================================ */ --primary: #0F172A; /* primary CTA — dark slate */ --primary-hover: #1E293B; --primary-soft: rgba(15, 23, 42, 0.05); /* ===== COLOUR · LINK (historical RF blue, preserved) ============== */ --link: #0094FF; --link-hover: #007DE6; /* ===== COLOUR · BORDER ============================================ */ --border: #E2E8F0; /* default card + input border */ --border-strong: #CBD5E1; /* hover border, emphasised divider */ --divider: rgba(15, 23, 42, 0.08); /* ===== COLOUR · SEMANTIC ========================================== */ --success: #35C190; /* alias of --accent */ --warning: #F59E0B; --danger: #EF4444; --info: #0094FF; /* alias of --link */ /* ===== TYPOGRAPHY · FAMILY ======================================== */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace; /* ===== TYPOGRAPHY · SIZE ========================================== */ --text-xs: 11px; /* eyebrows, micro labels */ --text-sm: 12px; /* captions, trust strip */ --text-base: 14px; /* UI default */ --text-md: 15px; /* body default */ --text-lg: 17px; /* lead paragraph */ --text-xl: 19px; /* hero sub */ --text-2xl: 22px; /* card title (display) */ --text-3xl: 28px; /* section H3 */ --text-4xl: 36px; /* section H2 small */ --text-5xl: 44px; /* section H2 */ --text-6xl: 54px; /* hero H1 small / section H1 */ --text-7xl: 64px; /* hero H1 full */ /* ===== TYPOGRAPHY · WEIGHT ======================================== */ --fw-regular: 400; --fw-medium: 500; /* default for serif display */ --fw-semibold: 600; /* default for sans UI labels */ --fw-bold: 700; /* ===== TYPOGRAPHY · LINE HEIGHT =================================== */ --lh-tight: 1.08; /* hero display */ --lh-snug: 1.2; /* section headings */ --lh-normal: 1.5; /* UI default */ --lh-relaxed: 1.65; /* long paragraphs */ /* ===== TYPOGRAPHY · LETTER SPACING ================================ */ --ls-tighter: -0.02em; /* hero display */ --ls-tight: -0.01em; /* section headings */ --ls-normal: 0; --ls-wide: 0.4px; --ls-wider: 0.8px; /* small caps, eyebrows */ --ls-widest: 1.5px; /* uppercase category labels */ /* ===== SPACING · 4px BASE ========================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; /* ===== RADIUS ===================================================== */ --radius-sm: 6px; /* pills, form buttons, chips */ --radius-md: 10px; /* inputs, small cards */ --radius-lg: 14px; /* standard cards */ --radius-xl: 20px; /* hero card, feature card */ --radius-full: 999px; /* round pills */ /* ===== SHADOW ===================================================== */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.06); --shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.08); --shadow-2xl: 0 28px 64px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); --shadow-glow-accent: 0 0 0 4px rgba(53, 193, 144, 0.18); /* ===== LAYOUT · CONTAINER ========================================= */ --container-narrow: 960px; /* long-form reading */ --container: 1200px; /* default section width · alias of --container-base */ --container-wide: 1360px; /* wide hero / media-rich (legacy) */ --container-px: 40px; /* horizontal padding inside container */ /* v1.2 · responsive container breakpoints (SPEC-02) * Use .section-container rule at bottom of this file to get responsive * widths automatically. Legacy --container and --container-wide remain * as aliases for sections that reference them directly. */ --container-base: 1200px; /* ≤ 1280px viewport */ --container-md: 1320px; /* 1281–1600px viewport */ --container-lg: 1440px; /* 1601–1920px viewport */ --container-xl: 1600px; /* ≥ 1921px viewport */ /* ===== LAYOUT · SECTION =========================================== */ /* v1.3 · 2026-04-24 — spacing audit found 160–216px gaps between sections * (sum of neighbouring sections' padding). Modern SaaS benchmark is * 96–128px. Bumping default down by one step each. * Old → New: * --section-py 96 → 64 (gap ~112-128px with neighbour) * --section-py-lg 120 → 80 (reserved for heroes + prominent bands) * --section-py-sm 80 → 56 (tight utility bands: stats, CTA banner) */ --section-py: var(--space-16); /* 64px · default top/bottom (v1.3) */ --section-py-lg: var(--space-20); /* 80px · hero, headline sections (v1.3) */ --section-py-sm: var(--space-14); /* 56px · dense / utility sections (v1.3) */ /* ===== MOTION ===================================================== */ --transition-fast: 0.15s ease; --transition: 0.2s ease; --transition-slow: 0.3s ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX ==================================================== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 900; --z-modal: 1000; --z-toast: 2000; /* ================================================================= * v1.1 ADDITIONS · 2026-04-22 * Additive tokens for blog (SEC-46 → SEC-57) + video (SEC-50, * SEC-58 → SEC-61) families. Zero breaking changes to v1. * ================================================================= */ /* ===== BLOG · LAYOUT ============================================== */ --prose-measure: 680px; /* body text measure — Stripe/Linear territory */ --prose-figure-wide: 960px; /* figure break — matches --container-narrow */ --prose-paragraph-gap: var(--space-6); /* 24px between paragraphs */ --prose-h2-top: var(--space-16); /* 64px before H2 */ --prose-h2-bottom: var(--space-5); /* 20px after H2 */ --prose-h3-top: var(--space-10); /* 40px before H3 */ --prose-h3-bottom: var(--space-4); /* 16px after H3 */ --prose-list-gap: var(--space-3); /* 12px between list items */ /* ===== BLOG · TYPOGRAPHY ========================================== */ --prose-body-size: var(--text-lg); /* 17px */ --prose-body-leading: var(--lh-relaxed); /* 1.65 */ /* ===== BLOG · READING PROGRESS ==================================== */ --reading-progress-height: 2px; --reading-progress-color: var(--accent); --reading-progress-bg: transparent; /* ===== BLOG · TOC ================================================= */ --toc-width: 220px; --toc-item-padding: var(--space-2) 0; --toc-item-color: var(--text-muted); --toc-item-active: var(--accent-text); --toc-item-hover: var(--text-heading); --toc-border-left: 2px solid var(--border); --toc-active-border: 2px solid var(--accent); /* ===== BLOG · PULL-QUOTE ========================================== */ --pullquote-border: 3px solid var(--accent); --pullquote-size: var(--text-2xl); --pullquote-font: var(--font-display); --pullquote-weight: var(--fw-medium); --pullquote-color: var(--text-heading); --pullquote-padding: var(--space-8) 0; /* ===== BLOG · CODE ================================================ */ --code-bg: var(--bg-dark); --code-text: var(--text-inverse); --code-padding: var(--space-5); --code-radius: var(--radius-md); --code-font: var(--font-mono); --code-size: 13px; --code-leading: 1.6; --code-inline-bg: var(--primary-soft); --code-inline-padding: 2px 6px; --code-inline-radius: var(--radius-sm); --code-header-bg: rgba(255, 255, 255, 0.04); --code-header-padding: var(--space-2) var(--space-4); --code-header-color: var(--text-inverse-muted); /* ===== BLOG · TOPIC CHIP ========================================== */ --topic-chip-bg: var(--accent-soft); --topic-chip-text: var(--accent-text); --topic-chip-padding: var(--space-1) var(--space-3); --topic-chip-radius: var(--radius-full); --topic-chip-size: var(--text-xs); --topic-chip-weight: var(--fw-bold); --topic-chip-tracking: var(--ls-wider); /* ===== VIDEO · ASPECT ============================================= */ --video-aspect: 16 / 9; --video-aspect-portrait: 9 / 16; --video-aspect-square: 1 / 1; /* ===== VIDEO · CONTAINER ========================================== */ --video-radius: var(--radius-lg); --video-bg: var(--bg-dark); --video-border: 1px solid var(--border); /* ===== VIDEO · POSTER ============================================= */ --video-poster-overlay: rgba(15, 23, 42, 0.25); /* ===== VIDEO · PLAY GLYPH ========================================= */ --video-play-glyph-size: 56px; --video-play-glyph-bg: rgba(255, 255, 255, 0.95); --video-play-glyph-color: var(--primary); --video-play-glyph-shadow: var(--shadow-lg); /* ===== VIDEO · CONTROLS =========================================== */ --video-control-bg: rgba(15, 23, 42, 0.7); --video-control-color: var(--text-inverse); --video-control-radius: var(--radius-sm); /* ===== VIDEO · CAPTION ============================================ */ --video-caption-size: var(--text-sm); --video-caption-color: var(--text-muted); --video-caption-padding: var(--space-3) 0 0 0; } /* ===================================================================== * RESPONSIVE SECTION CONTAINER (v1.2 · SPEC-02) * --------------------------------------------------------------------- * Apply `.section-container` on any section's inner wrapper to get a * max-width that scales with viewport: 1200px on laptop, up to 1600px * on 27" monitors. Replaces ad-hoc `max-width: 1200px` usage. * * Prose content (blog body, FAQ answers, testimonial quotes) should * use `.prose-measure` on an inner wrapper to keep reading width at * --prose-measure (680px) regardless of outer container width. * ===================================================================== */ .section-container { max-width: var(--container-base); margin: 0 auto; padding: 0 var(--container-px); } @media (min-width: 1281px) { .section-container { max-width: var(--container-md); } } @media (min-width: 1601px) { .section-container { max-width: var(--container-lg); } } @media (min-width: 1921px) { .section-container { max-width: var(--container-xl); } } .prose-measure { max-width: var(--prose-measure); margin-left: auto; margin-right: auto; } /* ===================================================================== * CHANGELOG * --------------------------------------------------------------------- * v1.3 · 2026-04-24 * Spacing audit + token-naming clarity pass. * Spacing: --section-py 96→64, --section-py-lg 120→80, * --section-py-sm 80→56. Reduced gaps between sections from * 160-216px range down to 96-128px (matches reference sites). * Token alias: --bg-surface-sage (#F1F5F0) added as an alias of * --bg-page, so specs can name "sage" semantically when used as an * alternating-band background. --bg-surface-warm (#F7F1E8 cream) * stays distinct. Resolves SPEC-22/23/24/30+ token-naming drift * (CONSOLIDATED-DEFECTS P1-3). * No breaking changes. * * v1.2 · 2026-04-23 * Added responsive container tokens (--container-base/md/lg/xl) and a * .section-container helper that scales from 1200px → 1600px across * viewport breakpoints. Legacy --container (1200px) and * --container-wide (1360px) retained as aliases for sections that * reference them directly (20 sections at time of bump). * Added --bg-surface-warm (#F7F1E8 cream) for right-panel / showcase * backdrops in the tabbed-showcase sections (SPEC-04/05/06). * Added .prose-measure helper for text-measure-sensitive blocks. * Motivation: SPEC-02 (wide-viewport layout) + SPEC-04/05/06 * (tabbed showcases using a cream backdrop). * * v1.1 · 2026-04-22 * Added blog + video token families. Additive only, no v1 breaks. * Motivation: SEC-46 → SEC-61 need consistent layout, type, code, * and media tokens. * * v1.0 · 2026-04-22 * Initial freeze — surface, text, accent, action, border, semantic * colours; Fraunces + Inter families; 12-step size scale; * 4px-base spacing; 5-stop radius; 6-stop shadow; container + section * layout; motion + z-index primitives. * ===================================================================== */