Skip to main content

General

Design system documentation for the Abair website.

Design Philosophy​

Modern, clean, accessible design with:

  • Large, readable typography
  • Category-based color coding
  • Generous whitespace
  • Smooth transitions
  • Gradient overlays for depth

Documentation Structure​

  • Colors - Color system, category colors, core technologies
  • Typography - Font scales, weights, responsive patterns
  • Components - Cards, buttons, badges, interactive elements
  • Layouts - Containers, grids, spacing, responsive design

Quick Reference Checklist​

When creating components:

  • Responsive container (max-w-6xl or max-w-7xl mx-auto)
  • Responsive padding (px-4 sm:px-6 lg:px-8)
  • Proper typography scale and font weights
  • Body text uses font-light and leading-relaxed
  • Correct category/technology colors
  • Smooth transitions (duration-200 or duration-300)
  • Gradient overlays for images with text
  • Subtle shadows (shadow-lg, shadow-xl)
  • Consistent border radius (rounded-xl, rounded-2xl)
  • Mobile-first responsive design
  • WCAG AA accessibility compliance

Key Technologies​

  • Next.js 13+ - App Router
  • TypeScript - Type safety
  • Tailwind CSS - Utility-first CSS
  • Inter Font - Primary typeface

Maintenance​

  • Update when introducing new patterns
  • Reference before creating pages/components
  • Prioritize consistency over novelty
  • Test on mobile devices
  • Verify color contrast (WCAG AA)