brand-guidelines

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.