Style Guide

Typography

  • Headings: Poppins, sans-serif
  • Body: Inter, sans-serif

Color Palette

  • Primary: #0d9488 (teal)
  • Secondary: #f59e0b (amber)
  • Dark Background: #111827
  • Light Background: #ffffff
  • Text Dark: #1f2937
  • Text Light: #f9fafb

Components

  • Buttons:
    • Primary: bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded
    • Secondary: border border-teal-600 text-teal-600 hover:bg-teal-50 px-4 py-2 rounded
  • Cards:
    • bg-white dark:bg-gray-800 rounded shadow p-6
  • Timeline:
    • Use border-l-2 border-teal-600 pl-4 for vertical timeline items.

This guide ensures visual consistency across the portfolio pages.