A humanitarian photography platform dedicated to documenting truth, preserving evidence, and amplifying voices for justice.

Pixinity is more than just a photography platform—it's a powerful tool for humanitarian documentation and social justice. Born from the need to preserve truth and amplify voices, Pixinity serves as a digital archive for evidence, testimonies, and visual documentation of civilian experiences, particularly focusing on the ongoing crisis in Gaza.

Our platform combines cutting-edge technology with a deep commitment to human rights, providing a secure, accessible, and multilingual space for photographers, journalists, survivors, and advocates to share their stories and preserve crucial evidence for accountability efforts.

"To create an unbreakable digital archive of truth, where every image tells a story, every testimony matters, and every voice contributes to the pursuit of justice and accountability."

• Secure Upload System: Multi-file upload with automatic image processing and optimization
• Metadata Preservation: Maintains EXIF data and location information for legal authenticity
• Content Verification: Built-in systems for verifying and authenticating submitted evidence
• Legal-Grade Storage: Tamper-proof storage solutions designed for legal proceedings

• Survivor Stories: Dedicated platform for collecting and preserving personal testimonies
• Multi-format Support: Text, audio, video, and image testimonies
• Privacy Protection: Advanced privacy controls to protect vulnerable individuals
• Translation Services: Automatic translation capabilities for global accessibility

• Multi-language Support: Available in 6 languages (English, Spanish, French, German, Chinese, Arabic)
• Responsive Design: Optimized for all devices from mobile to desktop
• Accessibility Compliance: WCAG 2.1 AA compliant for users with disabilities
• Offline Capabilities: Progressive Web App features for areas with limited connectivity

• Impact Tracking: Monitor reach, engagement, and global awareness metrics
• Geographic Insights: Understand global distribution of content and engagement
• Content Performance: Track which stories and evidence gain the most attention
• Legal Usage Analytics: Monitor how content is being used in legal proceedings

• Collaborative Collections: Create shared collections with other users and organizations
• Verification Network: Community-driven content verification system
• Expert Partnerships: Integration with legal experts, journalists, and human rights organizations
• Educational Resources: Built-in resources about documentation best practices

``` ┌─────────────────────────────────────────────────────────────┐ │ Frontend (React/Next.js) │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Pages │ │ Components │ │ Hooks │ │ │ │ │ │ │ │ │ │ │ │ • HomePage │ │ • PhotoGrid │ │ • useAuth │ │ │ │ • Explore │ │ • Header │ │ • useUpload │ │ │ │ • Profile │ │ • Modals │ │ • useToast │ │ │ │ • Collections│ │ • Forms │ │ • useMobile │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ State Management │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Context │ │ SWR │ │ Local State │ │ │ │ │ │ │ │ │ │ │ │ • AuthCtx │ │ • API Cache │ │ • Forms │ │ │ │ • ThemeCtx │ │ • Real-time │ │ • UI State │ │ │ │ • LangCtx │ │ • Mutations │ │ • Filters │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────┘ ```

``` ┌─────────────────────────────────────────────────────────────┐ │ Backend (Node.js/Express) │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Routes │ │ Middleware │ │ Services │ │ │ │ │ │ │ │ │ │ │ │ • Auth │ │ • CORS │ │ • Email │ │ │ │ • Photos │ │ • Auth │ │ • Upload │ │ │ │ • Users │ │ • Upload │ │ • Image │ │ │ │ • Collections│ │ • Rate Limit│ │ • Analytics │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ Data Layer │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Database │ │ File Storage│ │ Cache │ │ │ │ │ │ │ │ │ │ │ │ • MySQL │ │ • Local FS │ │ • Redis │ │ │ │ • Connection│ │ • CDN │ │ • Sessions │ │ │ │ • Pooling │ │ • Backups │ │ • API Cache │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────┘ ```

• ⚛️ React 19: Latest React with concurrent features and improved performance
• 🔄 Next.js 14.2: Full-stack React framework with App Router and server components
• 📘 TypeScript 5.7: Type-safe development with latest language features
• 🎨 Tailwind CSS 3.4: Utility-first CSS framework for rapid UI development
• 🧩 Radix UI: Unstyled, accessible UI primitives for consistent design system
• 📊 Recharts 2.15: Composable charting library for data visualization
• 🎭 Framer Motion: Production-ready motion library for React animations

• 🟢 Node.js: JavaScript runtime for server-side development
• 🚀 Express.js: Fast, unopinionated web framework for Node.js
• 🗄️ MySQL: Reliable relational database for structured data
• 📧 Nodemailer: Email sending capabilities for notifications
• 🖼️ Sharp: High-performance image processing library
• 🔐 bcrypt: Secure password hashing and authentication

• 📦 npm/yarn: Package management and dependency resolution
• 🔧 ESLint: Code linting and quality enforcement
• 🎯 Prettier: Code formatting and style consistency
• 🐳 Docker: Containerization for consistent deployment
• ☁️ Vercel: Deployment platform optimized for Next.js applications

Before you begin, ensure you have the following installed:

• Node.js (v18.0.0 or higher) - Download here
• npm (v8.0.0 or higher) or yarn (v1.22.0 or higher)
• MySQL (v8.0 or higher) - Download here
• Git - Download here

```bash

git clone https://github.com/Musiitwa-Joel/pixinity_system_new.git

cd pixinity

ls -la ```

```bash

npm install

yarn install

cd server && npm install cd .. ```

Create environment files for both development and production:

```bash

cp .env.example .env.local cp server/.env.example server/.env ```

Frontend Environment Variables (.env.local): ```env

NEXT_PUBLIC_APP_NAME=Pixinity NEXT_PUBLIC_APP_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:5000/api

NEXTAUTH_SECRET=your-super-secret-jwt-key-here NEXTAUTH_URL=http://localhost:3000

DATABASE_URL=mysql://username:password@localhost:3306/pixinity

NEXT_PUBLIC_MAX_FILE_SIZE=10485760 NEXT_PUBLIC_ALLOWED_FILE_TYPES=image/jpeg,image/png,image/webp

NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

NEXT_PUBLIC_ENABLE_TESTIMONIES=true NEXT_PUBLIC_ENABLE_COLLECTIONS=true NEXT_PUBLIC_ENABLE_ANALYTICS=true ```

Backend Environment Variables (server/.env): ```env

PORT=5000 NODE_ENV=development CORS_ORIGIN=http://localhost:3000

DB_HOST=localhost DB_PORT=3306 DB_NAME=pixinity DB_USER=your-db-username DB_PASSWORD=your-db-password DB_CONNECTION_LIMIT=10

JWT_SECRET=your-jwt-secret-key JWT_EXPIRES_IN=7d SESSION_SECRET=your-session-secret

SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_USER=your-email@gmail.com SMTP_PASS=your-app-password FROM_EMAIL=noreply@pixinity.org FROM_NAME=Pixinity Platform

UPLOAD_DIR=./uploads MAX_FILE_SIZE=10485760 ALLOWED_EXTENSIONS=jpg,jpeg,png,webp,gif

BCRYPT_ROUNDS=12 RATE_LIMIT_WINDOW=15 RATE_LIMIT_MAX_REQUESTS=100

CLOUDINARY_CLOUD_NAME=your-cloud-name CLOUDINARY_API_KEY=your-api-key CLOUDINARY_API_SECRET=your-api-secret ```

```bash

mysql -u root -p -e "CREATE DATABASE pixinity CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

npm run db:migrate

npm run db:seed ```

```bash

cd server npm run dev

npm run dev ```

Open your browser and navigate to:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000/api/health

You should see the Pixinity homepage and a successful API health check.

For a containerized setup:

```bash

docker-compose up --build

docker-compose up -d

docker-compose logs -f

docker-compose down ```

``` pixinity/ ├── 📁 app/ # Next.js App Router pages │ ├── 📄 layout.tsx # Root layout component │ ├── 📄 page.tsx # Homepage │ ├── 📄 globals.css # Global styles │ ├── 📁 explore/ # Explore page │ ├── 📁 profile/ # Profile pages │ ├── 📁 collections/ # Collections management │ └── 📁 api/ # API routes (if using Next.js API) │ ├── 📁 components/ # Reusable React components │ ├── 📁 ui/ # Base UI components (shadcn/ui) │ │ ├── 📄 button.tsx │ │ ├── 📄 card.tsx │ │ ├── 📄 dialog.tsx │ │ └── 📄 ... │ ├── 📁 Layout/ # Layout components │ │ ├── 📄 Header.tsx │ │ ├── 📄 Footer.tsx │ │ ├── 📄 Sidebar.tsx │ │ └── 📄 Navigation.tsx │ ├── 📁 Common/ # Common components │ │ ├── 📄 PhotoGrid.tsx │ │ ├── 📄 LoadingSpinner.tsx │ │ ├── 📄 ErrorBoundary.tsx │ │ └── 📄 SearchBar.tsx │ ├── 📁 Forms/ # Form components │ │ ├── 📄 LoginForm.tsx │ │ ├── 📄 UploadForm.tsx │ │ ├── 📄 TestimonyForm.tsx │ │ └── 📄 CollectionForm.tsx │ └── 📁 Modals/ # Modal components │ ├── 📄 UploadModal.tsx │ ├── 📄 ShareModal.tsx │ └── 📄 ConfirmModal.tsx │ ├── 📁 hooks/ # Custom React hooks │ ├── 📄 useAuth.ts # Authentication hook │ ├── 📄 useUpload.ts # File upload hook │ ├── 📄 useInfiniteScroll.ts # Infinite scrolling │ ├── 📄 useLocalStorage.ts # Local storage management │ └── 📄 useDebounce.ts # Debounced values │ ├── 📁 lib/ # Utility libraries │ ├── 📄 utils.ts # General utilities │ ├── 📄 auth.ts # Authentication utilities │ ├── 📄 api.ts # API client configuration │ ├── 📄 constants.ts # Application constants │ ├── 📄 validations.ts # Form validation schemas │ └── 📄 types.ts # TypeScript type definitions │ ├── 📁 public/ # Static assets │ ├── 📁 images/ # Static images │ ├── 📁 icons/ # Icon files │ ├── 📄 favicon.ico # Favicon │ ├── 📄 manifest.json # PWA manifest │ └── 📄 robots.txt # SEO robots file │ ├── 📁 server/ # Backend server (if separate) │ ├── 📁 routes/ # API route handlers │ │ ├── 📄 auth.ts │ │ ├── 📄 photos.ts │ │ ├── 📄 users.ts │ │ ├── 📄 collections.ts │ │ └── 📄 testimonies.ts │ ├── 📁 middleware/ # Express middleware │ │ ├── 📄 auth.ts │ │ ├── 📄 upload.ts │ │ ├── 📄 cors.ts │ │ └── 📄 rateLimit.ts │ ├── 📁 models/ # Database models │ │ ├── 📄 User.ts │ │ ├── 📄 Photo.ts │ │ ├── 📄 Collection.ts │ │ └── 📄 Testimony.ts │ ├── 📁 services/ # Business logic services │ │ ├── 📄 emailService.ts │ │ ├── 📄 uploadService.ts │ │ ├── 📄 imageService.ts │ │ └── 📄 analyticsService.ts │ ├── 📁 utils/ # Server utilities │ │ ├── 📄 database.ts │ │ ├── 📄 logger.ts │ │ └── 📄 helpers.ts │ ├── 📄 app.ts # Express app configuration │ └── 📄 server.ts # Server entry point │ ├── 📁 uploads/ # User uploaded files │ ├── 📁 photos/ # Photo uploads │ ├── 📁 avatars/ # User avatars │ ├── 📁 blog/ # Blog images │ └── 📁 testimonies/ # Testimony media │ ├── 📁 database/ # Database related files │ ├── 📁 migrations/ # Database migrations │ ├── 📁 seeds/ # Database seed files │ └── 📄 schema.sql # Database schema │ ├── 📁 docs/ # Documentation │ ├── 📄 API.md # API documentation │ ├── 📄 DEPLOYMENT.md # Deployment guide │ ├── 📄 CONTRIBUTING.md # Contribution guidelines │ └── 📄 SECURITY.md # Security guidelines │ ├── 📁 tests/ # Test files │ ├── 📁 mocks/ # Mock files │ ├── 📁 components/ # Component tests │ ├── 📁 pages/ # Page tests │ ├── 📁 api/ # API tests │ └── 📄 setup.ts # Test setup │ ├── 📄 package.json # Dependencies and scripts ├── 📄 tsconfig.json # TypeScript configuration ├── 📄 tailwind.config.ts # Tailwind CSS configuration ├── 📄 next.config.mjs # Next.js configuration ├── 📄 .env.example # Environment variables example ├── 📄 .gitignore # Git ignore rules ├── 📄 docker-compose.yml # Docker composition ├── 📄 Dockerfile # Docker configuration └── 📄 README.md # This file ```

Pixinity uses environment variables for configuration. Here's a comprehensive guide:

```env

NEXT_PUBLIC_APP_NAME=Pixinity NEXT_PUBLIC_APP_URL=https://pixinity.org NEXT_PUBLIC_APP_VERSION=1.0.0 NEXT_PUBLIC_APP_DESCRIPTION="Humanitarian Photography Platform"

NEXT_PUBLIC_API_URL=https://api.pixinity.org API_VERSION=v1 API_TIMEOUT=30000 ```

```env

DATABASE_URL=mysql://user:password@localhost:3306/pixinity DB_HOST=localhost DB_PORT=3306 DB_NAME=pixinity DB_USER=pixinity_user DB_PASSWORD=secure_password DB_CONNECTION_LIMIT=20 DB_TIMEOUT=60000

READ_DATABASE_URL=mysql://user:password@read-replica:3306/pixinity ```

```env

JWT_SECRET=your-256-bit-secret-key JWT_EXPIRES_IN=7d JWT_REFRESH_EXPIRES_IN=30d

SESSION_SECRET=your-session-secret SESSION_MAX_AGE=604800000 SESSION_SECURE=true SESSION_HTTP_ONLY=true

BCRYPT_ROUNDS=12 PASSWORD_MIN_LENGTH=8 PASSWORD_REQUIRE_SPECIAL=true

RATE_LIMIT_WINDOW=900000 RATE_LIMIT_MAX_REQUESTS=100 RATE_LIMIT_SKIP_SUCCESSFUL=false ```

```env

UPLOAD_DIR=./uploads TEMP_DIR=./temp MAX_FILE_SIZE=10485760 MAX_FILES_PER_UPLOAD=10 ALLOWED_EXTENSIONS=jpg,jpeg,png,webp,gif,mp4,mov

CLOUDINARY_CLOUD_NAME=your-cloud-name CLOUDINARY_API_KEY=your-api-key CLOUDINARY_API_SECRET=your-api-secret CLOUDINARY_FOLDER=pixinity

AWS_ACCESS_KEY_ID=your-access-key AWS_SECRET_ACCESS_KEY=your-secret-key AWS_REGION=us-east-1 AWS_S3_BUCKET=pixinity-uploads ```

```env

SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_SECURE=false SMTP_USER=your-email@gmail.com SMTP_PASS=your-app-password

FROM_EMAIL=noreply@pixinity.org FROM_NAME=Pixinity Platform SUPPORT_EMAIL=support@pixinity.org ADMIN_EMAIL=admin@pixinity.org

ENABLE_EMAIL_VERIFICATION=true ENABLE_PASSWORD_RESET=true ENABLE_NOTIFICATIONS=true ```

```env

GOOGLE_ANALYTICS_ID=GA_MEASUREMENT_ID MIXPANEL_TOKEN=your-mixpanel-token HOTJAR_ID=your-hotjar-id

TWITTER_API_KEY=your-twitter-api-key FACEBOOK_APP_ID=your-facebook-app-id INSTAGRAM_ACCESS_TOKEN=your-instagram-token

GOOGLE_TRANSLATE_API_KEY=your-translate-api-key DEEPL_API_KEY=your-deepl-api-key

PERSPECTIVE_API_KEY=your-perspective-api-key CLARIFAI_API_KEY=your-clarifai-api-key ```

```env

NEXT_PUBLIC_ENABLE_TESTIMONIES=true NEXT_PUBLIC_ENABLE_COLLECTIONS=true NEXT_PUBLIC_ENABLE_ANALYTICS=true NEXT_PUBLIC_ENABLE_SOCIAL_SHARING=true

NEXT_PUBLIC_ENABLE_AI_MODERATION=false NEXT_PUBLIC_ENABLE_BLOCKCHAIN_VERIFICATION=false NEXT_PUBLIC_ENABLE_LIVE_STREAMING=false NEXT_PUBLIC_ENABLE_COLLABORATIVE_EDITING=true

NEXT_PUBLIC_ENABLE_BETA_FEATURES=false NEXT_PUBLIC_ENABLE_DEBUG_MODE=false ```

Users Table ```sql CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, first_name VARCHAR(100), last_name VARCHAR(100), bio TEXT, avatar_url VARCHAR(500), role ENUM('user', 'moderator', 'admin') DEFAULT 'user', is_verified BOOLEAN DEFAULT FALSE, is_active BOOLEAN DEFAULT TRUE, language VARCHAR(10) DEFAULT 'en', timezone VARCHAR(50) DEFAULT 'UTC', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, last_login TIMESTAMP NULL,

INDEX idx_username (username),
INDEX idx_email (email),
INDEX idx_role (role),
INDEX idx_created_at (created_at)

); ```

Photos Table ```sql CREATE TABLE photos ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(255) NOT NULL, description TEXT, filename VARCHAR(255) NOT NULL, original_filename VARCHAR(255), file_path VARCHAR(500) NOT NULL, thumbnail_path VARCHAR(500), file_size INT NOT NULL, mime_type VARCHAR(100) NOT NULL, width INT, height INT, exif_data JSON, location_data JSON, tags JSON, category VARCHAR(100), is_public BOOLEAN DEFAULT TRUE, is_evidence BOOLEAN DEFAULT FALSE, is_sensitive BOOLEAN DEFAULT FALSE, verification_status ENUM('pending', 'verified', 'rejected') DEFAULT 'pending', view_count INT DEFAULT 0, like_count INT DEFAULT 0, download_count INT DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
INDEX idx_user_id (user_id),
INDEX idx_category (category),
INDEX idx_is_public (is_public),
INDEX idx_is_evidence (is_evidence),
INDEX idx_created_at (created_at),
FULLTEXT idx_search (title, description, tags)

); ```

Collections Table ```sql CREATE TABLE collections ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(255) NOT NULL, description TEXT, slug VARCHAR(255) UNIQUE NOT NULL, cover_photo_id INT, is_public BOOLEAN DEFAULT TRUE, is_collaborative BOOLEAN DEFAULT FALSE, view_count INT DEFAULT 0, photo_count INT DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (cover_photo_id) REFERENCES photos(id) ON DELETE SET NULL,
INDEX idx_user_id (user_id),
INDEX idx_slug (slug),
INDEX idx_is_public (is_public),
INDEX idx_created_at (created_at)

); ```

Testimonies Table ```sql CREATE TABLE testimonies ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT, name VARCHAR(255), email VARCHAR(255), title VARCHAR(255) NOT NULL, content TEXT NOT NULL, location VARCHAR(255), date_of_incident DATE, media_files JSON, contact_permission BOOLEAN DEFAULT FALSE, is_anonymous BOOLEAN DEFAULT FALSE, is_verified BOOLEAN DEFAULT FALSE, verification_notes TEXT, language VARCHAR(10) DEFAULT 'en', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL,
INDEX idx_user_id (user_id),
INDEX idx_location (location),
INDEX idx_date_of_incident (date_of_incident),
INDEX idx_is_verified (is_verified),
FULLTEXT idx_search (title, content)

); ```

• WCAG 2.1 AA Compliance: All components meet accessibility standards
• Keyboard Navigation: Full keyboard support for all interactive elements
• Screen Reader Support: Proper ARIA labels and semantic HTML
• Color Contrast: Minimum 4.5:1 contrast ratio for all text
• Focus Management: Clear focus indicators and logical tab order

• Mobile-First Approach: Designed for mobile, enhanced for desktop
• Breakpoint System: Consistent breakpoints across all components
• Flexible Layouts: Fluid grids and flexible typography
• Touch-Friendly: Minimum 44px touch targets on mobile devices

• Lazy Loading: Images and components load on demand
• Code Splitting: JavaScript bundles split by route and feature
• Image Optimization: Automatic WebP conversion and responsive images
• Minimal Bundle Size: Tree-shaking and dead code elimination

```css :root { /_ Brand Colors / --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd; --primary-300: #7dd3fc; --primary-400: #38bdf8; --primary-500: #0ea5e9; / Primary Brand _/ --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985; --primary-900: #0c4a6e;

/_ Neutral Colors _/ --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717;

/_ Semantic Colors _/ --success-500: #10b981; --warning-500: #f59e0b; --error-500: #ef4444; --info-500: #3b82f6; } ```

```css .dark { /_ Dark mode overrides _/ --background: var(--neutral-900); --foreground: var(--neutral-50); --card: var(--neutral-800); --card-foreground: var(--neutral-100); --border: var(--neutral-700); --input: var(--neutral-700); } ```

```css :root { --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; --font-serif: 'Times New Roman', Times, serif; } ```

```css :root { /_ Font Sizes / --text-xs: 0.75rem; / 12px / --text-sm: 0.875rem; / 14px / --text-base: 1rem; / 16px / --text-lg: 1.125rem; / 18px / --text-xl: 1.25rem; / 20px / --text-2xl: 1.5rem; / 24px / --text-3xl: 1.875rem; / 30px / --text-4xl: 2.25rem; / 36px / --text-5xl: 3rem; / 48px / --text-6xl: 3.75rem; / 60px _/

/_ Line Heights _/ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2;

/_ Font Weights _/ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; } ```

```tsx // Primary Button Upload Evidence

// Secondary Button Cancel

// Destructive Button Delete Collection

// Ghost Button Learn More ```

```tsx // Input Field

// Textarea