/* ============================================================ RELATIONAL DESIGN SYSTEM — Design Tokens relationaldesignsystem.com Master style system for 54 Relational Design Thinking Frameworks Author: William T. Braddock, Jr. Color Philosophy: Deep slate-blue grounds the system in intellectual rigor. Sage green signals the relational, organic, living quality of the work. Warm stone neutrals keep the reading experience calm and unhurried. The palette avoids the teal/cream of your other projects to give this flagship site its own scholarly identity. Typography Philosophy: Instrument Serif (Google Fonts) for display — elegant, contemporary serif with classical roots. Reads as authoritative without being stuffy. Source Sans 3 (Google Fonts) for body — the humanist sans used by Stanford and major academic institutions. Optimized for long-form reading, multilingual support, and screen clarity. Together they say: "rigorous thinking, presented with care." ============================================================ */ /* ──────────────────────────────────────────────────────────── § 1. FONTS ──────────────────────────────────────────────────────────── */ /* Fonts loaded via css/fonts.css — self-hosted, no third-party requests */ /* ──────────────────────────────────────────────────────────── § 2. COLOR TOKENS — Light Mode (default) Naming: --rds-{role}-{variant} Scale: 50 (lightest) → 900 (darkest) ──────────────────────────────────────────────────────────── */ :root { /* ── Brand Colors ───────────────────────────────────────── */ /* Primary: Deep Slate — intellectual depth, systems thinking */ --rds-primary-50: #F0F1F4; --rds-primary-100: #D8DBE3; --rds-primary-200: #B1B7C7; --rds-primary-300: #8A93AB; --rds-primary-400: #636F8F; --rds-primary-500: #3D4B73; /* Base primary */ --rds-primary-600: #313C5C; --rds-primary-700: #252D45; --rds-primary-800: #1A1F2E; --rds-primary-900: #0E1017; /* Accent: Sage Green — relational, organic, living systems */ --rds-accent-50: #F2F6F0; --rds-accent-100: #DDE6D8; --rds-accent-200: #BBCDB1; --rds-accent-300: #99B48A; --rds-accent-400: #779B63; --rds-accent-500: #597D47; /* Base accent — AA compliant (4.52:1 on light bg) */ --rds-accent-600: #48663A; --rds-accent-700: #364C2B; --rds-accent-800: #24331D; --rds-accent-900: #12190E; /* Warm Accent: Terracotta — for emphasis, warmth, calls to action */ --rds-warm-50: #FBF2EE; --rds-warm-100: #F3DDD3; --rds-warm-200: #E7BBA7; --rds-warm-300: #DB997B; --rds-warm-400: #CF774F; --rds-warm-500: #B25B36; /* Base warm — AA compliant (4.52:1 on light bg) */ --rds-warm-600: #934B2D; --rds-warm-700: #6E3822; --rds-warm-800: #4A2616; --rds-warm-900: #25130B; /* ── Neutral Palette: Warm Stone ───────────────────────── Slightly warm gray with a stone undertone. Avoids cold blue-grays. Feels calm, scholarly, approachable. ──────────────────────────────────────────────────────────── */ --rds-neutral-0: #FFFFFF; --rds-neutral-50: #FAFAF8; /* Page background */ --rds-neutral-100: #F4F3F0; /* Surface / cards */ --rds-neutral-150: #EEEDEA; /* Surface alt */ --rds-neutral-200: #E2E0DC; /* Borders, dividers */ --rds-neutral-300: #CBC8C2; /* Subtle borders */ --rds-neutral-400: #A8A49D; /* Borders, decorative — NOT for body text */ --rds-neutral-500: #706C65; /* Muted text — AA compliant (4.71:1 on surface, 5.00:1 on page bg) */ --rds-neutral-600: #6B6660; /* Secondary text */ --rds-neutral-700: #504C47; /* Strong secondary */ --rds-neutral-800: #363330; /* Near-black text */ --rds-neutral-900: #1C1A18; /* Primary text */ /* ── Semantic Colors ─────────────────────────────────────── */ --rds-error-light: #F8E8E8; --rds-error: #C4423A; --rds-error-dark: #8B2E28; --rds-warning-light: #FBF0E0; --rds-warning: #C68B2C; --rds-warning-dark: #8A6120; --rds-success-light: #E8F2E6; --rds-success: #48803A; --rds-success-dark: #325A28; --rds-info-light: #E8EEF6; --rds-info: #3D6BA8; --rds-info-dark: #2B4B76; /* ── Part Cluster Colors ───────────────────────────────── Each of the 5 Parts gets a signature color for badges, cluster pages, and wayfinding. Derived from the brand palette. ──────────────────────────────────────────────────────────── */ --rds-part-i: #3D4B73; /* Relational Dynamics — Deep Slate */ --rds-part-ii: #7B5E8A; /* Emotional Infrastructure — Muted Purple */ --rds-part-iii: #B85E38; /* Narrative Systems — Terracotta */ --rds-part-iv: #3D7A8A; /* Civic Design — Steel Teal */ --rds-part-v: #5A7F48; /* Systems Navigation — Sage */ /* ── Semantic Role Aliases ─────────────────────────────── Use these in components. They map to the scale above and flip automatically in dark mode. ──────────────────────────────────────────────────────────── */ /* Backgrounds */ --rds-bg: var(--rds-neutral-50); --rds-bg-surface: var(--rds-neutral-100); --rds-bg-surface-alt: var(--rds-neutral-150); --rds-bg-elevated: var(--rds-neutral-0); /* Text */ --rds-text: var(--rds-neutral-900); --rds-text-secondary: var(--rds-neutral-600); --rds-text-muted: var(--rds-neutral-500); --rds-text-faint: var(--rds-neutral-400); --rds-text-inverse: var(--rds-neutral-0); /* Borders */ --rds-border: var(--rds-neutral-200); --rds-border-subtle: var(--rds-neutral-150); --rds-border-strong: var(--rds-neutral-300); /* Interactive */ --rds-link: var(--rds-primary-500); --rds-link-hover: var(--rds-primary-600); --rds-focus-ring: var(--rds-accent-400); /* Buttons */ --rds-btn-primary-bg: var(--rds-primary-500); --rds-btn-primary-text: var(--rds-neutral-0); --rds-btn-primary-hover: var(--rds-primary-600); --rds-btn-secondary-bg: transparent; --rds-btn-secondary-text: var(--rds-primary-500); --rds-btn-secondary-border: var(--rds-primary-300); --rds-btn-accent-bg: var(--rds-accent-500); --rds-btn-accent-text: var(--rds-neutral-0); --rds-btn-accent-hover: var(--rds-accent-600); /* ── Typography Tokens ───────────────────────────────────── */ /* Font Families */ --rds-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --rds-font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; --rds-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', 'Consolas', monospace; /* Font Sizes — Modular Scale (1.250 — Major Third) */ --rds-text-xs: 0.75rem; /* 12px — Labels, legal */ --rds-text-sm: 0.875rem; /* 14px — Captions, metadata */ --rds-text-base: 1rem; /* 16px — Body copy */ --rds-text-md: 1.125rem; /* 18px — Large body / lead */ --rds-text-lg: 1.25rem; /* 20px — Small headings */ --rds-text-xl: 1.5rem; /* 24px — Section headings */ --rds-text-2xl: 1.875rem; /* 30px — Page headings */ --rds-text-3xl: 2.25rem; /* 36px — Large headings */ --rds-text-4xl: 3rem; /* 48px — Hero display */ --rds-text-5xl: 3.75rem; /* 60px — Hero display large */ --rds-text-6xl: 4.5rem; /* 72px — Hero display XL */ /* Line Heights */ --rds-leading-none: 1; --rds-leading-tight: 1.2; /* Display text */ --rds-leading-snug: 1.35; /* Headings */ --rds-leading-normal: 1.6; /* Body copy */ --rds-leading-relaxed: 1.75; /* Long-form reading */ /* Font Weights */ --rds-weight-light: 300; --rds-weight-regular: 400; --rds-weight-medium: 500; --rds-weight-semibold: 600; --rds-weight-bold: 700; /* Letter Spacing */ --rds-tracking-tight: -0.025em; /* Display headings */ --rds-tracking-normal: 0; --rds-tracking-wide: 0.025em; /* Small caps, labels */ --rds-tracking-wider: 0.05em; /* Overline labels */ --rds-tracking-widest: 0.1em; /* All-caps labels */ /* ── Spacing Scale ───────────────────────────────────────── */ --rds-space-0: 0; --rds-space-1: 0.25rem; /* 4px */ --rds-space-2: 0.5rem; /* 8px */ --rds-space-3: 0.75rem; /* 12px */ --rds-space-4: 1rem; /* 16px */ --rds-space-5: 1.25rem; /* 20px */ --rds-space-6: 1.5rem; /* 24px */ --rds-space-8: 2rem; /* 32px */ --rds-space-10: 2.5rem; /* 40px */ --rds-space-12: 3rem; /* 48px */ --rds-space-16: 4rem; /* 64px */ --rds-space-20: 5rem; /* 80px */ --rds-space-24: 6rem; /* 96px */ --rds-space-32: 8rem; /* 128px */ /* ── Border Radius ───────────────────────────────────────── */ --rds-radius-none: 0; --rds-radius-sm: 0.25rem; /* 4px — Subtle rounding */ --rds-radius-md: 0.5rem; /* 8px — Cards, inputs */ --rds-radius-lg: 0.75rem; /* 12px — Modals, large cards */ --rds-radius-xl: 1rem; /* 16px — Feature cards */ --rds-radius-2xl: 1.5rem; /* 24px — Hero elements */ --rds-radius-full: 9999px; /* Pills, circles */ /* ── Shadows ─────────────────────────────────────────────── */ --rds-shadow-sm: 0 1px 2px rgba(28, 26, 24, 0.05); --rds-shadow-md: 0 4px 8px rgba(28, 26, 24, 0.08), 0 1px 3px rgba(28, 26, 24, 0.04); --rds-shadow-lg: 0 8px 24px rgba(28, 26, 24, 0.10), 0 2px 6px rgba(28, 26, 24, 0.05); --rds-shadow-xl: 0 16px 48px rgba(28, 26, 24, 0.12), 0 4px 12px rgba(28, 26, 24, 0.06); /* ── Transitions ─────────────────────────────────────────── */ --rds-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --rds-ease-in: cubic-bezier(0.42, 0, 1, 1); --rds-ease-out: cubic-bezier(0, 0, 0.58, 1); --rds-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --rds-duration-fast: 120ms; --rds-duration-normal: 200ms; --rds-duration-slow: 350ms; --rds-duration-slower: 500ms; /* ── Layout ──────────────────────────────────────────────── */ --rds-container-sm: 640px; --rds-container-md: 768px; --rds-container-lg: 1024px; --rds-container-xl: 1200px; --rds-container-2xl: 1400px; --rds-content-width: 720px; /* Optimal reading width */ --rds-sidebar-width: 280px; --rds-nav-height: 72px; --rds-gutter: var(--rds-space-6); /* 24px */ --rds-gutter-lg: var(--rds-space-8); /* 32px */ --rds-section-gap: var(--rds-space-20); /* 80px */ --rds-section-gap-lg: var(--rds-space-24); /* 96px */ } /* ──────────────────────────────────────────────────────────── § 3. DARK MODE Activated via class="dark" on or , or via prefers-color-scheme media query. ──────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not(.light) { /* Neutral palette — inverted warm stone */ --rds-neutral-0: #111110; --rds-neutral-50: #181716; --rds-neutral-100: #1F1E1C; --rds-neutral-150: #262523; --rds-neutral-200: #32302D; --rds-neutral-300: #4A4843; --rds-neutral-400: #6B6860; --rds-neutral-500: #8C887F; --rds-neutral-600: #A8A49D; --rds-neutral-700: #C4C0B9; --rds-neutral-800: #DDD9D3; --rds-neutral-900: #EDEBE7; /* Primary — lightened for dark backgrounds */ --rds-primary-50: #0E1017; --rds-primary-100: #1A1F2E; --rds-primary-200: #252D45; --rds-primary-300: #313C5C; --rds-primary-400: #4D5C8A; --rds-primary-500: #8294C4; /* AA compliant: 5.54:1 on surface, 5.95:1 on bg */ --rds-primary-600: #9DADD2; /* was #8D9BC4 */ --rds-primary-700: #AAB4D5; --rds-primary-800: #C7CDE6; --rds-primary-900: #E4E6F7; /* Accent — adjusted for dark backgrounds */ --rds-accent-50: #12190E; --rds-accent-100: #24331D; --rds-accent-200: #364C2B; --rds-accent-300: #48663A; --rds-accent-400: #6A9454; --rds-accent-500: #8AB575; /* Lighter for readability */ --rds-accent-600: #A2C790; --rds-accent-700: #BAD9AB; --rds-accent-800: #D2EBC6; --rds-accent-900: #EAFBE1; /* Warm — adjusted for dark backgrounds */ --rds-warm-50: #25130B; --rds-warm-100: #4A2616; --rds-warm-200: #6E3822; --rds-warm-300: #934B2D; --rds-warm-400: #CF774F; --rds-warm-500: #E09470; /* Lighter for readability */ --rds-warm-600: #E8AD90; --rds-warm-700: #F0C6B0; --rds-warm-800: #F8DFD0; --rds-warm-900: #FBF2EE; /* Semantic — dark mode variants */ --rds-error-light: #3A1A18; --rds-error: #E06B63; --rds-error-dark: #F2A09A; --rds-warning-light: #3A2D14; --rds-warning: #E0A84E; --rds-warning-dark: #F2CC8A; --rds-success-light: #1A2E18; --rds-success: #6BA85B; --rds-success-dark: #9AD48A; --rds-info-light: #1A2640; --rds-info: #6B9AD8; --rds-info-dark: #A0BDE8; /* Button override — separate from link color to ensure white text contrast */ --rds-btn-primary-bg: #4A608F; /* 6.25:1 with white — AA+ */ /* Part colors — lightened for dark mode */ --rds-part-i: #8294C4; --rds-part-ii: #A88CB8; --rds-part-iii: #E09470; --rds-part-iv: #6BA8B8; --rds-part-v: #8AB575; /* Shadows — adjusted for dark backgrounds */ --rds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --rds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15); --rds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.20); --rds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25); } } /* Manual dark mode toggle class */ .dark { --rds-neutral-0: #111110; --rds-neutral-50: #181716; --rds-neutral-100: #1F1E1C; --rds-neutral-150: #262523; --rds-neutral-200: #32302D; --rds-neutral-300: #4A4843; --rds-neutral-400: #6B6860; --rds-neutral-500: #8C887F; --rds-neutral-600: #A8A49D; --rds-neutral-700: #C4C0B9; --rds-neutral-800: #DDD9D3; --rds-neutral-900: #EDEBE7; --rds-primary-500: #8294C4; /* AA: 5.54:1 on surface, 5.95:1 on bg */ --rds-primary-600: #9DADD2; --rds-btn-primary-bg: #4A608F; /* Button bg — 6.25:1 with white */ --rds-accent-500: #8AB575; --rds-accent-600: #A2C790; --rds-warm-500: #E09470; --rds-warm-600: #E8AD90; --rds-error: #E06B63; --rds-warning: #E0A84E; --rds-success: #6BA85B; --rds-info: #6B9AD8; --rds-part-i: #8294C4; --rds-part-ii: #A88CB8; --rds-part-iii: #E09470; --rds-part-iv: #6BA8B8; --rds-part-v: #8AB575; --rds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --rds-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15); --rds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.20); --rds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25); }