/* ============================================================ BLOC — DESIGN TOKENS Visual Identity v1.0 · Locked ------------------------------------------------------------ Import this file. Never hardcode a hex value. Every token below is specified in the Visual Identity document. ============================================================ */ :root { /* ---------------------------------------------------------- TIER 1 — THE PERMANENT CORE Four roles, each with one job, plus one signature. ---------------------------------------------------------- */ --bloc-stone: #ECE8E1; /* Ground. Every background, every surface */ --bloc-graphite: #45484B; /* Brand + interaction: wordmark, headings, nav, UI */ --bloc-charcoal: #222222; /* Information: body copy, specs, system text */ --bloc-aluminium: #B9B8B4; /* Hardware ONLY. Never type, never UI, never a fill */ --bloc-oxide: #7A3B2E; /* The signature. See the two registers below */ /* Graphite vs Charcoal is load-bearing. Graphite signals interaction. Charcoal signals information. Collapse them and a user cannot tell what is clickable. */ /* Aluminium — two hard rules: 1. It never carries type or UI. 1.63:1 on Stone. Illegible. 2. It is never a flat fill in digital. Hardware is photographed, never drawn as a grey rectangle. This token exists for documentation and print specification only. */ /* ---------------------------------------------------------- OXIDE — TWO REGISTERS, SPLIT BY SIZE ---------------------------------------------------------- */ --bloc-oxide-action: #7A3B2E; /* Above 12px. EXACTLY ONE element per screen */ --bloc-oxide-mark: #7A3B2E; /* 12px and under. May repeat within 1-3% of the field */ --bloc-oxide-hover: #6A3328; /* Primary control, hover only */ /* Action — the primary control. Two on one screen means one is wrong. Mark — the terminal full stop of a display line, a section numeral, a batch numeral, the sleeve-reverse monogram, a rule tick. Never — a heading, a link in body copy, a background, a fragrance surface, a decorative rule, the hardware, a social feed. */ /* ---------------------------------------------------------- DERIVED NEUTRALS ---------------------------------------------------------- */ --bloc-ink-muted: #696359; /* Metadata and captions. 4.87:1 on Stone. AA */ --bloc-control-rule: #7E7B77; /* Interactive boundaries only. 3.45:1 on Stone. Pass */ --bloc-hairline-ink: #CFC8BD; /* Decorative separation only. 1.36:1. NOT a control */ --bloc-panel: #E3DED5; /* Recessed panel on Stone */ --bloc-disabled: #D8D3CB; /* Disabled fill */ --bloc-disabled-ink: #8A857E; /* Disabled label */ /* control-rule vs hairline-ink is a real distinction, not a nuance. A button border or an input underline is an interactive boundary and must clear 3:1 — use control-rule. A table rule or a section divider is decoration and may be light — use hairline-ink. Using hairline-ink on a control fails WCAG. */ /* ---------------------------------------------------------- TIER 2 — THE FRAGRANCE BANDS Not a palette. A rule. Eight hue positions, each expressed in two registers. LIGHT L 70-78% S 9-15% Charcoal type at 8:1 or better NOCTURNE L 26-30% S 16-20% Stone type at 7:1 or better Minimum 40 degrees of hue between any two positions. Assignment is by LAUNCH ORDER, never by scent character. A woody fragrance does not have to be brown. ---------------------------------------------------------- */ /* Light band — daylight register. The bar · the paper sleeve as full-bleed ground · the PDP fragrance band and thumbnail · small packaging. */ --bloc-light-01: #C6BCB3; /* Warm Clay · 28deg 14% 74% */ --bloc-light-02: #C7C9BA; /* Dry Olive · 68deg 12% 76% */ --bloc-light-03: #B9C3B6; /* Grey Sage · 108deg 10% 74% */ --bloc-light-04: #B3C1BB; /* Pale Pine · 152deg 10% 73% */ --bloc-light-05: #B5C0C4; /* Sea Mineral · 196deg 11% 74% */ --bloc-light-06: #B8B8C7; /* Cold Slate · 238deg 12% 75% */ --bloc-light-07: #C0B5C4; /* Mist Lilac · 282deg 11% 74% */ --bloc-light-08: #C8B7BF; /* Dusk Rose · 330deg 13% 75% */ /* Nocturne band — after-dark register. Campaign grounds · the PDP hero band · social tint tiles · film end frames. Perfumery gets depth from darkness, not brightness. */ --bloc-nocturne-01: #59493B; /* Warm Clay */ --bloc-nocturne-02: #4B4E36; /* Dry Olive */ --bloc-nocturne-03: #3D5138; /* Grey Sage */ --bloc-nocturne-04: #385146; /* Pale Pine */ --bloc-nocturne-05: #3E4F56; /* Sea Mineral */ --bloc-nocturne-06: #3D3E5C; /* Cold Slate */ --bloc-nocturne-07: #533D5C; /* Mist Lilac */ --bloc-nocturne-08: #5C3D4D; /* Dusk Rose */ /* Launch pair occupies positions 01 and 05 — maximum separation, one warm, one cool. */ --bloc-scent-a-light: var(--bloc-light-01); --bloc-scent-a-nocturne: var(--bloc-nocturne-01); --bloc-scent-b-light: var(--bloc-light-05); --bloc-scent-b-nocturne: var(--bloc-nocturne-05); /* Fragrance colour NEVER appears on: the mount or any hardware · the homepage · the wordmark · any button, link or control. */ /* ---------------------------------------------------------- THE PROPORTION Three numbers govern every surface. Reference values — not consumed by CSS. ---------------------------------------------------------- */ --bloc-share-hard: 85%; /* 80-85% Structure, grid, mono, hard edges, the object */ --bloc-share-sensory: 15%; /* 15-20% Atmosphere. Negative space, never the object */ --bloc-share-oxide: 3%; /* 1-3% The signature */ /* ---------------------------------------------------------- TYPOGRAPHY Two families. No third. Every Newsreader style declares an optical size — a weight-only build of the font will not render this scale. ---------------------------------------------------------- */ --bloc-voice: 'Newsreader', Georgia, 'Times New Roman', serif; --bloc-info: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* display — hero statements and covers */ --bloc-display-size: 3rem; /* 48px, scales to 72 */ --bloc-display-line: 1.05; --bloc-display-weight: 500; --bloc-display-opsz: 48; --bloc-display-track: -0.01em; /* h1 — page titles, fragrance names */ --bloc-h1-size: 2.125rem; /* 34px */ --bloc-h1-line: 1.12; --bloc-h1-weight: 500; --bloc-h1-opsz: 36; --bloc-h1-track: -0.005em; /* h2 — section headings */ --bloc-h2-size: 1.375rem; /* 22px */ --bloc-h2-line: 1.25; --bloc-h2-weight: 600; --bloc-h2-opsz: 24; --bloc-h2-track: -0.005em; /* h3 — uppercase eyebrow above a heading. Never titles a section alone */ --bloc-h3-size: 0.6875rem; /* 11px */ --bloc-h3-line: 1.4; --bloc-h3-weight: 600; --bloc-h3-track: 0.18em; /* lead — the note line, an opening paragraph */ --bloc-lead-size: 1.1875rem; /* 19px */ --bloc-lead-line: 1.5; --bloc-lead-weight: 400; --bloc-lead-opsz: 20; /* body — running copy above the fold. 68ch measure */ --bloc-body-size: 1rem; /* 16px */ --bloc-body-line: 1.62; --bloc-body-weight: 400; --bloc-body-opsz: 16; /* body-long — dense commerce copy below the fold. 62ch on mobile */ --bloc-body-long-size: 1.0625rem; /* 17px */ --bloc-body-long-line: 1.7; --bloc-body-long-weight: 450; --bloc-body-long-opsz: 12; /* small — footnotes and asides */ --bloc-small-size: 0.875rem; /* 14px */ --bloc-small-line: 1.55; --bloc-small-weight: 400; --bloc-small-opsz: 14; /* label — field labels, spec keys, nav */ --bloc-label-size: 0.625rem; /* 10px */ --bloc-label-line: 1.4; --bloc-label-weight: 500; --bloc-label-track: 0.20em; /* button — every button label */ --bloc-button-size: 0.75rem; /* 12px */ --bloc-button-weight: 500; --bloc-button-track: 0.16em; /* caption — batch, INCI, captions. The floor */ --bloc-caption-size: 0.625rem; /* 10px */ --bloc-caption-line: 1.5; --bloc-caption-weight: 400; --bloc-caption-track: 0.08em; /* Measure */ --bloc-measure: 68ch; --bloc-measure-long: 62ch; /* Hard rules: Uppercase mono always carries at least +0.14em. Newsreader is never uppercase except in the wordmark. No italic anywhere — emphasis is weight or colour. Nothing below 10px, in either family, on any surface. */ /* ---------------------------------------------------------- SPACING — 8px baseline. Nothing between these values. ---------------------------------------------------------- */ --bloc-space-1: 8px; /* label to value · eyebrow to heading */ --bloc-space-2: 16px; --bloc-space-3: 24px; /* heading to body · paragraph to paragraph */ --bloc-space-4: 40px; --bloc-space-5: 64px; /* component to component */ --bloc-space-6: 96px; /* section to section */ --bloc-space-7: 160px; /* around a hero */ /* ---------------------------------------------------------- LAYOUT — content left, space right ---------------------------------------------------------- */ --bloc-grid-columns: 12; --bloc-grid-gutter: 24px; --bloc-grid-margin: 64px; --bloc-grid-max: 1320px; --bloc-baseline: 8px; --bloc-grid-columns-tablet: 8; --bloc-grid-gutter-tablet: 20px; --bloc-grid-margin-tablet: 40px; --bloc-grid-columns-mobile: 4; --bloc-grid-gutter-mobile: 16px; --bloc-grid-margin-mobile: 20px; /* ---------------------------------------------------------- FORM — no radius, no shadow, anywhere Depth is a shift of ground, never elevation. ---------------------------------------------------------- */ --bloc-radius: 0; --bloc-shadow: none; --bloc-rule-width: 1px; --bloc-hairline: 0.5pt; --bloc-control-height: 48px; --bloc-control-pad-x: 24px; --bloc-focus-width: 2px; --bloc-focus-offset: 2px; /* ---------------------------------------------------------- MOTION — describes material, not personality ---------------------------------------------------------- */ --bloc-ease: cubic-bezier(0.2, 0, 0, 1); --bloc-t-ui: 120ms; --bloc-t-page: 400ms; --bloc-t-reveal: 800ms; --bloc-move-max: 16px; /* Elements settle. They do not travel */ --bloc-loop-min: 6s; /* Minimum sensory loop */ /* No bounce, no overshoot, no spring. Type fades; it never stagger-animates. Product motion is slow, linear and unaeased. */ } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --bloc-t-ui: 0ms; --bloc-t-page: 0ms; --bloc-t-reveal: 0ms; --bloc-move-max: 0px; } }