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.

Free Design Tokens Generator

Free Design Tokens Generator: No account needed, no subscription required.

I believe that great design tools should be accessible. Agentic Blueprint is free for personal and non-commercial projects under the CC BY-NC 4.0 license. No hidden paywalls, no signup forms, and no usage limits. Launch the editor, build your theme, and download your CSS instantly.

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

Designing a balanced color palette shouldn't require a degree in color theory. With the Smart Color Engine, you just select a page background,one base color that represents main accent and four status colors. If needed, you can tweak a few of other parameters. And that's it! Agentic Blueprint will mathematically derive the perfect complementary shades—from delicate background tints all the way down to rich, deep tones to automatically construct a harmonious swatch.

But it goes further: the engine dynamically calculates optimal contrast colors for text. Whether a background surface is light, muted, vibrant, or completely dark, your text will automatically adapt to remain perfectly legible and accessible, ensuring a stunning visual experience across both Light and Dark modes.

Base Input

→

Soft (100)

Solid (500)

Dark (700)

Soft Badge Solid Badge

Intelligent Contrast Generation:

Soft Background

Text automatically uses a darker complementary shade.

Vibrant Base

High-contrast text ensures brilliant readability.

Deep Shade

Crisp, bright text perfectly balances dark surfaces.

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.