Section 01 / Palette

Color Palette

Canvas black, jelly mint, verge ultraviolet — hazard colors on a near-black surface.

Primary — Brand Hazards
Jelly Mint
#3CFFD0
The signature acid-mint accent. CTA fills, active borders, hazard spotlights.
Verge Ultraviolet
#5200FF
The complementary hazard. Secondary tiles, outlined buttons, alert borders.
Secondary & Accent
Console Mint Border
#309875
Darker mint for card outlines and button borders.
Deep Link Blue
#3860BE
The one moment blue appears — every link's hover state.
Focus Cyan
#1EAEDB
Reserved for button focus rings. Keyboard-only visibility.
Purple Rule
#3D00BF
Darker ultraviolet for StoryStream timeline rails.
Surface & Background
Canvas Black
#131313
The default dark surface for the entire homepage. Newsprint-negative warmth.
Surface Slate
#2D2D2D
Secondary card background when a tile stays quiet.
Image Frame
#313131
1px border around inline photography.
Hazard White
#FFFFFF
Tile fill, primary text, and the loudest "spotlight" surface.
Neutrals & Text
Primary Text
#FFFFFF
Headlines and display text on the canvas.
Secondary Text
#949494
Bylines, timestamps, photo credits.
Muted Text
#E9E9E9
Button text on dark slate — slightly off-white to reduce glare.
Section 02 / Typography

Typographic Hierarchy

Manuka shouts, PolySans works, PolySans Mono labels, FK Roman whispers.

Hero WordmarkManuka · 107px / 900 / 0.80 / 1.07px
The Verge
Display SecondaryManuka · 60px / 900 / 0.80
Feature Callout Headline
Large HeadlinePolySans · 34px / 700 / 1.00
Section and module headlines
Heading WidePolySans · 32px / 400 / 1.10 / 0.32px
Sub-heroes and promotional units
Heading MediumPolySans · 24px / 700 / 1.00
Story tile headlines in the main feed
Fashion WhisperPolySans · 19px / 300 / 1.20 / 1.9px / CAPITALIZE
The Thin Weight Kicker Above The Shout
All-Caps XLPolySans · 18px / 400 / 1.10 / 1.8px / UPPER
Section Kicker Label
Body RelaxedPolySans · 16px / 500 / 1.60
Long-form reading body. The default rhythm for article decks and extended captions — relaxed leading to carry the density of a dark canvas.
Eyebrow All-CapsPolySans · 12px / 400 / 1.30 / 1.8px / UPPER
Policy · Transportation · Apple
Mono TimestampPolySans Mono · 11px / 500 / 1.20 / 1.1px / UPPER
21m ago · 3h ago · Yesterday
Mono ButtonPolySans Mono · 12px / 600 / 2.00 / 1.5px / UPPER
Subscribe Now
Serif BodyFK Roman Standard · 16px / 400 / 1.30 / -0.16px
The rare serif moment — used for review decks and critic pulls, a print-voice counterpoint to the PolySans workhorse.
Section 03 / Buttons

Button Variants

Pills only. 24–40px radius, hazard-color fills, mono UPPERCASE labels.

Primary — Jelly Mint Pill
Secondary — Dark Pill
Outlined — Mint 40px
Outlined — Ultraviolet 30px
Icon — Round 50%
Pill Tag — Non-interactive
Breaking
Section 04 / Story Tiles

Hazard-Color Tiles

Saturated accent blocks with rounded 20–24px corners. Color is elevation.

Policy · Feature

The Next Browser War Is Already Over And Nobody Noticed

A long-form deck on why the market moved from standards to distribution while the press was still benchmarking rendering engines.

12 min read · 2h ago
Hardware

A Mechanical Keyboard Reviewed At Rave Volume

5h ago
Gaming

The Indie That Ate The Big Studios Alive

Yesterday
Science

Inside The Lab Running A Synthetic Atmosphere

2 days ago
Section 05 / StoryStream

Timeline Rail

Every post is a pill-cornered tile, pinned to a dashed rail by a mono uppercase timestamp.

21m ago
Breaking

A regulator has opened an investigation into the platform merger

1h ago
Apple

The iOS update everyone is quietly rolling back

3h ago
Transportation

The EV startup that outlasted its own hype cycle

Yesterday
Gaming

A handheld that actually earns the price tag

Section 06 / Forms

Inputs & Newsletter

Tight 2px radius, mint focus border, ultraviolet error border — newspaper-form minimalism.

Please enter a valid address
Section 07 / Spacing

Spacing Scale (8px System)

Fine micro-scale (2/4/5/6/9/10) for pills, editorial scale (12/16/20/24) for the grid.

2px
4px
6px
8px · base
10px
12px
16px
20px
24px
25px
Section 08 / Radius

Border Radius Scale

Eight radii — from 2px typewriter tags to 40px outlined shout-pills.

2pxInputs, badges
3pxInline images
4pxNested imagery
20pxStory tiles
24pxFeature cards, primary button
30pxPromo buttons
40pxOutlined pill CTAs
50%Avatars, icon buttons
Section 09 / Elevation

Depth & Elevation

Color is elevation. 1px hazard borders do the work shadows would do elsewhere.

Level 0
Plain canvas text — no border, no shadow
Level 2
1px hairline frame — image outlines
Level 3
1px Jelly Mint outline — active tile
Level 4
1px Ultraviolet outline — promo state
Level 5
Subtle atmospheric 1px ring — stacked cards
Level 6
Inset mint underline — active tab signature
Level 7
Saturated Jelly Mint fill — loudest emphasis