/* ============================================================================ WRITTEN IN GRAIN — Foundations Color + Type tokens for a retro 35mm film photography brand. Single source of truth. Import this everywhere. @import url("colors_and_type.css"); or ============================================================================ */ /* ---- Fonts ---------------------------------------------------------------- Loaded from Google Fonts CDN. NOTE: no brand font files were supplied, so these are the closest free matches to the intended editorial-film feel. See README "Type" → flag for substitution if real licensed fonts exist. - Newsreader : literary high-contrast serif (display + editorial) - Hanken Grotesk : warm humanist grotesque (UI + body) - DM Mono : metadata / frame numbers / date-back stamp --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap'); :root { /* ===== TYPE FAMILIES ===================================================== */ --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "DM Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace; /* ===== RAW COLOR SCALES ================================================== */ /* Paper — warm creams. App + page backgrounds, cards, surfaces. */ --paper-0: #FCF8F0; /* lightest — raised cards on cream */ --paper-1: #F4ECDD; /* DEFAULT page background */ --paper-2: #ECE1CD; /* sunken wells, alt rows */ --paper-3: #E2D3B9; /* borders on cream, dividers */ /* Ink — warm near-blacks & browns. Text, dark surfaces. */ --ink-900: #181410; /* darkroom black — full-bleed dark sections */ --ink-800: #211C16; /* primary ink / text */ --ink-700: #312921; /* dark surface cards */ --ink-600: #4C4135; /* secondary text on cream */ --ink-500: #6E6052; /* tertiary text, captions */ --ink-400: #948574; /* muted / placeholder */ --ink-300: #B6A993; /* hairlines on dark */ /* Amber — the film date-back stamp orange. PRIMARY accent. */ --amber-700: #9C4D17; --amber-600: #BB5F1F; --amber-500: #DA7A2C; /* DEFAULT accent */ --amber-400: #E89A52; --amber-300: #F2BC85; --amber-100: #F8E0C4; /* Oxblood — darkroom safelight / film canister red. SECONDARY accent. */ --oxblood-600: #5C2018; --oxblood-500: #7C2E22; --oxblood-400: #9C463A; /* Pine — cool counterweight (negative-space green). TERTIARY accent. */ --pine-600: #1F352F; --pine-500: #2C4A43; --pine-400: #436A60; /* ===== SEMANTIC COLOR ROLES ============================================= */ --bg: var(--paper-1); --bg-raised: var(--paper-0); --bg-sunken: var(--paper-2); --bg-inverse: var(--ink-900); --fg: var(--ink-800); /* primary text */ --fg-2: var(--ink-600); /* secondary text */ --fg-3: var(--ink-500); /* captions, metadata */ --fg-muted: var(--ink-400); /* placeholder, disabled */ --fg-on-dark: var(--paper-1); /* text on ink/dark surfaces */ --fg-on-accent: var(--paper-0); /* text on amber/oxblood */ --accent: var(--amber-500); --accent-hover: var(--amber-600); --accent-press: var(--amber-700); --accent-soft: var(--amber-100); /* tinted backgrounds */ --secondary: var(--oxblood-500); --tertiary: var(--pine-500); --border: var(--paper-3); /* hairlines on cream */ --border-strong: var(--ink-300); --border-dark: #3A3128; /* hairlines on dark surfaces */ /* status */ --success: #4F7A55; --warning: var(--amber-500); --danger: #B23B2B; --info: var(--pine-400); /* ===== TYPE SCALE ======================================================= */ /* fluid-ish fixed scale; line-heights tuned per role */ --text-xs: 0.75rem; /* 12 — micro labels, frame nums */ --text-sm: 0.875rem; /* 14 — captions, metadata */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body */ --text-lg: 1.375rem; /* 22 — h4 / large UI */ --text-xl: 1.75rem; /* 28 — h3 */ --text-2xl: 2.5rem; /* 40 — h2 */ --text-3xl: 3.5rem; /* 56 — h1 */ --text-4xl: 5rem; /* 80 — display */ --text-5xl: 7rem; /* 112 — hero display */ --leading-tight: 1.04; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.68; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.16em; /* mono eyebrow / overline */ /* ===== SPACING (4px base) =============================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ===== RADII =========================================================== */ /* Film/analog brand → mostly square. Small radius on UI, sharp on frames. */ --radius-none: 0px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ===== SHADOWS / ELEVATION ============================================= */ /* warm-tinted, soft. Think prints resting on a table. */ --shadow-sm: 0 1px 2px rgba(33, 28, 22, 0.10); --shadow-md: 0 4px 14px rgba(33, 28, 22, 0.12); --shadow-lg: 0 12px 34px rgba(33, 28, 22, 0.18); --shadow-print: 0 2px 1px rgba(33,28,22,.07), 0 10px 24px rgba(33,28,22,.16); /* photo print */ --inset-well: inset 0 1px 3px rgba(33, 28, 22, 0.12); /* ===== MOTION ========================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* shutter settle */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; } /* ============================================================================ SEMANTIC ELEMENT DEFAULTS — opt in by wrapping content in .wig-prose, or apply the utility classes directly. ============================================================================ */ .wig-prose, .wig { font-family: var(--font-sans); color: var(--fg); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; } /* ---- Headings: editorial serif, tight, often italic for emphasis ---- */ .wig-h1, .wig-display { font-family: var(--font-serif); font-weight: 400; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--fg); } .wig-display { font-size: var(--text-4xl); } .wig-h1 { font-size: var(--text-3xl); } .wig-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .wig-h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-snug); } .wig-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); } /* ---- Body ---- */ .wig-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-2); } .wig-body { font-size: var(--text-base); line-height: var(--leading-relaxed); } .wig-small { font-size: var(--text-sm); color: var(--fg-2); } /* ---- Eyebrow / overline — mono, uppercase, wide tracking (film slate) ---- */ .wig-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); font-weight: 500; } /* ---- Metadata / EXIF / caption — mono ---- */ .wig-meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-3); letter-spacing: 0.01em; } /* ---- Date-back stamp — the signature orange mono timestamp ---- */ .wig-datestamp { font-family: var(--font-mono); font-weight: 500; color: var(--amber-500); letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(218, 122, 44, 0.45); } /* ---- Editorial italic emphasis (the "written" voice) ---- */ .wig-script { font-family: var(--font-serif); font-style: italic; font-weight: 400; }