/* * Veridia Brand System — tokens * v1.0 · 2026 * * Voice: quiet · precise · timeless * Visual register: editorial luxury, warm bone backgrounds, deep evergreen * signal color, serif display, generous negative space. */ @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Manrope:wght@300;400;500;600;700&display=swap"); :root { /* ───────────────────────── color ───────────────────────── */ /* Surfaces — warm, never pure white. * Bone is the primary canvas. Paper is one step warmer/inset. * Cream is the highlight, used sparingly to bring focus. */ --bone: #F2EEE5; --bone-deep: #E8E2D4; /* inset surfaces, sectioning */ --paper: #FAF7F0; /* cards, modals */ --cream: #FFFDF8; /* highlight surfaces */ --shell: #DCD4C2; /* dividing rails, footers */ /* Ink — never pure black. * Veridian ink is a warm-cool charcoal with a faint green undertone. * All grayscale is alpha on the ink, never neutral grays. */ --ink: #1B2220; /* primary text */ --ink-soft: rgba(27, 34, 32, 0.68); /* secondary text */ --ink-mute: rgba(27, 34, 32, 0.42); /* tertiary, captions */ --ink-faint: rgba(27, 34, 32, 0.18); /* hairlines */ --ink-whisper: rgba(27, 34, 32, 0.08); /* surface tints, dashed rules */ /* Signal — single botanical green. "Veridian." * Used on the period in the wordmark, eyebrows, the rare key word, * pull-quote glyphs, link underlines, primary CTA fills. * Never used for body copy. */ --verdant: #2F4A3A; /* primary mark + CTA */ --verdant-deep: #1E332A; /* hover, press, deep accents */ --verdant-soft: #4A6B58; /* tertiary, eyebrows on dark */ --verdant-mist: #C8D2C9; /* faint surface tints */ --verdant-whisper: rgba(47, 74, 58, 0.06); /* Brass — secondary accent, used in <1% of surface area. * Reserved for: certificate seals, page numerals, the small mark * on intake documents, the tiny dot beside a clinician's title. */ --brass: #8B6F3C; --brass-soft: #B89968; --brass-mist: #E8DEC8; /* Status — restrained. Never decorative. */ --signal-on: #4A6B58; /* connected, scheduled */ --signal-pause: #B8924D; /* awaiting input */ --signal-alert: #7A3A2E; /* attention required */ /* ─────────────────── semantic surface map ─────────────────── */ --bg: var(--bone); --bg-inset: var(--bone-deep); --bg-elevated: var(--paper); --bg-highlight: var(--cream); --bg-dark: var(--ink); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --fg-on-dark: var(--cream); --fg-soft-on-dark: rgba(255, 253, 248, 0.72); --rule: var(--ink-faint); --rule-soft: var(--ink-whisper); --rule-strong: rgba(27, 34, 32, 0.32); --accent: var(--verdant); --accent-deep: var(--verdant-deep); --accent-soft: var(--verdant-soft); --accent-mist: var(--verdant-mist); /* ──────────────────────── type ──────────────────────── */ --font-display: "Newsreader", "Times New Roman", Georgia, serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: "Newsreader", "Times New Roman", Georgia, serif; /* Display — for hero lines and section openings. * Light weight (300) is the brand's signature on display. */ --display-1-size: clamp(56px, 8.5vw, 132px); --display-1-line: 0.94; --display-1-track: -0.025em; --display-1-weight: 300; --display-2-size: clamp(40px, 5.4vw, 80px); --display-2-line: 0.98; --display-2-track: -0.018em; --display-2-weight: 300; /* Headlines */ --h1-size: clamp(32px, 3.6vw, 52px); --h1-line: 1.08; --h1-track: -0.012em; --h1-weight: 300; --h2-size: clamp(24px, 2.4vw, 32px); --h2-line: 1.18; --h2-track: -0.005em; --h2-weight: 400; --h3-size: 18px; --h3-line: 1.32; --h3-track: 0em; --h3-weight: 500; /* Body */ --body-lg-size: 19px; --body-lg-line: 1.55; --body-size: 16px; --body-line: 1.62; --body-sm-size: 14px; --body-sm-line: 1.55; --body-weight: 400; /* Eyebrow / label — sans, uppercase, tracked, tiny */ --eyebrow-size: 11px; --eyebrow-line: 1; --eyebrow-track: 0.22em; --eyebrow-weight: 500; /* Numeral / counter */ --numeral-size: 13px; --numeral-track: 0.04em; --numeral-weight: 400; /* Pull-quote / aside — serif italic */ --quote-family: var(--font-serif); --quote-style: italic; --quote-size: clamp(22px, 2.4vw, 32px); --quote-line: 1.35; --quote-weight: 300; /* ─────────────────────── radii ─────────────────────── */ /* Veridia is mostly square. 2px is the default — barely a curve. */ --radius: 2px; --radius-sm: 1px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ────────────────────── spacing ────────────────────── */ --space-0: 0; --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; --space-11: 160px; /* ─────────────────────── shadow ────────────────────── */ /* Veridia almost never casts a shadow. When it does, it is low and warm — a faint settling, not a lift. */ --shadow-rest: 0 1px 0 var(--ink-faint); --shadow-card: 0 1px 2px rgba(27, 34, 32, 0.04), 0 0 0 1px var(--ink-faint); --shadow-modal: 0 16px 48px rgba(27, 34, 32, 0.12), 0 0 0 1px var(--ink-faint); /* ─────────────────────── motion ────────────────────── */ /* Calm. Never spring. Never bounce. */ --ease: cubic-bezier(0.32, 0.72, 0.24, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 280ms; --dur-slow: 520ms; /* ────────────────────── geometry ───────────────────── */ --measure-narrow: 54ch; /* editorial body column */ --measure: 68ch; --measure-wide: 86ch; --page-max: 1280px; --page-pad: 48px; } /* ───────────────────── base reset / atoms ───────────────────── */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; } .font-display { font-family: var(--font-display); font-weight: 300; } .font-serif { font-family: var(--font-serif); } .font-body { font-family: var(--font-body); } .display-1 { font-family: var(--font-display); font-size: var(--display-1-size); line-height: var(--display-1-line); letter-spacing: var(--display-1-track); font-weight: var(--display-1-weight); text-wrap: balance; } .display-2 { font-family: var(--font-display); font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: var(--display-2-track); font-weight: var(--display-2-weight); text-wrap: balance; } .h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: var(--h1-track); font-weight: var(--h1-weight); text-wrap: balance; } .h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-track); font-weight: var(--h2-weight); } .h3 { font-family: var(--font-body); font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); } .eyebrow { font-family: var(--font-body); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-track); font-weight: var(--eyebrow-weight); text-transform: uppercase; color: var(--fg-soft); } .numeral { font-family: var(--font-body); font-size: var(--numeral-size); letter-spacing: var(--numeral-track); font-weight: var(--numeral-weight); font-variant-numeric: tabular-nums lining-nums; color: var(--fg-mute); } .body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); } .body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); } .quote { font-family: var(--quote-family); font-style: var(--quote-style); font-size: var(--quote-size); line-height: var(--quote-line); font-weight: var(--quote-weight); } /* Hairlines — the spine of the system */ .hairline { border-bottom: 1px solid var(--rule); } .hairline-soft { border-bottom: 1px solid var(--rule-soft); } .hairline-dashed{ border-bottom: 1px dashed var(--rule); } /* Page wordmark — small caps tracked variant of "veridia." */ .wordmark { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; } .wordmark .period { color: var(--accent); } /* Buttons — restrained. */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn-primary { background: var(--accent); color: var(--cream); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn-ghost:hover { border-color: var(--ink); } .btn-quiet { background: transparent; color: var(--ink); border-color: transparent; padding: 14px 0; border-bottom: 1px solid var(--ink); border-radius: 0; } .btn-quiet:hover { color: var(--accent); border-bottom-color: var(--accent); } .btn .arrow { transition: transform var(--dur) var(--ease); } .btn:hover .arrow { transform: translateX(3px); }