/* OQTS design tokens — faces, colour, type scale, spacing, layout.
One import gives a project everything it needs to be on-brand:
Latin Modern Mono ... GUST Font License (see fonts/latin-modern-mono/LICENSE.txt)
STIX Two Text ...... SIL Open Font License 1.1 (see fonts/stix-two-text/LICENSE.txt)
Both ship as WOFF2 for the wire, with the OTF/TTF sources kept beside
them as the artwork of record. Subsetting remains a possible follow-up. */
/* ── Latin Modern Mono — logo, display, headings, eyebrows, figures ──
Only three cuts exist. Do not ask this family for a weight ramp; take
hierarchy from size and letter-spacing instead. Never below 13px. */
@font-face{
font-family:'Latin Modern Mono';
src:url('fonts/latin-modern-mono/LatinModernMono-Regular.woff2') format('woff2'),
url('fonts/latin-modern-mono/LatinModernMono-Regular.otf') format('opentype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Latin Modern Mono';
src:url('fonts/latin-modern-mono/LatinModernMono-Bold.woff2') format('woff2'),
url('fonts/latin-modern-mono/LatinModernMono-Bold.otf') format('opentype');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Latin Modern Mono';
src:url('fonts/latin-modern-mono/LatinModernMono-Slanted.woff2') format('woff2'),
url('fonts/latin-modern-mono/LatinModernMono-Slanted.otf') format('opentype');
font-weight:400; font-style:italic; font-display:swap;
}
/* ── STIX Two Text — body copy, UI, forms, member portal ── */
@font-face{
font-family:'STIX Two Text';
src:url('fonts/stix-two-text/STIXTwoText-Regular.woff2') format('woff2'),
url('fonts/stix-two-text/STIXTwoText-Regular.ttf') format('truetype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'STIX Two Text';
src:url('fonts/stix-two-text/STIXTwoText-Medium.woff2') format('woff2'),
url('fonts/stix-two-text/STIXTwoText-Medium.ttf') format('truetype');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'STIX Two Text';
src:url('fonts/stix-two-text/STIXTwoText-SemiBold.woff2') format('woff2'),
url('fonts/stix-two-text/STIXTwoText-SemiBold.ttf') format('truetype');
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:'STIX Two Text';
src:url('fonts/stix-two-text/STIXTwoText-Bold.woff2') format('woff2'),
url('fonts/stix-two-text/STIXTwoText-Bold.ttf') format('truetype');
font-weight:700; font-style:normal; font-display:swap;
}
/* ── Brand tokens, so a consumer needs one import to be correct ── */
:root{
/* grounds */
--oqts-ivory:#FBF8F1; /* base — the default light ground */
--oqts-oxford:#002147; /* base — ink on light, and the dark ground */
/* secondary */
--oqts-paper:#F4EDDC; /* tint for panels, cards and bands on ivory */
--oqts-chalk:#E0D5BC; /* hairlines and borders */
--oqts-slate:#46586A; /* supporting text on light — 6.9:1 on ivory */
--oqts-slate-rev:#A9B6C6; /* supporting text on oxford — 7.8:1 */
/* accent — ONE gold, literally: all three sit on hue 77.4 in OKLCH and
differ only in lightness. On light grounds gold is not text-safe (camel
measures 2.9:1), so text takes bronze and rules take camel. Reversed on
navy the constraint disappears. */
--oqts-bronze:#8A6933; /* accent TEXT on light — 4.8:1 on ivory */
--oqts-camel:#B08D57; /* accent RULES and detail on light — never text */
--oqts-camel-rev:#CEB083; /* accent on navy — 7.8:1, text-safe */
--oqts-display:'Latin Modern Mono', ui-monospace, monospace;
--oqts-text:'STIX Two Text', Georgia, serif;
}
/* ── Semantic surface roles ──────────────────────────────────────────────
Build against these, not the raw colour names, and a page follows the
theme automatically. There is no dark theme — the brand has one light
ground. Oxford is still a surface (title bar, footer), but that is a band
inside a light page, not a mode. */
:root{
--oqts-surface:var(--oqts-ivory); /* page ground */
--oqts-surface-2:var(--oqts-paper); /* panels, cards */
--oqts-ink:var(--oqts-oxford); /* body + headings */
--oqts-ink-2:var(--oqts-slate); /* secondary text */
--oqts-hairline:var(--oqts-chalk); /* rules, borders */
--oqts-accent-text:var(--oqts-bronze); /* eyebrows, labels */
--oqts-accent-rule:var(--oqts-camel); /* rules, detail */
}
/* ── Type scale ──────────────────────────────────────────────────────────
Latin Modern Mono sets everything in the display column; STIX Two Text
sets everything in the reading column. Sizes are px so the ramp survives
a consumer changing the root size; line heights are unitless.
Latin Modern is a 10pt optical design and goes thin on screen, so 13px
is a hard floor for it — that is why the eyebrow is 13 and not 12. */
:root{
/* display column — Latin Modern Mono */
--oqts-display-xl:clamp(30px, 4.4vw, 46px); /* page title 1.16 / .01em */
--oqts-display-l:clamp(22px, 2.6vw, 28px); /* section heading 1.25 / .015em */
--oqts-display-m:20px; /* sub-heading 1.30 / .02em */
--oqts-label:16px; /* card + table heading, caps, .06em */
--oqts-data:15px; /* tables and figures, tabular */
--oqts-eyebrow:13px; /* section eyebrow, caps, .14em */
--oqts-micro:13px; /* colophon, captions, .03em */
/* reading column — STIX Two Text */
--oqts-lede:20px; /* standfirst 1.55 */
--oqts-body:17px; /* body 1.65 */
--oqts-body-s:14px; /* caption, note 1.60 */
/* line heights */
--oqts-lh-tight:1.16;
--oqts-lh-heading:1.25;
--oqts-lh-body:1.65;
--oqts-lh-ui:1.40;
/* tracking. Caps always need some; lower case never does. */
--oqts-track-eyebrow:.14em;
--oqts-track-label:.06em;
--oqts-track-display:.015em;
--oqts-track-wordmark:.09em; /* the logo's own value */
}
/* ── Spacing scale ───────────────────────────────────────────────────────
A 4px grid. Steps 1-4 are for detail inside a component, 5-7 between
components, 8-10 between sections. Reach for a step, not a number. */
:root{
--oqts-space-1:4px;
--oqts-space-2:8px;
--oqts-space-3:12px;
--oqts-space-4:16px;
--oqts-space-5:24px;
--oqts-space-6:32px;
--oqts-space-7:48px;
--oqts-space-8:64px;
--oqts-space-9:96px;
--oqts-space-10:128px;
/* layout */
--oqts-measure:68ch; /* long-form column — never wider */
--oqts-content:1120px; /* page max width */
--oqts-gutter:32px; /* page padding; 20px below 640px */
--oqts-rule:1px; /* hairline weight, in chalk */
}
@media (max-width:640px){
:root{ --oqts-gutter:20px; }
}
/* ── Data visualisation ──────────────────────────────────────────────────
Every value below was produced by the six-checks validator, not chosen by
eye. Re-run it after ANY change:
python3 /scripts/validate_palette.py "" \
--mode light --surface '#FBF8F1'
Charts render on ivory. If a dark surface is ever needed, its steps must be
SELECTED and re-validated against that surface — never flipped from these. */
:root{
--oqts-chart-surface:#FBF8F1;
--oqts-chart-ink:#002147; /* primary ink 15.1:1 */
--oqts-chart-ink-2:#46586A; /* secondary 6.9:1 */
--oqts-chart-muted:#6B6555; /* axis + labels 5.5:1 */
--oqts-chart-grid:#E0D5BC; /* hairline, recessive */
--oqts-chart-baseline:#C9BB9C;
/* Categorical — fixed slot order, never cycled. Slots 1-2 are the brand,
so a one- or two-series chart reads as OQTS. A 9th series folds into
"Other", facets, or small multiples; it is never a generated hue.
Validated light on #FBF8F1: worst adjacent ΔE 10.6, all checks pass. */
--oqts-series-1:#1E5C99; /* oxford blue — brand */
--oqts-series-2:#B8821E; /* gold — brand */
--oqts-series-3:#7A5BB0; /* violet */
--oqts-series-4:#0E8A72; /* teal */
--oqts-series-5:#C4611A; /* orange */
--oqts-series-6:#8E2740; /* crimson */
--oqts-series-7:#C2529E; /* magenta */
--oqts-series-8:#2F6B1E; /* green */
/* Sequential — one hue, pale to deep. Steps 100-400 are for continuous
fills only (heatmaps), where the lightest may recede into the surface.
Ordinal marks (tiers, buckets) start at 500, the first step over 3:1. */
--oqts-seq-100:#C7E8FF; --oqts-seq-200:#9ED2FF;
--oqts-seq-300:#7BB9FD; --oqts-seq-400:#629FE1;
--oqts-seq-500:#4783C4; --oqts-seq-600:#2C68A6;
--oqts-seq-700:#0B4E8A; --oqts-seq-800:#00356E;
/* Diverging — red/green, midpoint to extreme. Corresponding steps clear
ΔE 8.3-10.1 on light. Non-corresponding steps drop to 4.3, so where
arbitrary steps abut (matrices, heatmaps) the sign MUST also be carried
by a label, a texture arm-angle, or a signed value. */
--oqts-div-neg-1:#C8442E; --oqts-div-neg-2:#A82A22; --oqts-div-neg-3:#7F1D1D;
--oqts-div-mid:#DCD5C6;
--oqts-div-pos-1:#46A876; --oqts-div-pos-2:#2A8A5F; --oqts-div-pos-3:#1E6B4F;
/* Diverging cell tints — the same two hues composited over ivory, for tables
and heat-grids where ink must stay legible on top. Ink contrast 6.0-12.2. */
--oqts-div-cell-neg-1:#ECD3CC; --oqts-div-cell-neg-2:#DFB2AB; --oqts-div-cell-neg-3:#D08D85;
--oqts-div-cell-zero:#FBF8F1;
--oqts-div-cell-pos-1:#D5E4D7; --oqts-div-cell-pos-2:#B4D3BF; --oqts-div-cell-pos-3:#8EBFA5;
/* Status — reserved. Never reused as a series colour, always shipped with
an icon and a label. warning and serious are sub-3:1 on ivory by design;
the icon + label pairing is the mitigation. */
--oqts-status-good:#0CA30C; /* ivory 3.16 · oxford 4.78 */
--oqts-status-warning:#FAB219; /* ivory 1.73 · oxford 8.75 */
--oqts-status-serious:#EC835A; /* ivory 2.49 · oxford 6.08 */
--oqts-status-critical:#D03B3B; /* ivory 4.53 · oxford 3.34 */
/* Sponsor tier metals — the medal pins on sponsor-tier labels, and
nothing else. Rules and pins only, never text, never in charts.
The founder tier wears camel, the brand's own gold. */
--oqts-tier-gold:#C9A24B;
--oqts-tier-silver:#A6ADB5;
--oqts-tier-bronze:#9C5F35;
}