/* ========================================================================== FAIR PRESS · design tokens — Round 1 · v0.1 · 2026-07-10 ========================================================================== One system, three surfaces: publisher fairpressjournals.com journal jrepstat.fairpressjournals.com portal submit.fairpressjournals.com Journal #2 is an accent swap: add one [data-accent="…"] block in §4 (seven values) — nothing else changes. THEMES Light is default. Dark follows the OS (prefers-color-scheme) and can be forced either way with / . TYPE (all SIL OFL, self-hosted — embedding steps in README.md) serif Source Serif 4 masthead · display · article titles sans Public Sans UI · body mono JetBrains Mono machine-verified matter: commands, DOIs, ORCID iDs, counts, timestamps, badge labels The rule of the system: if a machine checked it, it is set in mono. CONTRAST Every foreground/background pair this file defines passes WCAG 2.2 AA (normal text 4.5:1). Checked 2026-07-10; the pair matrix is in README.md. ========================================================================== */ /* -------------------------------------------------------------------------- §1 · FONTS woff2 latin subsets (fontsource builds, SIL OFL — licence files sit next to the fonts). All ACTIVE; urls are relative to this stylesheet (assets/tokens.css → assets/fonts/). Stacks fall back gracefully (Iowan/Palatino/Georgia · system sans) while fonts stream. -------------------------------------------------------------------------- */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- §2 · COLOUR — LIGHT (default) Paper is a fresh warm near-white: brighter and cooler than the old ivory (#fffdf8/#f5f1e8), still warm against pure device white. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* ground */ --paper: #FBFAF7; /* page ground */ --surface: #FFFFFF; /* raised: cards, inputs, popovers */ --surface-2: #F3F1EC; /* sunken: alt bands, table hover, code inline */ /* ink */ --ink: #1D1B18; /* primary text 16.5:1 on paper */ --ink-2: #57534B; /* secondary text 7.3:1 */ --ink-3: #736D62; /* meta/faint text 4.9:1 — smallest text ink */ /* rules */ --line: #E7E3DB; /* hairline */ --line-2: #CFC9BE; /* strong hairline: input borders, card rules */ /* accent — semantic hooks; instance values come from §4 */ --accent: var(--ac-text); /* links, accent text (AA) */ --accent-fill: var(--ac-fill); /* primary button bg */ --accent-fill-hover: var(--ac-fill-hover); --accent-fill-press: var(--ac-fill-press); --accent-wash: var(--ac-wash); /* tint bg: selection, hover */ --on-accent: #FFFFFF; /* text on accent-fill */ /* status — shared by badges, notices, portal card kinds portal mapping: info → info · action → warn · done → ok */ --ok: #1F6B4E; --ok-wash: #E5F1EA; /* ✓ reproduced, done */ --warn: #855710; --warn-wash: #F5EDDD; /* under verification */ --danger: #A93226; --danger-wash: #F8E9E6; /* errors, destructive*/ --info: #29546C; --info-wash: #E7EEF2; /* neutral notice */ --na: #6A6459; --na-wash: #EFEDE8; /* — not applicable */ /* the one-command block (a dark slab in both themes) */ --command-bg: #1B1918; --command-ink: #ECE8E1; --command-muted: #9B948A; --command-accent: var(--ac-text-dark); /* prompt glyph, corner marks */ /* depth — used sparingly: popovers, dialogs. Cards use rules, not shadow */ --shadow-1: 0 1px 2px rgba(23, 20, 16, 0.06); --shadow-2: 0 12px 32px -8px rgba(23, 20, 16, 0.18); --selection: var(--ac-wash); } /* -------------------------------------------------------------------------- §3 · COLOUR — DARK Not an inversion: warm near-black paper, brightened accents, washes become deep tints. Same token names — components never branch on theme. -------------------------------------------------------------------------- */ /* keep in sync: this block appears twice (media query + forced attribute) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #141311; --surface: #1D1B18; --surface-2: #24211D; --ink: #ECE8E1; /* 15.2:1 on paper */ --ink-2: #B4AEA3; /* 8.4:1 */ --ink-3: #8B857A; /* 5.1:1 */ --line: #33302A; --line-2: #4A463E; --accent: var(--ac-text-dark); --accent-fill: var(--ac-fill-dark); --accent-fill-hover: var(--ac-fill-dark-hover); --accent-fill-press: var(--ac-fill); --accent-wash: var(--ac-wash-dark); --on-accent: #FFFFFF; --ok: #6FBF9A; --ok-wash: #16281F; --warn: #D9A64A; --warn-wash: #2E2414; --danger: #E5867A; --danger-wash: #301715; --info: #85B2CD; --info-wash: #17222B; --na: #948E83; --na-wash: #211F1B; --command-bg: #0E0D0C; --command-ink: #ECE8E1; --command-muted: #9B948A; --command-accent: var(--ac-text-dark); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.55); --selection: var(--ac-wash-dark); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #141311; --surface: #1D1B18; --surface-2: #24211D; --ink: #ECE8E1; --ink-2: #B4AEA3; --ink-3: #8B857A; --line: #33302A; --line-2: #4A463E; --accent: var(--ac-text-dark); --accent-fill: var(--ac-fill-dark); --accent-fill-hover: var(--ac-fill-dark-hover); --accent-fill-press: var(--ac-fill); --accent-wash: var(--ac-wash-dark); --on-accent: #FFFFFF; --ok: #6FBF9A; --ok-wash: #16281F; --warn: #D9A64A; --warn-wash: #2E2414; --danger: #E5867A; --danger-wash: #301715; --info: #85B2CD; --info-wash: #17222B; --na: #948E83; --na-wash: #211F1B; --command-bg: #0E0D0C; --command-ink: #ECE8E1; --command-muted: #9B948A; --command-accent: var(--ac-text-dark); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.55); --selection: var(--ac-wash-dark); } /* -------------------------------------------------------------------------- §4 · ACCENT INSTANCES Seven values define a surface's voice. Set data-accent on (whole surface) or any subtree (e.g. one journal card on the publisher home). --ac-text accent as text/links on light (AA on paper) --ac-fill button fill, light (AA under white) --ac-fill-hover/press hover brightens · press deepens --ac-wash light tint: selection, hovers, marks --ac-text-dark accent as text/links on dark (AA on dark paper) --ac-fill-dark(+hover) button fill on dark --ac-wash-dark deep tint -------------------------------------------------------------------------- */ /* JRepStat — the pilot journal. The concept-AB oxblood (#6b1f2a), modernised: clearer, one step brighter — garnet, not brown. DEFAULT instance. */ :root, [data-accent="jrepstat"] { --ac-text: #8E2434; --ac-fill: #8E2434; --ac-fill-hover: #A72B3F; --ac-fill-press: #6E1B28; --ac-wash: #F6E9EA; --ac-text-dark: #DB8290; --ac-fill-dark: #A72B3F; --ac-fill-dark-hover: #B93A4E; --ac-wash-dark: #33191E; } /* FAIR Press imprint (+ author portal) — a deep petrol blue: the calm, infrastructural parent to the journals' warmer voices. */ [data-accent="imprint"] { --ac-text: #29546C; --ac-fill: #29546C; --ac-fill-hover: #366A85; --ac-fill-press: #1E4054; --ac-wash: #E7EEF2; --ac-text-dark: #85B2CD; --ac-fill-dark: #366A85; --ac-fill-dark-hover: #427C99; --ac-wash-dark: #17222B; } /* Reserved for journals in preparation — provisional, text/paper AA-checked */ [data-accent="health"] { /* Reproducible Health Sciences — teal */ --ac-text: #1F6B5E; --ac-fill: #1F6B5E; --ac-fill-hover: #2A8172; --ac-fill-press: #175249; --ac-wash: #E4F0ED; --ac-text-dark: #66BFAD; --ac-fill-dark: #2A8172; --ac-fill-dark-hover: #359486; --ac-wash-dark: #16241F; } [data-accent="biology"] { /* Reproducible Biology — moss */ --ac-text: #4C5E1B; --ac-fill: #4C5E1B; --ac-fill-hover: #5D7226; --ac-fill-press: #3A480F; --ac-wash: #EDF0E0; --ac-text-dark: #B5C46A; --ac-fill-dark: #5D7226; --ac-fill-dark-hover: #6E8433; --ac-wash-dark: #20240F; } /* -------------------------------------------------------------------------- §5 · TYPE SCALE & ROLES Major third (×1.25) on a 17px body — one step bigger and airier than web-default; confident, not shouty. -------------------------------------------------------------------------- */ :root { --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-sans: "Public Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* scale */ --text-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.0625rem); /* 44 → 65px */ --text-2xl: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem); /* 36 → 52px */ --text-xl: clamp(1.875rem, 1.65rem + 0.9vw, 2.625rem);/* 30 → 42px */ --text-lg: 2.0625rem; /* 33px section titles */ --text-md: 1.6875rem; /* 27px sub-titles, card titles large */ --text-lede: 1.3125rem; /* 21px ledes, abstracts */ --text-body: 1.0625rem; /* 17px body */ --text-ui: 0.9375rem; /* 15px buttons, nav, labels */ --text-s: 0.875rem; /* 14px secondary UI, authors */ --text-xs: 0.8125rem; /* 13px captions, hints */ --text-2xs: 0.75rem; /* 12px stamps, footnotes, eyebrows */ --text-mono: 0.9375rem; /* 15px code/data at body scale */ --text-command: 1.0625rem; /* 17px the one-command block */ --text-num: 2.75rem; /* 44px live-data tile figure */ /* leading */ --leading-display: 1.04; --leading-heading: 1.15; --leading-body: 1.6; --leading-ui: 1.4; --leading-mono: 1.55; /* tracking */ --track-display: -0.015em; --track-heading: -0.008em; --track-eyebrow: 0.14em; /* with uppercase */ --track-mono-caps: 0.07em; /* badges, mono labels */ /* weights (match the embedded subsets) */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; } /* -------------------------------------------------------------------------- §6 · SPACE & LAYOUT — 4px grid -------------------------------------------------------------------------- */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 104px; --section: clamp(64px, 9vw, 112px); /* vertical rhythm between blocks */ --container: 1120px; /* page max-width */ --prose: 68ch; /* reading measure */ --gutter: clamp(20px, 4vw, 44px); /* page side padding */ } /* Wide-screen rule (plane-a-integration plan, binding for planea + portal): the container steps 1120 → 1360 at ≥1600px so 4-up strips breathe; the reading measure (--prose) stays put on purpose — article body text keeps 68–75ch at every width. */ @media (min-width: 1600px) { :root { --container: 1360px; } } /* -------------------------------------------------------------------------- §7 · SHAPE — radii & rules Squared, editorial. Boxes are rare; rules carry the structure. -------------------------------------------------------------------------- */ :root { --r-s: 3px; /* buttons, inputs, badges */ --r-m: 6px; /* notices, command block, tiles */ --r-l: 10px; /* dialogs, popovers */ --r-pill: 999px; /* reserved: avatar, progress dots */ --hair: 1px; /* hairline rule */ --rule: 2px; /* heavy rule: mastheads, tile tops */ } /* -------------------------------------------------------------------------- §8 · MOTION Fast, precise, no overshoot. All motion is token-driven, so prefers-reduced-motion collapses it globally (see below). -------------------------------------------------------------------------- */ :root { --dur-1: 120ms; /* micro: hover, press */ --dur-2: 240ms; /* reveal: expands, fades */ --dur-3: 560ms; /* orchestrated page-load moment */ --ease: cubic-bezier(0.2, 0, 0, 1);/* standard decel */ --ease-out: cubic-bezier(0, 0, 0.2, 1);/* gentle settle */ } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } /* -------------------------------------------------------------------------- §9 · FOCUS & LAYERS -------------------------------------------------------------------------- */ :root { --focus-w: 2px; --focus-off: 2px; --z-nav: 100; --z-pop: 200; --z-toast: 300; } /* -------------------------------------------------------------------------- §10 · BASE PRIMER The minimum element layer that makes the tokens take effect. Pages build their component styles on top (recipes demonstrated in system.html). -------------------------------------------------------------------------- */ html { background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--w-regular); line-height: var(--leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } :focus-visible { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-off); border-radius: 2px; } ::selection { background: var(--selection); color: var(--ink); } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); transition: text-decoration-color var(--dur-1) var(--ease); } a:hover { text-decoration-color: var(--accent); }