Styles

This project uses Tailwind CSS for all styling with a design system based on semantic color tokens and consistent spacing.

Overview

All styling follows these principles:

1. Use Tailwind utility classes for all styling
2. Never use arbitrary values (avoid w-[123px])
3. Use semantic color tokens (primary, secondary, muted, etc.)
4. Use design system components (H1-H6, P-P4, Section)

Quick Links

Color System

Colors are defined in two places:

• src/config/color-variants.ts - Semantic colors and reusable component variants
• tailwind.config.ts - Tailwind theme configuration

Semantic Colors

Use semantic color classes instead of specific colors:

// ✅ Good - semantic colors
<div className="bg-primary text-primary-foreground">
<p className="text-muted-foreground">

// ❌ Bad - arbitrary colors
<div className="bg-blue-500 text-white">
<p className="text-gray-600">

Available Tokens

Spacing Scale

Use the Tailwind spacing scale for consistent layout:

<div className="p-4 gap-2">      {/* 16px padding, 8px gap */}
<div className="mt-8 mb-4">      {/* 32px top, 16px bottom */}
<div className="space-y-6">      {/* 24px vertical spacing */}

Layout Components

Section Component

Use Section for consistent page layouts:

import { Section } from "@/components/section";

<Section variant="default" padding="xl">
  <H1>Page Title</H1>
  <P>Content here</P>
</Section>

Section Variants

Utility Functions

cn() Helper

Use the cn() helper for conditional classes:

import { cn } from "@/lib/utils";

<div className={cn(
  "base-class",
  isActive && "active-class",
  variant === "primary" && "primary-class"
)} />

This combines classes and handles conflicts intelligently using tailwind-merge.

Responsive Design

Tailwind provides responsive prefixes:

<div className="w-full md:w-1/2 lg:w-1/3">
  {/* Full width on mobile, half on tablet, third on desktop */}
</div>

<p className="text-sm md:text-base lg:text-lg">
  {/* Responsive text sizes */}
</p>

Best Practices

1. Use semantic colors - Always use color tokens like primary instead of specific colors
2. Follow spacing scale - Use the Tailwind spacing scale for consistency
3. No arbitrary values - Avoid w-[123px] - use design tokens instead
4. Use typography components - Use H1-H6 and P-P4 instead of raw HTML elements