Agentic Blueprint v3.1

Agentic Blueprint: Kitchen Sink

Every token, every component, every state — live preview.

Adjust the sidebar to build your custom design system.

Cut the noise. Keep the precision. Set essentials. Export. Done.

11 colors in, 60+ tokens out.

It is so simple that even you can't f*ck it up.

Need help getting started? Read the quick documentation

CC BY-NC 4.0 Easy to use Sloth friendly Minimalistic Made with ❤️

Color Palette — Neutrals

100

200

300

400

500

600

700

800

900

Color Palette — Accents & Status

Accent

100

500

700

Info

100

500

700

Success

100

500

700

Warning

100

500

700

Error

100

500

700

Cards

Feature

Default Card

Standard surface with subtle border. Elevates on hover.

Premium

Raised Card

White surface with shadow. Feels elevated from the page.

Info

Flat / Sunken

Sunken surface for grouped content zones. No hover lift.

Revenue

$48,295

This month

↑ 12.5%

Users

3,842

Active now

↑ 8.2%

Churn

2.4%

Last 30 days

↓ 0.3%

Badges & Tags

Badges

Accent Info Active Pending Critical Neutral

Buttons — Variants & States

Variants

Sizes (sm / md / lg)

Modifiers

Disabled States

Disabled Buttons

Disabled Inputs

Disabled Input

Disabled Toggle Unavailable

Alerts

ℹ

Information

A new version is available.

✓

Success

Changes saved successfully.

⚠

Warning

Trial expires in 3 days.

Error

Payment processing failed.

Progress Bars

Storage72%

Upload45%

Complete100%

Critical91%

Typography Scale

--text-5xl · 56px · Heavy

Display Heading

--text-4xl · 40px · Bold

Page Title

--text-3xl · 32px · Bold

Section Heading

--text-2xl · 24px · Semi

Card Title

--text-xl · 20px · Semi

Subsection Heading

--text-lg · 18px · Medium

Lead paragraph or subtitle

--text-base · 16px · Normal

Body text — the default reading size for comfortable reading across all screens.

--text-sm · 14px

Small text for labels, captions, and secondary info.

--text-xs · 12px · Caps

Overline / Eyebrow Label

--font-mono · Monospace

const designSystem = { tokens: true, ready: true };

Avatars

Sizes & Colors

SJNA PKMZ ERTL

Stack

ABCDE

Tabs

Click tabs to see active state with accent underline.

Table

Name	Role	Status	Revenue
ANAnna Nováková	Designer	Active	$12,400
PKPavel Kovář	Engineer	Active	$18,750
MHMarie Horská	PM	Pending	$9,200
TKTomáš Kříž	Marketing	Inactive	$3,100

Navigation

List Items

Design System v2.0

Updated 2 hours ago

Live

API Integration

Updated yesterday

In Progress

Bug Fixes Sprint 14

Updated 3 days ago

Blocked

Code

Use --color-surface for cards and --radius-lg for corners.

                    /* Import tokens */
                    @import 'tokens.css';

                    .card {
                    background: var(--color-surface);
                    border-radius: var(--radius-lg);
                    box-shadow: var(--elevation-2);
                    }
                

Tooltips

Skeleton Loaders

Elevation / Shadows (Semantic)

0 · Flush

1 · Resting

2 · Raised

3 · Hover

4 · Overlay

Border System

--border-light (subtle)

--border-thin (default)

--border-strong

1px thin

2px medium

3px thick

Size Scale (sm / md / lg)

sm · 32px

md · 44px

lg · 52px

Icon Sizes

icon-sm 16px

icon 20px

icon-lg 24px

Avatar Sizes

S sm 28px M md 40px L lg 56px

Border Radius

full

Spacing Scale (4px grid)

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

10 · 40px

12 · 48px

16 · 64px

Form Inputs

Full Name

Email We'll never share your email.

Error State This field is required.

Disabled

Select

Message

Checkboxes

Accept terms Subscribe to newsletter

Radio

Free Plan Pro — $19/mo

Toggles

Dark mode Notifications