One button kit for every surface

Every button on a JKCA surface comes from one file. The studio site, care, the client portal and Kindform all pull their controls from the same kit, and none of them is allowed to invent a button of its own.

Why one kit

Buttons drift. One page gets a slightly rounder corner. Another gets a glow someone liked that week. A third gets a spinner copied from a library. None of it is wrong on its own, but put the pages side by side and they look like they came from different shops.

A person can’t name the problem. They just trust the site a little less.

So the controls live in one CSS file, jkca-moves.css, and every surface imports it. A site points the kit’s color tokens at its own palette in a single block, once. After that the kit isn’t edited per site. A site may set a button’s size or width. It never changes the shape or the behavior.

The rules the kit holds

Shape. Controls are pills: buttons, fields, tabs, toggles, nav links. Containers like cards and tables are square. Nothing sits in between.

Edge. Every control has one 1px line of light inside its top edge. It’s a small thing, and it’s on every control.

Hover. A filled button steps one shade darker or lighter and never glows. The soft glow behind a control belongs on dark backgrounds only. On a light page, a seafoam glow is darker than the paper around it and reads as a haze, so there the control lifts to white and its edge turns kelp green instead.

Sizes. Three heights: 44, 48 and 52 pixels. The default is 48.

The accent color. Sockeye red appears in exactly three places: on arrows, on the link underline and on the focus ring. The focus ring is one ring everywhere, 2px wide with a 3px gap, so a keyboard user always knows where they are.

Reduced motion. If your device asks for less motion, the kit listens. Animated edges go still and transitions turn off.

Three moves with names

Past the basics, the kit has three moves, each with one job.

Kelp Beam is a thin line of light that travels around the edge of a pill or card when you hover or tab to it. It only runs on hover and focus. A beam that spins all the time is banned, because at rest a control should sit still.

Tide replaces every spinner. It’s three small orbs drifting back and forth while something saves or loads, always paired with a plain verb like “Saving your answers.” When the work is done, the orbs settle into a resting mark instead of vanishing. You see that it finished.

Mercury is a pill with a slow, blurred pool of color moving behind it. It’s the page’s one gradient, spent on the hero button. One per page, and when a hero has a Mercury button, the ground behind it goes flat so the two don’t compete.

The time the kit backed off

When the kit first went onto the studio site, it replaced the header’s nav hover with its own. The old one was an underline that swept in under the link, and it was better. My note at the time was “we lost our beautiful hover.”

It went back the same day, and the rule changed with it. The kit now sanctions two nav hovers, and a site keeps the one it has. A shared kit exists to stop drift. It shouldn’t overwrite something that was already right.

What’s left out

Some popular button effects didn’t make it in: gooey shapes that melt into each other, loaders that blur an image into focus, beams that never stop. Some of the ideas came from React component libraries, and those packages stay out too. What we kept was rewritten as plain CSS.

What it means for a client

If you’re a care client, you meet this kit in the portal and on the care site. The button that starts a plan and the one that opens your account behave the same way, and they sit still until you reach for them.