Interfaces Built on Constraint, Meant to Compose

Stisla is a set of components that all draw from the same tokens. Meant to compose, with little left to configure.

Get started Read the docs

radius

14px

height

56px

pad-x

44px

hue

257°

<button class="button" style="
  --button-radius: 14px;
  --button-height: 56px;
  --button-padding-inline: 44px;
  --button-tone: oklch(.64 .18 257);
">
  Deploy changes
</button>

Three places to set a value.

A value can live in the theme, on a single component, or inline as a utility. All three read the same tokens, so they stay in agreement.

Tokens

InterBody & interface300 · 400 · 500 · 600

A fixed set, read everywhere.

Around thirty semantic tokens name the system’s color, type, and shape. A component draws only from that set, so nothing drifts out of agreement.

Knobs

radius

height

padding

Tune one instance.

Each component reads named variables like --button-radius and --button-height, and every one falls back to a token. Set a variable to change just that instance.

Scale

spacing 2

spacing 4

spacing 6

spacing 9

spacing 12

Runs on the Tailwind scale.

Spacing, type, radius, and shadow come from Tailwind. Components sit in their own layer, so a utility at the call site still applies.

They all read the same theme.

Everything below is live. Change the primary color or flip to dark from the nav and it all updates. Nothing here is styled by hand.

More Components

$48,290

8,142 orders across web and retail.

Card

Sonya Ryan assigned you to Q3 roadmap

12 minutes ago

Gilberto Botsford left 3 comments on Checkout redesign

1 hour ago

Marcus Chen merged pull request #248

Yesterday

Media

Sidebar

Order	Customer	Total	Status
`#10428`	AC Acme Corp billing@acme.co	$1,490.00	Processing
`#10427`	SR Sonya Ryan sonya@ryanco.io	$312.50	Shipped
`#10425`	MC Marcus Chen m.chen@northwind.co	$2,780.00	Completed
`#10422`	GB Gilberto Botsford g.b@botsford.dev	$86.00	Refunded