Agentic Blueprint v3.1
Form.Function.Color.Type.Soul♥
Agentic Blueprint: Kitchen Sink
Free Design Tokens Generator: No account needed, no subscription required.
Every token, every component, every state — live preview.
Cut the noise. Keep the precision. Set essentials. Export. Done.
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
WCAG Level AA compliant
Made with 🩶
Show contrast ratios on swatches
Color Palette — Neutrals
50
100
200
300
400
500
600
700
800
900
Color Palette — Accents & Status
Color Palette: Surface & Text
Quick verification of primary and muted text & WCAG compliance for body text.
Page Background
Background
Muted text example
Surface
Surface
Muted text example
Raised
Raised
Muted text example
Sunken
Sunken
Muted text example
Cards
Feature
Default Card
The background of this object uses the surface color token. Elevates on
hover.
Premium
Raised Card
Raised 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
↓ 14.8%
Surface Hierarchy & Depth
Surface
The foundational layer.
Raised
Premium Layer
Maximum visibility and depth.
Layers of Meaning
Use semantic elevation to guide users. Surface provides the base, Raised draws focus for interaction, and Sunken creates internal structure.
Surface (Base Material)
Clean, stable grounding for content.
Raised (Action Layer)
Floating elements that pull focus.
Sunken (Data Blocks)
Recessed zones for passive context.
Badges & Tags
Badges
Accent
Info
Active
Pending
Critical
Neutral
Tags
Design
Tokens
CSS
System
Disabled States
Disabled Buttons
Disabled Inputs
Alerts
ℹ
Information
A new version is available.
✓
Success
Changes saved successfully.
⚠
Warning
Trial expires in 3 days.
✕
Error
Payment processing failed.
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 |
|
List Items
DS
Design System v2.0
Updated 2 hours ago
Live
AP
API Integration
Updated yesterday
In
Progress
BF
Bug Fixes Sprint 14
Updated 3 days ago
Blocked
Modal / Dialog
Confirm Deletion
Are you sure you want to delete this project? This action cannot be
undone.
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);
}
Links
Link tokens adapt automatically from the accent color.
This is a styled link using
--color-link and --color-link-hover.
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
Spacing Scale (4px grid)
1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
Composite Patterns
Most Popular
Pro Plan
Everything you need to scale
$29
/month
✓Unlimited
projects
✓Advanced
analytics
✓Priority
support
JN
Jan Novák
Senior Designer ·
Prague
Visual Priority
Priority Demo
These badges adapt in real-time between Soft and Solid styles via the
sidebar toggles.
Critical
Task
High
Review
Needed
Medium
Backlog
Item
Low
