Slopmeter
Brand Kit

Every value on this page is read live from /tokens.css, the same file the site loads. Nothing here is a screenshot or a transcription, so the kit cannot drift from what actually ships. Add a token there and it appears here.

The material rule · read this before anything else

Everything on this site is a near-black object in a dark room, lit from directly above. Three consequences, and they are not decoration, they are the grammar:

Bodies are almost black.Objects emerge out of the page rather than sitting on it. Mid-grey is the one thing that instantly breaks the world.
The top edge catches a hard white line.One crisp highlight on the upper lip, nothing on the sides or bottom. That single line is what makes a shape read as a physical object.
Anything hollow pools toxic lime in its bottom.The sample well, the eyewash bowl, the cleaned-text panel. If it is a cavity, it glows from the floor up.
The failure mode.A component drawn in its own palette, with even lighting and no lip. It can be beautifully drawn and still read as clip art bolted on. Build from the recipes below instead.

Colour

Every colour means something. There are no decorative hues, and nothing is introduced just because a component "needed a grey".

Ink · surfaces

--ink
#070807
The page itself.
--ink-100
#0A0C0A
A panel sitting on the page.
--ink-200
#101210
A raised panel. The eyewash sign.
--ink-300
#161915
The highest surface we go.
--cavity
#010201
The inside of anything hollow. Darker than the page, always.
--line
#262A26
Hairline rule and border.

Paper · type

--paper
#FFFFFF
Headings and primary copy.
--dim
#C9CFC7
Secondary copy, captions, notes.
--mute
#5D655C
Disabled controls only. It fails AA and it is not for anything a reader has to read, including placeholders.

Signal

--toxic
#B6FF00
The brand colour. Slop itself, and the primary action.
--toxic-dim
#9BC72E
Lime under glass or at rest.
--toxic-off
#4E6414
Lime with the power off. Dormant equipment.
--yellow
#F5C400
Hazard tape. Warnings and equipment ONLY, never a surface.
--water
#2E86FF
Clean. The human end of the meter, and the flush.
--orange
#FF7A2F
A severity-3 finding.
--red
#FF3B1A
A failure. The fidelity check, and nothing else.

The meter ramp · never reorder

--m0 BLUE / HUMAN--m1--m2--m3--m4 LIME / SLOP

Blue is a person, lime is a machine. The gradient is the argument the whole product makes, so it runs one way and only one way. Use --ramp, never hand-mix the stops.

Severity

--sev-1
Housekeeping. Trailing space, double space.
--sev-2
Worth a look. A word with a plainer swap.
--sev-3
A real tell. Em dash, a word models over-reach for.
--sev-4
Stock phrase carrying no information. Delete the clause.

Type

Three families, one job each. A fourth family, or mono used for something that is not data, is how the page starts looking generated.

--disp · Archivo Black
Run the meter
Headings, the score, band names, buttons. Always uppercase, always tracked in with --track-disp. Never used for anything you have to read a paragraph of.
--ui · Archivo
Sloppier than 96% of real human samples
Everything you actually read. Weights in use: 400 body, 500 lede, 600 controls, 700 emphasis.
--mono · JetBrains Mono
CLEARS THE SAMPLE
Data only: the user's quoted text, equipment legends, counts, codes. Tracked out with --track-mono. Never a button label and never a caption. that is the tell that reads as generated UI.

Scale

--t-heroclamp(46,8.2vw,116)
--disp / --lh-tight
Slop?
--t-displayclamp(32,4.6vw,60)
--disp
Put a sample under the light
--t-score96px
--disp
52
--t-band34px
--disp
Contaminated
--t-cta26px
--disp
Clean it up
--t-title22px
--disp
Start here
--t-lede19px
--ui 500 / --dim
Paste an email, a report, ad copy, a landing page.
--t-body17px
--ui 400 / --lh-body
The base size. Everything is measured from here.
--t-small16px
--ui / --dim
Captions, notes, and the sentence under a finding.
--t-label14px
--ui / --dim
Tooltip body and chip text.
--t-micro11px
--mono / --track-mono
HIT THE PADDLE · ESC

Light

These are the recipes that make the material rule real. Reach for one of these before writing a new box-shadow. A component assembled out of them belongs to the site automatically.

--lip · --lip-glow

The top edge catching the light. The single most important value in the system.

--depth · --depth-far

The shadow that lip throws down into the cavity.

--pool

Toxic lime collecting in the bottom of a hollow.

the full well

All of it together: lip, depth, pool, drop. This is the paste well.

--lip-live · --pool-live

The same object, focused. Lip goes lime, pool comes up.

--tape

Hazard tape. The top bar and the eyewash paddle.

--tape-fine

The fine gauge, for scrollbars.

--drop

An object's own shadow on the page.

Components

Buttons · one primary per view

Primary is solid lime and goes white on hover. Ghost is the paid path. Quiet is anything you might do twice. Display font, uppercase, no rounded corners anywhere.

The verdict
52
Toxic
Sloppier than 100% of 5,616 real human samples (Enron sent mail, 1998-2002).
Marks · the user’s own text

Thank you for taking the time to speak with me yesterday — I have put together a comprehensive summary.

Severity is carried by the underline colour. Marks are hover, focus and tap targets; the finding shows in a tooltip, never in a native title.

Drawer pull · closed and open
All 15 findings
Your text, marked up

A machined pull on a bench drawer, which slides out and lights when open. It replaced a mono SHOW + caption, because tiny tracked-out mono next to a control is the single loudest "generated UI" tell there is.

Voice

Never say "X% chance this is AI."Not once, not hedged, not in a tooltip. The score is a percentile against a human corpus, and the footer says plainly that a high score is not proof. Every competitor that framed this as an accusation got banned or torched.
Editing tool, not detector.The verbs are measure, flag, clean, rewrite. Never detect, catch, or prove.
Name the corpus in the same sentence as the number."Sloppier than 96% of 5,616 real human samples (Enron sent mail, 1998-2002)." The source is what makes the number mean anything.
Every finding names the change to make.Not "this is bad" but "delete the whole clause". A finding with no fix should not ship.
Lead with three, not fifteen.Three different kinds of problem, then the button, then the full list in a closed drawer. A laundry list gets no action.
No em dashes in our own copy.We score them at severity 3. Writing them ourselves is the one unforced error the whole site cannot afford.

Motion

Fast for things being pressed, slow for light coming up. Nothing on this site bounces except the paddle, which is on a spring in real life.

--snap.09s ease
A thing being pressed.
--quick.15s ease
Hover.
--ease.25s ease
A panel changing state.
--slow.35s ease
Light coming up: the eyewash lamp, the dust caps going live.
--springcubic-bezier(.3,1.6,.5,1)
The paddle, and only the paddle.