/* ========================================================================= Voice to Lead — Design Tokens English-first leadership communication training (in-person + app) Audience: executives, founders, business leaders, sales & service teams Voice: warm & encouraging · calm & grounded · bold · sharp & professional ========================================================================= */ :root { /* ---------------------------------------------------------------------- COLORS The brand sits on three pillars: 1. Ink Black — wordmark, body type, authority 2. Brand Gold — gradient mark, premium accent (use sparingly) 3. Lead Blue — deep professional blue from voicetolead.com, carries trust and clarity in product surfaces Backed by warm ivory neutrals so gold reads as gold (not yellow) against cool white. ---------------------------------------------------------------------- */ /* Ink — primary text, strong surfaces */ --vtl-ink-900: #0E0E0F; /* logo black, headlines on light */ --vtl-ink-800: #1C1D1F; /* default body text */ --vtl-ink-700: #303236; --vtl-ink-600: #4A4D52; --vtl-ink-500: #6A6E75; /* secondary text */ --vtl-ink-400: #90959D; /* muted text, icons */ --vtl-ink-300: #BFC3CB; /* disabled, dividers on dark */ --vtl-ink-200: #DCDFE4; /* borders */ --vtl-ink-100: #ECEEF1; /* hairlines, subtle dividers */ /* Lead Blue — primary action, links, focus. Anchored on brand #367C96 (a calm teal-blue). */ --vtl-blue-900: #0B2530; --vtl-blue-800: #133644; --vtl-blue-700: #1F4F62; /* hover */ --vtl-blue-600: #367C96; /* primary — brand blue */ --vtl-blue-500: #4F95AE; --vtl-blue-400: #76AFC4; --vtl-blue-300: #A4C8D7; --vtl-blue-200: #CBDEE7; --vtl-blue-100: #E5EEF3; --vtl-blue-50: #F3F8FA; /* Gold — accent only. Reserved for brand moments, never for body or UI. */ --vtl-gold-900: #6F4A12; --vtl-gold-800: #8C5E1A; --vtl-gold-700: #A87526; --vtl-gold-600: #C8902F; /* core gold */ --vtl-gold-500: #D9A645; --vtl-gold-400: #E6BD6B; --vtl-gold-300: #F1D399; --vtl-gold-200: #F8E7C4; --vtl-gold-100: #FCF3DE; --vtl-gold-50: #FDFAF1; /* Warm ivory neutrals — page surfaces. Slight warmth makes gold sing. */ --vtl-ivory-900: #2A2722; --vtl-ivory-800: #4B453B; --vtl-ivory-700: #6F6759; --vtl-ivory-500: #A89E8B; --vtl-ivory-300: #D9D2C1; --vtl-ivory-200: #E8E2D2; --vtl-ivory-100: #F2EDE0; --vtl-ivory-50: #F9F6EE; /* warm page background */ --vtl-paper: #FBFAF6; /* default page */ --vtl-white: #FFFFFF; /* Status — calibrated to live in the same warm range */ --vtl-success-700: #1F6B4A; --vtl-success-500: #2E9968; --vtl-success-100: #DCF1E5; --vtl-warning-700: #8A5A0E; --vtl-warning-500: #D4901C; --vtl-warning-100: #FBEAC9; --vtl-danger-700: #8C2A1F; --vtl-danger-500: #C84133; --vtl-danger-100: #F7DDD8; --vtl-info-700: #1F4F62; --vtl-info-500: #367C96; --vtl-info-100: #E5EEF3; /* Semantic aliases — use these in component CSS */ --vtl-bg: var(--vtl-paper); --vtl-bg-warm: var(--vtl-ivory-50); --vtl-bg-elevated: var(--vtl-white); --vtl-bg-inverse: var(--vtl-ink-900); --vtl-text: var(--vtl-ink-800); --vtl-text-muted: var(--vtl-ink-500); --vtl-text-subtle: var(--vtl-ink-400); --vtl-text-inverse: var(--vtl-white); --vtl-border: var(--vtl-ink-200); --vtl-border-soft: var(--vtl-ink-100); --vtl-border-strong: var(--vtl-ink-300); --vtl-accent: var(--vtl-blue-600); --vtl-accent-hover: var(--vtl-blue-700); --vtl-accent-soft: var(--vtl-blue-50); --vtl-brand-gold: var(--vtl-gold-600); /* Brand gold gradient — matches the wordmark "VOICE" treatment */ --vtl-grad-gold: linear-gradient(180deg, #E8C26A 0%, #C8902F 45%, #8C5E1A 78%, #C8902F 100%); --vtl-grad-gold-shine: linear-gradient(135deg, #F1D399 0%, #D9A645 25%, #A87526 55%, #E6BD6B 80%, #8C5E1A 100%); /* ---------------------------------------------------------------------- TYPOGRAPHY All-sans system. Two families: Display: Archivo (variable) — condensed/wide range echoes the geometric heft of the wordmark without copying it Text: Inter (variable) — clean humanist, excellent at small sizes in EN and FR, supports tabular figures Logo wordmark itself is preserved as an image asset; never re-typeset. ---------------------------------------------------------------------- */ --vtl-font-display: "Roboto Condensed", "Roboto", system-ui, sans-serif; --vtl-font-text: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --vtl-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — modular, 1.25 ratio on display, 1.2 on text */ --vtl-size-display-2xl: 88px; /* hero */ --vtl-size-display-xl: 64px; --vtl-size-display-lg: 48px; --vtl-size-display-md: 36px; --vtl-size-display-sm: 28px; --vtl-size-body-xl: 20px; /* lede */ --vtl-size-body-lg: 18px; --vtl-size-body-md: 16px; /* default */ --vtl-size-body-sm: 14px; --vtl-size-body-xs: 13px; --vtl-size-eyebrow: 12px; /* uppercase label */ --vtl-weight-regular: 400; --vtl-weight-medium: 500; --vtl-weight-semibold: 600; --vtl-weight-bold: 700; --vtl-weight-black: 800; --vtl-leading-tight: 1.05; --vtl-leading-snug: 1.2; --vtl-leading-normal: 1.5; --vtl-leading-loose: 1.7; --vtl-tracking-display: -0.02em; --vtl-tracking-text: 0; --vtl-tracking-eyebrow: 0.14em; /* ---------------------------------------------------------------------- SPACING — 4px base ---------------------------------------------------------------------- */ --vtl-space-0: 0; --vtl-space-1: 4px; --vtl-space-2: 8px; --vtl-space-3: 12px; --vtl-space-4: 16px; --vtl-space-5: 20px; --vtl-space-6: 24px; --vtl-space-8: 32px; --vtl-space-10: 40px; --vtl-space-12: 48px; --vtl-space-16: 64px; --vtl-space-20: 80px; --vtl-space-24: 96px; --vtl-space-32: 128px; /* ---------------------------------------------------------------------- RADII Tight, considered. Pills for tags, soft corners for cards, no balloons. ---------------------------------------------------------------------- */ --vtl-radius-xs: 4px; --vtl-radius-sm: 8px; --vtl-radius-md: 12px; --vtl-radius-lg: 16px; --vtl-radius-xl: 24px; --vtl-radius-pill: 999px; /* ---------------------------------------------------------------------- SHADOWS — cool grey base, low spread, never coloured. ---------------------------------------------------------------------- */ --vtl-shadow-xs: 0 1px 2px rgba(14, 14, 15, 0.04); --vtl-shadow-sm: 0 1px 2px rgba(14, 14, 15, 0.06), 0 1px 3px rgba(14, 14, 15, 0.04); --vtl-shadow-md: 0 4px 8px rgba(14, 14, 15, 0.06), 0 2px 4px rgba(14, 14, 15, 0.04); --vtl-shadow-lg: 0 12px 24px rgba(14, 14, 15, 0.08), 0 4px 8px rgba(14, 14, 15, 0.04); --vtl-shadow-xl: 0 24px 48px rgba(14, 14, 15, 0.12), 0 8px 16px rgba(14, 14, 15, 0.06); /* Focus ring — Lead Blue at low alpha, accessible outline */ --vtl-ring: 0 0 0 3px rgba(27, 67, 130, 0.28); --vtl-ring-gold: 0 0 0 3px rgba(200, 144, 47, 0.32); /* ---------------------------------------------------------------------- MOTION ---------------------------------------------------------------------- */ --vtl-ease-out: cubic-bezier(0.2, 0.7, 0.25, 1); --vtl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --vtl-dur-fast: 120ms; --vtl-dur-base: 220ms; --vtl-dur-slow: 420ms; /* ---------------------------------------------------------------------- LAYOUT ---------------------------------------------------------------------- */ --vtl-container-sm: 640px; --vtl-container-md: 880px; --vtl-container-lg: 1120px; --vtl-container-xl: 1280px; } /* ========================================================================= FONT FACES — brand-supplied Roboto family (variable + static) Roboto Condensed for display, Roboto for text. Loaded from /fonts. Path is relative to the consumer of tokens.css; product surfaces in /kits use ../fonts via the same relative reference. ========================================================================= */ /* Variable Roboto — covers full weight + italic range with one file each */ @font-face { font-family: "Roboto"; src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("../fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("../fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 100%; font-style: italic; font-display: swap; } /* Roboto Condensed — explicit family for display heads. Static weights. */ @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-Regular.ttf") format("truetype"), url("../fonts/Roboto_Condensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-Medium.ttf") format("truetype"), url("../fonts/Roboto_Condensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-SemiBold.ttf") format("truetype"),url("../fonts/Roboto_Condensed-SemiBold.ttf") format("truetype");font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-Bold.ttf") format("truetype"), url("../fonts/Roboto_Condensed-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-ExtraBold.ttf") format("truetype"),url("../fonts/Roboto_Condensed-ExtraBold.ttf") format("truetype");font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-Black.ttf") format("truetype"), url("../fonts/Roboto_Condensed-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-Italic.ttf") format("truetype"), url("../fonts/Roboto_Condensed-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("fonts/Roboto_Condensed-BoldItalic.ttf") format("truetype"),url("../fonts/Roboto_Condensed-BoldItalic.ttf") format("truetype");font-weight: 700; font-style: italic; font-display: swap; } /* ========================================================================= BASE — opt-in by adding class="vtl" on a container ========================================================================= */ .vtl, .vtl * { box-sizing: border-box; } .vtl { font-family: var(--vtl-font-text); font-size: var(--vtl-size-body-md); line-height: var(--vtl-leading-normal); color: var(--vtl-text); background: var(--vtl-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .vtl ::selection { background: var(--vtl-blue-200); color: var(--vtl-ink-900); } /* Display utility classes — quick way to render heads correctly */ .vtl-display { font-family: var(--vtl-font-display); font-weight: var(--vtl-weight-bold); letter-spacing: var(--vtl-tracking-display); line-height: var(--vtl-leading-tight); color: var(--vtl-ink-900); } .vtl-display-2xl { font-size: var(--vtl-size-display-2xl); font-weight: 800; } .vtl-display-xl { font-size: var(--vtl-size-display-xl); font-weight: 800; } .vtl-display-lg { font-size: var(--vtl-size-display-lg); font-weight: 700; } .vtl-display-md { font-size: var(--vtl-size-display-md); font-weight: 700; } .vtl-display-sm { font-size: var(--vtl-size-display-sm); font-weight: 600; } .vtl-eyebrow { font-family: var(--vtl-font-text); font-size: var(--vtl-size-eyebrow); letter-spacing: var(--vtl-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--vtl-ink-500); } .vtl-lede { font-size: var(--vtl-size-body-xl); line-height: 1.45; color: var(--vtl-ink-700); font-weight: 400; } /* Gold treatment — for hero word accents only. Mimics the "VOICE" gradient. */ .vtl-gold { background: var(--vtl-grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }