← All tools Design System
Readme

A shared token + component layer for the JK tools. Link tokens.css and components.css, then use the classes below.

Page layout

Wrap each page's header, content and footer in one .container. Choose the width by what the tool is for. The gutter scales from 16px on phones to 32px on wide screens.

.container-narrow · 768px · reading, guides, single forms
.container · 1100px · default
.container-wide · 1600px · sidebars, side-by-side panes
.container-full · no maximum

Bars are drawn at 1/1.6 scale.

Color tokens
Buttons
Badges
Default Secondary Outline Destructive Success
Tabs
Form controls
Switch (styled checkbox)
Cards
Structured card
Header, content and footer slots.
Body content sits here with muted descriptions and normal text.

Simple padded card

Use .card.card-padded when you just want a padded surface.

Published
Overlays
Compose Post