Design System
VS Code
Figma
Pencil
Pencil
VS Code
Figma
Pencil
Pencil

A comprehensive collection of reusable UI components built with atomic design principles.

Selected and used for the fitness tracking app Fytforge.

Foundation

The design tokens that power the entire system — colors, typography, spacing, radius, and shadows. Every component is built on top of these tokenized values, ensuring consistency and theme-ability across the product.

Semantic Surfaces

Tokens that map UI roles (background, card, popover, etc.) to actual color values. These adapt automatically when switching themes.

Background
--background
#0F0F0F
Card
--card
#1A1A1A
Popover
--popover
#1A1A1A
Secondary
--secondary
#27272A
Muted
--muted
#27272A
Accent
--accent
#27272A
Sidebar
--sidebar
#18181B
Primary
--primary
#818CF8

Primary Scale

11-step indigo color scale from --primary-50 to --primary-950.

--primary-50
#EEF2FF
--primary-100
#E0E7FF
--primary-200
#C7D2FE
--primary-300
#A5B4FC
--primary-400
#818CF8
--primary-500
#6366F1
--primary-600
#4F46E5
--primary-700
#4338CA
--primary-800
#3730A3
--primary-900
#312E81
--primary-950
#1E1B4B

Success Scale

--success-50
#ECFDF5
--success-100
#D1FAE5
--success-200
#A7F3D0
--success-300
#6EE7B7
--success-400
#34D399
--success-500
#10B981
--success-600
#059669
--success-700
#047857
--success-800
#065F46
--success-900
#064E3B
--success-950
#022C22

Warning Scale

--warning-50
#FFFBEB
--warning-100
#FEF3C7
--warning-200
#FDE68A
--warning-300
#FCD34D
--warning-400
#FBBF24
--warning-500
#F59E0B
--warning-600
#D97706
--warning-700
#B45309
--warning-800
#92400E
--warning-900
#78350F
--warning-950
#451A03

Error Scale

--error-50
#FEF2F2
--error-100
#FEE2E2
--error-200
#FECACA
--error-300
#FCA5A5
--error-400
#F87171
--error-500
#EF4444
--error-600
#DC2626
--error-700
#B91C1C
--error-800
#991B1B
--error-900
#7F1D1D
--error-950
#450A0A

Info Scale

--info-50
#EFF6FF
--info-100
#DBEAFE
--info-200
#BFDBFE
--info-300
#93C5FD
--info-400
#60A5FA
--info-500
#3B82F6
--info-600
#2563EB
--info-700
#1D4ED8
--info-800
#1E40AF
--info-900
#1E3A8A
--info-950
#172554

Neutral Scale

--neutral-50
#FAFAFA
--neutral-100
#F5F5F5
--neutral-200
#E5E5E5
--neutral-300
#D4D4D4
--neutral-400
#A3A3A3
--neutral-500
#737373
--neutral-600
#525252
--neutral-700
#404040
--neutral-800
#262626
--neutral-900
#171717
--neutral-950
#0A0A0A

Activity Tokens

Domain-specific tokens for the FytForge product. Each represents a workout category or achievement type.

Strength
--color-strength
#DC2626
Cardio
--color-cardio
#EC4899
Flexibility
--color-flexibility
#A855F7
Recovery
--color-recovery
#06B6D4
Energy
--color-energy
#F97316
Streak
--color-streak
#FBBF24
Personal Record
--color-pr
#FDE047

Typography

Two font families: --font-primary (Poppins) for UI text and --font-mono (JetBrains Mono) for code.

Display
--text-5xl48px / Bold
Heading 1
--text-4xl36px / Bold
Heading 2
--text-3xl30px / Semibold
Heading 3
--text-2xl24px / Semibold
Heading 4
--text-xl20px / Semibold
Heading 5
--text-lg18px / Medium
Body Default
--text-base16px / Normal
Body Small
--text-sm14px / Normal
Caption / Overline
--text-xs12px / Medium
const x = 'mono'
--font-monoJetBrains Mono

Spacing

Spacing scale used for padding, margin, and gap properties throughout the system.

--spacing-xs4px
--spacing-sm8px
--spacing-md16px
--spacing-lg24px
--spacing-xl32px
--spacing-2xl48px
--spacing-3xl64px

Border Radius

Corner radius scale from sharp edges to fully rounded.

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

Shadows / Elevation

Elevation system for layering UI elements like cards, dropdowns, and modals.

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-glow

Atoms

The fundamental building blocks of the design system - buttons, inputs, badges, and other basic elements.

Buttons

Button Variants
Tokens --primary --secondary --border --destructive --radius-full --font-primary
Classes .btn .btn-primary .btn-secondary .btn-outline .btn-ghost .btn-danger
Button Sizes
Classes .btn .btn-primary .btn-sm .btn-lg
With Icons
Classes .btn .btn-primary .btn-secondary
States
Classes .btn .btn-primary

Icon Buttons

Icon Button Variants
Tokens --secondary --primary --destructive --radius-full
Classes .btn-icon .btn-icon-sm .btn-icon-lg

Form Inputs

Tokens --input --secondary --border --ring --radius-md --text-base --font-primary
Text Input
Classes .input-group .input-label .input
With Error
Classes .input-group .input-label .input .input-error
Select
Classes .input-group .input-label .input .select
Textarea
Classes .input-group .input-label .input .textarea
Checkbox
Classes .checkbox-wrapper .checkbox
Radio
Classes .radio-wrapper .radio

Toggles & Controls

Toggle Switches
Tokens --secondary --primary-btn --radius-full
Classes .toggle .active

Badges

Badge Variants
Default Primary Success Warning Error Info
Tokens --success-bg --warning-bg --error-bg --info-bg --radius-full --text-sm
Classes .badge .badge-default .badge-primary .badge-success .badge-warning .badge-error .badge-info

Avatars

Avatar Sizes
JD
JD
JD
AB
CD
Tokens --primary-btn --radius-full --font-weight-semibold
Classes .avatar .avatar-sm .avatar-lg

Progress Bars

Default Progress
Classes .progress .progress-bar
Success
Classes .progress .progress-success .progress-bar
Warning
Classes .progress .progress-warning .progress-bar
Error
Classes .progress .progress-error .progress-bar

Icons

Icon Set (Lucide)
home
user
settings
search
plus
check
x
menu
bell
heart
star
calendar
mail
phone
map-pin
clock
edit
trash
download
upload
dumbbell
activity
trophy
target
flame
trending-up
zap
coffee
Classes .icon-grid .icon-item

Tags

Tag Variants
Default Active Completed Failed Pending Outline
Tokens --color-success --color-warning --color-error --radius-full --text-sm
Classes .tag .tag-default .tag-primary .tag-success .tag-error .tag-warning .tag-outline

Status Indicators

Status Dots
Online Offline Busy Away Do Not Disturb
Tokens --success-400 --warning-400 --error-400 --muted-foreground
Classes .status-dot .status-online .status-offline .status-busy .status-away .status-dnd

Feedback & Loading

Tooltip
Tooltip text
Classes .tooltip
Spinner
Classes .spinner
Skeleton
Classes .skeleton .skeleton-text

Separators & Dividers

Plain Separator
Classes .separator
Labeled Divider
or continue with
Classes .divider-labeled
Icon Divider
Classes .divider-icon

Keyboard & Code

Kbd, Combo & Inline Code
⌘ ⌘+K Ctrl+Shift+P npm install const x = 42
Classes .kbd .kbd-combo .kbd-sep .code-inline

Avatars (Extended)

XL Avatar
JD
AB
Classes .avatar-xl
Avatar Group
A
B
C
+3
Classes .avatar-group .avatar .avatar-sm .avatar-count

Progress Ring

Circular Progress
75%
50%
90%
Classes .progress-ring .progress-ring-bg .progress-ring-fill .progress-ring-label

Links

Link Variants
Link text Learn more Download file
Classes .link

Color Palette

Brand & Semantic Colors
Primary#A5B4FC
Background#0F0F0F
Card#1A1A1A
Success#4ADE80
Warning#FBBF24
Error#F87171
Info#60A5FA
Classes .color-swatch .color-swatch-square .color-swatch-name .color-swatch-hex

Metric Delta

Trending Indicators
+12.5% -3.2% 0.0%
Classes .metric-delta .metric-up .metric-down .metric-neutral

Rating

Full / Partial Stars
Classes .rating .star-filled .star-empty
Rating with Label
4.0 (128 reviews)
Classes .rating-label .rating .star-filled .star-empty .rating-score .rating-count

Tab Variants

Underline Tabs
Classes .tabs-underline .tab-underline .active
Vertical Tabs
Classes .tabs-vertical .tab-vertical .active

Molecules

Combinations of atoms that form more complex, reusable UI patterns.

Form Groups

Search Input
Classes .search-input
Input with Button
Classes .input-with-btn .btn .btn-primary

List Items

Basic List Item
Document.pdf 2.4 MB
Classes .list-item .badge .badge-default
User List Item
JD
John Doe john@example.com
Classes .list-item .avatar .avatar-sm .list-item-content .list-item-title .list-item-subtitle .btn-icon .btn-icon-sm

Cards

Tokens --card --card-foreground --border --radius-lg --spacing-lg --shadow-md

Card Title

Card description goes here

Card content with some example text to show the layout.

Classes .card .card-header .card-title .card-desc .card-content .card-footer .btn .btn-ghost .btn-sm .btn-primary
Total Revenue
$45,231
+12.5% from last month
Classes .stat-card .stat-card-header .stat-card-label .stat-card-value .stat-card-change .positive
Active Users
2,845
-3.2% from last week
Classes .stat-card .stat-card-header .stat-card-label .stat-card-value .stat-card-change .negative

Alerts

Tokens --success-bg --error-bg --warning-bg --info-bg --radius-md --spacing-md
Success
Your changes have been saved successfully.
Classes .alert .alert-success .alert-content .alert-title .alert-desc
Error
Something went wrong. Please try again.
Classes .alert .alert-error .alert-content .alert-title .alert-desc
Warning
Your session will expire in 5 minutes.
Classes .alert .alert-warning .alert-content .alert-title .alert-desc
Information
A new version is available for download.
Classes .alert .alert-info .alert-content .alert-title .alert-desc

Tabs

Tab Navigation
Classes .tabs-container .tabs .tab .active
Pill Tabs
Classes .tabs-container .tabs .tabs-pills .tab .active

Breadcrumb

Breadcrumb Navigation
Home Settings Profile
Classes .breadcrumb .breadcrumb-item .breadcrumb-sep .current

Stat Cards (Small)

Compact Stat Card
Calories Burned 2,847
Classes .stat-card-small .stat-card-small-content .stat-card-small-label .stat-card-small-value .stat-card-small-icon
With Different Icon
Total Workouts 47
Classes .stat-card-small .stat-card-small-content .stat-card-small-label .stat-card-small-value .stat-card-small-icon

User Profile

Default Profile
Classes .user-profile .avatar .user-profile-info .user-profile-name .user-profile-sub
With Status
Classes .user-profile .user-profile-status .avatar .user-profile-status-dot .user-profile-info .user-profile-name .user-profile-badge-tag
Compact
Classes .user-profile-compact .avatar .avatar-sm

Notification Items

Unread
Workout Complete 2m ago
You've completed your chest & triceps session.
Classes .notif-item .unread .notif-item-icon .notif-item-content .notif-item-header .notif-item-title .notif-item-time .notif-item-desc .notif-item-dot
Read
Achievement Unlocked 1h ago
7-day workout streak. Keep it up!
Classes .notif-item .notif-item-icon .notif-item-content .notif-item-header .notif-item-title .notif-item-time .notif-item-desc

File Upload

Drag & Drop Upload Zone
Drag & drop files here or click to browse (max 10MB)
Classes .file-upload .file-upload-title .file-upload-desc .file-upload-btn

Specialized Inputs

Slider
Weight (kg) 75
Classes .slider-component .slider-header .slider-label-text .slider-value .slider-track .slider-fill .slider-thumb
Number Stepper
3
Classes .number-stepper .number-stepper-btn .number-stepper-value
Date Field
2026-04-03
Classes .date-field .date-field-input
Time Field
09:30 AM
Classes .time-field .time-field-input

Tree Navigation

Tree Items
Workout Plans
Exercises
Bench Press
Squat
Deadlift
Classes .tree-item .tree-item-chevron .tree-item-icon .open .leaf

Navigation Items

Nav Item with Badge
Inbox 12
Notifications 3
Classes .nav-item-badge .nav-item-badge-left .nav-item-badge-count

Step Indicators

Step States
Personal Info
2
Fitness Goals
3
Confirm
Classes .step-indicator .step-complete .step-circle .step-label .step-active .step-pending

Toggle Groups

Text Toggle Group
Classes .toggle-group .toggle-group-item .active
Icon Toggle Group
Classes .toggle-group .toggle-group-icon .toggle-group-item .active

Chat Bubbles

Sent Message
Just finished my leg day workout! 💪
2:30 PM
Classes .chat-sent .bubble .chat-time
Received Message
T
Great job! How many sets did you do?
2:32 PM
Classes .chat-received .chat-avatar .chat-body .bubble .chat-time

Activity Feed

Activity Items
Jake burned 450 calories during HIIT session 30 min ago
Sarah unlocked "7-Day Streak" achievement 1 hour ago
Classes .activity-item .activity-icon .activity-content .activity-text .activity-meta

Timeline

Vertical Timeline
Workout Completed 2:30 PM Upper Body Strength — 45 min, 380 cal
Achievement Unlocked 1:00 PM 7-day workout streak!
Evening Run 6:00 PM Scheduled for later today
Classes .timeline .timeline-item .timeline-dot .timeline-content .timeline-title .timeline-time .timeline-desc .pending

Empty State (Inline)

No Results Found
No results found Try adjusting your filters
Classes .empty-state-inline .empty-state-inline-title .empty-state-inline-desc

Organisms

Complex UI components composed of multiple molecules working together.

Navigation Bar

Classes .navbar-demo .navbar-brand .navbar-links .navbar-link .active .navbar-actions .btn .btn-ghost .btn-sm .btn-primary

Sidebar

Tokens --sidebar --sidebar-foreground --sidebar-border --sidebar-accent --sidebar-accent-foreground
Classes .sidebar-demo .sidebar-header .sidebar-nav .sidebar-link .active .sidebar-divider .sidebar-footer .avatar .avatar-sm .sidebar-user .sidebar-user-name .sidebar-user-email

Data Table

Name Email Status Role Actions
JD
John Doe
 john@example.com Active Admin
JS
Jane Smith
 jane@example.com Pending Editor
BJ
Bob Johnson
 bob@example.com Inactive Viewer
Showing 1-3 of 24 results
Classes .table-demo .table-header .search-input .btn .btn-primary .btn-sm .table-wrapper .table .checkbox .table-user .avatar .avatar-sm

Modal

Click to open modal
Classes .btn .btn-primary

Dropdown Menu

Click to toggle
Profile Settings Help
Log Out
Classes .dropdown-container .btn .btn-secondary .dropdown-menu .dropdown-item .dropdown-divider .text-error

Toast Notifications

Changes saved successfully!
Classes .toast .toast-success .toast-close
Failed to save changes
Classes .toast .toast-error .toast-close

Accordion

This is a comprehensive collection of reusable UI components built with atomic design principles. It includes atoms, molecules, organisms, and templates.

Simply copy the HTML structure and CSS classes to use any component in your project. All styles are included in this single file.

Yes! All components are built with responsive design in mind and will adapt to different screen sizes.

Classes .accordion .accordion-item .active .accordion-header .accordion-content

Toolbar

Action Toolbar
Classes .toolbar .toolbar-left .search-input .toggle-group .toggle-group-icon .toggle-group-item .active .toolbar-right .btn .btn-outline .btn-sm .btn-primary

Filter Bar

Active Filters
Filters: Strength This Week Active Clear all
Classes .filter-bar .filter-bar-label .tag .tag-primary .filter-bar-clear

Page Header

Page Header with Actions
Home Dashboard
Dashboard Welcome back, here's your overview.
Classes .page-header-org .page-header-org-content .breadcrumb .breadcrumb-item .breadcrumb-sep .current .page-header-org-title .page-header-org-desc .page-header-org-actions .btn .btn-outline .btn-primary

Feature Cards

Feature Showcase
Lightning Fast Built for speed and performance. Everything loads instantly.
Secure Your data is protected with enterprise-grade encryption.
Analytics Deep insights into your journey and progress.
Classes .feature-card .feature-card-icon .feature-card-title .feature-card-desc

Empty State

Full Empty State
No items found Get started by creating your first item.
Classes .empty-state-full .empty-state-full-icon .empty-state-full-title .empty-state-full-desc .btn .btn-primary

Command Palette

Searchable Command Menu
Settings ⌘,
Open File ⌘O
Search ⌘K
Profile ⌘P
Classes .command-palette .command-palette-search .search-input .command-palette-results .command-item .active .shortcut

Notification Panel

Notification Drawer
Notifications 3
Workout Complete2m ago
Chest & triceps session done!
Achievement Unlocked1h ago
7-day workout streak!
View all notifications
Classes .notification-panel .notification-panel-header .notification-panel-title .badge .badge-default .btn-icon .btn-icon-sm .notification-panel-body .notif-item .unread .notif-item-icon .notif-item-content

Wizard Stepper

Multi-Step Form Progress
Account
2
Profile
3
Goals
4
Confirm
Classes .wizard-stepper .wizard-step .complete .wizard-circle .wizard-label .wizard-line .done .active .todo .pending

Pricing Cards

Tokens --card --primary --success --shadow-glow --radius-lg --spacing-lg
Subscription Plans
Basic
$9/mo
Perfect for getting started
5 Workout Plans
Basic Analytics
Community Access
MOST POPULAR
Pro
$19/mo
For serious athletes
Unlimited Plans
Advanced Analytics
Priority Support
AI Coaching
Elite
$39/mo
All features unlocked
Everything in Pro
1-on-1 Coaching
Custom Meal Plans
Classes .pricing-cards .pricing-card .pricing-header .pricing-plan-name .pricing-price .pricing-plan-desc .pricing-features .pricing-feature .pricing-card-footer .btn .btn-outline .featured

Calendar & Workout Cards

Calendar Week
Mon31
Tue1
Wed2
Thu3
Fri4
Sat5
Sun6
Classes .calendar-week .calendar-day .calendar-day-name .calendar-day-num .active
Workout Card
Push Day
Chest, Shoulders, Triceps
Intermediate
45min
12exercises
380cal
Start Workout
Classes .workout-card .workout-card-top .workout-card-info .workout-card-icon .workout-card-name .workout-card-muscles .tag .tag-success .workout-card-stats .workout-stat .workout-stat-num .workout-stat-unit

Confirm Dialog

Destructive Action Confirmation
Delete Workout? This action cannot be undone. This will permanently delete your workout data.
Classes .confirm-dialog .confirm-dialog-body .confirm-dialog-icon .confirm-dialog-title .confirm-dialog-desc .confirm-dialog-footer .btn .btn-outline .btn-danger

Banners

System Banners
Classes .banner .banner-info .banner-content .banner-text .banner-title .banner-desc .banner-close .banner-success .banner-warning

Charts

Charts, graphs, and visual data representations.

Sparkline Up
+12.5%
Classes .sparkline-container .sparkline .sparkline-up .sparkline-value .positive
Sparkline Down
-8.3%
Classes .sparkline-container .sparkline .sparkline-down .sparkline-value .negative
Donut Chart
Sales 40% Marketing 30% Other 30%
Classes .donut-container .donut-chart .donut-bg .donut-segment .seg-1 .seg-2 .seg-3 .donut-legend .legend-item .legend-dot
Bar Chart
Mon
65%
Tue
85%
Wed
45%
Thu
75%
Fri
90%
Classes .bar-chart .bar-chart-row .bar-label .bar-track .bar-fill .bar-value

Templates

Pre-built page layouts combining multiple organisms.

Dashboard Layout Preview

Form Layout Preview

Profile Page Layout

Jake Morrison
@jakemorrison
247
Workouts
18.5K
Calories
32
Day Streak
89
Followers

Analytics Page Layout

Analytics Dashboard
Track your progress over time
Total Workouts 47 +8.2%
Calories Burned 14,280 +12.5%
Avg Duration 42 min -2.1%

Settings Page Layout

Settings
Manage your account and preferences
Workout Reminders Get notified before scheduled workouts
Goal Progress Updates on your fitness goals
Weekly Summary Weekly digest of your activity

FytForge Example

A fully functional fitness tracking application built using the design system components above.

Full Screen