A first inventory of the elements most product interfaces need. The active generated theme above styles every example and the download combines both calculated themes with the complete component layer.
| Token | Value |
|---|---|
| border-radius | rem |
| breadcrumb-separator |
Primary, secondary, quiet and destructive actions in small, standard and large sizes.
A practical type system with golden-ratio jumps for display hierarchy and smaller steps for everyday interface copy.
Display heading
Body copy stays at one rem. The larger levels use the 1.618 ratio where the hierarchy benefits from a decisive jump, while labels and supporting text remain compact.
Color is useful when it clarifies structure, state and action.
Inline code, Ctrl + K, and links retain visible affordances.
:root {
--primary: #2563eb;
--radius: 0.6rem;
}Text entry, selection and boolean controls.
Alerts, badges and progress. Status colors stay separated here instead of crowding the main preview.
Semantic, dismissible notifications with optional icons. Info and success close after 4 seconds, warnings after 7; danger stays until dismissed. Hover pauses the timer.
Up to three toasts stack at bottom-right on desktop and at the top on small screens.
Containers and structured information.
Product redesign
Theme tokens are ready for review across both interface modes.
Highlighted content
Use the primary surface when one card needs deliberate emphasis.
| Name | Status | Updated |
|---|---|---|
| Navigation | Ready | Today |
| Settings | Draft | Yesterday |
| Billing | Queued | Sep 8 |
Temporary UI that sits above the current task.
The non-happy paths a reusable bundle must cover.
Create a project to start testing your theme.
Build a focused Tint UI bundle for your project. The generated CSS always includes both themes and your component settings.