SOCI4L

Three colours carry the whole system. A near-black surface and a near-white one do the structural work, and a single blue does all the signalling.

Brand Blue is deliberately scarce. It marks a special action or a highlight and nothing else, which is what keeps it meaning something when it does appear.

The strip under each swatch is the real ramp that ships in the product, so a value picked here matches a token in the code rather than an approximation of it.

Two faces from the same family, split by what the text is rather than how it should look. Geist Sans carries everything a person reads: headlines, interface copy, marketing.

Geist Mono carries everything a machine produced: wallet addresses, transaction hashes, reputation scores, timestamps. Fixed advance width means a truncated address holds the same width wherever it appears, and a column of scores lines up on the digit.

Headings run SemiBold with tight tracking, body runs Regular, and Bold is kept for emphasis inside a line rather than for whole headlines. Three weights across the whole product.

The ramp is short on purpose. Six steps cover a dashboard, a public profile, a documentation page and an embedded widget, so a component dropped into a partner surface inherits a size that already exists rather than inventing one.

The logo animates on one idea: the four blocks of the mark arrive separately and lock into place. Nothing spins, nothing bounces. The mark is built from cut geometry, so the motion is assembly rather than decoration.

It runs a little over four seconds and resolves to the static lockup, which means the last frame is always a usable still. That matters for a video end card or a loading state, where the animation has to stop somewhere legible.

Every animation ships in both treatments. The dark cut carries a light mark, the light cut inverts it, and the choice follows the same contrast rule as the static logo. Add landscape, square and vertical crops and a gradient finish, and a placement never needs a reframe or a recolour of the source file.

The interface runs on Lucide, drawn on a 24 by 24 grid with rounded caps and joins. It is an open set, which matters for a product other people embed: an integrator can pull the same icons without a licence conversation.

Stroke stays at 1.5. Lucide ships at 2 by default, which reads heavy next to Geist at interface sizes, so the whole product steps it down and never mixes the two weights on one screen.

Sizes come from a short ladder rather than case by case. 16 is the default and does most of the work, 12 sits inside dense rows and badges, 20 marks a primary action, and 32 is reserved for empty states and feature blocks.

Icons inherit text colour and never carry their own. That is what lets the same file sit inside a button, a status pill, or an unfamiliar partner surface without anyone editing it.