Type to search documentation...
Style native HTML elements with zero configuration. Just set your brand colors, write semantic markup, and watch everything adapt — dark mode included.
Your markup IS your design. Write
Colors that look consistent across all screens and devices.
One toggle, perfect dark theme. No extra CSS needed.
Text automatically adapts to your brand color for perfect readability.
Semi-transparent colors for overlays, borders, and hover effects.
Built with @layer, container queries, and relative color syntax.
Vivid colors on modern displays, consistent on standard screens.
Automatic grids and spacing based on your content.
Text that scales beautifully from mobile to desktop.
Add TokyCSS to your project. Choose the method that works best for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
<link rel="stylesheet" href="toky.min.css">
</head>
<body>
<button data-variant="primary">Click me</button>
</body>
</html>---
// src/layouts/BaseLayout.astro
import 'tokycss/dist/toky.min.css';
---
<html lang="en">
<body>
<slot />
</body>
</html>Three steps. No build step required.
‹link rel="stylesheet" href="dist/toky.min.css"›/* styleguide.css */
:root {
--tk-primary: oklch(0.55 0.27 265);
--tk-secondary: oklch(0.60 0.16 190);
--tk-accent: oklch(0.80 0.18 80);
}‹button data-variant="primary"›Primary‹/button›
‹div data-status="success"›Done!‹/div›
‹div data-theme="dark"›...dark section...‹/div›Every color is generated from brand source colors using Relative Color Syntax. Each scale features 5 tints, 5 shades, and 10 alpha variants.
Functional colors for communication, each with a full scale of tints, shades, and alpha variants.
A smart scaling system using both Container Queries and Media Queries.
You can use bold text, italic text, highlighted text, and small text. Inline code elements get a subtle background.
Press ⌘ + K to open the command palette.
Design is not just what it looks like. Design is how it works.
Steve Jobs
:root {
--tk-primary: oklch(0.55 0.27 265);
}OKLCH is a perceptually uniform color space that produces consistent results across lightness steps.
The framework uses the latest CSS standards to automatically switch between light and dark values.
Elevation tokens for depth and hierarchy. Use shadows to create visual separation between layers.
Border radius tokens for consistent corner rounding across your UI.
Beautiful, accessible form controls styled automatically.
Buttons, dialogs, tables, and loading states for native interactivity.
Primary brand colors
Subtle variants
Scale options
Visual feedback states
Native HTML dialog element
aria-busy spinner
Semantic table styling
| Token Type | Scale Range | Use Case | Contrast Goal |
|---|---|---|---|
Base Color | --tk-color-* | Solid components | High |
Tints (5) | -5xlight to -1xlight | Subtle backgrounds | AA Large Text |
Shades (5) | -1xdark to -5xdark | Text and Icons | AAA Standard |
Alphas (10) | -1a to -10a | Overlays and Borders | Contextual |
Use these tokens in your CSS — they auto-adapt to light/dark mode.