/* ──────────────────────────────────────────────────────────────────────────── * Hiremé — Design Tokens v2 * Refined per master design brief (Part 1: Brand System). * * Key shifts from v1: * • Coral locked to #FF6B81 (was #E94560). Do not drift. * • Background: warm cream with pink undertone (was clinical #f8f9fa). * • Navy demoted — accent role only, not the brand carrier. * • Gradients forbidden across the board. * • Motion slowed to 400–600ms with generous easing. * • Body size lifted to 17–18px, line-height 1.6+. * • Serif companion added for editorial moments. * ──────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ * FONTS — self-hosted Inter (3 optical sizes, full weight range + italics) * Paths are relative to the CSS file. Newsreader (serif companion) loads * via Google Fonts from the HTML head. * ══════════════════════════════════════════════════════════════════════ */ /* Inter 18pt — body, UI, labels (≤ 18px targets) */ @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_18pt-Thin.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_18pt-Light.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_18pt-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_18pt-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_18pt-Italic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_18pt-Medium.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_18pt-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_18pt-Bold.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: normal; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_18pt-Black.ttf') format('truetype'); } @font-face { font-family: 'Inter 18'; font-style: italic; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); } /* Inter 24pt — subheads, H3 / H4 (18–28px targets) */ @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_24pt-Thin.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_24pt-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_24pt-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_24pt-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_24pt-Light.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_24pt-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_24pt-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_24pt-Italic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_24pt-Medium.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_24pt-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_24pt-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_24pt-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_24pt-Bold.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_24pt-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_24pt-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: normal; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_24pt-Black.ttf') format('truetype'); } @font-face { font-family: 'Inter 24'; font-style: italic; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_24pt-BlackItalic.ttf') format('truetype'); } /* Inter 28pt — display, H1 / H2 (≥ 28px targets) */ @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_28pt-Thin.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 100; font-display: swap; src: url('/public/fonts/Inter_28pt-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_28pt-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 200; font-display: swap; src: url('/public/fonts/Inter_28pt-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_28pt-Light.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 300; font-display: swap; src: url('/public/fonts/Inter_28pt-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_28pt-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 400; font-display: swap; src: url('/public/fonts/Inter_28pt-Italic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_28pt-Medium.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 500; font-display: swap; src: url('/public/fonts/Inter_28pt-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_28pt-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 600; font-display: swap; src: url('/public/fonts/Inter_28pt-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_28pt-Bold.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 700; font-display: swap; src: url('/public/fonts/Inter_28pt-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 800; font-display: swap; src: url('/public/fonts/Inter_28pt-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: normal; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_28pt-Black.ttf') format('truetype'); } @font-face { font-family: 'Inter 28'; font-style: italic; font-weight: 900; font-display: swap; src: url('/public/fonts/Inter_28pt-BlackItalic.ttf') format('truetype'); } :root { /* ── Color ───────────────────────────────────────────────────────────── * Two brand carriers: warm cream paper + coral. * Everything else is neutral tooling or a desaturated status shade. * ─────────────────────────────────────────────────────────────────── */ /* Paper (background system) */ --paper: #fbf6f0; /* primary bg — warm cream, faint pink undertone */ --paper-soft: #f6efe6; /* pressed / subtle section contrast */ --paper-deep: #efe5d8; /* tertiary — rarely used */ --paper-warm-dark: #1f1a18; /* warm brown-black, dramatic inversion */ --paper-warm-dark-2: #2a2320; /* warm-dark elevated surface */ /* Ink (text system — warm, never pure black) */ --ink: #1a1611; /* primary — near-black with warm tilt */ --ink-body: #2a241e; /* body copy — slightly softer than headlines */ --ink-muted: #726860; /* secondary text — medium warm gray */ --ink-subtle: #a39b91; /* meta, footnotes */ --ink-on-dark: #f4ece0; /* cream text on warm-dark surfaces */ --ink-on-dark-muted: #b8ab99; /* Coral — the single brand accent. Hex is locked; do not drift. */ --coral: #FF6B81; /* canonical coral — CTAs, punchline word */ --coral-deep: #E85470; /* pressed / hover */ --coral-pill-bg: #fde4e7; /* soft pink pill tint — locked */ --coral-pill-ink: #a83349; /* text on pill */ /* Status — desaturated warm versions */ --status-success: #4a7856; /* forest, not Spotify */ --status-success-bg: #e6ede7; --status-warning: #b5854a; /* warm amber */ --status-warning-bg: #f2e9da; --status-info: #4f6b84; /* muted slate-blue, rare */ --status-info-bg: #e5eaef; /* Hairlines & borders — never pure-gray. Always tinted warm. */ --rule: #1a16110f; /* ~6% ink */ --rule-strong: #1a161120; /* ~12% ink */ /* ── Type ────────────────────────────────────────────────────────────── * Inter is the product chrome font. Serif is editorial only — * reserved for Hiremé artifact, reassurance beats, long-form. * ─────────────────────────────────────────────────────────────────── */ /* Sans (Inter, three optical sizes) */ --font-display: 'Inter 28', system-ui, sans-serif; /* H1 / H2 */ --font-heading: 'Inter 24', system-ui, sans-serif; /* H3 / H4, subheads */ --font-body: 'Inter 18', system-ui, sans-serif; /* body, UI, labels */ --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Serif — Newsreader, via Google Fonts. Editorial-only: Hiremé artifact, reassurance beats, long-form, interstitial pauses. Never used for UI chrome, buttons, labels, or meta. */ --font-serif: 'Newsreader', Georgia, serif; /* Sizes — lifted from v1. Body floor is 17px, not 16px. */ --fs-display: clamp(2.5rem, 5.5vw, 4rem); /* 40–64 */ --fs-h1: clamp(2rem, 4vw, 3rem); /* 32–48 */ --fs-h2: clamp(1.5rem, 2.5vw, 2rem); /* 24–32 */ --fs-h3: 1.25rem; /* 20 */ --fs-h4: 1.0625rem; /* 17 */ --fs-lead: 1.25rem; /* 20 */ --fs-body: 1.0625rem; /* 17 — brief minimum */ --fs-small: 0.9375rem; /* 15 */ --fs-meta: 0.8125rem; /* 13 */ /* Line-height */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.6; --lh-prose: 1.7; /* ── Spacing ─────────────────────────────────────────────────────────── * Brief principle: generous whitespace is load-bearing, not decorative. * Scale is slightly larger than v1 — medium gets 32px, not 24. * ─────────────────────────────────────────────────────────────────── */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4.5rem; /* 72 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 9rem; /* 144 — interstitial breathing room */ /* ── Radius ──────────────────────────────────────────────────────────── * Soft cards want a slightly-larger default than v1. Nothing pill-round * except status chips and pills (intentional). * ─────────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; /* ── Shadow ──────────────────────────────────────────────────────────── * Warm-tinted shadows only. No cool-gray soft drops. * Never use shadow as decoration; it earns its spot by signaling elevation. * ─────────────────────────────────────────────────────────────────── */ --shadow-soft: 0 1px 2px rgba(26, 22, 17, 0.04), 0 2px 8px rgba(26, 22, 17, 0.04); --shadow-card: 0 1px 2px rgba(26, 22, 17, 0.05), 0 6px 20px rgba(26, 22, 17, 0.06); --shadow-lift: 0 4px 12px rgba(26, 22, 17, 0.08), 0 16px 40px rgba(26, 22, 17, 0.08); /* ── Motion ──────────────────────────────────────────────────────────── * Brief: "Interface moves at the pace of careful thought." * Default is 500ms — not 200ms. Fade + gentle slide only. * No bounce. No spring overshoot. No AI shimmer. * ─────────────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* smooth out */ --ease-in-out: cubic-bezier(0.45, 0.05, 0.3, 1); /* gentle both */ --dur-quick: 280ms; /* micro: hover, focus ring */ --dur-base: 500ms; /* the standard — section fades, form transitions */ --dur-slow: 700ms; /* interstitial pauses, artifact reveals */ /* ── Layout ──────────────────────────────────────────────────────────── * Single-column wherever possible during stressful flows. * Widths reflect content role, not breakpoint defaults. * ─────────────────────────────────────────────────────────────────── */ --w-prose: 640px; /* one decision per screen, chat, interstitial */ --w-article: 720px; /* Hiremé artifact, long-form explainer */ --w-landing: 1000px; /* marketing sections */ --w-app: 1120px; /* dashboard / pipeline */ } /* ══════════════════════════════════════════════════════════════════════════ * BASE RESET * ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; /* Inter single-story a, cleaner digits */ } body { background: var(--paper); color: var(--ink-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: 400; min-height: 100vh; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--coral-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-quick) var(--ease); } a:hover { color: var(--coral); } /* ══════════════════════════════════════════════════════════════════════════ * TYPE SCALE — sans default, serif available via .is-editorial * ══════════════════════════════════════════════════════════════════════ */ h1, .h1, h2, .h2 { font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; text-wrap: balance; } h1, .h1 { font-size: var(--fs-display); letter-spacing: -0.028em; } h2, .h2 { font-size: var(--fs-h1); } h3, .h3 { font-family: var(--font-heading); color: var(--ink); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; } h4, .h4 { font-family: var(--font-heading); color: var(--ink); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); } p { text-wrap: pretty; max-width: 62ch; } p + p { margin-top: var(--space-sm); } /* Editorial opt-in — for Hiremé artifact and reassurance beats. */ .is-editorial { font-family: var(--font-serif); font-optical-sizing: auto; } .is-editorial h1, .is-editorial h2, .is-editorial h3, .is-editorial .h1, .is-editorial .h2, .is-editorial .h3 { font-family: var(--font-serif); font-weight: 500; /* serif display wants less weight */ letter-spacing: -0.01em; } /* Coral punchline — the one word in a headline that carries the argument. * Discipline: one per headline. Never in body copy. */ .coral-punch { color: var(--coral); } /* Tabular figures — mandatory for compensation, numbers in Hiremé artifact. */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Hiremé wordmark — lowercase Newsreader italic with a coral floor-line. * The lean is the thesis. The coral underline stops short of the é so the * accent rises above the line: same letter, just lifted. * Source: design/handoff Logo Finalist, 2026-05-07. * * Usage: * hiremé * * Size by setting font-size on .hireme-mark. The floor-line scales with em. * Pair with .hireme-mark--on-dark on warm-dark surfaces. */ .hireme-mark { display: inline-block; font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.018em; position: relative; padding-bottom: 0.14em; } .hireme-mark::after { content: ''; position: absolute; left: 0; right: 0.18em; bottom: 0; height: 0.06em; background: var(--coral); border-radius: 2px; } .hireme-mark__accent { color: var(--coral); } .hireme-mark--on-dark { color: var(--ink-on-dark); }