Shugur Design System

A comprehensive design system extracted from the Shugur Relay website, providing reusable components, styling patterns, and design tokens for building consistent user interfaces.

🎨 Design Philosophy

"Simple where it matters, open where it counts."

• Quality First: Every element is crafted with care and consideration
• Accessible by Default: WCAG 2.1 AA compliant components
• Performance Optimized: Lightweight, fast-loading components
• Mobile-First: Responsive design patterns throughout

📁 Structure

design-system/
├── tokens/           # Design tokens (colors, typography, spacing)
│   ├── base.css         # Base styles and utilities
│   ├── colors.js        # Color palette
│   ├── typography.js    # Font configurations
│   ├── spacing.js       # Spacing scale
│   ├── animations.js    # Animation presets
│   └── tailwind.config.js # Tailwind CSS configuration
├── components/       # Reusable UI components
│   ├── Button.svelte    # Button component with variants
│   ├── Card.svelte      # Card container component
│   ├── Navigation.svelte # Header navigation
│   ├── Hero.svelte      # Hero section component
│   ├── Features.svelte  # Features grid component
│   ├── Footer.svelte    # Footer component
│   └── index.js         # Component exports
├── docs/            # Component documentation
│   ├── Usage.md         # Usage guide and patterns
│   └── Button.md        # Button component docs
└── examples/        # Implementation examples
    ├── README.md        # Examples documentation
    ├── landing-page.svelte    # Complete landing page
    ├── dashboard.svelte       # Dashboard layout
    └── form-components.svelte # Form elements showcase

🚀 Quick Start

1. Install Dependencies

   npm install tailwindcss @tailwindcss/typography lucide-svelte
   

2. Configure Tailwind

   Copy the configuration from tokens/tailwind.config.js

3. Import Base Styles

   @import './design-system/tokens/base.css';
   

4. Use Components

   import { Button, Card, Navigation } from './design-system/components';
   

🎯 Core Features

• 6 Core Components: Button, Card, Navigation, Hero, Features, Footer
• Complete Color Palette: Primary (Shugur green) and secondary color systems
• Typography Scale: Modern font stack with Inter and League Spartan
• Responsive Components: Mobile-first design patterns
• Accessibility: ARIA labels, focus management, keyboard navigation
• Animation System: Smooth transitions and micro-interactions
• Icon Library: Consistent iconography with Lucide
• 3 Complete Examples: Landing page, dashboard, and form components

📦 Available Components

Layout Components:

• Navigation - Responsive header with mobile menu
• Hero - Landing page hero sections with variants
• Features - Feature grids and showcases
• Footer - Comprehensive footer with links and social

UI Components:

• Button - Multiple variants (primary, secondary, ghost, danger)
• Card - Flexible container with consistent styling

Complete Examples:

• Landing Page - Full marketing page layout
• Dashboard - Admin interface with metrics and tables
• Form Components - Comprehensive form elements with validation

📖 Documentation

Detailed component documentation and usage examples are available in the /docs folder:

• Usage Guide - Implementation patterns and best practices
• Button Component - Detailed button documentation
• Examples - Complete implementation examples

🛠️ Development

The design system is optimized for:

• SvelteKit - Primary framework support
• Tailwind CSS - Utility-first styling
• TypeScript - Type safety and better DX
• Accessibility - WCAG 2.1 AA compliance
• Performance - Lightweight and fast

🌟 Getting Started

1. Browse the examples to see the design system in action
2. Read the usage guide for implementation patterns
3. Check individual component documentation in /docs
4. Copy components and tokens to your project
5. Customize as needed while maintaining design consistency

Built with ❤️ by Shugur