/* ========================================================================== Links Design System — Colors & Typography Single source of truth for color tokens, typography tokens, and semantic styles. Import this file once at the top of any HTML mock. ========================================================================== */ /* ---- Webfonts (licensed brand files in /fonts/) -------------------------- */ @font-face { font-family: "Myriad Pro"; src: url("fonts/Myriad_Pro_Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Myriad Pro"; src: url("fonts/Myriad_Pro_Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Myriad Pro"; src: url("fonts/Myriad_Pro_Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Adobe Garamond"; src: url("fonts/Adobe_Garamond_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ----- Brand palette --------------------------------------------------- */ --links-red: #A8201A; /* PMS 1805 C ≈ CMYK 0/91/100/23 */ --links-red-ink: #7E1813; /* hover / pressed */ --links-red-soft: #E8B7B2; /* tinted backgrounds */ --links-red-wash: #FBEFEE; /* surface tint */ --links-grey: #4D4D4D; /* "Black 72%" — wordmark grey */ --links-grey-ink: #2B2B2B; /* body text on white */ --links-grey-2: #6E6E6E; /* secondary text */ --links-grey-3: #9A9A9A; /* tertiary text / icons */ --links-grey-4: #C9C9C9; /* hairlines / disabled */ --links-grey-5: #E6E6E6; /* surface lines */ --links-grey-6: #F2F2F2; /* surface tint */ --links-white: #FFFFFF; --links-paper: #FAFAF8; /* off-white surface */ --links-ink: #1A1A1A; /* highest-contrast black */ /* ----- Semantic colors (light mode) ------------------------------------ */ --bg: var(--links-white); --bg-muted: var(--links-grey-6); --bg-inverse: var(--links-grey-ink); --fg: var(--links-grey-ink); --fg-1: var(--links-grey-ink); /* primary text */ --fg-2: var(--links-grey); /* secondary text */ --fg-3: var(--links-grey-2); /* tertiary text */ --fg-muted: var(--links-grey-3); --fg-on-red: var(--links-white); --fg-on-dark: var(--links-white); --accent: var(--links-red); --accent-ink: var(--links-red-ink); --accent-soft: var(--links-red-soft); --accent-wash: var(--links-red-wash); --border: var(--links-grey-5); --border-strong: var(--links-grey-4); --hairline: #00000014; /* ----- Type system ----------------------------------------------------- */ --font-sans: "Myriad Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --font-serif: "Adobe Garamond", "EB Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif; --font-web: Arial, "Helvetica Neue", sans-serif; /* "webb" track */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Weights — map to brand specimen */ --w-light: 300; /* Myriad Pro Light → body */ --w-regular: 400; --w-semibold: 600; /* Myriad Pro Semibold → sub-head */ --w-black: 900; /* Myriad Pro Black → headline */ /* Type scale (clamp for fluid screens) */ --fs-display: clamp(48px, 6vw, 80px); --fs-h1: clamp(36px, 4.2vw, 56px); --fs-h2: clamp(28px, 3vw, 40px); --fs-h3: 22px; --fs-h4: 18px; --fs-body: 16px; /* ≈ 12pt screen body */ --fs-body-sm: 14px; /* ≈ 9–10pt support copy */ --fs-caption: 12px; --fs-eyebrow: 11px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55; /* mirrors 9/11 & 12/14 ratios */ --lh-loose: 1.7; --tracking-tight: -0.01em; --tracking-eyebrow: 0.18em; /* Measure (45–65 chars per brand book) */ --measure: 62ch; /* ----- Spacing & layout ------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-0: 0px; /* default — brand reads geometric */ --radius-1: 2px; /* hairline crispness */ --radius-2: 4px; /* inputs / chips */ --radius-3: 8px; /* cards */ --radius-pill: 999px; /* ----- Elevation ------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04); --shadow-2: 0 2px 6px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.05); --shadow-3: 0 8px 24px rgba(20, 20, 20, 0.10), 0 2px 4px rgba(20, 20, 20, 0.05); --shadow-inset: inset 0 0 0 1px var(--border); /* ----- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* ========================================================================== Semantic element styles ========================================================================== */ html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); } body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-light); } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--font-sans); color: var(--fg-1); margin: 0; } h1, .h1 { font-size: var(--fs-h1); font-weight: var(--w-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h2, .h2 { font-size: var(--fs-h2); font-weight: var(--w-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h3, .h3 { font-size: var(--fs-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); } h4, .h4 { font-size: var(--fs-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); } .display { font-size: var(--fs-display); font-weight: var(--w-black); line-height: 1.02; letter-spacing: -0.015em; } .eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--w-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } .lede { font-family: var(--font-serif); font-size: 22px; line-height: 1.45; font-weight: 400; color: var(--fg-1); max-width: var(--measure); } .body-serif { font-family: var(--font-serif); font-weight: 400; line-height: 1.6; } p { margin: 0 0 1em 0; max-width: var(--measure); } small, .caption { font-size: var(--fs-caption); color: var(--fg-3); } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; } a:hover { color: var(--accent-ink); } code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--links-grey-6); padding: 0.1em 0.35em; border-radius: var(--radius-2); } pre { background: var(--links-grey-6); padding: var(--space-4); border-radius: var(--radius-3); overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; } .kicker { font-family: var(--font-sans); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 12px; color: var(--fg-2); } ::selection { background: var(--accent); color: var(--fg-on-red); }