Blue Design System
A modern, accessible design system optimized for dark mode with beautiful blue color palettes and gradients
Color Palette
Our blue-focused color system designed for both light and dark themes
Buttons
Versatile button components with multiple variants and states
Button Variants
Button Sizes
Form Components
Clean, accessible form inputs with validation states
Login Form
Form States
Cards
Flexible card layouts for content organization
Feature Card
Showcase your features
This is a standard card component perfect for displaying feature information, product details, or any structured content.
Dashboard Widget
Perfect for dashboard widgets and data visualization components.
User Profile
John Doe
Software Developer
Modal
Modal dialogs for confirmations and forms
Confirm Action
Are you sure you want to proceed with this action? This cannot be undone.
Layout System
Flexible grid and utility classes for responsive layouts
Basic CSS Grid
Grid with Spanning
Responsive Grid (Resize to see effect)
Mobile: 1 col
Stacks vertically
Tablet: 2 cols
Side by side
Desktop: 4 cols
Full grid layout
Responsive
Adapts automatically
Dashboard Layout
Flexbox Utilities
Card Grid Layout
Perfect for product grids, image galleries, or feature showcases
Feature One
Beautiful gradient backgrounds with modern styling
Feature Two
Responsive grid system that adapts to any screen
Feature Three
Clean design system with consistent spacing
Template Examples
Explore real-world templates built with the Blue Design System
Blog Template
Modern blog layout with article cards, sidebar navigation, and author profiles. Includes admin dashboard for content management.
Photo Gallery
Responsive image gallery with lightbox, filtering, and statistics. Features bulk upload and image management tools.
Wiki Documentation
Documentation site with sidebar navigation, search functionality, and breadcrumbs. Includes markdown editor for content creation.
Build Your Own
Each template demonstrates different aspects of the design system. Use them as starting points for your own projects or reference implementations.
Typography
Hierarchical text styles with proper contrast ratios
Heading 1
Heading 2
Heading 3
Heading 4
Large text for important content
Default paragraph text with good readability
Small text for secondary information
Muted text for less important content
Bold text and italic text for emphasis
inline code styling