/* ============================================================================= ODC DESIGN SYSTEM — DESIGN TOKENS Oktay Demir Consulting · "Monochrome Editorial + Rolex Green" ----------------------------------------------------------------------------- This is the single source of truth for every visual constant in the system. Link this ONE file and use the variables below. Do not hardcode hex, px, or font names in component code — always reference a token. Layer model: 1. PRIMITIVES — raw values (palette, raw sizes). Names kept stable so existing components keep working. 2. SEMANTIC — role aliases (text/surface/border/accent). PREFER THESE in new component code; they describe intent, not value. Fonts are self-hosted for Version 2. Token values below stay identical to the source design system. ============================================================================= */ @font-face { font-family: "Outfit"; src: url("/assets/fonts/Outfit-Variable.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Variable.ttf") format("truetype"); font-style: normal; font-weight: 400 600; font-display: swap; } :root { /* ========================================================================== 1. PRIMITIVES ========================================================================== */ /* --- Monochrome backbone (ink → paper) ------------------------------------ Warm-neutral greys on a warm off-white paper. Never pure #000 or #FFF page. */ --near-black: #111111; /* primary ink: headlines, key text, ink planes */ --ink-strong: #2E2E2E; /* strong body (hero lead) */ --text-700: #3A3A3A; /* default long-form body copy */ --text-600: #4A4A4A; /* secondary body / section intros */ --body-grey: #444444; /* legacy body grey (≈ text-600) */ --warm-grey: #888888; /* muted: captions, micro-labels, placeholders */ --line-grey: #C9C7C0; /* hairlines & borders on light */ --off-white: #EFEFEB; /* PAGE background (the paper) */ --surface: #F7F6F2; /* subtly raised band (press bar, wells) */ --white: #FFFFFF; /* cards & form-on-white */ /* --- Rolex green family (the ONE accent) ---------------------------------- Used sparingly: marks (× and .), rules, one CTA, focus, hover. Not fields. */ --green: #00563F; /* primary accent + brand green */ --green-deep: #003A2A; /* pressed / darkest */ --green-soft: #0A3D2E; /* alt deep tone */ --green-on: #FFFFFF; /* text/marks on a green plane */ --green-wash: rgba(0, 86, 63, 0.02); /* row hover tint on light */ --green-ring: rgba(0, 86, 63, 0.45); /* pulse ring start */ /* --- On-dark (text/lines over --near-black or --green planes) ------------- */ --on-dark: #FFFFFF; --on-dark-70: rgba(255, 255, 255, 0.70); --on-dark-62: rgba(255, 255, 255, 0.62); --on-dark-60: rgba(255, 255, 255, 0.60); --on-dark-55: rgba(255, 255, 255, 0.55); --on-dark-45: rgba(255, 255, 255, 0.45); --on-green-85: rgba(255, 255, 255, 0.85); /* body text on green plane */ --line-on-dark: rgba(255, 255, 255, 0.16); /* hairline on dark/green */ /* --- Type families -------------------------------------------------------- Outfit is the workhorse for EVERYTHING (display + body). Newsreader is an optional editorial serif, currently reserved (body copy is sans by choice). */ --font-sans: "Outfit", "Inter", "Helvetica Neue", system-ui, sans-serif; --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif; /* --- Font weights ---------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* --- Font sizes (semantic roles; px unless clamp) -------------------------- */ --fs-display: clamp(36.1px, 5.2vw, 66px); /* hero H1 */ --fs-cta: clamp(30px, 3.7vw, 48px); /* CTA-band H2 */ --fs-quote: clamp(26px, 3.1vw, 42px); /* statement / pull-quote */ --fs-stat: 60px; /* big metric number */ --fs-h2: 34px; /* section title (UPPERCASE) */ --fs-wordmark: 24px; /* primary wordmark */ --fs-nr: 22px; /* service index number */ --fs-title: 18px; /* service title, FAQ question */ --fs-title-sm: 18px; /* process title, article title */ --fs-lead: 16px; /* hero lead paragraph */ --fs-lead-sm: 16px; /* section intro lead */ --fs-body: 15px; /* body / FAQ answer */ --fs-body-sm: 15px; /* dense body (service desc) */ --fs-body-xs: 12px; /* process description */ --fs-caption: 12px; /* captions, detail values */ --fs-eyebrow: 12px; /* eyebrow / kicker (caps) */ --fs-nav: 10px; /* nav links, footer (caps) */ --fs-label: 10px; /* micro-labels (caps) */ /* --- Line heights ---------------------------------------------------------- */ --lh-display: 1.0; --lh-tight: 1.05; /* section H2 */ --lh-quote: 1.16; --lh-heading: 1.2; /* service title */ --lh-snug: 1.35; /* article title */ --lh-body: 1.6; --lh-relaxed: 1.7; /* long body columns */ /* --- Letter spacing -------------------------------------------------------- */ --ls-display: -0.03em; /* display / hero */ --ls-tighter: -0.02em; /* quote, CTA, stat number */ --ls-tight: -0.01em; /* article title, press names */ --ls-flat: 0; --ls-caps-sm: 0.14em; /* section num, stat label */ --ls-caps: 0.16em; /* nav, buttons, form labels */ --ls-caps-wide: 0.18em; /* press label, statement byline */ --ls-caps-eyebrow:0.20em; /* hero eyebrow */ /* --- Spacing scale (4-based; interstitial values allowed where noted) ------ */ --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: 56px; --space-11: 64px; --space-12: 72px; --space-14: 84px; /* --- Layout ---------------------------------------------------------------- */ --container-max: 1200px; /* content column cap */ --container-pad: 48px; /* horizontal gutter (desktop) */ --container-pad-sm: 28px; /* horizontal gutter (≤820px) */ --section-pad-y: 72px; /* vertical rhythm per section */ --content-measure: 62ch; /* max readable line length for body */ /* Breakpoints (documented as tokens; use the px in @media queries) */ --bp-lg: 1024px; /* hero + service grids relax */ --bp-md: 820px; /* nav collapses, grids stack */ --bp-sm: 560px; /* single column */ /* --- Borders & radii ------------------------------------------------------- */ --border-w: 1px; --border-hairline: 1px solid var(--line-grey); --border-hairline-dark:1px solid var(--line-on-dark); --rule-accent: 2px solid var(--green); /* process top rule */ --radius: 0; /* SHARP corners everywhere — a system invariant */ --radius-full: 999px; /* the only round things: the small status/CTA dots */ /* --- Accent rule dimensions (the "green underline" motif) ------------------ */ --rule-hero-w: 96px; --rule-hero-h: 3px; /* under hero H1 */ --rule-tick-w: 22px; --rule-tick-h: 2px; /* stat tick / small tick */ /* --- Motion ---------------------------------------------------------------- */ --ease: ease; --dur-fast: 0.2s; /* hover color/border */ --dur: 0.25s; /* icon rotate */ --dur-slow: 0.3s; /* accordion expand */ --pulse-dur: 2.4s; /* availability pulse */ /* --- Effects --------------------------------------------------------------- */ --masthead-blur: 10px; --masthead-bg: rgba(239, 239, 235, 0.88); /* off-white @ 88% for sticky bar */ /* --- Z-index --------------------------------------------------------------- */ --z-masthead: 50; /* ========================================================================== 2. SEMANTIC ALIASES — prefer these in new component code ========================================================================== */ /* Text */ --text-primary: var(--near-black); --text-strong: var(--ink-strong); --text-body: var(--text-700); --text-secondary: var(--text-600); --text-muted: var(--warm-grey); --text-on-dark: var(--on-dark); --text-on-dark-muted: var(--on-dark-60); /* Surfaces */ --bg-page: var(--off-white); --bg-raised: var(--surface); --bg-card: var(--white); --bg-ink: var(--near-black); /* inverted plane (Numbers section) */ --bg-accent: var(--green); /* accent plane (CTA band) */ /* Lines / borders */ --border-default: var(--line-grey); --border-on-dark: var(--line-on-dark); --border-strong: var(--near-black); /* Accent */ --accent: var(--green); --accent-pressed: var(--green-deep); --accent-contrast: var(--green-on); /* Links (base + hover) */ --link: var(--near-black); --link-hover: var(--green); /* Focus (form fields, interactive) */ --focus-border: var(--green); } /* ----------------------------------------------------------------------------- Optional dark-scope helper. Put class="on-dark" (or use it as a mixin target) on any --near-black / --green plane so nested text/border tokens flip. This is convenience only; the components in components.md set on-dark values directly. ----------------------------------------------------------------------------- */ .on-dark { --text-primary: var(--on-dark); --text-body: var(--on-dark-70); --text-secondary: var(--on-dark-60); --text-muted: var(--on-dark-55); --border-default: var(--line-on-dark); --link: var(--on-dark); --link-hover: var(--on-dark); }