Design system
Sharp frames, two modes
Product UI uses Inter (self-hosted, Framer OpenType character variants) and 0 radius everywhere. Light mode follows the Framer site (white field, #111 type, lime#0AF512). Dark mode is designed as a near-black editorial surface — not an inverted light theme. Toggle with the sun/moon control, persisted inlocalStorage, defaulting toprefers-color-scheme.
Grid + hairline
40px construction grid and 1px rules, in the spirit of render.com and mistral.ai. Frames never round.
Color tokens
Background
--background
Light #F2F2F2
Dark #0C0C0C
Foreground
--foreground
Light #111111
Dark #F2F2F2
Muted
--muted
Light #F6F6F6
Dark #161616
Border / hairline
--hairline
Light rgba(17,17,17,0.10)
Dark rgba(255,255,255,0.10)
Lime / success
--lime
Light #0AF512
Dark #0AF512
Inverse panel
--inverse
Light #111111
Dark #0AF512
Error
--error
Light #C81E1E
Dark #FF5C5C
Type
Display / Inter 600
Body / Inter 400 — illegal, Gallagher, 1234567890, “quotes” & commas.
OpenType body (cv11 single-storey a, cv05 tailed l, cv08 serifed I, cv10 spurred G, ss01 digits, ss03 round quotes).
Meta / 11px uppercase tracking
| Family | Role | Rationale |
|---|---|---|
| Inter 4.1 (in use) | Product UI / body | Self-hosted official Inter (SIL OFL) with Framer’s OpenType body features: ss01–ss04 plus cv01–cv05, cv08–cv11 (single-storey a, tailed l, serifed I, spurred G, alternate digits, round quotes). |
| Geist | Suggested | Vercel’s geometric sans. Slightly tighter than Inter; good if the brand wants a more product-engineering feel without leaving the Inter family of proportions. |
| IBM Plex Sans | Suggested | Editorial + engineering. Strong for a knowledge-base / directory. Distinctive italic. Open license. |
| Berkeley Mono / IBM Plex Mono | Suggested (accents) | Use only for counts, slugs, and meta — not body. A mono accent is how render.com and similar docs sites mark “system” information. |
| Newsreader / Source Serif | Not recommended | Serif would fight the 0-radius product-site brief. Keep display and body on the same sans. |
Components
Starwind primitives, radius forced to 0. Focus rings stay square.
Content structure (suggestions)
Live Keystatic copy is unchanged. These are high-level improvements for a later editorial pass:
- Split solution vs customer as first-class relations instead of duplicated slug/name fields on every story. Reduces drift (e.g. country mis-tags).
- Give stories a published date and source URL so RSS, sorting, and “keep exploring” are chronological rather than featured-then-alpha.
- Featured is a homepage slot, not only a boolean. The live site featured OpenAI @ Moderna without a Solutions-nav vendor — model that as a homepage module.
- Countries as a Keystatic collection (today:
src/data/countries.json) so empty territories are not 218 thin pages. List only countries that have stories, and keep the rest as data. - Story body: lead + results + narrative. Many YAML bodies repeat the results list. Keep results structured; let body be the narrative only.
- Layout: keep the left rail; add a compact story TOC for long case studies; consider a “compare solutions” table later — still 0-radius, hairline grid.
Full notes live in DESIGN.md at the repository root.