Kairo — Modern CSS Framework

Why Kairo?

Built from the ground up with modern CSS standards, accessibility, and developer experience in mind.

Mobile First

Every component adapts to small screens by default. Modals become sheets, menus go fullscreen, layouts stack naturally.

CSS Grid System

A responsive 12-column grid with breakpoint-aware column spans and an auto-fit mode that adapts without media queries.

Zero Dependencies

No preprocessors, no JavaScript frameworks, no build step required. Pure modern CSS and vanilla JavaScript.

Accessible by Default

Built on native HTML — <dialog>, <details>, <progress>. ARIA support, keyboard navigation, focus management, and reduced-motion respect.

Modern CSS Features

Cascade layers, nested selectors, container queries, light-dark() color functions, @starting-style animations, and logical properties.

Fully Themeable

5 built-in color presets, automatic light/dark mode, and complete customization through CSS custom properties.

Components

30+ production-ready components built on native HTML elements. Interactive, accessible, and beautiful out of the box.

Button variants

Sizes

Block button

Table

Component	Type	Native HTML	JS Required
Modal	Interactive	`<dialog>`	Minimal
Accordion	Disclosure	`<details>`	None
Progress	Display	`<progress>`	None
Tabs	Navigation	ARIA roles	Keyboard nav

Accordion

What browsers does Kairo support?

Kairo targets Chrome 120+, Firefox 120+, and Safari 17+. It uses modern CSS features like cascade layers, nesting, and light-dark() that are well-supported in these versions.

Do I need a build step?

No. You can use the pre-built kairo.min.css and kairo.min.js files directly. No Sass, PostCSS, or other tools required.

Can I customize the colors?

Yes. Use one of the 5 built-in presets, switch between light/dark mode, or override any CSS custom property (all prefixed with --kr-) for full control.

Grid System

A flexible 12-column CSS Grid with responsive breakpoints and an auto-fit mode that adapts without media queries.

12

6

4

3

8

4

2

8

2

Responsive grid example

            <!-- Full on mobile, half on tablet, third on desktop -->
            <div class="kr-grid"> <div class="kr-col-12 kr-col-md-6 kr-col-lg-4">Column 1</div> <div
            class="kr-col-12 kr-col-md-6 kr-col-lg-4">Column 2</div> <div
            class="kr-col-12 kr-col-md-6 kr-col-lg-4">Column 3</div>
            </div>

            <!-- Auto-fit: columns wrap based on min-width -->
            <div class="kr-grid kr-grid--auto"> <div>Auto 1</div>
            <div>Auto 2</div>
            <div>Auto 3</div>
            </div>
          

Typography

Three carefully chosen variable fonts with a fluid type scale that adapts smoothly from mobile to desktop.

Fraunces — Headings

The quick brown fox jumps over the lazy dog

Inter — Body

The quick brown fox jumps over the lazy dog. Good typography makes content readable, accessible, and visually pleasing across every screen size.

JetBrains Mono — Code

const framework = 'Kairo';
console.log(`${framework} v0.7.8`);

5xl Aa

4xl Aa

3xl Aa

2xl Aa

xl Aa

lg Aa

base Aa

sm Aa

xs Aa

Theming

Automatic light/dark mode with light-dark() tokens, 5 built-in color presets, and full customization via CSS custom properties.

Appearance

Color Presets

Custom properties

                  /* Override any token */ :root {
                  --kr-color-primary: #8b5cf6;
                  --kr-radius-md: 0.75rem;
                  --kr-font-heading: "Your Font"; }
                

Live preview

Dashboard

Welcome back. Here's your overview.

Online

2,847

Active Users

98.7%

Uptime

Get Started

Two files. That's all you need.

1. Include the files

              <link rel="stylesheet"
              href="kairo.min.css">
              <script src="kairo.min.js"
              defer></script>
            

2. Start building

              <div class="kr-container"> <div class="kr-grid"> <div class="kr-col-12 kr-col-md-8"> <div class="kr-card"> <div class="kr-card__body"> <h2>Hello, Kairo</h2>
              <p>Modern CSS, zero hassle.</p>
              <button class="kr-btn kr-btn--primary">
              Let's go
              </button>
              </div>
              </div>
              </div>
              </div>
              </div>
            

3. Use the JavaScript API

              // Theme control Kairo.theme.set('dark'); Kairo.theme.setPreset('ocean');

              // Toast notifications
              Kairo.toast('Saved successfully!', {
              type: 'success' });

              // Confirm dialog
              const ok = await Kairo.confirm('Delete this item?');

              // Modal control
              Kairo.Modal.open('#my-modal');
              Kairo.Modal.close('#my-modal');
            

~129 KB CSS + ~25 KB JS. No build step. No dependencies.

Build beautiful interfaces with modern CSS