The Humanverse brand system.
This site is a deliberate, faithful implementation of LinkedIn’s own measured design system: the blue, the system font stack, the flat 1px borders, the 4px spacing grid. That is the joke: the wrapper is indistinguishable from the platform this product argues against, and only the words give it away. Click any swatch to copy its hex.
01
The name
Humanverse
The part a profile edits out
Bad quarters. The job that was a mistake. The week you could not get out of bed. All of it true, none of it printable on a professional profile, and all of it the thing another person actually needs to read.
Humanverse
Half of universe, and a verse
Half of the word universe, because one working life is bigger than a headline and a job title. Also a verse in the ordinary sense: your account of what happened, in your words, at the length it genuinely takes.
Put together: somewhere large enough to hold a whole working life, rather than the two percent of it that photographs well. The homepage carries the short version of this, on purpose. A product that spends its first screen explaining its own name has not said what it does yet.
02
The mark
Primary mark
The lockup mirrors LinkedIn’s own construction: plain text, then the final syllable reversed out of a blue box. Theirs ends in a box that says “in”. This one ends in a box that says “verse”.
Concept
A filled blue rounded square, the exact shape a billion people were trained to recognise, containing a white arrow that runs off the top-right corner instead of sitting neatly inside it. The arrow is drawn past the boundary and clipped by the square, so it reads as something leaving rather than something contained.
- · Minimum size 20px. Below that, drop the wordmark.
- · Clear space equals half the mark’s height.
- · Flat fills only. No gradient, no shadow, ever.
- · Use
invertedon a blue surface.
03
Colour
Monochromatic in intent: one blue, one warm accent used sparingly, and neutrals. No gradients and no colour mixing. Pure, distinct blocks that support rapid scanning.
Light
Dark, derived
The source system defines a white-background theme only. The dark values are derived from LinkedIn’s actual dark mode, and every foreground/background pair in both themes has been checked at 4.5:1 or better.
04
Typography
System stack only, no webfonts, which is also why this build has no font swap and no webfont contribution to LCP.
text-display48px · 400 · 1.25
Post what actually happened.
text-heading32px · 400 · 1.25
Three things we took out.
text-subheading20px · 600 · 1.25 · derived
Say the real thing
text-body14px · 600 · 1.25
Nav links, buttons, labels, metadata
text-prose16px · 400 · 1.5 · derived
Running paragraphs, at a leading you can actually read.
The measured “body” token is 14px/600/1.25, and that is chrome text: nav, buttons, labels, metadata. Applying 1.25 leading to a 65-character paragraph would be genuinely hard to read, so running prose uses a derived 16px/1.5, close to LinkedIn’s own long-form body copy.
05
Spacing & radius
4px base unit
06
Components
Buttons
Flat fills, no shadow, no depth variation. Hover is a colour shift, never a scale transform. Every size clears the 44×44px touch-target minimum.
Badges
Motion
- · Fast: 336ms, brief state changes
- · Base: 560ms, entrances and transitions
- · Easing: cubic-bezier(0.34, 0, 0.21, 1)
- · No parallax, bounce or overshoot
07
Voice
The visual system is borrowed. The voice is the entire product, it is the only thing separating this from the site it imitates.
Do
- Say the specific number. “Ninety-four applications” beats “a lot of applications”.
- Use plain words. If a sentence could appear in a press release, rewrite it.
- Let a sentence end without a lesson attached.
- Admit the thing that is actually embarrassing.
Don’t
- Never use “thrilled”, “humbled”, “excited to announce”, even ironically.
- No rocket, fire or clapping emoji in body copy.
- Don’t turn hardship into a growth lesson. The hard part is the point.
- No exclamation marks. The product is calm.