---

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.