Learn-skills.dev corporate-colors

install

source · Clone the upstream repo

git clone https://github.com/NeverSight/learn-skills.dev

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/333-333-333/agents/corporate-colors" ~/.claude/skills/neversight-learn-skills-dev-corporate-colors && rm -rf "$T"

manifest: data/skills-md/333-333-333/agents/corporate-colors/SKILL.md

source content

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