/*
* EEA Design System — Editorial Family (the EEA design language)
* Version: 1.2.0 (added 2026-08-16, PR #3; declared the sole design
* language 2026-08-25; :focus-visible states 2026-08-25)
*
* Depends on: nothing. This file is standalone and does NOT require tokens.css.
*
* WHAT THIS IS
* ------------
* THE design language of the EEA design system: light-only warm paper,
* Inter / Kode Mono, program-green accent #1F5C4A, hard edges, no shadows.
* Its design principles originate at, and stay aligned with,
* https://intelligence.entethalliance.org/ — the canonical reference for
* every value in this file. All new EEA web properties adopt this family.
*
* The former dark "core system" (tokens.css / base.css / nav.css /
* components.css) is DEPRECATED — served only for the sites that already
* link it, frozen otherwise. See DESIGN.md.
*
* SAFE TO LINK
* ------------
* Linking this file has NO visual effect on its own — it only declares
* --eea-ed-* custom properties. A page opts in by putting .eea-editorial on
* . This file never touches :root's theme tokens and never sets
* color-scheme on :root, so it can be linked next to legacy stylesheets
* (including the deprecated tokens.css) without side effects.
*
* Usage:
*
*
*
*
*
*
* Provenance: values are lifted from intelligence.entethalliance.org, which is
* where this palette and its contrast reasoning originated. Policy Friday and
* ops-business-scanner currently carry their own copies under local names.
*
* Contents:
* 1. Surface + ink tokens
* 2. Pillar tokens
* 3. Type tokens
* 4. Layout tokens
* 5. .eea-editorial — opt-in page surface
* 6. .eea-site-bar — shared program header
* 7. .eea-colophon — shared deep-green footer
*
* Every interactive element the file styles carries a :focus-visible
* state alongside its :hover state — keyboard parity is part of the
* component contract, not a per-site concern.
*/
/* ═══════════════════════════════════════════════════════════
1. SURFACE + INK
Warm-gray paper, near-black ink. Light-only by design: these
are print surfaces, and there is no dark counterpart.
═══════════════════════════════════════════════════════════ */
:root {
--eea-ed-page: #EDEAE3; /* page ground */
--eea-ed-ground: #F7F5F0; /* lifted sheet, sits above --page */
--eea-ed-rule: #E3DFD7; /* filled rule / inset panel */
--eea-ed-line: #DAD6CD; /* hairline border */
--eea-ed-ink: #16181A; /* primary text */
--eea-ed-ink-soft: #5A645E; /* secondary text — 5.11:1 on --page */
--eea-ed-ink-mute: #8A9088; /* non-text: dotted rules, disabled marks */
--eea-ed-accent: #1F5C4A; /* program green — links, kickers, rules */
--eea-ed-accent-deep: #123A2E; /* pressed / dense accent fills */
/* Deep-green panel — the footer/colophon ground */
--eea-ed-deep: #10231E;
--eea-ed-deep-fg: #C1CBC6;
--eea-ed-deep-mute: #7E8B85;
--eea-ed-deep-link: #F2EEE5;
--eea-ed-deep-hover: #9ADCC8;
}
/* ═══════════════════════════════════════════════════════════
2. PILLARS
The three program pillars. Each owns one colour.
RULE: pillar colours are semantic, never decorative, and never
text. None of the three clears 4.5:1 on --eea-ed-page, so they
appear as rules and marks only. Each has a darkened -ink partner
that IS safe for text; use that when a pillar has to be named.
═══════════════════════════════════════════════════════════ */
:root {
--eea-ed-anticipate: #EE9BFC;
--eea-ed-anticipate-ink: #794287;
--eea-ed-work: #F3CF2B;
--eea-ed-work-ink: #765A00;
--eea-ed-connect: #FEABA0;
--eea-ed-connect-ink: #9B413C;
}
/* ═══════════════════════════════════════════════════════════
3. TYPE
Inter for everything set as prose; Kode Mono for labels and data.
The label scale exists because uppercase mono labels are the most
repeated element in this family and the easiest to let drift — the
two adopting sites had spread one visual role across nine sizes and
nine tracking values before this was centralised.
═══════════════════════════════════════════════════════════ */
:root {
--eea-ed-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--eea-ed-font-mono: 'Kode Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Mono label scale — three steps, one role */
--eea-ed-label-lg: 0.75rem; /* masthead meta, section kickers */
--eea-ed-label: 0.7rem; /* default: tags, badges, chips, meta rows */
--eea-ed-label-sm: 0.66rem; /* table heads, dense chips */
/* Tracking, paired with the scale above */
--eea-ed-track-wide: 0.2em; /* kickers and headings */
--eea-ed-track: 0.14em; /* default */
--eea-ed-track-tight: 0.06em; /* labels carrying mixed-case content */
}
/* ═══════════════════════════════════════════════════════════
4. LAYOUT
Broadsheet measure: a fixed column inside a fluid shoulder.
═══════════════════════════════════════════════════════════ */
:root {
--eea-ed-measure: 1200px; /* text/content column */
--eea-ed-measure-bar: 1560px; /* site-bar runs wider */
--eea-ed-shoulder: clamp(1.5rem, 4vw, 4rem); /* page gutter */
}
/* ═══════════════════════════════════════════════════════════
5. PAGE SURFACE — opt in with
═══════════════════════════════════════════════════════════ */
.eea-editorial {
color-scheme: light;
background: var(--eea-ed-page);
color: var(--eea-ed-ink);
font-family: var(--eea-ed-font);
font-weight: 400;
line-height: 1.55;
font-feature-settings: "kern", "liga", "onum";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.eea-editorial ::selection {
background: var(--eea-ed-accent);
color: var(--eea-ed-page);
}
/* ═══════════════════════════════════════════════════════════
6. SITE BAR
The shared program header. Currently duplicated by hand across
intelligence.entethalliance.org, ops-policy-friday, and
ops-business-scanner.
Self-contained on purpose: it declares its own gutter and grey
rather than borrowing the host page's, because each page tunes
those for its own ground and the bar must look identical on all
of them. --bar-mid holds 5.11:1 on --eea-ed-page.
HTML structure:
