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:
We're arguing that AI should be honest. The surface should feel honest too.
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.
.scream-shake β no raster; holds still under prefers-reduced-motion)assets/mark/sf-mark-hires.png (640px web cut beside it) β for anything display-size: heroes, lockups, printMinimum breathing room around the icon. Nothing β text, rules, other marks β enters this zone.
Never render smaller than 16px β below that the icon degrades to a smudge.
48pxfeature Β· assetThe press-ready set: horizontal and vertical lockups on both grounds, plus the wordmark alone.
sf-mark-hires.png (1900Γ2000), included in the packageThe 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.
π± centered on a brand surface, wordmark below. No photography, no gradient background β the icon carries it alone.
The winning fusion model tops the board β so the #1 row isn't flagged with a green badge, it is the brand.
--fusion-grad), sampled straight from the π± icon--gain gold carries the same “correct / SOTA” meaning where a gradient can't go β text, marks, hairlinesHover 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.
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.
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.
Categorical: ten colorblind-aware hues, no purple, fixed order. 5-step ramps per hue for magnitude.
One system, two registers β rendered from the font tokens below.
| token | family | used for |
|---|
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.
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 β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 Β· 500Data 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.
Three weights carry the whole system. Hierarchy comes from weight and size, never from a second typeface.
Two widths, one spacing scale β this page is the demonstration.
--col) β comfortable line length for paragraphs and lists.band) β viewport-centered full bleed for scales, specimens, galleries; can never overflow--space-* scale, from a 4px hairline gap to a 96px section breakElevation 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 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).
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.
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.
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).
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.
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.
public Β· live
desktop Β· live
The board names the models it ranks β nominative use only, identifying which model produced a result, never implying endorsement or partnership.
assets/model-logos/; the 30 below are the ones this board cites mostNominative 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.
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 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 |