Brand Guidelines 2

---
name: brand-guidelines
description: "Skill for enforcing and documenting the application's brand colors and fonts. Use this skill to ensure all UI components and pages reflect the official brand identity."
---

# Brand Guidelines Skill

This skill documents and enforces the official brand colors and fonts for the application. Use these guidelines to ensure a consistent, accessible, and professional look across all frontend code.

## Brand Colors

### Primary Palette

- **Primary:** #2563eb — Use for main actions, highlights, and branding elements.
- **Primary Light:** #3b82f6 — Use for lighter backgrounds or secondary highlights.
- **Primary Dark:** #1e40af — Use for active states or dark backgrounds.
- **Primary Subtle:** #eff6ff — Use for subtle backgrounds or surface elements.

### Status Colors

- **Success Green:** #059669 — Indicates success or positive actions.
- **Success Green (Light):** #10b981 — Use for success highlights or backgrounds.
- **Success Green (Subtle):** #ecfdf5 — Use for subtle success backgrounds.
- **Error Red:** #dc2626 — Indicates errors or destructive actions.
- **Error Red (Light):** #ef4444 — Use for error highlights or backgrounds.
- **Error Red (Subtle):** #fef2f2 — Use for subtle error backgrounds.
- **Warning Orange:** #d97706 — Indicates warnings or caution.
- **Warning Orange (Light):** #f59e0b — Use for warning highlights or backgrounds.
- **Warning Orange (Subtle):** #fffbeb — Use for subtle warning backgrounds.

### Usage Notes

- Use primary blue for brand-defining elements and main actions.
- Use status colors to communicate feedback (success, error, warning).
- Use neutral colors for backgrounds, surfaces, borders, and text.
- Maintain sufficient contrast between text and background colors for readability.

## Brand Fonts

### Primary Font

- **Sans-serif Family:**
    - Apple System, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
    - Use for all body text, UI elements, and headings.

### Monospace Font

- SF Mono, Menlo, Consolas, Liberation Mono, monospace
- Use for code snippets, numbers, and technical data.

### Font Sizes (Reference)

- Extra Small: For captions and small text.
- Small: For secondary text.
- Base: For body text.
- Large: For subheadings.
- Extra Large: For headings.
- 2XL: For prominent headings.
- 3XL: For hero text.
- 4XL: For display text.