Design language
One green, four faces, and a dark room to put them in. This is what Cold Socket looks like everywhere, from the marketing site to the product.
01 · The Mark
The mark
Two prongs in an aperture: a socket, drawn as the thing you plug into. It is outlined rather than filled, so it reads as an opening instead of a badge. Four variants, no others.
Primary
Brand green on the dark canvas. The default everywhere.
Mono
One colour, for print, embroidery, or a partner's dark header.
On light
Green 800 on white. Bright green on white is unreadable.
App icon
Tiled on near-black. Favicons and app tiles only, never inline.
The lockup
Mark and wordmark, set in Space Grotesk 600. The gap between them is a quarter of the mark's height. Clear space is half the mark's height on all four sides, shown dashed. Nothing crosses it.
Minimum size
Mark alone: 16px. With the wordmark: 100px wide. Below that the aperture fills in.
Never
- Recolour it outside the ramp.
- Fill the aperture or thicken the stroke.
- Rotate, stretch, or outline the wordmark.
- Set the wordmark in any other face.
02 · Color
One green, measured
The brand is a single green on a near-black room. The ramp is generated at hue 152.2 and anchored on the mark, so every step is the same green, only lighter or deeper. Ratios below are measured against the canvas.
Brand green
#3EE07F · brand-500
11.48:1 on the canvas. It is the mark, the accent, the button fill, and the focus ring. Nothing else competes with it.
Text on a green fill is always #06090A, at 11.58:1. White on green is 1.73:1 and is never used.
Rules
- Green is punctuation. One accent per view, on the thing you want clicked.
- Large fills stay dark. Big areas of 500 bloom on OLED. Use a 10% wash instead.
- Steps 700 and deeper are for light backgrounds only.
- No second brand colour. Status and tints are not brand colours.
50
#E8FCEC
18.45:1
100
#D0F9DA
17.20:1
200
#AAF0BC
14.99:1
300
#84EBA3
13.57:1
400
#6BEA96
13.04:1
500
#3EE07F
11.48:1
600
#2DBD69
8.10:1
700
#1E9C54
5.60:1
800
#0C7A3C
3.64:1
900
#066030
2.57:1
950
#02411E
1.68:1
400 · Hover, pressed-bright
500 · The brand. Mark, accent, fills
600 · Button gradient floor
800 · Light-surface green
Surfaces
Canvas #0a0a0a
The page. Nothing sits behind it.
Surface #111111
Cards, panels, the default raised plane.
Elevated #171717
A card on a card. Use sparingly.
Subtle #1a1a1a
Inset wells and quiet fills.
Separators are white at 6% to 8%, never a grey line. Borders never exceed 16%.
Text
Primary · 18.16:1
Headings, card titles, anything that carries meaning alone.
Secondary · 7.85:1
Body copy and descriptions. The workhorse.
Muted · 4.18:1
Mono micro-labels and fine print. Never long-form.
Three tiers, no fourth. If something needs to recede further, give it space, not a lighter grey.
Categorical tints
Feature icons only. Never state, never text, never a fill.
Blueberry
#5b82b5 · 5.00:1
Cloudberry
#d17866 · 6.21:1
Gooseberry
#dcab6f · 9.52:1
Strawberry
#cc768d · 6.17:1
03 · Typography
Four faces, one job each
Geist sets headings, Inter sets everything you read, Plex Mono sets the small uppercase labels, and Lora italic sets exactly one phrase per heading. Space Grotesk exists only inside the logo.
Outbound
in one interface.
AaBbCcDd 0123456789 · Geist 500 with Lora italic 500
Geist
Display · 400 · 500 · 600
Headings and card titles. Medium weight, never bold. Tracking -0.02em, leading 1.05.
Inter
Text · 400 · 500 · 600
Body copy, buttons, navigation, everything not a heading.
IBM Plex Mono
Label · 400 · 500
Eyebrows and micro-labels only. Uppercase, tracking 0.18em to 0.22em.
Lora
Accent · Italic 500
The italic half of a heading, and nothing else. One phrase per heading.
Space Grotesk
Wordmark · 600
The logo lockup. Never set body copy, headings, or UI in it.
Scale
Page title
clamp(2.5rem, 6vw, 4.5rem)
Geist 500 · 1.05 · -0.02em
Section
clamp(2.1rem, 4vw, 3.1rem)
Geist 500 · 1.05 · -0.02em
Card title
1.25rem
Geist 500 · tight
Lead
1.125rem
Inter 400 · relaxed
Body
1rem
Inter 400 · 1.625
Small
0.875rem
Inter 400 · card copy
Eyebrow
0.66rem
Plex Mono · upper · 0.2em
Micro-label
0.7rem
Plex Mono · upper · 0.18em
04 · Interface
Interface
Pills for actions, hairline cards for content, mono chips for labels. Every surface is a border and a fill, never a heavy shadow.
Buttons
Primary is a vertical gradient, brand 500 down to 600, with an inset top highlight and near-black label. It lifts 2px on hover. Secondary is a 4% white fill behind a 10% border. One primary per view.
Chips and labels
Icon chips are always 32px, a 10% border over a 6% fill, with the glyph carrying the colour. The chip itself is never filled with green.
Cards
Card title
Small copy sits in the secondary tier and never runs past three lines.
12px radius, an 8% border, and a deep soft shadow. Padding is 24px or 28px, never less.
Disclosure and focus
A question worth asking
The answer opens in place. The plus rotates 45 degrees, it does not swap to a minus.
Focus is always the brand at 50%, never removed.
05 · Motion
Motion
Calm and short. One easing curve does almost all the work, nothing bounces, and everything stops when the reader asks it to.
Durations
Instant 150ms
Colour and border changes on links and nav rows.
Base 200ms
Buttons, cards, everything that moves. The default.
Blink 9s
The Argus eyes, staggered so they never blink in unison.
Standard curve
cubic-bezier(0, 0, .2, 1) · ease-out
Fast out of the gate, long settle. Hover lifts are 2px, never more. Under prefers-reduced-motion, animation is removed and only colour changes remain.
06 · Spacing & Grid
Spacing and grid
Everything sits on multiples of eight. One container width, one section rhythm, one card radius.
Scale
Inside a card, 8 to 24. Between cards, 20. Between sections, 80.
Radius
Two radii carry the whole system: a full pill for anything you press, and 12px for anything you read inside.
Page anatomy
Container · 1280px max
Gutters are 24px on phones, 40px from the medium breakpoint up.
07 · Voice
Plain, and never inflated
Short sentences about what the product does. No adjectives doing work that a fact could do, and no claims the app cannot back.
Write
Not
Cold Socket, two words, capital C and S.
Coldsocket, coldSocket, COLD SOCKET.
A comma where the sentence breathes.
An em dash. The brand does not use them.
Sentence case in headings and buttons.
Title Case On Every Word.
Only what the product ships today.
Invented metrics, logos, or testimonials.
The em dash rule is the one people trip on. Where a sentence wants a pause, Cold Socket takes a comma, and where it wants a full stop, it takes a full stop.
08 · Argus
The many eyes
Argus is the agent inside the product, named for the giant who watched with a hundred eyes. Its motif is an eye whose iris is drawn as fingerprint ridges: watching, and identifying.
Using the eyes
- Odd count, largest in the middle, sizes and heights varied.
- One eye at full brand green. The rest recede to 40% or 70%.
- Blinks are staggered, so the row never blinks together.
- Never a photographic eye, and never a single eye as a logo.
Now go and build it.
The tokens on this page live in the site's Tailwind config and the product's token sheet. Change them there, then update this page.
