Live island
Hydrated with client:visible
This card re-renders as you change the controls.
Design system
Component gallery
Every component below is imported from packages/ui and rendered by Astro. Static ones ship no JavaScript; the playground at the bottom is the site's only React island.
Tokens
Color, space, type
CSS variables with light and dark values. Toggle the theme to see them switch.
--jj-color-bg--jj-color-surface--jj-color-surface-2--jj-color-border--jj-color-border-strong--jj-color-text--jj-color-text-muted--jj-color-accent--jj-color-accent-soft--jj-color-success
space-1space-2space-3space-4space-6space-8space-12space-16
text-xsShip ittext-smShip ittext-mdShip ittext-lgShip ittext-xlShip ittext-2xlShip ittext-3xlShip it
Button
Button
Primary, secondary and ghost in three sizes. Renders a link when given an href.
Card
Card
Static, or fully clickable through a single accessible title link.
Static
A plain card
Eyebrow, title and body. No link.
Linked
A linked card
The title link stretches over the card. Hover and keyboard focus both show.
Tag / Badge
Tag
NeutralAccentOutline
MetricStat
MetricStat
10+
years shipping
26
CI workflows
GetPod
~230
test files added
57%
of desktop-app commits
Timeline
Timeline
2026 – Present (current)
Current role · Company
- Bullet points are optional.
2020 – 2026
Earlier role · Company
City
SectionHeading
SectionHeading
Eyebrow
Title at level 3
An optional description, kept to one or two lines.
ThemeToggle
ThemeToggle
Server-rendered with both icons; CSS picks one from html[data-theme]. Works hydrated or as static HTML.
React island
Live playground
Hydrated with client:visible — its JavaScript loads only when you scroll here.
Theme
Clicked 0 times
0
clicks so far