/* ============================================================ Kamsin Kaneko — Design Tokens "Paying Attention" — photography & writing Ocean & indigo-dye palette · quiet, contemplative, unhurried Drop these into your child theme and reference the variables. ============================================================ */ /* ---- Fonts (load once, in or via @import at top of CSS) ---- */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---- Color · surfaces ---- */ --kk-bg: #E7E9EC; /* page / card background (cool misty grey) */ --kk-panel: #DFE4E4; /* subtle panel band (print teaser, subscribe, detail rows) */ --kk-img-backing: #DEE3E3; /* backing behind lighter images while loading */ --kk-img-dark: #0C1411; /* backing behind dark/forest images */ --kk-img-dark-2: #16201F; /* alt dark backing (hero) */ /* ---- Color · ink / text ---- */ --kk-ink: #232733; /* primary text + headings */ --kk-ink-display: #1C2030; /* large display headings (H1) */ --kk-body: #555D60; /* body copy */ --kk-soft: #677074; /* secondary text, section labels */ --kk-faint: #8A9296; /* captions, meta */ --kk-faint-2: #99A1A4; /* timestamps, numerals, least-emphasis */ /* ---- Color · accent (brand) ---- */ /* Darkened from the Substack indigo (#5566B8) so it sits quietly on the cool ground while staying recognisably the brand colour. */ --kk-accent: #434E7A; --kk-accent-line: rgba(67, 78, 122, 0.40); /* accent underlines */ --kk-substack: #5566B8; /* original Substack indigo, for reference */ /* ---- Color · footer (indigo dye) ---- */ --kk-footer-bg: #1D2630; --kk-footer-head: #EEF3F4; --kk-footer-text: #C3CCD0; --kk-footer-body: #9AA6AB; --kk-footer-faint: #6C777E; /* ---- Color · on dark imagery (hero overlay) ---- */ --kk-on-dark: #EEF2F2; --kk-scrim-top: linear-gradient(rgba(16,22,25,.60), rgba(16,22,25,0)); --kk-scrim-bottom: linear-gradient(rgba(16,22,25,0), rgba(16,22,25,.62)); /* ---- Hairlines ---- */ --kk-rule: rgba(35, 40, 43, 0.16); /* primary section rule */ --kk-rule-soft: rgba(35, 40, 43, 0.12); --kk-rule-faint: rgba(35, 40, 43, 0.10); /* ---- Type families ---- */ --kk-serif: 'Lora', Georgia, 'Times New Roman', serif; /* headings + wordmark */ --kk-sans: 'Mulish', system-ui, -apple-system, sans-serif; /* body */ --kk-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* labels, eyebrows, captions, meta, nav */ /* ---- Layout ---- */ --kk-maxw: 1280px; /* page content width */ --kk-gutter: 64px; /* horizontal section padding (desktop) */ --kk-radius: 2px; /* the only radius used — almost square */ /* ---- Selection ---- */ } ::selection { background: rgba(85, 102, 184, 0.20); } /* ============================================================ TYPE SCALE (font-family / weight / size / line-height / letter-spacing / color) ------------------------------------------------------------ Wordmark Lora 500 22px 1.0 .01em --kk-ink (cream on dark hero) Wordmark kicker Mono 9px 1.0 .26em --kk-accent UPPERCASE ("Paying Attention") Display H1 Lora 400 56px 1.08 -.01em --kk-ink-display Statement H2 Lora 400 38-39px 1.4 -.005em --kk-ink Card title H3 Lora 400 33px 1.2 normal --kk-ink Essay title H4 Lora 500 23px 1.3 normal --kk-ink Eyebrow / label Mono 11px --- .22-.26em --kk-accent or --kk-soft UPPERCASE Body Mulish 400 16-18px 1.85-1.92 normal --kk-body Lead body Mulish 400 17-18px 1.85 normal --kk-body Caption / meta Mono 11px --- .12-.14em --kk-faint UPPERCASE Reflective note Lora italic 18px 1.6 normal --kk-soft Nav item Mono 11px --- .16em --kk-soft (active --kk-ink) UPPERCASE CTA link "→" Mono 11px --- .16em --kk-accent UPPERCASE, underline Footer wordmark Lora italic 26px --- normal --kk-footer-head ============================================================ */