The look, the rules, the receipts.
This is the canonical source for how the ScreamingFace honest-AGI work looks and reads. The audience is policy and science leadership, not only developers, so the surface has to earn trust at a glance. One system, applied everywhere.
principles
- Evidence over adjectives. Lead with the number, the run, the source. If we can't back it up, we don't say it.
- Structure you can see. Hierarchy comes from type and rules, not decoration.
- Color means something. Greys carry the page; the accent only marks the thing the reader should understand.
- Legible at small sizes. This will hold dense tables and footnotes. Type is chosen for that.
- Light and dark are equals. Both are designed, not one tinted from the other.
not vibe-coded
The fastest way to look auto-generated in 2026 is to accept the defaults. These are hard rules, not suggestions.
never
- Gradients — especially blue→purple. Flat fills only; the ONE exception is the sanctioned gold→blue gain-grad, and only where the story earns it (the leading row, a hero moment).
- Rounded corners. Radius is
0. - Drop shadows, glows, glassmorphism, blur.
- Gradient or glowing text.
- Emoji as bullets or ✨ decoration.
- Purple. Any purple.
- Hero + three feature cards + bento grid.
- The default shadcn / "clean modern SaaS" look.
- Lorem, fake logos, vanity metrics, undefined acronyms.
instead
- Flat color, hairline borders, square edges.
- Depth from spacing and rules, not shadow.
- One accent, used only for the story.
- Monospace structure; real type hierarchy.
- The 😱 mark, once — never as decoration.
- Left-aligned, document-like, generous space.
- Real data, real labels, real receipts.
- Motion only where it clarifies, never to impress.
- Deliberate choices you could defend out loud.
logo
The mark is the screaming face, 😱. It carries the whole identity: screaming because the results make you scream, the people's emoji because this is public infrastructure, not a corporate logo. Use the system emoji as it ships. The animated mark earns its place in moments that deserve it (a result landing, a long run completing). Never recolor it, box it, or redraw it.
Static 😱 powers the favicon and the rail. The animated mark is the system 😱
emoji shaken in CSS (.scream-shake) — no raster, scales to any size, and holds still under
prefers-reduced-motion. Lockup sets the wordmark in Rubik, mark first.
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.
do / 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
icons
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.
model logos
The board names the models it ranks. Nominative use only — identifying which model produced a
result, never implying endorsement or partnership. Each mark stays exactly as its owner ships it:
no recoloring, no distortion, no ScreamingFace styling applied to someone else's brand. Each provider
below gets a small reference matrix — color and derived-mono, each on light and dark — so any surface
can pull the right variant without guessing. Mono chips are derived (filtered from the color
source), not an official monochrome mark — no provider in this library ships one. A 59-provider library
lives at assets/model-logos/; the 30 below are the ones this board actually 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.
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. Semantic roles are what components reference. Primitives are the raw palette
they point at. Categorical is for visuals that compare many things at once. Toggle the
theme (top right) to see both modes.
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 ensemble gradient
The ScreamingFace ensemble is always #1 — so the top of the board isn't flagged with a green
badge, it is the brand. The signature gold→blue gradient (--gain-grad,
sampled straight from the 😱 mark) fills the leading row, and only the leading row. It is the single
chromatic gradient in the system; everywhere else stays flat (see the anti-rules). The solid
--gain gold carries the same “correct / SOTA” meaning anywhere a gradient
can't go — text, marks, hairlines.
Hover the bar (or the #1 row below) — the gradient flows continuously on hover, static otherwise. Seamless loop, and it respects prefers-reduced-motion.
type
One system, two registers. MARKETING leads with Parastoo — a warm editorial serif — supported by Plex Sans; it appears at hero and display sizes only. PRODUCT is carried entirely by Plex Sans (all load-bearing UI and body copy), with Plex Mono for data, labels, code, and receipts. Hard rules: the serif never appears in product UI chrome or dense data; the mono is never set at display size; the wordmark alone uses Rubik. Rendered from the font tokens below.
| 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.
Ensembles beat S😱TA.
A verified ensemble of models beats the best single model on the hardest benchmarks — and every score ships with a cryptographic receipt you can check 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 · 400–700Receipts.
--text-display · 38px · Parastoo · 600The 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
voice
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.
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 |