Getting started with Toky CSS requires only two files:

1. Your project styleguide
2. The Toky CSS stylesheet

Quick Start

Add both stylesheets to the <head> of your document.

<!-- Your project styleguide -->
<link rel="stylesheet" href="styleguide.css" />

<!-- Toky CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tokycss/tokycss@latest/dist/toky.css" crossorigin="anonymous" />

Your styleguide loads first and defines your project’s design decisions.

Toky CSS then uses those values throughout its token system, color system, typography system, spacing system, and theme system.

That’s It

Once loaded, Toky CSS immediately provides foundations for:

• Typography
• Colors
• Theming
• Forms
• Buttons
• Tables
• Navigation
• Layouts
• Spacing
• Focus states

You can begin building immediately without additional configuration.

Next Steps

• Learn how to create a project styleguide
• Configure your brand colors
• Explore the color system
• Learn the theme system
• Browse the core variable tokens