Styles

Everything that isn’t a color or a typeface lives here: corner radius, elevation, and the focus ring. These tokens sit on :root. Shadows pick up orange in dark mode so they still read on a black page.

Radius

--k-radius is the corner on buttons, inputs, cards, and dialogs. It is 2px.

rounded-k · 2px

<div class="rounded-k">Rounded</div>

Token	Value	Utility
--k-radius	0.125rem	rounded-k

Shadows

Three elevations. Use --k-shadow-1 for a light lift (a resting card). --k-shadow-2 is a menu or popover. --k-shadow-3 is something that should sit clearly above the page, like a dialog.

shadow-k-1

shadow-k-2

shadow-k-3

<div class="shadow-k-1">Resting</div>
<div class="shadow-k-2">Raised</div>
<div class="shadow-k-3">Overlay</div>

Token	Use	Utility
--k-shadow-1	Resting lift	shadow-k-1
--k-shadow-2	Menus, dropdowns	shadow-k-2
--k-shadow-3	Dialogs, overlays	shadow-k-3

Light mode is a slate shadow. In dark mode all three use --k-primary, with a 2px spread so the lift still shows outside a 1px border.

Three linear gradients ship for custom work. No component uses them.

<div class="bg-k-gradient-fade">Fade</div>
<div class="bg-k-gradient-rise">Rise</div>
<div class="bg-k-gradient-sheen">Sheen</div>

Token	Utility
--k-gradient-fade	bg-k-gradient-fade
--k-gradient-rise	bg-k-gradient-rise
--k-gradient-sheen	bg-k-gradient-sheen

Focus ring

The ring is defined once for every k- class. Width, offset, and color are tokens. The color follows --k-ring, which stays orange in both themes.

Tab through these. Every control should get the same ring.

ButtonLink

Token	Value
--k-focus-ring-width	2px
--k-focus-ring-offset	2px
--k-focus-ring-color	var(--k-ring)

k-focus-ring applies the same outline to something that is not focusable on its own. Don’t restyle the ring per component. Anyone tabbing through the page will see the mismatch.