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
Every page uses the same bar: fixed to the top of the viewport, fully
transparent while the banner sits behind it, and click-through. After
the first 80px of scroll (SCROLL_START in
/js/ds/nav.js; standalone pages like the tip page
replicate the same threshold) it settles onto a translucent blurred
ground with a hairline border so content passing underneath stays
legible. Never ship a static bar, an always-solid bar, or a bar that
settles at a different threshold. The demo below is the real
component, sticky inside its box — scroll it and watch it settle at
the same 80px.
This banner is the page's first section. The bar over it has no ground of its own — it borrows the page's.
Scroll on: once 80px have passed, the bar settles. Scroll back and it goes transparent again.
Padding rows so the box has something to scroll through.
Padding rows so the box has something to scroll through.
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
Patterns
Behavioural rules every page follows. Components and tokens above say what things look like; these say how pages behave. If a new page breaks one of these, it is a bug.
Layout: bleed and cap
Page-level bands — banners, coloured panels, their horizontal rules — run edge to edge across the whole viewport. Nothing caps the page shell. Readability comes from capping the content inside each band (form columns, wall columns, notes), never the band itself. On wide screens this is the difference between a designed page and a centred box with gaps beside it.
Dialogs
Overlays open over the page — scrim plus backdrop blur, one rounded card, a close affordance at the top-right, closable by scrim click and Escape, with body scroll locked while open. Never append transactional UI (invoices, confirmations) inline beneath a button: it raises a modal. The create dialog on the homepage and the invoice dialog on the tip page are the references.
Payment feedback
Every payment flow ends in a verified success state — an animated mark, the amount, and a way back to the page. Waiting states say what they are waiting for ("Waiting for payment…"), and success is driven by the verified receipt, never by optimism. See the tip page's paid step.
Fields on standalone pages
Pages that carry their own stylesheet (the tip page) still follow the type system: inputs use the body font — never the display face — left-aligned, sitting beside their label rather than pushed to the far edge. Numbers included.
Entrances
The homepage plays a cinematic overture before its choreography (curtain lowered pre-paint, mark, "It Just Works", crossfade onto the hero). Two inviolable rules: nothing is ever hidden in CSS that only JS can reveal — reduced-motion and no-JS visitors see the finished page instantly — and every other route starts at the content, no curtain.
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.