/* * reva design tokens. * * Source of truth: the GREY corporate design guideline, November 2023, * 4. Marketing/1. General files/231120_reva_Guideline.pdf * * Contrast ratios in the comments are measured, not estimated. Anything marked * AA meets WCAG 2.1 Level AA for normal text at 4.5:1. Anything marked * "large only" meets 3:1 and may be used for text at 18pt, or 14pt bold, and * for UI component boundaries, but never for body copy. * * Never hardcode a colour or a spacing value anywhere else. CLAUDE.md. */ :root { /* --------------------------------------------------------------------- * Brand palette, guideline pages 20 to 22. * ------------------------------------------------------------------ */ --reva-sand: #f4ece8; /* primary background */ --reva-sunlight: #f5f5f5; /* light ground, and text on dark grounds */ --reva-shadow: #464646; /* text, and dark ground */ --reva-sundown: #b97b56; /* highlight only. See the warning below. */ /* * Dune. Guideline page 20 prints its hex as #f4ece8, identical to Sand, * which contradicts its own CMYK of 24/24/24/3 and is a typo in the PDF. * Settled by sampling the guideline's own artwork rather than by deriving * from the CMYK, which gave a colder #c4bcb8. * * Measured: Shadow on Dune 6.32, AA. Sundown Deep on Dune 3.56, which is * large text and UI components only, so a link on a Dune ground is Shadow * plus an underline, not the accent. */ --reva-dune: #c8beb9; /* * Product ground. The neutral a render sits on, one step warmer than Dune so * a photographed object separates from the panel behind it. Not a guideline * colour and never used for type. */ --reva-ground: #ddd3cd; /* * Sundown Deep. Not in the guideline. * * Sundown fails WCAG as an interactive surface: nothing in the palette is * legible on it except pure black. Measured, Sundown against * Sand 2.99 fails even the 3:1 UI minimum * Sunlight 3.19 large text only * white 3.48 large text only * Shadow 2.71 fails * black 6.03 passes * * These are Sundown at a different lightness with hue and saturation held, so * they read as the same colour. They exist so buttons and links can be * branded and legible at once. * * Sundown Deep, for light grounds. Measured: * Sundown Deep on Sand 4.56 AA * Sunlight on Sundown Deep 4.88 AA * Sundown Deep on white 5.32 AA * * An earlier value of #9c6240 was rejected: it measured 4.56 as a button * fill but only 4.25 as link text on Sand, which is below 4.5. Both uses had * to pass, so the colour went darker until they did. * * Sundown Lift, for dark grounds. Sundown itself measures 2.71 against * Shadow, below the 3:1 that WCAG 1.4.11 requires for a component to be * distinguishable from its background, so a Sundown button on a Shadow page * would have no discernible edge. Measured: * Sundown Lift vs Shadow 3.52 passes 1.4.11 with headroom * black on Sundown Lift 7.83 AA * * Both await sign-off from GREY or from Samer. */ --reva-sundown-deep: #955e3e; --reva-sundown-lift: #c69374; /* * Black. Not a brand colour and not for body copy, which is Shadow. * * It exists because Sundown Lift is the one ground in this palette that * nothing else is legible on: Shadow measures 3.34 against it, below the * 4.5 AA needs for text. Black measures 7.83. So anywhere Sundown Lift is * used as a fill behind words, the words are black. */ --reva-black: #000000; /* --------------------------------------------------------------------- * Semantic colour. Components reference these, never the palette above, * so a palette change is one edit rather than a search. * ------------------------------------------------------------------ */ --reva-color-surface: var(--reva-sand); --reva-color-surface-raised: var(--reva-dune); --reva-color-surface-product: var(--reva-ground); --reva-color-surface-inverse: var(--reva-shadow); --reva-color-text: var(--reva-shadow); /* 8.09 on Sand, AAA */ --reva-color-text-inverse: var(--reva-sunlight); /* 8.66 on Shadow, AAA */ --reva-color-accent: var(--reva-sundown-deep); /* 4.56 on Sand, AA */ --reva-color-on-accent: var(--reva-sunlight); /* 4.88 on accent, AA */ --reva-color-highlight: var(--reva-sundown); /* decorative only */ --reva-color-border: rgb(70 70 70 / 20%); --reva-color-border-strong: var(--reva-shadow); --reva-color-focus: var(--reva-shadow); --reva-color-scrim: rgb(70 70 70 / 92%); /* --------------------------------------------------------------------- * Typography. * * Nexa Light, Book and Bold are the brand fonts and no other typeface may * be used. Guideline page 26. * * The .woff2 files are generated by brand/build-fonts.py and are NOT in the * repository. The supplied OTFs are desktop licences, fsType 4, and do not * cover serving the font. A Fontfabric webfont licence is committed to and * must be in hand before the fonts are committed and the site publishes. * * Behind Nexa: Gill Sans is the guideline's own system fallback, page 27, * and is present on macOS. Futura and system-ui carry the geometric feel * elsewhere. Nexa's x-height ratio measures 0.494, which is low, so a * fallback with a taller x-height will look larger for the moment it shows. * * Do not add a Google-hosted webfont to this stack. Loading one from * Google's CDN transmits visitor IP addresses to Google, which a German * court held unlawful without consent in 2022, and would turn a strictly * necessary asset into one that depends on a cookie banner. * ------------------------------------------------------------------ */ --reva-font-brand: 'Nexa', 'Gill Sans', 'Gill Sans MT', Futura, system-ui, sans-serif; --reva-font-body: var(--reva-font-brand); --reva-weight-light: 300; /* Nexa Light */ --reva-weight-book: 400; /* Nexa Book, body copy */ --reva-weight-bold: 700; /* Nexa Bold, subheads and highlights */ /* * Type scale, 1.25 major third, 1rem base. * * Nexa's x-height ratio of 0.494 is low, so it reads smaller than a humanist * sans at the same size. Body sits at 1.0625rem rather than 1rem for that * reason. Do not "fix" it back to 16px without looking at it. */ --reva-font-size-xs: 0.8rem; --reva-font-size-sm: 0.875rem; --reva-font-size-base: 1.0625rem; --reva-font-size-lg: 1.25rem; --reva-font-size-xl: 1.5rem; --reva-font-size-2xl: 1.953rem; --reva-font-size-3xl: 2.441rem; --reva-font-size-4xl: 3.052rem; --reva-line-height-tight: 1.15; --reva-line-height-heading: 1.2; --reva-line-height-body: 1.6; /* * Guideline page 31 lists "too much line spacing" and "too much leading" * among the don'ts, and page 30 says headline endings stay open, meaning no * full stop. Headlines are tight; body is not. */ --reva-letter-spacing-heading: -0.01em; --reva-letter-spacing-body: 0; /* --------------------------------------------------------------------- * Spacing. 4px base, so every value lands on a half-grid at any zoom. * ------------------------------------------------------------------ */ --reva-space-1: 0.25rem; --reva-space-2: 0.5rem; --reva-space-3: 0.75rem; --reva-space-4: 1rem; --reva-space-5: 1.5rem; --reva-space-6: 2rem; --reva-space-7: 3rem; --reva-space-8: 4rem; --reva-space-9: 6rem; --reva-space-10: 8rem; /* * Layout, guideline page 48. The type area is 5% of the longer side of the * format, and the margin is double that. Expressed as a viewport-relative * gutter with a floor, so it does not collapse on a phone. */ --reva-gutter: max(1rem, 5vw); --reva-margin: max(2rem, 10vw); --reva-measure: 68ch; /* readable line length */ --reva-container: 75rem; /* --------------------------------------------------------------------- * Shape. Guideline page 34 describes buttons as rounded and inviting, * echoing the open curves of the logo. * ------------------------------------------------------------------ */ --reva-radius-sm: 0.25rem; --reva-radius-md: 0.5rem; --reva-radius-lg: 1rem; --reva-radius-pill: 999rem; /* Minimum interactive target. Smaller is a barrier on a phone and for * anyone with a motor impairment. */ --reva-target-min: 2.75rem; /* --------------------------------------------------------------------- * Motion. Restraint reads more premium, protects Core Web Vitals, and * avoids accessibility problems. Build plan section 9.2. * ------------------------------------------------------------------ */ --reva-duration-fast: 120ms; --reva-duration-base: 200ms; --reva-easing: cubic-bezier(0.4, 0, 0.2, 1); } /* * Anyone who asked for less motion gets none. Not a reduction, none: every * transition here is decorative. */ @media (prefers-reduced-motion: reduce) { :root { --reva-duration-fast: 0ms; --reva-duration-base: 0ms; } } /* * Dark presentation. * * The guideline has no dark mode. It does have Shadow as a ground with * Sunlight type, page 29, which is the same idea, so this inverts to that * pairing rather than inventing colours. * * The accent flips to Sundown Lift. On a dark ground the darker variant * disappears, and plain Sundown measures only 2.71 against Shadow, which is * below the 3:1 WCAG 1.4.11 requires for a component to be distinguishable * from its background. A Sundown button on a Shadow page would have no * discernible edge. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --reva-color-surface: var(--reva-shadow); --reva-color-surface-raised: #565656; --reva-color-surface-inverse: var(--reva-sand); --reva-color-text: var(--reva-sunlight); --reva-color-text-inverse: var(--reva-shadow); --reva-color-accent: var(--reva-sundown-lift); /* 3.52 vs Shadow */ --reva-color-on-accent: var(--reva-black); /* 7.83 on accent, AA */ --reva-color-border: rgb(245 245 245 / 24%); --reva-color-border-strong: var(--reva-sunlight); --reva-color-focus: var(--reva-sunlight); --reva-color-scrim: rgb(0 0 0 / 92%); } } :root[data-theme='dark'] { --reva-color-surface: var(--reva-shadow); --reva-color-surface-raised: #565656; --reva-color-surface-inverse: var(--reva-sand); --reva-color-text: var(--reva-sunlight); --reva-color-text-inverse: var(--reva-shadow); --reva-color-accent: var(--reva-sundown-lift); --reva-color-on-accent: var(--reva-black); --reva-color-border: rgb(245 245 245 / 24%); --reva-color-border-strong: var(--reva-sunlight); --reva-color-focus: var(--reva-sunlight); --reva-color-scrim: rgb(0 0 0 / 92%); }