Explore the next generation of our design system with updated colors and typography. This showcases the proposed new color palette and enhanced typography scale.
Semantic color system with optimized light and dark theme variants
Primary brand color for main UI elements
#1d65af#2176ccSecondary color for complementary elements
#4cb0e4#60b8e7Success state indicators
#2d7d32#38983dError and danger states
#d63535#e64646Warning state indicators
#f9a825#ffb74dInformational elements
#0188d1#29b6f6Neutral UI elements
#717171#9e9e9eComprehensive type system using Poppins font family with clear hierarchy
Hero headlines, major page titles
4.5rem1700Section headlines, large displays
3.75rem1700Card titles, prominent text
3rem1.2600Page headings, main sections
2.25rem1.2600Subsection headings
1.875rem1.3600Component headings
1.5rem1.4500Small headings, labels
1.25rem1.5500Lead paragraphs, introductions
1.125rem1.6400Default body text, descriptions
1rem1.6400Secondary text, captions
0.875rem1.5400Labels, metadata, fine print
0.75rem1.44004pt grid-based spacing system for consistent layouts and component spacing
Border widths, fine adjustments
4px0.25remSmall gaps, compact spacing
8px0.5remText spacing, small margins
12px0.75remDefault spacing, component padding
16px1remMedium spacing, button padding
20px1.25remLarge component spacing
24px1.5remSection spacing, large gaps
32px2remLayout spacing, large margins
40px2.5remSection padding, major spacing
48px3remPage sections, hero spacing
64px4remLarge sections, major layouts
80px5remPage-level spacing
96px6remMaximum spacing, special layouts
128px8remResponsive 12-column grid system with consistent breakpoints and spacing
Mobile phones (< 480px)
0px100%Small tablets (≥ 480px)
480px480pxTablets (≥ 768px)
768px768pxLaptops (≥ 1024px)
1024px1024pxDesktops (≥ 1280px)
1280px1280pxLarge screens (≥ 1536px)
1536px1536px0px | 0rem4px | 0.25rem8px | 0.5rem16px | 1rem24px | 1.5rem32px | 2rem48px | 3rem.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }
/* Responsive breakpoints */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.flex-1 { flex: 0 0 8.333333%; }
.flex-2 { flex: 0 0 16.666667%; }
.flex-3 { flex: 0 0 25%; }
.flex-4 { flex: 0 0 33.333333%; }
.flex-6 { flex: 0 0 50%; }
.flex-8 { flex: 0 0 66.666667%; }
.flex-9 { flex: 0 0 75%; }
.flex-12 { flex: 0 0 100%; }
/* Responsive adjustments */
@media (max-width: 768px) {
.flex-1, .flex-2, .flex-3,
.flex-4, .flex-6, .flex-8,
.flex-9 {
flex: 0 0 100%;
}
}<!-- Container with 12-column grid -->
<div class="grid grid-cols-12 gap-4 max-w-7xl mx-auto px-4">
<!-- Full width header -->
<header class="col-span-12 bg-blue-500 p-4">
Header Content
</header>
<!-- Sidebar (3 columns) -->
<aside class="col-span-3 bg-gray-200 p-4">
Sidebar
</aside>
<!-- Main content (9 columns) -->
<main class="col-span-9 bg-gray-100 p-4">
Main Content
</main>
<!-- Responsive product grid -->
<section class="col-span-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="bg-white p-4 rounded-lg">Product 1</div>
<div class="bg-white p-4 rounded-lg">Product 2</div>
<div class="bg-white p-4 rounded-lg">Product 3</div>
<div class="bg-white p-4 rounded-lg">Product 4</div>
</div>
</section>
</div>
<!-- Responsive classes -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Automatically responsive grid -->
</div>Consistent corner rounding system with 6px as the standard radius
Sharp corners, no rounding
0px0remSubtle rounding for small elements
4px0.25remStandard rounding (system default)
6px0.375remProminent rounding for larger elements
8px0.5remStrong rounding for cards and containers
12px0.75remVery rounded corners for special elements
16px1remCircular elements, pills, badges
9999px9999pxLayered shadow system to create depth and visual hierarchy
Flat elements, disabled states
noneSubtle depth for small elements
0 1px 2px 0 rgba(0, 0, 0, 0.05)Standard elevation for components
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)Elevated components, hover states
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)High elevation for important elements
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)Maximum elevation for overlays
0 25px 50px -12px rgba(0, 0, 0, 0.25)Dynamic gradient system that brings energy and movement to the interface
Combines Energy Blue and Breakthrough Orange for dynamic, energetic elements
Combines Flow Teal with Energy Blue for smooth, calming transitions
Rich blend of Energy Blue shades for primary actions and focus states
Warm blend of Breakthrough Orange shades for emphasis and calls-to-action
Consistent timing and easing for smooth, purposeful motion design
Quick interactions, micro-animations
150msStandard transitions, hover effects
200msComplex animations, page transitions
300msEmphasized animations, loading states
500msConstant speed, loading indicators
linearStarting slow, accelerating
cubic-bezier(0.4, 0, 1, 1)Starting fast, decelerating
cubic-bezier(0, 0, 0.2, 1)Smooth start and end
cubic-bezier(0.4, 0, 0.2, 1)Playful, attention-grabbing
cubic-bezier(0.68, -0.55, 0.265, 1.55)Uses mw-progressive-focus with brand gradients
Uses mw-float animation with Energy gradient
Uses mw-btn-primary with shine effect
Uses mw-flow-transition for smooth movement
Uses mw-diagonal-card for subtle rotation
Uses mw-bounce-transition for playful interaction
Systematic layering scale to manage component stacking order and prevent z-index conflicts.
Base level, no elevation
0Above base content
10Slightly elevated elements
20Moderately elevated elements
30Highly elevated elements
40Maximum content elevation
50Default stacking, follows document flow
autoDropdown menus, select options
1000Sticky headers, navigation
1020Fixed position elements
1030Modal backdrop overlay
1040Modal dialogs, overlays
1050Popovers, floating content
1060Tooltips, contextual help
1070Toast notifications, alerts
1080WCAG-compliant focus indicators with consistent styling across all interactive elements.
Remove focus indicator
0 0 0 0px transparentSubtle focus ring
0 0 0 1px var(--focus-color)Standard focus ring
0 0 0 2px var(--focus-color)Prominent focus ring
0 0 0 3px var(--focus-color)High contrast focus ring
0 0 0 4px var(--focus-color)Primary actions, default focus
#3b82f6Success states, positive actions
#10b981Warning states, caution required
#f59e0bDanger states, destructive actions
#ef4444Info states, neutral information
#06b6d4No offset from element
0pxMinimal offset
1pxStandard offset
2pxComfortable offset
4pxConsistent icon sizing and stroke weight system for optimal visual hierarchy and accessibility.
Tiny icons in dense layouts
12pxSmall icons in compact components
16pxStandard icon size for most use cases
20pxLarge icons for emphasis
24pxExtra large icons for hero sections
32pxOversized icons for major features
48pxDelicate, minimal icon style
1pxStandard stroke weight
1.5pxBold, prominent icon style
2pxMaximum weight for high contrast
2.5pxConsistent interactive feedback and timing tokens for seamless user experiences.
Mouse hover interactions
0.81.02all 0.2s ease-outActive press/click state
0.90.98all 0.1s ease-inKeyboard focus state
0 0 0 2px var(--focus-color)noneVisible focus for keyboard navigation
0 0 0 2px var(--focus-color)noneDisabled/non-interactive state
0.5not-allowedLoading/processing state
0.7waitImmediate state changes
0msQuick micro-interactions
100msStandard interaction timing
200msDeliberate, noticeable changes
300msEmphasized transitions
500msWCAG-compliant tokens ensuring inclusive design with proper contrast ratios and accessible interactions.
WCAG AA for normal text (18px+)
4.5:1WCAG AA for large text (24px+)
3:1WCAG AAA for normal text
7:1WCAG AAA for large text
4.5:1Respect user motion preferences
prefers-reduced-motion: reduceNormal motion for users who allow it
prefers-reduced-motion: no-preferenceMinimum readable text size
16pxComfortable reading size
18pxLarge text for accessibility
20px:root {
/* Colors */
--color-primary: #1d65af;
--color-secondary: #4cb0e4;
--color-success: #2d7d32;
--color-danger: #c52828;
--color-warning: #f9a825;
--color-info: #0188d1;
--color-neutral: #717171;
/* Spacing (4pt grid) */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-4: 1rem; /* 16px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
/* Border Radius */
--radius-none: 0px;
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px - Standard */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-full: 9999px;
/* Elevation */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Animation */
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
--color-primary: #2176cc;
--color-secondary: #60b8e7;
/* ... dark variants */
}<!-- Color examples -->
<button class="bg-primary text-white">
Primary Button
</button>
<button class="bg-success text-white">
Success Button
</button>
<!-- Spacing examples -->
<div class="p-4 mb-6 space-y-2">
Component with 4pt grid spacing
</div>
<div class="px-6 py-8">
Section with larger spacing
</div>
<!-- Border radius examples -->
<button class="rounded-md bg-primary text-white px-4 py-2">
Standard 6px radius
</button>
<div class="rounded-lg p-4 bg-gray-100">
Card with larger radius
</div>
<!-- Shadow examples -->
<div class="shadow-md bg-white p-4 rounded-lg">
Card with medium elevation
</div>
<div class="shadow-lg bg-white p-6 rounded-lg">
Modal with high elevation
</div>
<!-- Animation examples -->
<button class="transition-all duration-fast ease-out
hover:bg-blue-600 hover:shadow-md">
Quick hover animation
</button>
<div class="transition-transform duration-slow ease-in-out
hover:scale-105">
Smooth transform animation
</div>