---
title: "Bloom Design System: Themes, Color Presets & Tokens"
description: "Specification for Bloom's 8 design presets (Nova, Vega, Maia, Lyra, Mira, Luma, Sera, Rhea), radius scale, motion curves, and ThemeExtension tokens."
category: "Design System"
url: "https://bloom-platform-ten.vercel.app/themes"
last_updated: "2026-08-15"
---

# Bloom Themes & Token Specification

> Bloom provides an opinionated, multi-theme architecture powered by Flutter's official `ThemeExtension` API.

---

## 🎨 8 Built-in Style Presets

Bloom includes 8 calibrated aesthetic presets with synchronous light and dark modes:

1. **Nova (Default)**: Modern, refined enterprise palette featuring rich indigo accents, high-contrast surfaces, and subtle slate borders.
2. **Vega**: Futuristic cyber aesthetic with electric violet accents, deep obsidian dark mode, and neon glow indicators.
3. **Maia**: Minimalist Nordic design with balanced neutrals, warm grays, and soft charcoal contrast.
4. **Lyra**: Vibrant, punchy coral and rose palette crafted for consumer and social experiences.
5. **Mira**: Crisp oceanic cyan and teal palette optimized for fintech, analytics, and data-dense dashboards.
6. **Luma**: High-contrast, accessibility-first monochrome palette with sharp contrast ratios exceeding WCAG AAA standards.
7. **Sera**: Warm amber and golden dusk palette with earthy undertones.
8. **Rhea**: Emerald and mint palette tailored for health, ecology, and productivity applications.

---

## 📐 Token Scales

### 1. Border Radius Scale (`context.bloomRadius`)
- `none`: `0.0`
- `xs`: `2.0`
- `sm`: `4.0`
- `md`: `6.0` (Default component radius)
- `lg`: `8.0` (Card & dialog radius)
- `xl`: `12.0` (Sheet & drawer radius)
- `xxl`: `16.0`
- `full`: `9999.0` (Pills, badges & avatars)

### 2. Motion & Animation Scale (`BloomMotion`)
- `fast`: `Duration(milliseconds: 150)` — Spring curve for button presses and toggles.
- `normal`: `Duration(milliseconds: 250)` — `Curves.easeOutCubic` for dialogs, popovers, and accordions.
- `slow`: `Duration(milliseconds: 400)` — `Curves.easeInOutCubic` for page transitions and drawer sliding.

### 3. Surface & Color Hierarchy (`context.bloomColors`)
- `surface0`: Base background canvas (Light: `#FFFFFF`, Dark: `#000000`)
- `surface1`: Elevated cards, popovers, and modals (Light: `#F8FAFC`, Dark: `#050505`)
- `surface2`: Secondary containers, inputs, and dropdown panels (Light: `#F1F5F9`, Dark: `#0A0A0A`)
- `border`: Structural stroke lines (Light: `#E2E8F0`, Dark: `#262626`)
- `primary`: Active brand accent (Light: `#4F46E5`, Dark: `#6366F1`)
- `destructive`: Soft error and deletion tint (Light: `#EF4444`, Dark: `#F87171`)
- `ring`: Focus indicator ring for keyboard accessibility (Light: `#6366F1`, Dark: `#818CF8`)

---

## 💻 Dart Code Usage

```dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Themed Bloom App',
      theme: ThemeData(
        brightness: Brightness.light,
        extensions: const [BloomTheme.novaLight],
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        extensions: const [BloomTheme.novaDark],
      ),
      home: const HomeScreen(),
    ),
  );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Access design tokens directly on BuildContext
    final colors = context.bloomColors;
    final radius = context.bloomRadius;

    return Scaffold(
      backgroundColor: colors.surface0,
      body: Container(
        decoration: BoxDecoration(
          color: colors.surface1,
          borderRadius: BorderRadius.circular(radius.md),
          border: Border.all(color: colors.border),
        ),
        padding: const EdgeInsets.all(16),
        child: Text(
          'Hello Bloom Theming!',
          style: TextStyle(color: colors.textPrimary),
        ),
      ),
    );
  }
}
```