Design System

Reference for all UI components, styles, and patterns

Design System Overview

This design system provides a comprehensive reference for all UI elements, components, and styling patterns used throughout your portfolio.

Colors

Color palette, variables, and usage guidelines

Typography

Fonts, sizes, weights, and text styles

Components

UI components and variants

Spacing

Margin, padding, and layout spacing

Icons

Icon library and usage

Patterns

Common UI patterns and best practices

Getting Started

This design system is built with Next.js and Tailwind CSS. Use these elements to maintain consistency across your portfolio.

// Import necessary components
import { Button, Card, Alert } from '@/components/ui';

// Use in your components
export default function MyPage() {
  return (
    <div className="p-6">
      <Card>
        <h1 className="text-2xl font-bold text-gray-100">
          Hello World
        </h1>
        <p className="text-gray-400">
          Welcome to my portfolio!
        </p>
        <Button variant="primary">Get Started</Button>
      </Card>
    </div>
  );
}