A shared token-driven design system for all Kronos web surfaces. Import one CSS file. Get consistent typography, components, and spacing across every page — ideas, dashboards, tools.
class="kn-page" to your body tag.
Everything below is available immediately.
<link rel="stylesheet" href="https://ui.krisadamstv.com/kronos-ui.css">
<script src="https://ui.krisadamstv.com/kronos-ui.js" defer></script>
<body class="kn-page">Typography
Display — Large Hero Text
Headline Large — Section Titles
Headline Medium — Card Titles
Headline Small
Title Large — 1.125rem, weight 600
Body Large — 17px. This is the standard reading size. Long-form text should always be at least this large. Never use sub-15px for anything a user actually reads.
Body Small — 15px. Supporting text, captions, descriptions.
LABEL LARGE — 14px, weight 500, for metadata and section headers
LABEL SMALL — 12px. The hard minimum. Only for badges, tags, timestamps.
Buttons
Badges
Status Indicators
Callouts
Cards
Default card with border, surface background, shadow. Lifts on hover with a brand glow.
Use for highlighted items, active selections, or featured content.
Large feature block with a subtle gradient fill. Good for the primary action on a dashboard — main status, hero metric, primary CTA.
Tables
| Surface ID | Name | Status | Last Seen | |
|---|---|---|---|---|
srf_6453… |
Living Room TV | Live | ||
srf_8821… |
Studio Monitor | Offline | ||
srf_3310… |
Waiting Room | Warning |
Form Inputs
Progress
Stats Grid