Define corporate color palettes based on Catppuccin warm tones with light/dark mode conventions. Trigger: When defining brand colors, creating theme systems, or implementing light/dark modes.
Warm tones only. Bastet is a pet care platform — the brand must feel warm, inviting, and trustworthy. Cold blues/purples are explicitly avoided for primary and secondary roles.
Based on Catppuccin flavors:
| Role | Catppuccin Name | Light (Latte) | Dark (Mocha) | Usage |
|---|---|---|---|---|
| Primary | Maroon | #E64553 | #EBA0AC |
| CTAs, buttons, links, focus rings |
| Secondary | Flamingo | #DD7878 | #F2CDCD | Badges, tags, supporting elements |
| Emphasis | Peach | #FE640B | #FAB387 | Hover states, highlights, accents |
| Warm info | Rosewater | #DC8A78 | #F5E0DC | Informational, subtle accents |
| Color | Reason |
|---|---|
| Blue, Sapphire | Too cold, corporate feel |
| Lavender, Mauve | Purple is cold, doesn't match pet care warmth |
| Teal | Cold, clinical |
| Green | Reserved for semantic "success" only |
| Category | Purpose | Usage |
|---|---|---|
| Primary | Main brand actions (CTA, links, focus states) | Buttons, active states, primary actions |
| Secondary | Supporting elements, less prominent actions | Badges, tags, secondary buttons |
| Accent | Emphasis, highlights, notifications | Alerts, highlights, important info |
| Surface | Backgrounds, containers | Cards, modals, panels |
| Text | Typography hierarchy | Body text, headings, labels |
| Border | Dividers, outlines | Separators, input borders |
All color token definitions (primary, secondary, accent, surface, text, border) for both light and dark modes:
Reference: mobile/lib/app/theme/app_colors.dart
// Access via Forui theme
final colors = context.theme.colors;
colors.primary; // Maroon
colors.secondary; // Flamingo
| Element | Light Mode | Dark Mode |
|---|---|---|
| Text on backgrounds | Dark text on light surfaces | Light text on dark surfaces |
| Primary actions | High contrast (Maroon #E64553 on Base #eff1f5) | Softer contrast (Maroon #EBA0AC on Base #1e1e2e) |
| Borders | Subtle, darker than background | Subtle, lighter than background |
| Hover states | Shift to Peach (warmer, energetic) | Shift to Peach (warmer, energetic) |
// DO: Use semantic names
<Button color="primary">Submit</Button>
<Alert variant="error">Failed</Alert>
// DON'T: Use specific color names
<Button color="peach">Submit</Button>
<Alert variant="red">Failed</Alert>
The app MUST respect the device's system brightness preference. Never force a single mode.
// Flutter — reads system preference automatically
final brightness = MediaQuery.platformBrightnessOf(context);
final scheme = brightness == Brightness.dark
? AppColors.dark
: AppColors.light;
# Install Catppuccin palette packages (optional)
npm install @catppuccin/palette
# Test contrast ratios
npx polypane # or use online tools like contrast-ratio.com
mobile/lib/app/theme/app_colors.dart