333-333-333/corporate-colors

When to Use

• Defining brand color systems for applications
• Implementing light/dark theme switching
• Creating design tokens or style systems
• Establishing color naming conventions across teams

---

Design Philosophy

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:

• Light mode: Latte
• Dark mode: Mocha

Brand Colors

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

Why These Colors

• Maroon — Bold warm red. Reads as "action" with confidence and warmth
• Flamingo — Soft pink that complements Maroon without competing
• Peach — Energetic orange for emphasis/hover, draws attention to highlights
• Rosewater — Delicate pink for info states, keeps everything cohesive

Colors NOT Used as Primary/Secondary

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

---

Color Categories

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

---

Catppuccin Color Mappings

All color token definitions (primary, secondary, accent, surface, text, border) for both light and dark modes:

See assets/color-tokens.ts

---

Design Tokens

CSS Custom Properties (light + dark)

See assets/styles.css

Tailwind Configuration

See assets/tailwind-colors.js

TypeScript Theme System

See assets/theme-tokens.ts

React Component Examples

See assets/example-component.tsx

Flutter Implementation

Reference: mobile/lib/app/theme/app_colors.dart

// Access via Forui theme
final colors = context.theme.colors;
colors.primary;    // Maroon
colors.secondary;  // Flamingo

---

Light/Dark Mode Conventions

Contrast Requirements

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

Semantic Color Usage

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

Mode Switching

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;

---

Accessibility Guidelines

• WCAG AA Compliance: Minimum 4.5:1 contrast for normal text, 3:1 for large text
• Focus Indicators: Use primary color with 2px outline
• Error States: Always pair error color with icons/text, never rely on color alone
• Color Blindness: Peach/Flamingo may appear similar to protanopia — always pair with shape/text cues

---

Commands

# Install Catppuccin palette packages (optional)
npm install @catppuccin/palette

# Test contrast ratios
npx polypane # or use online tools like contrast-ratio.com

---

Resources

• Catppuccin Official: https://github.com/catppuccin/catppuccin
• Palette Explorer: https://catppuccin.com/palette
• Contrast Checker: https://webaim.org/resources/contrastchecker/
• Flutter implementation: mobile/lib/app/theme/app_colors.dart