Blue Design System

Introduction to Blue Design System

Last updated: March 15, 2024 • 5 min read • Version 1.0.0

Blue Design System is a modern, accessible design system optimized for dark mode interfaces. It provides a comprehensive set of design tokens, components, and utilities for building beautiful web applications.

💡 Quick Tip

This design system is built with CSS custom properties, making it easy to theme and customize for your specific needs.

Key Features

Blue Design System offers several key advantages for modern web development:

  • Dark Mode Optimized: Beautiful gradients and shadows designed for dark interfaces
  • Accessibility First: WCAG 2.1 AA compliant with proper contrast ratios
  • Token-Based Architecture: Consistent design tokens for scalable design
  • Modern CSS: Uses CSS Grid, Flexbox, and custom properties
  • Responsive Design: Mobile-first approach with flexible breakpoints

Color Palette

The design system features a carefully curated blue-focused color palette:

Color Usage CSS Variable
Primary Blue Main brand color, CTAs --color-primary-500
Secondary Cyan Accents, highlights --color-secondary-500
Success Green Success states --color-success-500
Warning Orange Warning states --color-warning-500
Error Red Error states --color-error-500

Usage Examples

Here's how to use the color tokens in your CSS:

.my-component {
  background-color: var(--color-primary-500);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-primary-600);
}
⚠️ Important

Always use design tokens instead of hardcoded colors to ensure consistency and enable theming.

Getting Started

To start using Blue Design System in your project:

  1. Include the CSS file in your HTML
  2. Apply the theme data attribute
  3. Start using components and utilities
<!-- Include the design system -->
<link rel="stylesheet" href="design-system.css">

<!-- Apply dark theme -->
<body data-theme="dark">
  <button class="btn btn--primary">Get Started</button>
</body>

Next Steps

Now that you understand the basics, explore these sections: