← Gallery

Colors

The full palette of semantic color tokens. Every color resolves to a CSS custom property, enabling seamless dark/light switching.

Surfaces

--color-bg#0a0a0a
--color-surface#111111
--color-surface-2#1a1a1a
--color-surface-3#222222
--color-surface-4#2a2a2a
--color-surface-5#333333

Accent

--color-accent#6366f1
--color-accent-hover#818cf8
--color-accent-active#4f46e5
--color-accent-tonalrgba(99,102,241,0.15)
--color-accent-dimrgba(99,102,241,0.08)

Semantic

--color-success#22c55e
--color-success-tonalrgba(34,197,94,0.12)
--color-warning#f59e0b
--color-warning-tonalrgba(245,158,11,0.12)
--color-error#ef4444
--color-error-tonalrgba(239,68,68,0.12)
--color-info#3b82f6
--color-info-tonalrgba(59,130,246,0.12)

Text

--color-text-primary#f5f5f5
--color-text-secondary#a1a1aa
--color-text-muted#52525b
--color-text-disabled#3f3f46
--color-text-inverse#0a0a0a
--color-text-accent#818cf8

Borders

--color-borderrgba(255,255,255,0.08)
--color-border-brightrgba(255,255,255,0.15)
--color-border-accentrgba(99,102,241,0.4)

Typography

Inter for display and body. JetBrains Mono for code. Seven weights, thirteen sizes, three line heights.

Weight Specimens

300 — Light
The quick brown fox jumps over the lazy dog
400 — Regular
The quick brown fox jumps over the lazy dog
500 — Medium
The quick brown fox jumps over the lazy dog
600 — Semibold
The quick brown fox jumps over the lazy dog
700 — Bold
The quick brown fox jumps over the lazy dog
800 — Extrabold
The quick brown fox jumps over the lazy dog
900 — Black
The quick brown fox jumps over the lazy dog

Type Scale

Token Size Sample
--text-2xs 10px Visiona Design System
--text-xs 11px Visiona Design System
--text-sm 12px Visiona Design System
--text-base 14px Visiona Design System
--text-md 15px Visiona Design System
--text-lg 16px Visiona Design System
--text-xl 18px Visiona Design System
--text-2xl 20px Visiona Design System
--text-3xl 24px Visiona Design System
--text-4xl 28px Visiona Design System
--text-5xl 32px Visiona Design System
--text-6xl 40px Visiona Design System
--text-7xl 64px Visiona

Monospace — JetBrains Mono

// Visiona Design System — Code Specimen const tokens = { font: 'JetBrains Mono', weight: '400 | 500', purpose: 'Code blocks, token names, technical labels', }; function render(component) { return component.tokens.map(t => t.value); } // ABCDEFGHIJKLMNOPQRSTUVWXYZ // abcdefghijklmnopqrstuvwxyz // 0123456789 !@#$%^&*()-=+[]{}|;:',./<>?

Line Heights

Tight — 1.2
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Normal — 1.5
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Loose — 1.75
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Spacing

A 12-step spacing scale from 4px to 128px. Consistent rhythm for padding, margins, and gaps.

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-10 40px
--space-12 48px
--space-16 64px
--space-20 80px
--space-32 128px

Shadows

Six elevation levels for layered depth. Tuned for dark backgrounds with high-opacity black.

--shadow-xs
Subtle
--shadow-sm
Low
--shadow-md
Medium
--shadow-lg
High
--shadow-xl
Elevated
--shadow-2xl
Dramatic

Radius

Seven border-radius tokens from sharp to fully rounded. Applied via semantic aliases for buttons, inputs, cards, and badges.

--radius-none 0px
--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-2xl 24px
--radius-full 9999px

Motion

Three transition presets. Hover each box to feel the difference — fast for micro-interactions, default for state changes, spring for playful emphasis.

Fast
100ms ease
Default
180ms ease
Spring
280ms cubic-bezier

Components

Every UI building block, built on design tokens.

Buttons

Variants, sizes, states, and groups.

Variants
Sizes
States
Icon Button & Group

Badges

Status indicators and labels.

Solid
Success Warning Error Info
Tonal
Success Warning Error Info Neutral
With Dot Indicator
Active Pending Offline Info
Sizes
Small Default Large

Inputs & Forms

Text inputs, textareas, selects, and a full form example.

Input States
Please enter a valid email address.
Email is available.
Textarea
Select
Full Form Example

Checkboxes & Radios

Custom styled form controls.

Checkboxes
Radios

Toggles

Switch controls with functional on/off state.

Off
On
Disabled

Cards

Content containers for every context.

Basic Card
This is a basic card with a title and some descriptive text. Cards use surface background, subtle border, and rounded corners.
24.8k
Total Users
+12.4%
Lightning Fast
Built with performance in mind. Every interaction feels instant and responsive.
Pro
$79/mo
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • Custom integrations
  • Team collaboration
JD
Jordan Davis
Senior Designer
1.2k
Followers
284
Following
56
Posts

Tables

Data tables with avatars, badges, and actions.

Name ▲ Role Status Joined Actions
AM
Alex Morgan
Admin Active Jan 12, 2024
SK
Sarah Kim
Editor Active Mar 5, 2024
JW
James Wilson
Viewer Pending Jun 18, 2024
LP
Lisa Park
Admin Active Aug 22, 2024
TC
Tom Chen
Editor Away Oct 3, 2024

Tabs

Underline and pill tab variants with switchable content.

Underline Tabs
Overview
Analytics
Settings
This is the overview panel. It shows a summary of the most important metrics and recent activity.
Analytics data goes here. Track user behavior, conversion rates, and engagement metrics over time.
Configure your preferences, notification settings, and account details in this panel.
Pill Tabs
Overview
Analytics
Settings
Pill-style overview panel with the same content structure but a different tab aesthetic.
Pill-style analytics content. Clean and modern tab navigation for compact UI sections.
Pill-style settings panel. Great for secondary navigation within a page section.

Alerts

Dismissible notification banners.

Information
A new software update is available. Review the changelog for details on the latest improvements.
Success
Your changes have been saved successfully. The new configuration is now active.
Warning
Your storage is almost full. Consider upgrading your plan or removing unused files.
Error
Failed to process your payment. Please check your billing information and try again.

Toasts

Lightweight notification specimens.

Saved
Your profile has been updated.
Upload Failed
File exceeds the 10MB size limit.
Slow Connection
Some features may take longer to load.
Tip
Press ⌘K to open the command palette.

Modals

Overlay dialogs with backdrop blur.

Avatars

Sized initials, status indicators, and groups.

Sizes
AB
AB
AB
AB
AB
Status Indicators
AB
CD
EF
Avatar Group
AB
CD
EF

Progress

Bars, circular indicators, and step progress.

Progress Bars
Circular Progress
65%
82%
45%
Step Progress
Details
2 Payment
3 Review
4 Confirm

Skeleton

Loading placeholders with shimmer animation.

Text
Card
Avatar + Text

Empty States

Placeholder content for empty views.

Nothing here yet
Add your first item to get started.
No results for 'design tokens'
Try different keywords or check your spelling.
Something went wrong
We couldn't load your data. Please try again.

Pagination

Page navigation controls.

Tooltips

Hover to reveal directional tooltips.

Tooltip Top
Tooltip Right
Tooltip Bottom
Tooltip Left

Charts & Data

Interactive visualizations built with vanilla Canvas API, SVG, and CSS — zero external libraries.

Accordion

Collapsible content panels

Design tokens are the smallest pieces of a design system — colors, spacing, typography values stored as variables. They ensure consistency across every component and make theming possible with a single source of truth.

Add the light class to the <html> element to switch to light mode. All CSS custom properties will update automatically through the cascading variable overrides defined in the html.light block.

Yes. Map the CSS custom properties to your Tailwind config's theme.extend section. The token naming convention aligns well with Tailwind's utility-first approach — just reference var(--color-accent) in your custom utilities.

Dark mode is the default. The entire system is built dark-first with light mode as an override. Toggle the light class on <html> to switch between modes — every token updates instantly.

Dividers

Horizontal rules and section separators

Plain Divider

Labeled Divider

OR

Decorative Divider

Vertical Divider

Section A
Section B
Section C

Keyboard

kbd styling and shortcut patterns

Single Keys

⌘ K Esc Enter ⇧ Tab ⌥

Key Combinations

⌘+Shift+P Ctrl+C ⌘+Z

Shortcut Reference

ActionShortcut
Search⌘ K
Save⌘ S
Undo⌘ Z
New File⌘ N
Command Palette⌘ Shift P

File Upload

Upload zones and file states

Drop files here or click to browse PNG, JPG, PDF up to 10MB
design-spec-v2.pdf
2.4 MB
✓
hero-banner.png
8.1 MB
60%
corrupted-file.zip
Upload failed — file too large

Tags & Chips

Multi-select tags and removable chips

Removable Tags

Design Development Marketing Product Research

Tag Input

React TypeScript Figma

Filter Chips

Slider

Range input styling

Volume 65%
Brightness (disabled) 40%
Price Range $20 – $80

Line Chart

Smooth bezier curves with hover tooltips and crosshair

Monthly Revenue
Jan – Aug 2026
2026
2025

Bar Chart

Grouped bars with hover highlights

User Growth
Bi-monthly comparison
Current
Previous

Donut Chart

Interactive segments with hover expansion

Traffic Sources

Area Chart

Gradient fill with smooth curves

Active Users
Last 12 weeks

Sparklines

Inline micro-charts inside stat cards

Revenue
$31.2k ↑+18.4%
Churn
2.4% ↓-0.8%
NPS
72 →+1

KPI Dashboard

Key performance indicators with embedded sparklines

Total Users
24,891 +12.4%
Monthly Revenue
$31,240 +18.2%
Active Sessions
1,847 -3.1%
Avg. Session
4m 32s +0.8%

Gauge Chart

Animated semi-circle gauge with color zones

Performance Score
0
/ 100

Heatmap

Contribution activity — last 15 weeks

Contribution Activity
Last 15 weeks

Timeline

Recent activity with vertical connector

Mar 24, 2026
v73 deployed to production
All 9 QA checks passed
Mar 22, 2026
Security audit passed
16 vulnerabilities fixed
Mar 21, 2026
First real payment
$5.78 purchase confirmed
Mar 18, 2026
novaibot.com went live
DNS migrated, 301 redirects set
Mar 17, 2026
Stripe Connect activated
First $125 payment received

Lists

Simple, icon, and action list variants

Simple List
  • Design tokens automatically cascade through all components
  • Canvas charts re-render on theme toggle without flicker
  • All spacing uses the 4px base grid system
  • Typography scale follows a modular ratio
Icon List
  • Analytics DashboardReal-time metrics and KPI tracking
  • Security AuditAutomated vulnerability scanning
  • Performance MonitorSub-100ms response time targets
  • Goal TrackingOKR alignment and progress visualization
Action List
CN
Cana
Founder & Creative Director
NV
Nova
AI Partner & Lead Builder
CR
Carlos
Senior Developer
RG
Roger
QA Engineer

Images

Aspect ratios, object-fit, captions, grids

Aspect Ratios

1 : 1
Square
16 : 9
Widescreen
4 : 3
Classic
3 : 4
Portrait
21 : 9
Cinematic
9 : 16
Vertical / Story

Radius Variants

img
radius-none
img
radius-md
img
radius-xl
img
radius-full

Image with Caption

Fig. 1 — A sample image caption styled with --color-text-secondary

Image Grid

1
2
3
4

Video

Player styling, thumbnail overlays, video cards

Styled Video Player

Click to play
1:24 / 4:02

Video Cards

4:02
Guard Passing Fundamentals
12.4k views · 3 days ago
7:18
Single Leg X Entry
8.7k views · 1 week ago
11:45
Back Take Mechanics
21.2k views · 2 weeks ago

Icons

Size scale, color usage, icon + label patterns

Size Scale

12px
16px
20px
24px
32px
48px

Icon Colors

primary
secondary
muted
accent
success
warning
error

Icon + Label Patterns

Icon leading (16px, accent)
Icon leading (14px, muted) — secondary label text
Last updated 2 hours ago

Icon Grid — Common UI Icons

home
search
user
settings
bell
trash
edit
plus
mail
lock
eye
star
heart
download
upload
share
copy
link
calendar
clock
map-pin
chart
code
layers