/* ===================================================================== YouGotThis — Design System Tokens (Refreshed) --------------------------------------------------------------------- A cleaner, sharper, more credible direction for a fintech serving mass-affluent Canadians. Inspired by the calm confidence of Wealthsimple, the focused tooling of Neo, and the editorial restraint of Empower — without copying any of them. Goals: - Drop the playful Sky Blue + Emerald combo. Use ONE confident primary accent (Signal Blue) and ONE earned-money accent (Sage). - Replace pure white with a warm Paper to feel calmer, less clinical. - Use a single modern grotesque (Geist) for everything except editorial moments (Newsreader serif) and tabular numbers (Geist Mono). ===================================================================== */ /* ---- Webfonts (Geist + Newsreader + Geist Mono on Google Fonts) ---- */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap'); :root { /* ================================================================= COLOR — base palette ================================================================= */ /* Ink scale — deep navy / near-black, replaces #1A2B49. Slightly cooler and deeper than before; reads as "trusted bank" not "corporate Power Point". */ --ygt-ink-900: #0A1628; /* primary text, wordmark, dark surfaces */ --ygt-ink-800: #11203A; /* hover, deep cards */ --ygt-ink-700: #1C2E4D; /* sidebar fills */ /* Slate scale — neutral gray with a blue undertone. Replaces the old #6B778C slate gray with more steps. */ --ygt-slate-700: #334155; --ygt-slate-600: #475569; --ygt-slate-500: #64748B; --ygt-slate-400: #94A3B8; --ygt-slate-300: #CBD5E1; --ygt-slate-200: #E2E8F0; --ygt-slate-100: #EEF2F6; /* Paper scale — warm off-whites. Subtle cream undertone, calm. Replaces stark #FAFAFA / #FFFFFF combo. */ --ygt-paper: #F7F5F0; /* canvas, default background */ --ygt-paper-2: #FBFAF6; /* alternating bands */ --ygt-white: #FFFFFF; /* cards, modals */ --ygt-border: #E8E5DE; /* warm border, pairs with paper */ --ygt-border-2: #DCD8CD; /* darker border for emphasis */ /* Signal — single primary accent. Confident, banking-blue. Replaces both the old #4A90E2 sky blue AND #00B894 emerald. One accent = clarity. */ --ygt-signal-700: #1747C2; --ygt-signal-600: #1E5EFF; /* primary CTA, links */ --ygt-signal-500: #4F86FF; --ygt-signal-100: #E6EEFF; /* tinted backgrounds, pills */ --ygt-signal-050: #F2F6FF; /* soft surfaces */ /* Sage — earned-money / positive accent. Used ONLY for gains, confirmations, and progress against goal. Calm, not loud. */ --ygt-sage-700: #0E5B49; --ygt-sage-600: #0F766E; --ygt-sage-100: #DDF1EC; /* Amber — caution. Used sparingly. */ --ygt-amber-600: #B45309; --ygt-amber-100: #FDF1DC; /* Crimson — negative / destructive. Deeper than the bright red it replaces — feels institutional, not alarming. */ --ygt-crimson-700: #991B1B; --ygt-crimson-600: #B91C1C; --ygt-crimson-100: #FBE7E7; /* ================================================================= SEMANTIC — what designs should USE ================================================================= */ /* Surfaces */ --bg: var(--ygt-paper); --bg-2: var(--ygt-paper-2); --surface: var(--ygt-white); --surface-dark: var(--ygt-ink-900); /* Text */ --fg: var(--ygt-ink-900); --fg-muted: var(--ygt-slate-600); --fg-subtle: var(--ygt-slate-500); --fg-on-dark: #F4F1EA; /* off-white on ink, never pure white */ --fg-on-accent: var(--ygt-white); /* Lines & dividers */ --border: var(--ygt-border); --border-strong: var(--ygt-border-2); --ring: var(--ygt-signal-600); /* Brand actions */ --primary: var(--ygt-ink-900); /* primary button: ink, not blue */ --primary-fg: var(--fg-on-dark); --accent: var(--ygt-signal-600); /* links, focus, charts */ --accent-fg: var(--ygt-white); /* Status — light surfaces */ --positive: var(--ygt-sage-600); --positive-bg: var(--ygt-sage-100); --warning: var(--ygt-amber-600); --warning-bg: var(--ygt-amber-100); --negative: var(--ygt-crimson-600); --negative-bg: var(--ygt-crimson-100); /* Status — ON DARK / on ink surfaces. Sage-600 #0F766E and Crimson-600 #B91C1C are too dark to read on ink-900. These lifted variants keep the meaning while staying readable on dark backgrounds. */ --positive-on-dark: #6FE4C8; --positive-bg-on-dark: rgba(111, 228, 200, 0.14); --warning-on-dark: #FCD34D; --warning-bg-on-dark: rgba(252, 211, 77, 0.16); --negative-on-dark: #FCA5A5; --negative-bg-on-dark: rgba(252, 165, 165, 0.16); --accent-on-dark: var(--ygt-signal-500); /* signal stays readable */ /* Chart palette (data viz) — ordered, accessible */ --chart-1: var(--ygt-signal-600); --chart-2: var(--ygt-sage-600); --chart-3: var(--ygt-ink-700); --chart-4: var(--ygt-amber-600); --chart-5: var(--ygt-slate-400); /* ================================================================= TYPE ================================================================= */ /* Families */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — fluid but bounded; designed for marketing + product to share a single ramp. Numbers below are *unitless line-heights* applied to the matching size. */ --fs-eyebrow: 0.6875rem; /* 11px — overline labels */ --fs-micro: 0.75rem; /* 12px — captions, footnotes */ --fs-sm: 0.875rem; /* 14px — UI body */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead paragraph */ --fs-lg: 1.375rem; /* 22px — H4, card titles */ --fs-xl: 1.75rem; /* 28px — H3 */ --fs-2xl: 2.25rem; /* 36px — H2, dashboard numbers */ --fs-3xl: 3rem; /* 48px — H1 */ --fs-display: 4rem; /* 64px — hero headline */ /* Line-height pairings */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tracking */ --tracking-tight: -0.02em; /* display / wordmark */ --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.12em; /* uppercase overlines */ /* ================================================================= SHAPE & ELEVATION ================================================================= */ /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 120px; /* Radii — small. Fintech reads serious with restrained corners. The old 12–20px radii read consumer-app; we tighten. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* default — cards, inputs, buttons */ --radius-lg: 14px; --radius-xl: 20px; /* hero panels only */ --radius-pill: 999px; /* Shadows — restrained. Single-layer, low alpha. Never neon. */ --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.04); --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 3px rgba(10, 22, 40, 0.04); --shadow-md: 0 2px 4px rgba(10, 22, 40, 0.04), 0 4px 12px rgba(10, 22, 40, 0.06); --shadow-lg: 0 8px 24px rgba(10, 22, 40, 0.08); --shadow-focus: 0 0 0 3px rgba(30, 94, 255, 0.18); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ===================================================================== SEMANTIC TYPE — apply these classes (or copy the rules) ===================================================================== */ html, body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; /* Geist alternates */ } .ygt-display, h1.ygt-display { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); text-wrap: balance; } .ygt-h1 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); text-wrap: balance; } .ygt-h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg); } .ygt-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg); } .ygt-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--fg); } .ygt-lead { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-muted); font-weight: var(--fw-regular); } .ygt-body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-muted); } .ygt-ui { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg); } .ygt-micro { font-family: var(--font-sans); font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-subtle); } .ygt-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-normal); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-subtle); } .ygt-num { font-family: var(--font-mono); font-feature-settings: "tnum" on, "lnum" on, "zero" on; letter-spacing: -0.01em; } .ygt-quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg); } /* The one editorial moment — a serif accent inline. Use VERY sparingly for warmth (e.g. founder quotes, life-event copy). */ .ygt-serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); }