Design System Showcase

Showcasing the orange-themed design system with shadcn components.

Colors

Primary

Accent

Surface

Destructive

Typography

Heading 1 - Large Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Small Heading

Primary text - This is the main content text color

Secondary text - Used for less important information

Destructive text - Used for error messages

Components

Regular Card

This is a standard shadcn card component with consistent padding.

Primary Border Card

This card has a primary (orange) border using shadcn styling.

Theme Instructions

Orange Design System: Professional and modern design system using orange as the primary color. Built with shadcn/ui components for consistency and accessibility.

shadcn/ui Integration: All components use the shadcn/ui design system with semantic color tokens, ensuring consistent spacing, typography, and interaction patterns throughout the application.

The design system provides a cohesive visual language with proper dark mode support and accessibility features built-in.