Color Palette
Primary Colors
Primary
#6366f1
--primary
Primary Dark
#4f46e5
--primary-dark
Primary Light
#818cf8
--primary-light
Semantic Colors
Success
#10b981
--success
Warning
#f59e0b
--warning
Gray Scale
Typography
Heading 1 - 36px / Bold
The quick brown fox jumps over the lazy dog
font-size: 36px; font-weight: 700;
Heading 2 - 24px / Bold
The quick brown fox jumps over the lazy dog
font-size: 24px; font-weight: 700;
Heading 3 - 20px / Semibold
The quick brown fox jumps over the lazy dog
font-size: 20px; font-weight: 600;
Body - 14px / Regular
The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.
font-size: 14px; font-weight: 400; line-height: 1.6;
Small - 12px / Regular
The quick brown fox jumps over the lazy dog
font-size: 12px; color: var(--gray-600);
Label - 11px / Semibold / Uppercase
The quick brown fox
font-size: 11px; font-weight: 600; text-transform: uppercase;
Buttons
Button Variants
/* Primary Button */
background: var(--primary);
color: white;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
Status Badges
Approved
Submitted
Draft
Active
On Hold
Archived
.status-badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
Borders & Border Radius
Border Styles
1px solid - Standard border (#e5e7eb)
2px solid - Emphasis border (#6366f1)
Border Radius
border-radius: 4px; /* Small */
border-radius: 8px; /* Buttons, inputs */
border-radius: 12px; /* Cards, modals */
border-radius: 50%; /* Circles */
Shadows
Small Shadow - Subtle elevation
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
Medium Shadow - Standard cards
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Large Shadow - Modals, dropdowns
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
Focus Ring - Input focus state
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
Spacing Scale
4px
8px
12px
16px
20px
24px
32px
/* Common spacing values */
gap: 4px; /* Tight */
gap: 8px; /* Small */
gap: 12px; /* Medium */
gap: 16px; /* Standard */
gap: 24px; /* Large */
gap: 32px; /* Extra large */
Icons
Font Awesome 4.7.0 icon library
fa-home
fa-folder
fa-users
fa-clock-o
fa-check
fa-pencil
fa-trash
fa-plus
fa-image
fa-video-camera
fa-file-text-o
fa-briefcase
Pastel Alert Colors
Eye-Friendly Alert Backgrounds
Success Background
#d1fae5
Warning Background
#fef3c7
Feature Background
#f3e8ff
Progress Bar Gradients
/* Primary Progress */
background: linear-gradient(90deg, #818cf8, #6366f1);
/* Success Progress */
background: linear-gradient(90deg, #6ee7b7, #10b981);
/* Danger Progress */
background: linear-gradient(90deg, #fca5a5, #ef4444);
/* Warning Progress */
background: linear-gradient(90deg, #fcd34d, #f59e0b);
Tag & Chip Colors
Pastel Backgrounds with Hover States
| Color |
Background |
Hover |
Text |
| Indigo |
#e0e7ff |
#c7d2fe |
#4338ca |
| Blue |
#dbeafe |
#bfdbfe |
#1e40af |
| Green |
#d1fae5 |
#a7f3d0 |
#047857 |
| Yellow |
#fef3c7 |
#fde68a |
#b45309 |
| Red |
#fee2e2 |
#fecaca |
#b91c1c |
| Purple |
#f3e8ff |
#e9d5ff |
#7e22ce |
| Pink |
#fce7f3 |
#fbcfe8 |
#be185d |
Component Patterns
Dual List Box
/* Available List Header */
background: var(--gray-50);
border: 1px solid var(--gray-200);
/* Assigned List Header */
background: #e0f2fe;
border: 1px solid #bae6fd;
color: #0c4a6e;
/* Item Hover State */
background: var(--gray-50);
transition: all 0.2s;
Selectable List
/* Header with Actions */
background: var(--gray-50);
padding: 16px;
border-bottom: 1px solid var(--gray-200);
/* List Item */
padding: 12px 16px;
border-bottom: 1px solid var(--gray-200);
cursor: pointer;
transition: all 0.2s;
Transfer List
/* Compact Permission Item */
padding: 10px 12px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--gray-200);
/* Quick Action Button */
padding: 4px 8px;
font-size: 11px;
Loading States
Spinner
width: 40px;
height: 40px;
border: 4px solid var(--gray-200);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
@keyframes spin {
to { transform: rotate(360deg); }
}
Skeleton Loader
height: 20px;
background: var(--gray-200);
border-radius: 4px;
animation: pulse 2s ease-in-out infinite;
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}