Build a workspace
that feels right.
Explore 26 components, try their interactions, and take the same controls into your app. Slate brings the surfaces, typography and motion together.
Try the feel
Real kit componentsDrag the switch, select the checkbox, or change the icon state.
Find your starting point
Explore each part separatelyComponents
Search the controls, inspect their states and copy the code.
Explore 26 components →Templates
Start with a complete workspace or a compact overlay.
Open layouts →Interactions
Try travelling highlights, dialogs, tooltips and feedback.
Try the motion →Use the kit
Bring the shared styles and interactions into HTML or React.
Get started →Foundations
The shared source of truth
Surfaces & color
Click a swatch to copy its tokenTypography
Inter · 400 / 500 / 60020 / 60016 / 60014 / 40013 / 50011 / 400Shape & spacing
Spacing follows a 4px grid. Nested corners subtract the parent's padding.
4 · 8 · 12 · 16 · 24 · 32 · 40| Rule | Apply it |
|---|---|
| One accent | Blue for actions, focus and progress. Neutral surfaces do the structural work. |
| Outline with purpose | Inputs and secondary buttons have borders. Panels, menus and dialogs do not. |
| Sentence case | Use weight and size for hierarchy. No uppercase labels or wide letter spacing. |
| Functional motion | 190ms travel, 120ms color transitions. Respect reduced motion. |
| No decoration gradients | Only a monochrome readability scrim beneath controls over arbitrary video. |
Components
Real components, ready to copy
Buttons
32px / 12px radius<button class="sl-btn primary">Save changes</button>
Inputs & fields
34px / focus ringCustom select
Keyboard: arrows / Enter / EscapeSame floating surface, same travelling highlight. No native select popup.
trigger.addEventListener('slate:select', event => {
saveLanguage(event.detail.value);
});Feedback
Interactions
The signature of the kit
Rounded icons & state transitions
220ms / real state changesClick Play to crossfade into Pause. Rounded silhouettes keep actions readable; dialogs and menus enter and leave softly. Escape preserves focus until the dialog finishes closing.
SlateUI.setIcon(icon, 'pause'); SlateUI.closeDialog(dialog);
Character arrival
Each character rises from an 8px offset and a soft blur, with CWBridge's spring easing. Plays on reload and when a button label changes.
Travelling hover pill
190msOne surface follows the pointer. Gaps between rows keep it alive; moving into another group starts a new appearance.
Sticky tooltips
350ms / 90ms graceHover, then move across the controls. The box travels; the new text stays at its destination. Keyboard focus appears immediately.
data-sl-tooltip="Preferences"
Dialogs
Shadow / no outlineA focused decision with one primary action. Escape dismisses and returns focus to the trigger.
Scrollbars
Thin / neutralControls sit inside a rounded workspace.
The track remains transparent.
The thumb is a neutral gray.
Only the vertical axis scrolls.
Panel corners remain clipped by the parent.
Keyboard focus stays visible.
Patterns
Combine the primitives into a workspace
Ready when you are.
Capture a thought and review your words.This is a UI demo. No microphone is used.Compact overlay
Open templatePlayback controls
PlayerThe UI kit contains controls and interaction patterns. Connect these controls to your own media element.
Use the kit
A folder, a link, a shared vocabulary
Start with three files
<link rel="stylesheet" href="slate.css"> <script src="slate.js"></script> <body class="slate-ui">…</body> <script>const dispose = SlateUI.init(document);</script>
Copy the fonts directory too. No framework, CDN, API key or build step is required. Use dispose() when a view unmounts.
Point an agent here
Use the Slate UI design system at C:\Users\kasto\Documents\Slate-UI. Read AGENTS.md, DESIGN.md and README.md first. Use the existing components and templates, preserving the palette, Inter typography, sticky hover pill and sticky tooltips. Start with templates/workspace.html or templates/overlay.html. Do not invent a second set of tokens or decorative gradients.
For GitHub, replace the local path with your repository URL. This project is ready to publish, but has not been published.