# The Freeside design system **Status:** v0.1 · started 2026-07-23 · internal to NF + EA staff only > One-liner: **EnterpriseAlumni's palette, wrapped in NativeFoundation's grammar.** > Blue is the network you operate. Orange is the intelligence operating it. This document is the spec. The runnable artefacts sit beside it: ``` design-system/ ├── DESIGN_SYSTEM.md ← you are here (philosophy, rationale, rules) ├── index.html ← the living reference — every token & component, rendered, light + dark └── freeside.css ← drop-in stylesheet: tokens (--fs-*) + component classes (.fs-*) ``` --- ## 1. Why this exists, and how it was made Freeside wraps EA's platform as a backend and puts a genuinely new agentic + predictive cockpit on top. It has to feel like it *belongs* to the EA world (so EA staff and customer-admins trust it) **and** be unmistakably a NativeFoundation product (because that's the whole thesis — NF did what EA's v4 committee couldn't). So the system is a deliberate fusion of two real, in-production design languages: | Source | What we took | Evidence | |---|---|---| | **EnterpriseAlumni — "AlumniPortal"** | The **palette, iconography style, and texture** | Audited live at `alumni.your-corp.com/alumni/portal2`. Bootstrap-3 lineage: **Inter**, primary blue `#337AB7` / `#0F6DAE` / azure `#017CBF`, deep-navy **low-poly faceted** hero panels, teal-green `#008577`, violet offers, page `#EDEFF4`, pill inputs, outline filter chips, rounded white cards, **circular icon-badge** quick-links with chevrons, FontAwesome/Glyphicons **outline** icons in slate `#363C4A`. | | **NativeFoundation — "RelayOS"** | The **grammar**: structure, type, motion, motifs, voice | `nf-design-system-local`. Paper-on-canvas cards lifted by **shadow + hairline (never a coloured border)**, layered inset depth, **Geist + JetBrains Mono** (no serif — emphasis is weight), editorial + CLI voice, the **human ◆ machine pair**, the orange breathing cursor, Lucide icons, calm 120ms motion, no emoji/glass/neon. | The move that makes it cohere: **we don't paint NF orange over an EA layout, and we don't drop EA blue into NF's warm-stone world.** We keep NF's *structural discipline* and re-skin the *surface* in a cooler, EA-derived neutral, then give every EA colour a **job drawn from Freeside's own architecture** (Molly → Seldon → Case). Colour becomes semantic, not decorative. --- ## 2. Pillars Four are inherited verbatim from RelayOS. The fifth is Freeside's own. 1. **Quiet confidence.** Restrained, dependable. No glow, no neon, no aggressive gradients. 2. **Layered depth, not loud complexity.** Inset surfaces, multi-stop shadows, hairline rings. Depth signals importance — cards *sink into* the page, they don't float. 3. **Editorial clarity with product precision.** Sentence-case headlines with a closing period. Humanist sans body. A monospace machine voice. Every label earns its place. 4. **Soft geometry, purposeful contrast.** 6–18px rounded corners, strong colour contrast inside calm shapes. Sharp 90° corners are forbidden. 5. **Two voices, one console.** *(Freeside)* Every surface holds a human moment in dialogue with a machine moment — the admin states intent in plain language; the agent plans, forecasts and reports back. This is the product rendered as a brand motif. --- ## 3. Colour — a semantic palette Colour never carries decorative weight on its own. Every hue is a functional signal, and the mapping is the product architecture: | Role | Token family | Source | Meaning | |---|---|---|---| | **Network blue** | `--fs-net*` | EA | The platform / the network / the data / shell chrome. **Structural + primary action.** The world Freeside operates on. | | **Agent orange** | `--fs-agent*` | NF `#FF6B35` | NF's intelligence acting on that world. Live status, the dialogue cursor, the logo's orange node, and the *one* sanctioned CTA (dispatch). **A spot accent — never a fill, never dominant.** | | **Forecast teal** | `--fs-forecast*` | EA `#008577` | Seldon: predictions, confidence bands, positive projection, predicted-vs-actual. | | **Wargame violet** | `--fs-sim*` | EA offers pill | Simulation / what-if / wargaming / synthetic populations. | | **Warn / Danger** | `--fs-warn*` `--fs-danger*` | derived | Needs-review (amber) · at-risk / destructive (red). | **Core values (light):** `net #137CC4` · `net-strong #0F5A99` · `net-deep #0B2542` · `net-soft #E4EFF8` `agent #FF6B35` · `forecast #008577` · `sim #6C5CE0` · `warn #E8912A` · `danger #D64545` **Neutrals & ink** — a **white page, like EA**. Cards are white too, separated by shadow + hairline rather than by tone (NF's paper-on-canvas discipline, executed on white); the one soft grey is reserved for inset surfaces. Ink is cool slate navy, never warm grey: `canvas #FFFFFF` · `surface #EEF1F6` · `paper #FFFFFF` · `line #E2E6ED` `ink #16202E` · `ink2 #3A4657` · `ink3 #7A8698` **Dark "night watch" theme** ships in the tokens (`[data-theme="dark"]`): a deep navy-slate habitat (`canvas #0C1420`) where blue, orange and teal pop. It's not an afterthought — a lights-down orbital cockpit is arguably the *native* Freeside look. **The rule that keeps it honest:** blue = the network, orange = the agent. Never swap them. If a screen reads as mostly orange, pull it back. --- ## 4. Typography Two families. No serif — the earlier Fraunces italic flourish was dropped (it didn't fit here), and emphasis is now carried by **weight**, which keeps the whole thing closer to EA. | Family | Job | Notes | |---|---|---| | **Geist** (sans) | Everything visible — headings, body, UI, nav | The upright voice of the system is sans throughout. | | **JetBrains Mono** | Eyebrows, captions, timestamps, metrics, status, CLI voice | The machine voice. Never body copy. | | *(emphasis)* | **Weight**, not a display face — semibold Geist, `.fs-em` | No serif, no italic, no colour change. | **Inter** (EA's face) is the declared **systems-continuity fallback** in the sans stack — so a Freeside surface embedded next to the live EA portal degrades gracefully. Geist is canonical. Scale: display 56 / h2 32 / h3 20 / body 15 / eyebrow 10 (mono). Big metric numbers use Geist with `font-feature-settings:"tnum"` and a mono eyebrow above. **Voice:** editorial, calm, precise, second-person. Sentence case with closing periods. ALL-CAPS only for mono eyebrows/captions. No hype, no exclamation marks, **no emoji, ever.** --- ## 5. Iconography **Lucide** (NF's set) at 1.5–2px stroke — outline, rounded, visually continuous with EA's FontAwesome/Glyphicons line icons and their slate colouring. Ink (`--fs-ink2`) by default; tinted only to carry a signal — `net` for active, `agent` for the intelligence, `forecast` for prediction. Sizes: 18 inline · 20 nav · 24 section. The **circular icon-badge** (a Lucide glyph inside a 1.5px ring, tinted by semantic) is lifted directly from EA's quick-links and is Freeside's channel/quick-action affordance. No emoji, no icon-as-text. --- ## 6. Shape, spacing, elevation, motion - **Radii:** `sm 6 · md 10 · lg 14 · xl 18 · pill 999`. Cards `lg`/`xl`; inputs `md` or `pill`; controls `pill`. - **Spacing:** 8px grid (`--fs-1…10` = 4→64). Section spacing 40–64px, card padding 24–32. - **Elevation:** cool slate-tinted multi-stop shadows (`xs · sm · card · pop · hero · inset`) + a hairline ring. **Inset depth is the signature** — nested rectangles sink. Borders are hairlines or absent; **never a 1px coloured card frame, never a coloured left-edge bar.** - **Motion:** calm. 120ms for state changes, 140ms card pop, `cubic-bezier(0.4,0,0.2,1)`, no bounce. Cards lift `−2px` on hover (card→pop shadow); buttons `−1px`. The orange breathing cursor is the "agent is live/thinking" indicator. Skeleton loaders, never neon spinners. All motion respects `prefers-reduced-motion`. --- ## 7. Components (see `index.html` for every one, rendered) - **Buttons** — Primary = network blue (commit to the platform). **Agent orange is reserved for the single verb that dispatches an agent** — the one sanctioned exception to "orange is never a CTA," because dispatching *is* the NF-intelligence act. Ghost = hairline. Danger = red outline. - **Intent field** — the marquee input: a large rounded field with a mono `OBJECTIVE` label and an orange prompt caret. Plus EA-style pill search inputs and inset labelled fields. - **Filter chips** — EA's pill chips in NF hairline; selected = filled blue. - **Status** — CLI pills `[ AWAITING APPROVAL ]`, solid semantic badges, pulsing status dots (live/pred/done). - **Cards** — content card, **person card** (EA directory pattern: avatar / bold name / muted role / mono location / bottom action row), **stat & forecast tile** (big number + confidence bar), **agent proposal card** (human-gated: agent eyebrow, `[ AWAITING APPROVAL ]`, the intent pair, and Approve / Edit / Dismiss). - **Channels** — EA quick-link pills, NF-styled: circular icon-badge + mono label + chevron, tinted by semantic. - **List rows, pagination, confidence bar, shell nav** — nav carries the NF 4-node "share" mark (orange hub + arm) and an agent-status cluster (`● 2 AGENTS LIVE`). --- ## 8. Signature motifs — where EA meets NF 1. **The constellation hero.** EA's low-poly faceted deep-navy panel, reinterpreted through NF's 4-node network mark: orange nodes and thin edges sit over the blue faceted field — *the agent (orange) watching the network (blue).* One per view; restraint is the rule. 2. **The human ◆ machine pair (the intent line).** A bold-sans human phrase ◆ a JetBrains-mono machine phrase, with the breathing cursor alternating orange (human) and blue (machine). In Freeside it *is* the core interaction: stated objective ◆ agent plan/status. 3. **Console voice.** Boot-info strips, numbered agent menus, `[ … ]` CLI status pills, mono metadata — the "supervise agents / command the network" register. 4. **Human-gated proposal.** Keith's non-negotiable propose → review → approve → run, rendered as its own card family (never an auto-run button). --- ## 9. Do / Don't **Do** — keep blue for the network and orange for the intelligence, always · keep orange to spot accents (the logo node, a live signal, one dispatch) · lift white cards with shadow + hairline · put a mono machine caption beside a human phrase · gate every agent action behind approve → run · keep motion calm (120ms, −2px). **Don't** — let orange dominate a screen, or use it as a fill / for body emphasis · frame a card with a coloured border or left-edge bar · reach for serif, emoji, glassmorphism, neon, or bluish-purple SaaS gradients · show Freeside / Molly / Seldon / Case naming to an end customer · put more than one constellation panel (or two textures) on a view. --- ## 10. Accessibility — mandatory, and scan-clean **Target: WCAG 2.1 / 2.2 level AA, on every surface.** Accessibility is not a polish pass — the tokens and components are built to pass, so an axe / Lighthouse / pa11y scan should find nothing. If you use the system as documented, you inherit that. Don't undo it. ### Colour & contrast (the thing scanners flag most) Every text/UI pairing in the tokens meets AA (verified with the WCAG formula, both themes): | Pair | Ratio | Rule | |---|---|---| | `ink` / `ink2` / `ink3` on white | 16.4 · 9.6 · 5.2 | Body & captions all clear AA. `ink3` is the floor — don't go lighter for text. | | `net` link text / `net` button | 5.1 | `--fs-net` is tuned so it passes **both** as link text and as a white-on-blue fill. | | Accent **lettering** | ≥4.5 | Use the `*-text` tokens: `--fs-agent-text`, `--fs-warn-text`, `--fs-danger-text`, `net-strong`. `forecast`/`sim` pass as-is. | | Badges (`*-ink` on `*-soft`) | 6.4–10.8 | The dark-on-tint badge pairs are all safe. | | Dispatch (orange) button | 5.8 | **Dark ink on the orange fill** — white-on-orange fails AA, so we never do it. | **The rules:** - **The vivid accent hues (`--fs-agent`, `--fs-warn`, `--fs-danger`) are for fills, dots, icons and borders — never small text.** For coloured lettering use the matching `*-text` token. This is baked into `.fs-eyebrow--*` and `.fs-pill--*`; follow it in bespoke CSS too. - **White text only goes on `net`, `net-strong`, `net-deep`, `sim`, `forecast` fills.** Orange takes dark ink; amber/red as a solid fill needs checking (prefer the `-soft`/`-ink` badge pair). - **Never rely on colour alone.** A status is a colour *and* a text label (the CLI pills) or a shape. The green/red delta arrows carry a glyph (▲/▼), not just hue. - Re-run the contrast check if you introduce a colour: the formula + the token table live in the repo; keep new pairs ≥4.5 (text) / ≥3.0 (UI & large text). ### Keyboard & focus - **Every interactive element has a visible focus ring** (`:focus-visible` → 3px `net` outline, ≥3:1 both themes). Never set `outline:none` without an equally-visible replacement. - Everything operable by mouse is operable by keyboard, in a logical tab order. Use real `