brand-guidelines.md

Flarial Brand Guidelines

Colors

Primary Colors

• Primary Red: #EF4444 (red-500)
  • Light variant: #FCA5A5 (red-300)
  • Dark variant: #B91C1C (red-700) Used for main CTAs, important UI elements, and brand accents

Secondary Colors

• Secondary Slate: #1E293B (slate-800)
  • Light variant: #334155 (slate-700)
  • Dark variant: #0F172A (slate-900) Used for text, secondary UI elements, and dark accents

Accent Colors

• Accent Blue: #3B82F6 (blue-500)
  • Light variant: #60A5FA (blue-400)
  • Dark variant: #2563EB (blue-600) Used for interactive elements and highlights

System Colors

• Success: #10B981 (emerald-500)
• Warning: #F59E0B (amber-500)
• Error: #EF4444 (red-500)

Theme Colors

• Background: #F8FAFC (light) / #020617 (dark)
• Surface: #FFFFFF (light) / #111827 (dark)
• Foreground: #0F172A (light) / #F8FAFC (dark)

Typography

Font Family

• Primary: Inter (with fallback to system fonts)
• Weights:
  • Normal: 400
  • Medium: 500
  • Semibold: 600
  • Bold: 700

Type Scale

• Display: 48px (3rem)
• Heading 1: 36px (2.25rem)
• Heading 2: 30px (1.875rem)
• Heading 3: 24px (1.5rem)
• Body: 16px (1rem)
• Small: 14px (0.875rem)

Line Heights

• Tight: 1.2 (headings)
• Base: 1.5 (body text)
• Relaxed: 1.75 (extended content)

Spacing System

A consistent 8px-based scale:

• Minimal: 4px
• Tight: 8px
• Base: 16px
• Medium: 24px
• Large: 32px
• XL: 48px
• Section: 64px

Best Practices

1. Always use the predefined color tokens for consistency
2. Maintain proper contrast ratios for accessibility
3. Use the Inter font family for all typography
4. Follow the established spacing system for layout consistency
5. Implement the cursor glow effect on interactive elements
6. Ensure all components work seamlessly in both light and dark modes