The lo
k, 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 fusion 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 icon
The icon 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, icon first; the 14px rail keeps semibold (optical-size compensation)
clear space
Minimum breathing room around the icon. Nothing — text, rules, other marks — enters this zone.
minimum size
Never render smaller than 16px — below that the icon degrades to a smudge.
48pxfeature · assetdo / don't
never
- Recolor the icon
- 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
- Icon 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
- icon
- 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 icons
The icon is the mark alone — browser tab, bookmark bar, home-screen. No wordmark at this scale; the icon has to read on its own, on light and dark.
Ascending display sizes on a shared baseline; the 180 is scale-reduced to fit and renders from the hi-res master so it stays crisp. Downloads are true-size transparent PNGs. The "on light" chip holds its light surface even in dark mode (token-driven), so the icon is proofed on both grounds.
social card
😱 centered on a brand surface, wordmark below. No photography, no gradient background — the icon carries it alone.
color
the fusion 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 (
--fusion-grad), sampled straight from the 😱 icon - 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.
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 ~18%. Click any swatch to copy its hex.
semantic layer — app vs marketing
Every theme is built from the same primitive scales. The only alias that changes between app and marketing is accent — blue in the product, gold in marketing. Brand and gain stay gold in both; the neutrals and all four status families (success · warning · danger · info) are shared across all four surfaces. Below, the semantic roles that carry meaning — the interaction ladder, focus ring, status, and the gain/SOTA signature — wired into real components across all four surfaces. (Neutral surface and border tiers live in the scales above.) Hover a button to see solid → hover.
data visualization
Categorical: ten colorblind-aware hues, no purple, fixed order. 5-step ramps per hue for magnitude.
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. Both share one color mode; use the toggle to flip this impression between light and dark, and watch each register hold up in either.
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, drawn from the live product screens below — every specimen here is in use on the leaderboard, and every value is a token.
Rules the product register enforces: square corners everywhere
(--radius-none; the window chrome is the sole exception), elevation by surface +
hairline — never drop shadow, focus via --focus ring, and gold spent only on
the win (the leading row, the SOTA counter).
patterns
The product-level assemblies: the leaderboard row anatomy (rank · model identity · fusion-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.
screens & layouts
Where the system meets the product. These are the real product wireframes re-skinned onto SFDS — not screenshots. Open one and it runs, fully interactive, in its own window.
- proof surface
- each screen is an acceptance test for the tokens — re-skinned in place, still fully interactive
- round-trip
- when a screen needs a value the system doesn't have, the fix goes into the tokens, never a one-off
- register
- product — Plex Sans, blue interaction, square corners, hairline rules; gold reserved for the winning row + SOTA
public · live
the leaderboard
The SOTA board — verified scores, the frontier dashboard, the recipe modal. The winning row carries the fusion gradient; the SOTA counter is the one place gold lives. open →
desktop · live
the studio
Model Ensemble Studio — compose fusions, browse models, run scripts, submit to the board. Full app shell on the product register, light and dark. open →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 |