Components
Reusable UI components and patterns used throughout Shift Scan.
Buttons
Primary Button
Secondary Buttons
Button States
Surfaces & Cards
Default Surface
Standard card container with consistent padding, border, and shadow.
Interactive Card
Used in grids with hover states and call-to-action links.
Text Hierarchy
Label/Eyebrow
Used above headings for categorization
Page Heading
Primary page title (30-36px)
Section Heading
Secondary heading (24px)
Subsection Heading
Tertiary heading (18px)
Body Text
Default paragraph text (16px, gray)
Small Supporting Text
Captions and metadata (12-14px)
Badges & Pills
Badge Variants
Form Elements
Lists & Item Patterns
- Feature or benefit item
- Another feature or benefit
- Additional feature or benefit
Call-to-Action Patterns
Feature Title
Brief description of the feature
Benefit Title
Description of the benefit
Component Guidelines
Consistency
Use established components and patterns. Avoid creating one-off variations.
Accessibility
All components must meet WCAG standards. Include proper labels, alt text, and keyboard support.
Documentation
Document new components in this design system. Include usage guidelines and code examples.
Testing
Test components across devices and browsers. Ensure responsive behavior and cross-browser compatibility.