Documentation

Start Building Seamless UI

Agentic Blueprint is a minimalistic, smart design token studio. It powers your user interface by boiling down complex design decisions into a single, highly optimized CSS file: tokens.css.

Why use it?

Unlike massive frameworks that ship with thousands of utility classes you never use, Agentic Blueprint is focused purely on variables and semantic structure.

No CSS Bloat: Only what you explicitly configure is exported.
Framework Agnostic: Works perfectly in React, Vue, Svelte, or Vanilla HTML/JS environments.
Auto-Derived Tokens: Provide just one base color (like an Accent), and the system automatically generates hover states, soft backgrounds, and foreground contrast colors.
Built-in Dark Mode Readiness: Tokens automatically invert based on standard system preferences, seamlessly providing an accessible dark theme without extra effort.

Smart Color Engine

You don't need to manually configure 10 shades for every color. Just choose a base color, and Agentic Blueprint mathematically derives the appropriate lighter and darker tones to build a harmonious swatch.

Base Input

→

Soft (100)

Solid (500)

Dark (700)

Soft Badge Solid Badge

Quick Start

Implementing Agentic Blueprint requires zero setup. Simply generate your theme from the editor, save it, and link the resulting CSS file in the <head> of your HTML.

                <!-- 1. Include your exported tokens font -->
                <link rel="stylesheet"
                href="tokens.css">

                <!-- 2. Apply theme variables to your elements -->
                <style>
                body {
                background-color: var(--color-page-bg);
                color: var(--color-text);
                font-family: var(--font-sans);
                }
                </style>
            

Component Example: Feature Default Card

Here is an example demonstrating a simpler, widely used component. Its clean layout uses straightforward tokens for spacing and typography, providing a premium feel instantly.

Feature

Default Card

Standard surface with a subtle border. Automatically elevates on hover.

Code configuration for the Feature Card:

                <div class="card" style="max-width: 320px;">
                <div style="font-size:
                    var(--text-xs); font-weight: var(--weight-semi); text-transform: uppercase; color:
                    var(--color-text-muted); margin-bottom: var(--space-2);">Feature</div>
                <div style="font-size:
                    var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2);">Default
                Card</div>
                <div style="font-size:
                    var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4);">Standard
                surface with a subtle border. Automatically elevates on hover.</div>
                <div style="display: flex; gap:
                    var(--space-3);">
                <button class="btn
                    btn--solid">Action</button>
                <button class="btn" style="background: transparent; color:
                    var(--color-text-muted);">Learn More</button>
                </div>
                </div>
            

The Core Scale

Every size, spacing, and font decision relies on a robust scale system. Avoid writing magic numbers and always reference your tokens via var(--space-X), var(--text-X), or var(--radius-X).

Spacing: --space-1 to --space-16
Radius: --radius-sm, --radius-md, --radius-lg, --radius-full
Typography: --text-xs up to --text-5xl

About the Creator

I developed Agentic Blueprint primarily for myself. I am constantly churning out new vibe-coded apps, and I got genuinely tired of manually tweaking the design over and over again. After realizing how much time this saves me, I decided to make it publicly available to everyone.

Feel free to reach out to me at stepan.dev@outlook.cz.