Extracted from sfcompute.com on 2026-09-19 with agent-browser 0.27.0 at 1440×1000. Every value in src/styles.css is either measured on that reference or taken from an owning skill, and the provenance is in docs/design-system.md. This page is what new work builds against.
Brand
A 3D softmax surface: the peak heights are the class probabilities and the tall spire is the argmax. It is the same idea the previous four-cell mark carried — a system with one of it decided — said as a distribution, and it is traced from a generated master rather than constructed from geometry. One cut ships, because this master is a single connected silhouette that reads at 16px and at 1024px alike.
Mark
16px
24px
32px
48px
64px
96px
One cut, from 16px to 1024px. The mark is a single connected silhouette with no holes, so there is no size at which a gap welds shut and no tier table to consult. The master before it traced to twelve components whose thin white gaps did close below 48px, which is what a compact cut and a closed cut were for — both were compensating for the source art, and both went with it. One colour, no ground of its own, so it holds on white and on a dark band both.
Lockup
on the page
Clear space on all four sides is half the mark's height. The lockup is monochrome in both grounds, and it carries the same one cut — our nav renders it 24px tall, which puts the mark's ink at 15px, and this mark is drawn to read there.
Files
public/mark-ddbb6d0b.svg — the mark, 32×32, one subpath, for every size
public/mark-inverse-d6352f80.svg — the same mark in #FAFAFA, for a dark band
public/favicon-2fa1792d.svg — the mark on a white tile, because a transparent glyph takes on whatever the browser chrome is
public/wordmark-ac166c8b.svg — the lockup, near-black
public/wordmark-inverse-644f9ec2.svg — the lockup in white
Every one carries a content hash, because every one is referenced from somewhere. The hash is the cache key: an asset at a stable URL is an asset a browser will not re-fetch, and a favicon is the worst case, because browsers keep icons in their own store past any header we send.
Colour
Primitives name a hue or a weight, roles name a job, and components read roles only. There is no accent: the emphasis fill is the near-black, which is what the reference's primary button becomes once its blue is removed. The tier ramp is the one categorical colour, because a rank is a value a reader compares; every other non-neutral here encodes a status, never a brand.
surface
the page ground
surface-raised
bands, cards
surface-sunk
wells, row hover, gridlines
fill-quiet
the quiet button
rule
every hairline
rule-strong
field borders
ink
body copy
ink-muted
secondary copy
ink-meta
captions
ink-subtle
nav idle
action
the solid button
action-strong
its hover
emphasis
emphasis fill, focus ring
fund
rewarded
warn
borderline
danger
errors
rank-s-tint
S, the red end
rank-d-tint
D, the green end
Role
Value
On
Ratio
Used for
ink
#2C2B31
surface
14.03:1
body copy
ink
#2C2B31
surface-sunk
12.54:1
a row's hover ground
ink-muted
#565659
surface-sunk
6.54:1
secondary copy
ink-meta
#6E6E6E
surface-sunk
4.56:1
captions, counts
ink-subtle
#6E6E6E
surface-sunk
4.56:1
nav idle
on-action
#FAFAFA
action
15.70:1
the solid button
on-emphasis
#FAFAFA
emphasis
15.70:1
the emphasis fill
ink
#2C2B31
fill-quiet
12.54:1
the quiet button
ink
#2C2B31
fill-overlay
12.54:1
a marker on the 5% slab
link
#2C2B31
surface-sunk
12.54:1
links, carried by the underline
fund
#0F7A3D
surface-sunk
4.85:1
rewarded
warn
#8A5200
surface-sunk
5.71:1
borderline
danger
#C02626
surface-sunk
5.29:1
errors, fired checks
rank-s-ink
#5C1414
rank-s-tint
5.49:1
S badge
rank-a-ink
#6B3410
rank-a-tint
6.13:1
A badge
rank-b-ink
#713F12
rank-b-tint
6.65:1
B badge
rank-c-ink
#6B4E00
rank-c-tint
7.32:1
C badge
rank-d-ink
#14532D
rank-d-tint
7.73:1
D badge
Tier ramp
D tierC tierB tierA tierS tier–Not graded yet
A red-to-green run, S through D, which is the tier-list convention. It is the only categorical ramp in the system: a tier is a rank, and a reader skimming a list expects the top of it to be a colour, not the darkest step of a grey staircase. The letter is always rendered beside the tint, so rank never depends on the fill.
Reward state
RewardedBelow the barRustMIT
Kept off the tier ramp so a value never does two jobs in one row: rewarded is the emphasis fill and solid, below the bar is hollow plus the words.
Distribution
S
A
B
C
D
Bars scale to the peak, not to 1, so a flat distribution still has a silhouette. The same ramp as the badge, so the chart and the badge say the same thing. Each bar carries a 1px inset ring mixed from the body ink, because the C and D fills are 1.06:1 and 1.18:1 against the white ground and would otherwise disappear.
Type
Two families and a mono. A display serif carries every heading at weight 400, and a grotesque carries everything else. The reference renders fourteen sizes, four of them sub-pixel neighbours; they are collapsed onto eight, keeping its small anchors: 16px body, 15px lede, 12px chips, 11px axis labels. Its 26px heading and 40px display are the one pair deliberately not kept — they are a marketing page's type, and over a table they read as shouting.
micro 11pxWk 1 · Wk 4 · Wk 8 · Wk 12
caption 12pxGraded 2026-09-19 · 3 runs
ui 14pxSubmit a project
lede 15pxOne pass, one typed decision.
body 16pxThe grader reads the code and scores it.
title 20pxAgreement across runs
section 22pxReserve compute at market rate
display 30pxA studio for System 1 models
Aa Bb 0123
400 regular
Aa Bb 0123
500 medium
Aa Bb 0123
600 semibold
Aa Bb 0123 — the serif at weight 400
Newsreader stands in for the reference's ABCOtto. Inter stands in for ABCDiatype. Both are OFL; the reference's faces are commercial.
Sentence case everywhere. No component sets text-transform, no token carries positive tracking, and a test fails if either returns. Three weights carry the interface, and a test fails on a fourth.
Surface
Radius, rules and depth. The reference's histogram decides it: 2px appears 60 times on rendered elements, 12px 15, 8px 10. A control is 2px and a panel is 12px, which is a sharper system than the last one and is deliberate. Structure is hairlines, never shadows.
radius-inset
2px · chips, small markers
radius-control
2px · fields, selects, every control
radius-button
8px · buttons only — the one soft corner
radius-panel
12px · panels and cards
radius-pill
full · the one pill-shaped element
raised
bands, cards
sunk
wells, row hover, gridlines
canvas
the page ground
Motion
Three durations and four curves, all of them the reference's own observed transitions: 150ms on colour, 150ms on transform, 200ms on an SVG fill, and 500ms on a chart's opacity reveal. Nothing moves under prefers-reduced-motion, and every colour change still eases.
Steps
fast 150ms
press feedback, nav colour, transform
base 200ms
button colour, SVG fill and stroke
slow 500ms
a chart's opacity reveal, long fades
Curves
ease-out
cubic-bezier(0.22, 1, 0.36, 1)
transform
ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)
colour, opacity
ease-data
cubic-bezier(0.3, 0.9, 0.4, 1)
SVG fill and stroke
ease-color
cubic-bezier(0.4, 0, 0.2, 1)
hover colour
Layout
The frame hugs the content everywhere: one width for all routes, the 760px column bracketed by one page gutter each side, with equal clearances outside the rules. The nav reserves no width — it floats in the left clearance one gutter off the window edge, seated only where the clearance fits it (from 1240px up). No header and no footer.
760+2 gutters
frame-outer
the one frame, every route
760px
container-measure
the content column
544px
container-copy
a column of prose
1088px
container-site
the dense board only
Buttons
Aqua: Apple's Mac OS X push-button language, four layers deep — a saturated core, a specular band that fades by the middle, a bounce glow at the bottom edge, and a thin dark rim. Four variants across three sizes, every state here. Only action and secondary shine: if every control gleams then nothing is the default, so a row holds exactly one action.
Fields
One control recipe shared by input, textarea and select, so they cannot drift. 16px on touch because iOS zooms a page whose control text is smaller, stepping down to 14px from sm up where no zoom can fire.
Rest, hint and error
The repository the grader reads.
That address is not a repository we can read.
Textarea and select
Eight or more characters.
Disclosure
Content
Panels, cards, tabs and the table. The panel is the reference's card: a 12px radius, a 1px hairline and one step of surface lift, with no shadow.
Every rating shows its runs
The spread across runs is printed beside the tier, so a rating that only just cleared the bar reads differently from one that did not.
Tier
A
Runs
3
Agreement
High
Model
typesafe-jev
Working implementation0.82
Engineering depth0.71
Reports measured results0.44
Project
Stars
Tier
jev-ultrafast
1,284
S tier
constrained-decode
412
A tier
tabsort
96
B tier
Loading and empty
Nothing on the board yet
Projects land here once a scout submits a public repository and the grader rates it.
Could not load the board
The server did not answer, so the board could not load.
Reload the board. Nothing you submitted was lost.
Rules
What future work is held to. Each one is a rule with a reason, not a preference.
A raw value exists in one file
src/styles.css. A component reads a role, and a role resolves to a primitive. Nothing else may hold a hex, a px radius or a duration.
The type scale is closed
Eight steps and three weights. A test fails on an arbitrary size, an arbitrary leading, or a fourth weight.
A link is an underline, not a colour
There is no accent hue, so the underline is the whole affordance. Removing it removes the only signal that the text is a link.
Colour never carries a value alone
Rank always prints its letter, a fired check always prints its number, and reward state is words as well as a fill.
Every text pair is measured
The ratio in the table above is computed from the token values, not read off a screenshot, and the worst surface is the one quoted.
Structure is a hairline, never a shadow
The reference declares no shadow on a card. Depth is one step of surface lift plus a 1px rule.
Not carried over from the reference: ABCOtto and ABCDiatype, both Dinamo faces, and its blue accent. Newsreader and Inter are the substitutions and both are OFL. Its own nav idle grey, #8F8F91, measures 2.89:1 on its own slab, so the idle nav grey here is the caption grey instead.
