/* ============================================================ MILLWRIGHT & CO — WEB DESIGN TOKENS v1 Source of truth: Millwright_Co_Brand_Bible.md §0 (two-layer system) + Millwright_Co_Color_Palette.md + Carousel v2 "Letterpress" (final background + deboss) Drop this file into any web project and use the variables/utilities. ============================================================ */ /* ---- Fonts (Brand Bible Layer 1, locked) ---- Headlines: Inter Black (heavy geometric sans, letterpress) Long-form body: EB Garamond (humanist serif; Cardo as alternate) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ==================== LAYER 1 — FOUNDATION (90% of every surface) */ /* The final background — cotton letterpress paper (NOT the beige #EADCC2) */ --mw-paper: #ECE2CE; /* primary surface — from the embossed example */ --mw-paper-warm: #E5D9C2; /* secondary zones, cards within cards */ --mw-paper-shade: #D4C5A8; /* deepest paper — edges, wells, dividers */ /* Inks — never pure black */ --mw-ink: #3D2F23; /* letterpress headlines (Inter Black) */ --mw-ink-sepia: #3A2A1E; /* iron-gall sepia — serif body text */ --mw-ink-mid: #5A4530; /* secondary text, captions */ --mw-ink-light: #8B6F50; /* tertiary, metadata */ --mw-oak: #6B4A2B; /* headings, accents (AA on paper) */ --mw-millstone: #7C7269; /* borders, rules, fine print */ --mw-quill: #B89A6C; /* background washes, subtle texture */ /* ==================== LAYER 2 — POP (≤10%, highlights only) Never a background. Never text (except large display, Hibiscus only). */ --mw-hibiscus: #FF1F4D; /* hot / read-me / important */ --mw-cyan: #00DFFF; /* cool / calm / information (≤5% of surface) */ --mw-sunshine: #FFE45C; /* highlight / attention / joy */ /* Opacity ladder: solid 100 / translucent 60 / wash 25 / whisper 10 */ --mw-hibiscus-translucent: #FF1F4D99; --mw-hibiscus-wash: #FF1F4D40; --mw-hibiscus-whisper: #FF1F4D1A; --mw-cyan-translucent: #00DFFF99; --mw-cyan-wash: #00DFFF40; --mw-cyan-whisper: #00DFFF1A; --mw-sunshine-translucent: #FFE45C99; --mw-sunshine-wash: #FFE45C40; --mw-sunshine-whisper: #FFE45C1A; /* The gradient flag bar — black → hot → bright → cool. Thin bars only (4–8px). (Black added 2026-06-06 per Mig.) */ --mw-gradient-flag: linear-gradient(90deg, #000000 0%, #FF1F4D 26%, #FFE45C 50%, #00DFFF 80%, #FFFFFF 100%); /* ==================== TYPE */ --mw-font-display: 'Inter', system-ui, sans-serif; /* weight 900 */ --mw-font-serif: 'EB Garamond', 'Cardo', Georgia, serif; --mw-font-ui: 'Inter', system-ui, sans-serif; } /* ============================================================ UTILITIES ============================================================ */ /* Base page — the brand default state */ .mw-page { background-color: var(--mw-paper); color: var(--mw-ink-sepia); font-family: var(--mw-font-serif); } /* Cotton paper texture (from the letterpress example). Apply to any surface that should feel like the brand's paper. */ .mw-paper-texture { position: relative; background-color: var(--mw-paper); background-image: radial-gradient(circle at 15% 25%, rgba(140, 100, 60, 0.06) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 55%), radial-gradient(circle at 50% 50%, rgba(255, 250, 240, 0.3) 0%, transparent 70%); overflow: hidden; } .mw-paper-texture::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; pointer-events: none; opacity: 0.55; } .mw-paper-texture::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(60, 40, 25, 0.07) 100%); pointer-events: none; } /* Letterpress / debossed type (final embossed treatment) */ .mw-deboss { color: var(--mw-ink); text-shadow: 0 1px 0 rgba(255, 245, 225, 0.55), 0 -1px 1px rgba(40, 25, 15, 0.35), 0 2px 3px rgba(60, 40, 25, 0.18); filter: contrast(1.02); } .mw-deboss-strong { color: var(--mw-ink); text-shadow: 0 1px 0 rgba(255, 245, 225, 0.7), 0 -1px 2px rgba(40, 25, 15, 0.5), 0 3px 5px rgba(60, 40, 25, 0.22), 0 -2px 3px rgba(20, 12, 5, 0.25); } /* Headline — heavy geometric sans, letterpress */ .mw-headline { font-family: var(--mw-font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; } /* The gradient flag bar — sits above major surfaces like a flag */ .mw-flag-bar { height: 6px; background: var(--mw-gradient-flag); } /* Sunshine highlighter swipe (translucent, like a real highlighter) */ .mw-highlight { background: linear-gradient(transparent 58%, rgba(255, 228, 92, 0.85) 58%, rgba(255, 228, 92, 0.85) 92%, transparent 92%); } /* Hibiscus underline — "this matters" */ .mw-underline-hot { border-bottom: 3px solid var(--mw-hibiscus); padding-bottom: 2px; } /* Cyan info chip — small, discrete, loud */ .mw-chip-info { display: inline-block; background: var(--mw-cyan); color: var(--mw-ink-sepia); font-family: var(--mw-font-ui); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 10px; border-radius: 999px; } /* ============================================================ RULES OF USE (from the Brand Bible — keep these or it stops being Millwright & Co): 1. Layer 1 is 90%+ of any web surface (~70% for dense app UI). 2. Pop colors are punctuation: 1–2 accents per view. Never backgrounds. 3. Cyan & Sunshine are decorative only — never text (contrast fails). 4. Body text: sepia serif. Headlines: Inter 900 debossed ink. 5. Gradient bar stays thin and horizontal. Max 3 stops. It's a flag. ============================================================ */