Foundations
The Just Works design system.
One token file, one component file, one motion facade. The live site and this page load the same three, so anything you change here is a change to production.
Tokens live in public/css/tokens.css. Components live in
public/css/components.css. Motion lives in
public/js/ds/motion.js. Values shown on this page are read
from the browser at runtime, not written down here, so they cannot
drift from what the site renders.
Color
Semantic roles come first: components should reach for --jw-accent, never --jw-mint-400. The palette below the roles exists so new semantic tokens have somewhere to point. Switch the theme in the sidebar to see every value re-resolve.
Typography
Geist Variable carries the headings (--jw-font-display); Inter carries body and UI. One self-hosted variable file covers weights 100–900. Fluid clamps drive the editorial sizes, set so a line that fits on a phone cannot overflow on desktop.
Specimens
Build the page your old profiles should have been.
One tool, every kind of small business.
Payments that land
Create · Edit · Publish
Paste your public links once. Just Works turns them into a page you own, with payments, a QR that never moves, and an editor that stays open.
Supporting copy inside a card, one step down from the lead.
Scales & motion
Type steps, space, radius, shadow, layout and motion. Hover a motion row to replay its duration or curve.
Brand
The mark is one continuous line with no beginning and no end. As it
travels it settles through four states: the plain loop, a section
squared into a card outline (payments), a section drawn out into a
speech bubble (social), and the left lobe pulled to a point (a
cursor, for the website). It rests on the plain loop, so it reads
correctly with motion disabled. The gradient runs
--jw-accent into --jw-highlight and follows
the theme. Markup and states come from
public/js/ds/logo.js.
Mark
App icon
The mark in its container: a dark translucent ground behind a blur, with a diagonal rim painted onto the border only. It stays dark in both themes, because an app icon is a fixed object rather than a themed surface.
Lockup
Top bar
Buttons
Two carry the identity, plus a quiet third. Both are rimmed rather than filled: a
two-colour gradient is painted onto the border and the middle of the
button stays transparent, so the page shows through. Hierarchy comes
from which two colours the rim uses. In light mode both rims are
grey; in dark mode they run from black into a colour.
.sun is kept as an alias of primary because the app
markup already uses it. Buttons marked .experience-button
also get the GSAP press behaviour on desktop pointers.
Variants
On a filled surface
The transparent middle means the button takes on whatever sits behind it. Check both variants against every surface you place them on.
App icon
The mark in its container: a dark translucent ground behind a blur, with a diagonal rim painted onto the border only. It stays dark in both themes, because an app icon is a fixed object rather than a themed surface.
States
Forms
Inputs are transparent and borderless; the surrounding .field-shell owns the border, the gradient edge, and the focus ring. That keeps focus states identical across input, select and textarea.
Fields
Cards & chips
Three container weights: .panel for view-level containers, .card for content blocks, and .card.quiet where a block should recede into the page.
Containers
Live preview
Canvas preview for the public page. Change copy, template, modules, and order without hunting through fields.
Quiet card
Same shape, less weight. Use inside an already-elevated container.
Panel
View-level container. Clips its children and carries the largest shadow.
Chips
Component tokens
The layer components actually read. Retarget one of these to restyle a component everywhere without touching a CSS rule: point --jw-button-primary-bg at --jw-info and every primary button follows.
Coverage
This page fetches tokens.css and lists anything declared there but not documented above, so a new token cannot go unnoticed.