/* ============================================================ LIAM CARPENTER — DESIGN SYSTEM colors_and_type.css Wabi-sabi Japanese personal brand. Sumi ink on washi paper, akane red accents. Noto Serif JP + Shippori Mincho + DM Mono. ============================================================ */ /* ---- WEBFONTS (self-hosted) ---- All font files live in project/fonts/. The @font-face declarations are generated in fonts/fonts.css, loaded asynchronously via in each HTML file — do not @import from here as that blocks rendering. */ :root { /* ============================================================ CORE PALETTE — named after Japanese pigments ============================================================ */ --sumi: #1a1a1a; /* 墨 ink black — primary text & dark panels */ --sumi-80: #2b2b2b; /* softened ink — secondary dark surfaces */ --sumi-60: #4a4a4a; /* body text on light */ --washi: #f5f0e8; /* 和紙 paper — primary background */ --washi-2: #ede6da; /* deeper paper — alt sections / cards */ --washi-3: #ffffff; /* raised cards on washi */ --akane: #c0392b; /* 茜 madder red — THE accent. Use sparingly */ --akane-d: #9c2b20; /* pressed / hover-dark akane */ --akane-on-dark: #e0685a; /* lighter madder for small text on sumi (AA) */ --beni: #e8d5c4; /* 紅 faded rouge — warm neutral fill */ --gin: #686868; /* 銀 silver grey — captions, meta, muted (AA 4.5:1 on washi) */ --gin-2: #c4bfb5; /* hairline borders & decorative hairlines on washi */ --kincha: #b5813a; /* 金茶 gold-brown — rare secondary accent */ --ao: #2c5f6e; /* 藍 indigo-teal — links / cool accent */ --sakura: #f2c4ce; /* 桜 cherry pink — petals / soft highlight */ /* ============================================================ SEMANTIC COLOR TOKENS ============================================================ */ --bg: var(--washi); --bg-alt: var(--washi-2); --bg-card: var(--washi-3); --bg-inverse: var(--sumi); --fg1: var(--sumi); /* primary text */ --fg2: var(--sumi-60); /* body / secondary text */ --fg3: var(--gin); /* muted / captions / meta */ --fg-on-dark-1: var(--washi); /* text on sumi panels */ --fg-on-dark-2: rgba(245,240,232,0.5); --accent: var(--akane); --accent-press: var(--akane-d); --link: var(--ao); --border: rgba(26,26,26,0.12); --border-strong: rgba(26,26,26,0.28); --border-dark: rgba(255,255,255,0.08); --border-dark-2: rgba(255,255,255,0.16); /* ============================================================ TYPE FAMILIES ============================================================ */ --font-display: 'Shippori Mincho', 'Noto Serif JP', serif; /* headlines, names */ --font-serif-jp:'Noto Serif JP', serif; /* kanji accents, deco */ --font-sans-jp: 'Noto Sans JP', sans-serif; /* JP UI text */ --font-mono: 'DM Mono', ui-monospace, monospace; /* body, UI, labels */ /* ============================================================ TYPE SCALE (px @ 1rem = 16px baseline) Fluid display sizes clamp between mobile→desktop. ============================================================ */ --fs-display: clamp(52px, 6vw, 88px); /* @kind font */ /* hero name */ --fs-h1: clamp(36px, 4vw, 64px); /* @kind font */ /* section / page titles */ --fs-h2: clamp(28px, 3.5vw, 48px); /* @kind font */ /* sub-section titles */ --fs-h3: 24px; /* card titles */ --fs-h4: 18px; /* small headings */ --fs-lead: 16px; /* lead paragraph */ --fs-body: 14px; /* default body (mono) */ --fs-small: 12px; /* secondary body */ --fs-meta: 11px; /* labels, nav */ --fs-micro: 9px; /* tags, overlines */ /* line-heights */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-body: 1.8; /* @kind font */ --lh-loose: 1.9; /* @kind font */ /* letter-spacing — generous tracking is core to the brand */ --ls-display: -0.01em; --ls-tight: 0.1em; --ls-wide: 0.18em; --ls-wider: 0.25em; --ls-widest: 0.35em; --ls-kanji: 0.3em; /* ============================================================ SPACING SCALE (8px base rhythm) ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 100px; --gutter: 80px; /* page side padding (desktop) */ --gutter-mobile: 24px; /* ============================================================ RADII — kept minimal & sharp (washi/print aesthetic) ============================================================ */ --r-0: 0px; /* default — most elements are sharp-cornered */ --r-1: 1px; /* tags */ --r-2: 2px; /* hanko inner stamp */ --r-4: 4px; /* hanko outer / subtle softening */ --r-full: 9999px; /* ============================================================ ELEVATION — flat by default; soft warm shadows when raised ============================================================ */ --shadow-1: 0 1px 2px rgba(26,26,26,0.05); --shadow-2: 0 8px 24px rgba(26,26,26,0.08); --shadow-3: 0 24px 60px rgba(26,26,26,0.12); --shadow-inset-dark: inset 0 0 0 1px rgba(255,255,255,0.06); /* ============================================================ MOTION — GSAP-driven; these mirror the easing we use in JS ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* power3.out feel */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 0.2s; /* @kind other */ --dur-med: 0.3s; /* @kind other */ --dur-slow: 0.6s; /* @kind other */ /* GSAP reference (use in JS): ease 'power3.out', duration 0.8–1.2, stagger 0.08–0.12. See animations/gsap-patterns.js */ } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .t-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg1); } .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); color: var(--fg1); } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg1); } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg1); } .t-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--fg1); } .t-kanji { font-family: var(--font-serif-jp); font-weight: 300; letter-spacing: var(--ls-kanji); color: var(--fg3); } .t-body { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); } .t-small { font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-loose); color: var(--fg3); } /* Overline / eyebrow / label — uppercase mono, wide tracking */ .t-overline { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--fg3); } .t-tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg3); } /* Number / stat display */ .t-stat { font-family: var(--font-display); font-weight: 400; font-size: 32px; color: var(--fg1); }