Component Index

A comprehensive reference of all design system components, patterns, and prototypes. Built with the signature Orange→Pink→Blue brand identity.

Foundations

5 items

Color Scheme

Brand colors, semantic colors, and color usage guidelines.

Typography

Space Grotesk font system, scale, and text styles.

Icons

Icon library, sizing, and usage patterns.

Responsive

Breakpoints, grid system, and adaptive layouts.

Foundations

Core design principles and spacing system.

Core Components

5 items

Buttons

Primary, secondary, ghost buttons with ripple hover.

Cards

Card containers with shadows and hover states.

Forms

Inputs, selects, checkboxes with ripple interactions.

Navigation

Sidebar, tabs, and navigation patterns.

Section Headers

Headers for content sections with actions.

Data Display

4 items

Backlog Labels

Status labels and tags for backlog items.

Backlog Cards

Cards for displaying backlog/task items.

Job Cards

Cards for job listings and opportunities.

Freelancer Cards

Profile cards for freelancer listings.

Patterns & Modals

5 items

Select Strategy

Strategy selection flow and picker.

Page Editor

Content editor and page building interface.

Profile Modal

User profile view and edit modal.

Templates Modal

Template selection and preview modal.

Chat Panel

Messaging interface and chat components.

States & Feedback

4 items

Component States

Hover, focus, active, disabled, and error states.

Loading States

3D box loader, spinners, and skeleton screens.

Empty States

No content, no results, and error states.

Feedback/Toasts

Toasts, alerts, notifications with ripple.

Mobile

1 item

Mobile Buttons

Touch-optimized button components.

Quick Reference

Brand Colors

Orange
#FB923C
Pink
#F472B6
Blue
#93C5FD

Typography

Font Family
Space Grotesk
Weights: 400, 500, 600, 700

Animation

Ripple Interval
25ms
Max Radius: 15

Spacing

4 / 8 / 16 / 24 / 32 / 48px
Border Radius
4 / 8 / 12 / 16px