Style Guide - kevinlogan94/ask-dwight GitHub Wiki

Color Palette

Primary Colors

• Purple (Primary brand color)
  • Main: #9333EA (Tailwind purple-600)
  • Light: #A855F7 (Tailwind purple-500)
  • Dark: #7E22CE (Tailwind purple-700)

Secondary Colors

• Slate (Neutral tones)
  • Light: #F1F5F9 (Tailwind slate-100)
  • Medium: #94A3B8 (Tailwind slate-400)
  • Dark: #334155 (Tailwind slate-700)

Background Colors

• Light mode: White (#FFFFFF) to light gray (#CBD5E1)
• Dark mode: Dark gray (#111827) to medium dark gray (#1F2937)

Typography

Font Family

• Primary Font: "Fredoka", sans-serif
• Fallback Fonts: System UI, -apple-system, sans-serif

Font Sizes

• Headings:
  • H1: 24px (text-2xl/text-3xl)
  • H2: 20px (text-xl)
  • H3: 18px (text-lg)
• Body Text: 16px (text-base)
• Small Text: 14px (text-sm)

Font Weights

• Headings: Bold (font-bold)
• Subheadings: Medium (font-medium)
• Body: Regular (font-normal)

Layout & Spacing

Container Width

• Max width: 1280px (max-w-7xl)
• Responsive padding: 16px on small screens, 24px on larger screens

Spacing System

• Small: 8px (p-2, m-2)
• Medium: 16px (p-4, m-4)
• Large: 24px (p-6, m-6)
• X-Large: 32px (p-8, m-8)