SFDS — ScreamingFace Design System

the direction cat why-it-looks-like-this.md

We'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

sfds render leaderboard --sample

1hive-1 😱 50.3✓ receipt

2gemini-3-pro 44.4✓ receipt

3claude-opus-4.5 39.8✓ receipt

We're arguing that AI should be honest. The surface should feel honest too.

00 · start here

start here

quick downloads

These are just the most-grabbed files — more assets live throughout the page below.

headerlight ↓ · dark ↓

verticallight ↓ · dark ↓

avatar2000² ↓

favicon32 ↓ · 16 ↓ · 180 ↓

hi-res1900×2000 ↓

packageeverything ↓

three colors carry meaning — and one gradient

+6.2gold = the winning resultthe top score, the record, the number that beat the best — nothing else gets gold

verifiedgreen = we re-ran itindependently reproduced, same number. No green just means not checked yet

blue = you can click itin the product. Marketing pages run the same role in gold — one accent, two registers

the fusion gradient is its own thing — not “gold.” Gold→blue, sampled from the icon, and it appears only where the fusion wins: its row on the board, its line on the chart.

Everything else stays black, white, and gray — charts run on the family solids — gold included. Full law: color.

say it like this

headline test: visualizable · falsifiable · specific — could a competitor say it? Then don't.
proven shapes: “Fusion models beat SOTA.” · “Results you can rerun, not just read.” · “The frontier isn't a model. It's a fusion.”
CTAs: See the board → · Reproduce it → · Read the method — verbs that name the action, never “Submit” / “Learn more”
register: marketing makes the claim (serif, gold) · product is the proof (sans + mono, blue). Full law: voice + type.

01 · identity

the icon

The icon is the screaming face, 😱 — screaming because the results make us scream, the people's emoji because this is public infrastructure, not a corporate logo.

static iconhi-res asset png128 512 2000

😱animatedshake gif128 512

animatedwave gif128 512

😱system emojias it ships

small sizes: in text, UI, tabs, and chat, just type the emoji — 😱 is the icon there
big sizes: above ~600px — heroes, lockups, print — use the hi-res file (1900×2000 ↓), never a scaled-up emoji
versions: a typed 😱 renders however the reader's platform draws it — and all of those represent the project just fine. Our lockups and shipped assets happen to use the Mac-style rendering; when artwork should match them, use the files rather than typing the emoji

clear space

Minimum breathing room around the icon. Nothing — text, rules, other marks — enters this zone.

😱

clear space = ½ × icon height, on all sides

minimum size

Never render smaller than 16px — below that the icon degrades to a smudge.

😱16pxfavicon · emoji

😱24pxUI · emoji

48pxfeature · asset

the name

One word, camelCase: ScreamingFace — one unbreakable token everywhere the name travels: screamingface.ai, the handles, the package prefix. In artwork it's set once, in the wordmark files — never re-type it in a font.

using the icon

No one can own 😱 — that's the point. A standard emoji belongs to everyone: the people's mark, not a corporate logo. Vendors do own their specific artwork, so our display asset is our own rendering — never a lifted platform glyph.

Not legal advice — the short version: use it freely, credit no one, claim nothing.

lockups & downloads

Press-ready — 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 ↓ · png ↓

horizontal · dark · svg ↓ · png ↓

vertical · light · svg ↓ · png ↓

vertical · dark · svg ↓ · png ↓

wordmark · light · svg ↓ · png ↓

wordmark · dark · svg ↓ · png ↓

download the full package (.zip) lockups (svg + png) · wordmarks · icon @640 + @1900×2000 · profile image · usage README

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.

on light

16 · favicon · png ↓

32 · favicon @2x · png ↓

180 · touch icon · png ↓

on dark

16 · favicon · png ↓

32 · favicon @2x · png ↓

180 · touch icon · png ↓

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.

02 · foundations

The account surfaces, as real downloadable files — one dark family: the avatar, the link-preview card, and the X cover.

profile image

The mark on brand black, one square file for every platform. The built-in margin means the circle crop never clips it; the right chip proofs the crop.

square · as uploaded

circle · the platform crop

downloads
2000 × 2000 png ↓
512 × 512 png ↓

link-preview card

What a shared screamingface.ai link shows — the icon, the domain, nothing else. The real file, not a mock.

1200×630 ↓ · @2x ↓ · regenerate from the source page

x cover

Three explorations, each a ready 1500×500 upload — pick one, or take them to the exploration page (live frames, crop + avatar overlays).

A · the field1500×500 ↓

B · the claim1500×500 ↓

C · the board1500×500 ↓

X cover D — the reveal scene: the ghost maker presents the fusion cube

D · the reveal1500×500 ↓

X cover E — the dragon fusion, deepseek × mistral

E · dragon fusion1500×500 ↓

X cover F — the ghost fusion, anthropic × openai

F · ghost fusion1500×500 ↓

color

color modes

Dark and light are both first-class — every color in the system resolves in each mode, so every surface ships both. A surface opens in whatever mode the visitor's device is already set to, and a subtle switch (◐, top right) lets anyone override it; the choice is remembered.

Try it — every swatch, component, and chart below resolves both ways.

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.

what it is: gold fading into blue — the icon's own two colors, lifted straight from the face (--fusion-grad)
where it goes: the winning row on the board — and nowhere else
why it's rare: it's the only gradient in the entire system; everything else is flat color, so the win is unmistakable
when it can't fit: plain gold means the same thing — the win — on text, small marks, and thin rules where a gradient would smear (--gain)
vertical: an upright version exists for vertical accents, like the colored left edge of a winning row (--fusion-grad-y, -y-flow for seamless loops)

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.

😱 hive-188.4%

best single model84.2%

next model82.0%

Three layers, rendered live from tokens.json so this page never drifts from the system.

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: 1 bg · 2 surface · 3–5 component · 6–8 border/focus · 9 solid · 10 solid-hover · 11–12 text. Badges show each step's APCA result; dark isn't an invert (chroma −18%). Click any swatch to copy. Contrast is engineered, not eyeballed — checked on every build: text-low Lc 75, text-high Lc 90 — and every solid takes white text at Lc ≥58, so any solid can swap for any other without rethinking its label. One documented exception: gold text on light holds Lc 62 (forcing 75 turns gold umber). Text may only carry a contracted text role — machine-linted.

data visualization

Charts define no colors of their own: the seven series are the family solids from the palette above — gold included — in a fixed order that keeps neighbors tellable apart for everyone (color-blind included — checked, not eyeballed). Assign in order, never cycle. One rule rides with gold: when a chart draws the win in gold (the leading row, the SOTA mark), skip gold in the deal and take the next series. Need more than seven? Series 8–14 reuse the same solids mixed 55% into the ground, in the same order — the mix is also how related pairs read (actual = solid, forecast = the mix). Magnitude belongs to the sequential ramp, not to hue. A status color is never "series 4."

the palette in use

The point Ronnie flagged — how do these get used? Two jobs, two examples, both on this exact palette. Identity never rests on color alone (direct labels + marker shapes + a data table), which is also what lets the brightest series colors stay legible.

Categorical → identity. One hue per series, assigned in fixed order — here the first four: blue · red · cyan · gold (no win on this chart, so gold deals like anyone). Identity is triple-encoded — hue, a marker shape, and a direct end-label — so a color-blind reader (or a grayscale print) never loses the thread.

data table

One hue's ramp → magnitude. A single family, light→dark, encodes a value across a grid — accuracy by model × benchmark. The number in each cell is the table, so the ramp is reinforcement, not the sole channel.

lower higher · the deep half of the sequential ramp

semantic layer — product vs marketing

Same primitives everywhere — the only alias that changes is accent: blue in product, gold in marketing. Gain stays gold in both; neutrals and the status families are shared. Below, the roles wired into real components. Hover a button for solid → hover.

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 story, worn two ways: marketing makes the claim (serif, air, one gold moment) — product is the proof (sans + mono, dense, blue). Numbers are mono in both; gold only on the win. Flip the impression — both hold.

this impression

The live fusion-model leaderboard

Fusion models beat STA.

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.

Read the method

hive-1 😱50.3%

best single44.4%

+5.9 points clear of the best single frontier model — verified, public, re-runnable.

marketing · serif-led · gold · air

Humanity's Last Exam

multiple-choice · 513 questions · updated Mar 23, 2026

#modelscoreΔreceipt

1 hive-1 😱 50.3% +5.9 receipt ✓

2 Gemini 3.1 Pro 44.4% — receipt ✓

3 Claude Opus 4.6 39.8% — receipt ✓

4 your-ensemble running — — queue

1–4 of 13 · refreshed 6m agoevery score re-runnable

product · sans+mono · blue · density

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 500

Receipts.

--text-display · 38px · Parastoo · --weight-display 500