/* ========================================================================== Respire USA — design tokens -------------------------------------------------------------------------- One file. Everything visual references these; nothing hard-codes a value. When the client confirms brand assets (open question Q12) this is the only file that changes. Basis: the Respire logo. Sampled from the supplied artwork, the brand blue is exactly #559BD4 — hsl(207, 60%, 58%) — and that is --r-blue-500 below. The ramp is built around it at the same hue. CONTRAST, which drives how the ramp is used: #559BD4 on white measures 2.99:1. That is below WCAG AA for body text (4.5:1) and below the 3:1 needed for large text and UI components. So the brand blue is an identity colour — the logo, and fills large enough not to need to be read — and never a link, a label or body copy. Text and links use --r-blue-700 (6.25:1) or darker. Every step below is annotated with its measured ratio. This supersedes the #005A9C navy supplied in January, which predates the logo. The warm neutrals and the sand accent carry the "natural accents" half of the handoff's direction: "credible, clean, modern, restrained", not consumer styling. ========================================================================== */ :root { /* ---- Brand blue ------------------------------------------------------ Contrast ratios are against white. */ --r-blue-50: #f3f8fc; /* 1.07:1 tints and surfaces only */ --r-blue-100: #dfecf6; /* 1.20:1 */ --r-blue-200: #bfd9ed; /* 1.46:1 borders */ --r-blue-300: #93bee1; /* 1.96:1 */ --r-blue-400: #75acd9; /* 2.43:1 */ --r-blue-500: #559bd4; /* 2.99:1 BRAND. Identity only — never text. */ --r-blue-600: #2d7dbe; /* 4.39:1 large text (18.66px+/24px bold) and UI */ --r-blue-700: #246499; /* 6.25:1 AA for body text */ --r-blue-800: #1c4f78; /* 8.61:1 AA */ --r-blue-900: #143957; /* 11.98:1 AA */ --r-blue-950: #0d2336; /* 16.02:1 AA */ /* ---- Warm neutrals --------------------------------------------------- The "natural" half of the direction. Paper rather than grey, so the site reads as a printed record rather than a dashboard. */ --r-warm-50: #faf8f4; --r-warm-100: #f1ede6; --r-warm-200: #e3ded5; --r-warm-300: #c9c3b9; --r-warm-400: #a8a197; --r-warm-500: #847e73; --r-warm-600: #635e55; --r-warm-700: #4a463f; --r-warm-800: #33302b; --r-warm-900: #2b2824; --r-warm-950: #1c1a17; /* ---- Sand ------------------------------------------------------------ The client's #F5F5DC, kept as a single callout surface rather than a general background: at full width it reads yellow rather than neutral. */ --r-sand: #f5f5dc; /* ---- Green ----------------------------------------------------------- DO NOT USE ON ANY VERIFICATION SURFACE. The client's #7DBF4F is defined here so it is available for genuinely neutral decoration, and for nothing else. Green beside a Respire Verification Summary reads as a pass mark, and the handoff bans exactly that: no approval seals, no good/bad colour scoring, no implication that directory inclusion is endorsement. Specifically it must not appear on: a directory card, a profile, the Verification Summary, a zone label, a status line, or any icon near them. If a design calls for green in those places, the design is wrong. */ --r-green-accent: #7dbf4f; /* ---- Semantic -------------------------------------------------------- Components use these, never the ramps above. Anything carrying text resolves to 700 or darker; 500 appears only where nothing has to be read against it. */ --r-bg: #ffffff; --r-bg-sunken: var(--r-warm-50); --r-surface: #ffffff; --r-surface-raised: #ffffff; --r-surface-inverse: var(--r-blue-950); --r-callout: var(--r-blue-50); --r-border: var(--r-warm-200); --r-border-strong: var(--r-warm-300); --r-rule: var(--r-blue-900); --r-text: var(--r-warm-950); --r-text-muted: var(--r-warm-600); --r-text-subtle: var(--r-warm-500); --r-text-inverse: var(--r-warm-50); --r-link: var(--r-blue-700); /* 6.25:1 */ --r-link-hover: var(--r-blue-950); /* 16.02:1 */ --r-accent: var(--r-blue-700); /* 6.25:1 — on anything with a label */ --r-brand: var(--r-blue-500); /* 2.99:1 — identity marks only */ --r-focus: var(--r-blue-600); /* ---- Type ------------------------------------------------------------ Serif for headings reads institutional: a standards body, not a shop. Sans for body and UI. Mono exists because a verification site prints licence and certificate numbers, and those want to be unambiguous. */ --r-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --r-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --r-font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid scale. Body sits at 17px minimum, per the client's 16–18px note. */ --r-text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --r-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --r-text-base: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); --r-text-lg: clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem); --r-text-xl: clamp(1.375rem, 1.30rem + 0.36vw, 1.625rem); --r-text-2xl: clamp(1.625rem, 1.50rem + 0.62vw, 2.125rem); --r-text-3xl: clamp(2rem, 1.79rem + 1.05vw, 2.75rem); --r-text-4xl: clamp(2.375rem, 2.03rem + 1.71vw, 3.5rem); --r-leading-tight: 1.18; --r-leading-snug: 1.35; --r-leading-normal: 1.6; --r-leading-loose: 1.75; --r-tracking-tight: -0.015em; --r-tracking-wide: 0.02em; --r-tracking-caps: 0.08em; --r-weight-regular: 400; --r-weight-medium: 500; --r-weight-semibold: 600; --r-weight-bold: 700; /* ---- Space ----------------------------------------------------------- 4px base. Generous whitespace is in the brief. */ --r-space-1: 0.25rem; --r-space-2: 0.5rem; --r-space-3: 0.75rem; --r-space-4: 1rem; --r-space-5: 1.5rem; --r-space-6: 2rem; --r-space-7: 2.5rem; --r-space-8: 3rem; --r-space-9: 4rem; --r-space-10: 5rem; --r-space-11: 6rem; /* ---- Layout ----------------------------------------------------------- */ --r-measure: 68ch; /* body copy */ --r-measure-narrow: 56ch; /* intros, pull text */ --r-container: 76rem; --r-container-text: 44rem; --r-gutter: clamp(1rem, 4vw, 2.5rem); /* ---- Edges ------------------------------------------------------------ Small radii only. Rounded corners read consumer; this is a record. */ --r-radius-sm: 2px; --r-radius: 4px; --r-radius-lg: 6px; --r-border-width: 1px; --r-rule-width: 2px; /* Borders do the work; shadows are a last resort. */ --r-shadow-sm: 0 1px 2px rgba(13, 36, 53, 0.06); --r-shadow: 0 2px 8px rgba(13, 36, 53, 0.08); --r-transition: 140ms ease; } /* Honour a reduced-motion preference everywhere. */ @media (prefers-reduced-motion: reduce) { :root { --r-transition: 0ms; } }