Introduction

Page Title

URL Slug

Category

Status

Markdown Editor

# Introduction to Blue Design System

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.

## Key Features

* **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` |

## 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

```html

<link rel="stylesheet" href="design-system.css">

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

> **Important:** Always use design tokens instead of hardcoded colors to ensure consistency and enable theming.

Live Preview

Introduction to Blue Design System

Key Features

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`