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.

Documentation

Typography

Space Grotesk font system, scale, and text styles.

Prototype Docs

Icons

Icon library, sizing, and usage patterns.

Prototype Docs

Responsive

Breakpoints, grid system, and adaptive layouts.

Prototype Docs

Foundations

Core design principles and spacing system.

Documentation

Core Components

5 items

Buttons

Primary, secondary, ghost buttons with ripple hover.

Prototype Docs

Cards

Card containers with shadows and hover states.

Prototype Docs

Forms

Inputs, selects, checkboxes with ripple interactions.

Prototype Docs

Navigation

Sidebar, tabs, and navigation patterns.

Prototype Docs

Section Headers

Headers for content sections with actions.

Prototype Docs

Data Display

4 items

Backlog Labels

Status labels and tags for backlog items.

Prototype Docs

Backlog Cards

Cards for displaying backlog/task items.

Documentation

Job Cards

Cards for job listings and opportunities.

Prototype

Freelancer Cards

Profile cards for freelancer listings.

Prototype

Patterns & Modals

5 items

Select Strategy

Strategy selection flow and picker.

Prototype Docs

Page Editor

Content editor and page building interface.

Prototype Docs

Profile Modal

User profile view and edit modal.

Prototype Docs

Templates Modal

Template selection and preview modal.

Prototype Docs

Chat Panel

Messaging interface and chat components.

Prototype Docs

States & Feedback

4 items

Component States

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

Prototype Docs

Loading States

3D box loader, spinners, and skeleton screens.

Prototype Docs

Empty States

No content, no results, and error states.

Prototype Docs

Feedback/Toasts

Toasts, alerts, notifications with ripple.

Prototype Docs

Mobile

1 item

Mobile Buttons

Touch-optimized button components.

Prototype

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