design system · v1

the h3 design system.

a frutiger-aero / wii-era inspired kit. glossy orbs, saturated gradients, serif display type, mono utility text. designed to feel optimistic, wet, and a little nostalgic.

principles.

the vibe check

glossy, not flat

inset highlights at the top, dropped soft shadows underneath. surfaces catch light.

saturated, not neon

blues sky, aqua, magenta, lime. push saturation, keep value legible.

serif display

lora for headlines. tight letterspacing, pretty text-wrap.

motion is bouncy

overshooting easing on hovers, floaty loops on orbs, rise-and-settle on load.

palette.

primitive colors

blue-50
#e6f5ff
blue-100
#b3e2ff
blue-200
#00b3ff
blue-300
#0088ff
blue-400 · accent
#0074e0
blue-500
#004cff
blue-600
#003d99
cyan
#00bbff
aqua
#00ffc3
lavender
#838dff
magenta
#d400ff
lime
#00e01e
amber
#ffc60c
orange
#ff8c00
red
#e40303
ink-900
#0b0b10

gradients.

signature blends

--grad-sky
--grad-bubble
--grad-pool
--grad-deep
--grad-rainbow

type.

lora · system body · jetbrains mono

display · lora
96px / 1.0
welcome.
h1 · lora
56px / 1.15
the big idea
h2 · lora
40px / 1.15
a section break
h3 · lora
28px / 1.15
subsection
body · system
16px / 1.5
this is paragraph text at the body size. the body font picks up the system stack so it renders native on every OS. line-height is tuned to 1.5 for comfortable reading.
lede · system
18px / 1.55
a slightly larger paragraph used for intros and ledes, sitting just above body size.
mono · jetbrains
13px / 1.4
const font = 'jetbrains mono'; // used for metadata + code

buttons.

blue glass · aqua · download · secondary · ghost

default chip accent success warning danger

cards.

surfaces

.card

the default paper card. white bg, subtle inner border, soft drop shadow.

.card .card--sky

sky gradient surface. perfect for feature/hero blocks.

.card .card--dark

inverted card. use for testimonials, callouts.

.card .card--channel

rainbow blob. for playful inline content.

orbs.

the signature glossy sphere

64 · bubble
88 · sky
120 · rainbow
160 · deep

faces.

henrity's moods · click to preview the morph

happy
happy
excited
excited
sad
sad
angry
angry
chill
chill

shadows.

drop · drop-lg · drop-xl

--shadow-drop
--shadow-drop-lg
--shadow-drop-xl
inset top + deep

spacing.

a 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 scale

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9

radii.

0 · squares only, orbs stay round

every --radius-* token is 0. cards, buttons, chips, nav, hero — all squares. circles survive only where they mean "ball": .orb, .h3-hero__orb, glyph bubbles.

motion.

click a tile to preview

ease-bounce · 900ms
ease-out · slide in
h3-float · infinite

tokens.

css variables (abridged)

--accent#0074e0 → #45a7ff (dark)
--bg-1#fff → #07070c (dark)
--bg-2#f4f5f8 → #12121a
--fg-1#0b0b10 → #f5f5f8
--fg-2#1e1f26 → #cfd0d7
--border-1rgba(0,0,0,0.10)
--radius-pill0 · squares now
--ease-outcubic-bezier(0.22, 1, 0.36, 1)
--ease-bouncecubic-bezier(0.34, 1.56, 0.64, 1)
--dur-med220ms

playground.

build stuff, steal the css

button builder

click me

orb mixer

bubble pop pit click empty space to spawn · click bubbles to pop

use it.

drop-in

add the stylesheet and you get the whole kit:

<link rel="stylesheet" href="/css/h3-design.css" />

dark mode follows @media (prefers-color-scheme: dark) automatically. no toggle needed.