/* ============================================================================ BRIM COLLECTION — DESIGN TOKENS Direction: "Cotton & Ink" v2.0 · 2026-07-21 Client: Stephanie Cleveland · UYBC engagement · task W2-02 v2.0 — LIGHT GROUND. Stephanie prefers light backgrounds, so the system is light-first: warm unbleached cotton, ink-dark type, one thread red. The v1 dark direction ("Thread & Ink") is retired, not hidden — see DESIGN.md §1. This is NOT the v1 palette inverted. Dark-on-light needs its own contrast maths and it got one: every pair below was computed against the ground it is actually used on, and the accent was re-solved from scratch (the v1 accent #D94F27 measures 3.6:1 on cotton and fails as body text). Every colour is still sampled from the work itself — unbleached cotton, the ink a shirt is printed with, the red thread on the machine, the indigo of a denim shirt. Nothing was chosen because it looked nice on a screen. Usage: @import url("tokens.css"); ============================================================================ */ :root { /* ── 1 · GROUND — "cotton" ────────────────────────────────────────────── Unbleached cotton, not white. A pure #FFF ground makes every garment photograph look grey, and the whole point is that the material is warm. */ --cotton-50: #FBF8F3; /* lifted surface — panels, cards, form fields */ --cotton-100: #F3EEE4; /* PAGE GROUND — natural cotton */ --cotton-200: #EBE4D7; /* recessed band, alternate section, image well */ --cotton-300: #DDD4C3; /* decorative hairline, card edge */ --cotton-400: #C6BAA3; /* heavier decorative rule */ /* ── 2 · INK — text and functional line ───────────────────────────────── Warm near-black, the colour of ink on a garment. Ratios are measured against --cotton-100. */ --ink-900: #16120E; /* primary text, display 16.1:1 AAA */ --ink-700: #3E362C; /* secondary text, body prose 10.3:1 AAA */ --ink-500: #6B6152; /* tertiary — captions, hints 5.3:1 AA */ --ink-400: #8D8270; /* the lightest ink still perceivable — 3.3:1. FUNCTIONAL BORDERS (input outlines: WCAG 1.4.11 wants 3:1) and decorative marks. Never body copy. */ /* ── 3 · ACTION — "thread" ────────────────────────────────────────────── The red of the thread on the needle bar, re-solved for a light ground. --thread is the one value clearing AA in BOTH directions at once: as text on cotton (4.99:1) and as a fill carrying cotton-coloured text (5.44:1). A brighter, prettier red fails one of the two. */ --thread: #BC3418; /* accent — fills, links, marks 4.99:1 / 5.44:1 */ --thread-deep: #A32D13; /* hover fill 6.74:1 on fill */ --thread-press: #8C2610; /* pressed fill 8.26:1 on fill */ --thread-wash: #F7E9E3; /* ~6% tint — a thread-tinted surface */ /* ── 4 · LANE — "denim" ───────────────────────────────────────────────── The service lanes are different rooms, not interchangeable cards. Embroidery carries --thread; patching carries --denim. On a light ground denim CAN hold text (8.6:1), which it could not on the v1 dark ground — so the second lane gets a real voice rather than a tint it was never allowed to use. There are three methods and two lane voices on purpose. Embroidery and patching are the signature work and each holds a colour; DTF transfers take the neutral --ink-500 rather than a third brand hue, because a third saturated colour on a cream ground reads as a palette, not a hierarchy. (Denim was screen printing's colour until 2026-07-24 — Brim does DTF, not screen printing, so the role moved to patching. The VALUES are unchanged, which is why the AA audit still stands.) */ --denim: #2C4460; /* lane text, rules, marks 8.6:1 AA */ --denim-wash: #E6E9EF; /* lane surface tint */ /* ── 5 · STATE ─────────────────────────────────────────────────────────── */ --ok: #3F6B3A; /* form success 5.4:1 */ --warn: #8A5A12; /* needs attention 5.1:1 */ --error: #B32D1C; /* form error — a near-neighbour of --thread on purpose: an error is not a new colour, it is the accent raised */ --focus: #16120E; /* focus ring — ink. 16.1:1 on the ground and 3.2:1 on a thread fill, so it survives both. Never a browser-blue */ /* ── 6 · TYPE ─────────────────────────────────────────────────────────── Unchanged from v1 — a type pairing is independent of the ground, and ink-dark Fraunces on cream is exactly the register the light direction wants. Fraunces — display. A variable serif with optical-size, SOFT and WONK axes. Set with WONK on it has hand-cut character: it reads "made by a person", which is the argument of the brand. Archivo — everything you read and click. DM Mono — labels, specs, job numbers. The work-order voice. Deliberately NOT Inter or Space Grotesk (Signal & Story's own faces). */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fraunces is set once, here. Do not vary the axes per component. */ --display-vf: "SOFT" 20, "WONK" 1; /* Type scale — fluid, clamped, no breakpoints needed. */ --t-3xs: 0.6875rem; /* 11px — mono labels */ --t-2xs: 0.75rem; /* 12px — mono eyebrows */ --t-xs: 0.8125rem; /* 13px — captions */ --t-sm: 0.875rem; /* 14px — UI, small print */ --t-base:clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --t-lg: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); --t-xl: clamp(1.5rem, 1.32rem + 0.9vw, 2.05rem); --t-2xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem); --t-3xl: clamp(2.4rem, 1.9rem + 2.5vw, 4rem); --t-4xl: clamp(2.8rem, 1.95rem + 4.2vw, 5.4rem); /* hero. Hard ceiling. */ /* Ink on cotton wants a hair more leading than cotton on ink did — dark-on-light sets optically tighter. */ --lh-tight: 1.0; /* display only */ --lh-snug: 1.18; --lh-body: 1.64; --lh-loose: 1.75; /* long-form legal copy */ --ls-display: -0.022em; /* floor is -0.04em; never tighter */ --ls-tight: -0.012em; --ls-label: 0.2em; /* tracked caps */ --ls-mono: 0.14em; --measure: 66ch; /* body copy */ --measure-lede: 48ch; /* intro paragraphs */ --measure-legal:74ch; /* terms + privacy run wider; they are documents */ /* ── 7 · SPACE ────────────────────────────────────────────────────────── 4px base. Sections deliberately do NOT all use the same step. The light direction runs MORE generous than v1: emptiness is the drama here, where darkness was the drama before. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.5rem; --s-9: 5rem; --s-10: 7rem; --s-11: 10rem; --gutter: clamp(1.25rem, 4.5vw, 3.5rem); --section-y: clamp(4.5rem, 10vw, 9.5rem); --section-y-tight: clamp(3rem, 6.5vw, 5.5rem); --maxw: 1240px; --maxw-text: 760px; /* The margin of paper held around a framed photograph. This token replaces the v1 vignette: on a light ground the drama comes from the picture being CONTAINED, not from it bleeding away into darkness. */ --plate-inset: clamp(1.25rem, 5vw, 5rem); --plate-inset-y: clamp(4.5rem, 9vh, 7rem); /* ── 8 · SHAPE ────────────────────────────────────────────────────────── Almost square. A stitched patch has a tight radius, not a pill. --r-full is reserved for the hoop in the logo and nothing else. */ --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-full: 999px; --rule: 1px solid var(--cotton-300); /* decorative divider */ --edge: 1px solid var(--ink-400); /* FUNCTIONAL boundary (3.3:1) */ /* The running stitch — the system's signature line. */ --stitch: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 11px); --stitch-v: repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 11px); /* ── 9 · ELEVATION ────────────────────────────────────────────────────── The biggest mechanical change from v1. On a dark ground a shadow does nothing, so elevation was carried by surface lightness. On paper the opposite is true: a real cast shadow is what makes a photograph read as an OBJECT lying on the page. The shadows are warm (a brown-grey, never pure black) because a neutral shadow on cream looks like a bruise. */ --lift-1: 0 1px 2px rgba(64,48,32,.06), 0 2px 6px -2px rgba(64,48,32,.08); --lift-2: 0 2px 4px rgba(64,48,32,.06), 0 10px 24px -10px rgba(64,48,32,.16); --lift-3: 0 4px 8px rgba(64,48,32,.07), 0 26px 56px -22px rgba(64,48,32,.26); /* Photographic plates get the deepest one, so the picture sits on the page. */ --plate-shadow: 0 3px 6px rgba(64,48,32,.08), 0 32px 64px -28px rgba(64,48,32,.34); /* ── 10 · MOTION ──────────────────────────────────────────────────────── Ease-out only. Nothing bounces, nothing overshoots. */ --ease: cubic-bezier(.22,.72,.24,1); /* the default: quart-out */ --ease-out: cubic-bezier(.16,1,.3,1); /* expo-out, for larger moves */ --d-fast: 140ms; /* hover, focus, colour */ --d-mid: 260ms; /* a panel opening, a field expanding */ --d-slow: 620ms; /* a section entering on scroll */ --d-type: 780ms; /* a masked line of type rising */ /* ── 11 · LAYERS ──────────────────────────────────────────────────────── Nothing in this system exceeds 400. The nav sits at --z-overlay, ABOVE the mobile menu, because the nav holds the button that closes the menu. */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-toast: 400; } /* Anything that moves must have a stated still version. This collapses the duration tokens so transitions still FIRE (state changes stay observable and transitionend listeners still work) but nothing travels. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-mid: 1ms; --d-slow: 1ms; --d-type: 1ms; } }