The l
ok, the rules,
the receipts.
The canonical source for how ScreamingFace looks and reads — one tokenized system, two registers: editorial marketing and load‑bearing product UI. Every element on this page renders from the system's own tokens.
You're shipping the leaderboard that proves fusion models beat any single frontier model — with a receipt on every score.
A claim like that gets judged by its surface before anyone re-runs it. So the system is built like an instrument, not a brochure:
- "SOTA is proven, not asserted"
- numbers lead — tabular figures, slashed zero, aligned to the decimal
- "anyone can re-run it"
- pages read like documents — real data, real labels, never lorem
- "the win is the story"
- one gold accent + the gain gradient, spent only on the winning row
- "the community wins"
- the 😱 stays the people's emoji — never a corporate logo
We're arguing that AI should be honest. The surface should feel honest too.
the mark
The mark is the screaming face, 😱 — screaming because the results make you scream, the people's emoji because this is public infrastructure, not a corporate logo.
- system emoji
- inline text, UI chrome, the favicon, and the CSS-animated moments (
.scream-shake— no raster; holds still underprefers-reduced-motion) - hi-res raster
- 1900×2000 at
assets/mark/sf-mark-hires.png(640px web cut beside it) — for anything display-size: heroes, lockups, print - wordmark
- Plex Sans medium at display sizes, tight, mark first; the 14px rail keeps semibold (optical-size compensation)
clear space
Minimum breathing room around the mark. Nothing — text, rules, other marks — enters this zone.
minimum size
Never render smaller than 16px — below that the mark degrades to a smudge.
48pxfeature · assetdo / don't
never
- Recolor the mark
- Box it, badge it, or put it on a colored chip
- Add drop-shadow, glow, or an outline
- Redraw it, trace it, or substitute a custom illustration
- Stretch, skew, or rotate it
instead
- Use the system emoji exactly as it ships
- Animate only on earned moments — a result landing, a run completing
- Mark first, always, in any lockup
lockups & downloads
The press-ready set: horizontal and vertical lockups on both grounds, plus the wordmark alone.
- wordmarks
- outlined vector paths (Plex Sans Medium) — no font install needed, opens correctly in any tool
- mark
- embedded at web resolution (640px)
- over 600px
- swap in
sf-mark-hires.png(1900×2000), included in the package
horizontal · light · svg ↓
horizontal · dark · svg ↓
vertical · light · svg ↓
vertical · dark · svg ↓favicon & app marks
Same mark, chrome sizes: browser tab, bookmark bar, home-screen icon. No wordmark at this scale — the mark has to read alone.
180px touch-icon mark is shown scale-reduced above for layout; render it at
true size in the manifest. Both chips are the same token surface — the dark one is the light one with
filter: invert(), mark held true-color via a counter-invert, so no new hex enters the
system for the "always-dark" chrome case.
social card
😱 centered on a brand surface, wordmark below. No photography, no gradient background — the mark carries it alone.
color
Three layers, rendered live from tokens.json so this page never drifts from the
system. Toggle the theme (top right) to see both modes.
- semantic
- what components reference — the only layer surfaces touch
- primitives
- the raw palette the roles point at
- categorical
- visuals that compare many things at once
primitive scales
Step-as-role (Radix-class): 1 bg · 2 surface · 3–5 component bg/hover/active · 6–8 border/focus · 9 solid (chroma cusp) · 10 solid-hover · 11–12 text (APCA-solved). Badges: solid-9 shows the chosen foreground (● black / ○ white) + achieved APCA; text 11/12 show achieved/target. Dark isn't an invert — chroma is reduced ~25%.
semantic layer — app vs marketing
Shared primitives; one alias differs. APP uses the blue accent, MARKETING uses gold. Gold is always brand + gain/SOTA. Same roles, wired into real components: primary button, link, bordered chip, gain badge, gain-grad bar, danger text, body/secondary text on surface.
data visualization
Categorical: ten colorblind-aware hues, no purple, fixed order. 5-step ramps per hue for magnitude. Sequential is gold. Diverging is blue ↔ neutral ↔ gold (“below / above SOTA”), never through purple.
the gain gradient
The winning fusion model tops the board — so the #1 row isn't flagged with a green badge, it is the brand.
- source
- gold→blue (
--gain-grad), sampled straight from the 😱 mark - fills
- the leading row — and only the leading row
- status
- the single chromatic gradient in the system; everywhere else stays flat
- fallback
- solid
--gaingold carries the same “correct / SOTA” meaning where a gradient can't go — text, marks, hairlines
Hover the bar (or the #1 row below) — the gradient flows continuously on hover, static otherwise. The loop has no visible seam, and it respects prefers-reduced-motion.
type
One system, two registers — rendered from the font tokens below.
- marketing
- Parastoo, a warm editorial serif, at hero and display sizes only — supported by Plex Sans
- product
- Plex Sans carries all load-bearing UI and body copy; Plex Mono takes data, labels, code, receipts
- never
- the serif in product UI chrome or dense data; the mono at display size
- wordmark
- Plex Sans, tight — medium at display sizes, semibold at rail size — the quiet, engineered counterpart to the mark
| token | family | used for |
|---|
the two registers
The same system, worn two ways — marketing leads with the serif and gold, product is carried by sans + mono on blue. Toggle the page theme (top right) to see both cards respond; the product card stays a fixed-dark surface, the way this leaderboard chrome actually ships.
Fusion models beat S😱TA.
A verified ensemble of models beats the best single model on the hardest benchmarks — and every score ships with a receipt you can re-run yourself.
See the board →scale
Eight sizes, each with one job. Everything on every page maps to one of these (rendered from the
text tokens).
| token | size | used for |
|---|
Receipts.
--text-hero · clamp(44–76) · Parastoo · --weight-display 500Receipts.
--text-display · 38px · Parastoo · --weight-display 500The look, the rules, the receipts.
--text-metric · 30px · Plex Mono · 600The look, the rules, the receipts.
--text-lead · 20px · Plex Sans · 400The look, the rules, the receipts.
--text-body · 16px · Plex Sans · 400The look, the rules, the receipts.
--text-sm · 13px · Plex Sans · 400The look, the rules, the receipts.
--text-micro · 12px · Plex Mono · 500The look, the rules, the receipts.
--text-label · 11px · Plex Mono · 500numerals
Data is set in Plex Mono with font-variant-numeric: tabular-nums
slashed-zero — tabular figures keep columns aligned, and the slashed zero disambiguates
0 from O in receipts and run IDs.
weight
Three weights carry the whole system. Hierarchy comes from weight and size, never from a second typeface.
do / don't
never
- Serif in product UI chrome, table cells, or buttons
- Mono set at display size
- More than two families on one surface
- Fake small-caps or stretched type
instead
- Serif = editorial voice, hero/display only
- Sans carries everything load-bearing
- Mono = anything a machine said — data, ids, receipts
- Weights make hierarchy, not new fonts
layout
Two widths, one spacing scale — this page is the demonstration.
- prose
- 760px column (
--col) — comfortable line length for paragraphs and lists - artifacts
- 1140px band (
.band) — viewport-centered full bleed for scales, specimens, galleries; can never overflow - spacing
- the 12-step
--space-*scale, from a 4px hairline gap to a 96px section break
surfaces & texture
Elevation without shadows — four neutral steps as surface tiers (bg → surface → surface-2 → ui), hairline borders one step stronger per tier. Texture as a whisper: candidates (graph grid · dot grid · scanlines · grain · ledger rules) are staged in the lab; hatch is reserved for blind/redacted zones regardless. Ships as --texture-* tokens once the direction is picked.
motion
Motion only where it clarifies, never to impress. Earned moments: a result landing, a run completing — the .scream-shake mark is the ceiling, not the floor. Will hold duration/easing tokens, the shake/wave specs, the leaderboard row-landing treatment, and the prefers-reduced-motion contract (everything holds still).
iconography
UI icons are Remix Icon
(Apache-2.0), self-hosted under assets/icons/ — no icon-font CDN dependency. The set
below covers leaderboard chrome: comparisons, ranks, data, and system actions.
sizes
Fill-based (fill="currentColor") — set color, the icon
follows. Default size 24px (--ic). Apache-2.0, self-hosted under assets/icons/,
no external icon-font request.
components
The load-bearing UI set on v2 semantics — buttons, inputs, selects, chips, tables, badges, focus states — each in app (blue) and marketing (gold) themes, light and dark, with the v1 back-compat bridge retired. Every component states its tokens; nothing carries a raw value.
patterns
The product-level assemblies: the leaderboard row anatomy (rank · model identity · gain-grad bar for the leader · tabular score · receipt link), the receipt itself, verification states, and empty/blind states (hatch). This is where the system meets the product — and where these placeholders get replaced by proof.
model logos
The board names the models it ranks — nominative use only, identifying which model produced a result, never implying endorsement or partnership.
- integrity
- each mark stays exactly as its owner ships it: no recoloring, no distortion, no ScreamingFace styling on someone else's brand
- matrix
- per provider: color and derived-mono, each on light and dark — any surface pulls the right variant without guessing
- mono chips
- derived (filtered from the color source), not an official monochrome mark — no provider in this library ships one
- library
- 59 providers at
assets/model-logos/; the 30 below are the ones this board cites most
Nominative use only · don't recolor or distort · no implied endorsement · each mark © its respective owner. Mono chips are derived (filter-based), not official monochrome assets. Three providers here (Stability AI, ElevenLabs, Midjourney) ship no wordmark asset in the library, so the icon substitutes with a set-in-system-font name; Reka ships no icon, so its wordmark stands alone. Full library: 59 providers.
voice & language
Per OpenMined's content guidelines: concise, credible, helpful. We write to be useful, not to sound impressive. Two archetypes — the Innovator (visionary, alleviates fear of the unknown) and the Citizen (integrity, fairness, values over profit).
| do | don't |
|---|---|
| Lead with the outcome, then how it works | Overclaim or speculate |
| Show receipts — numbers, links, names | Buzzwords / corporate jargon |
| Plain language; define acronyms once | Fear-based messaging |
| Center the reader and the outcome | Center ourselves |
Titles must pass four tests: can you visualize it, is it falsifiable, could anyone else say it (if yes, too generic), is it true. Draft 5–10 before choosing.
To codify here: the ScreamingFace register (brand-separated from OpenMined), canonical product terms (fusion models, never a synonym; staff builds named like hive-1), and the claim gate — SOTA/reproducibility/cost/speed language ships only as approved in the launch claims table.
the work
The flagship is the demo page Max would actually walk through. The three lettered pages are the visualization explorations behind it.
| page | what |
|---|---|
| demo → | honest-agi-live — the full Max demo page |
| A | The Climb — accuracy across the 4 stages |
| B | Pareto — accuracy × cost frontier |
| C | Before / After — the one big delta |