RuknApp Component Showcase

A comprehensive showcase of RuknApp's design system components, built with a mobile-first approach and featuring an orange-based color palette with semantic naming.

Design System Overview

  • Color Palette: Orange-based primary colors with semantic naming
  • Typography: 15-level scale system for consistent text sizing
  • Spacing: 12-step 4pt grid system for consistent layouts
  • Shadows: Elevation system for depth and hierarchy
  • Responsive: Mobile-first design with breakpoint-based adaptations

Design Tokens

Comprehensive design system tokens ensuring consistency across all components and platforms.

Primary Colors (Orange)

50
100
200
300
400
500
600
700
800
900
--primary-500: #F5A623; /* Brand Primary */

Secondary Colors (Slate)

50
100
200
300
400
500
600
700
800
300
--secondary-800: #1E293B; /* Dark Surface */

Status Colors

Success
Warning
Error
Info
--status-success: var(--success-500);
--status-warning: var(--warning-500);
--status-error: var(--error-500);
--status-info: var(--info-500);

Typography Scale

Display Large
Display Medium
Display Small
H1 Heading
H2 Heading
H3 Heading
H4 Heading
Body Large
Body Medium
Body Small
font-size: 22px; /* H1 */
font-weight: 600; /* Semibold */
line-height: 28px;

Spacing System (4pt Grid)

4px
8px
12px
16px
24px
--space-1: 4px; /* Micro */
--space-4: 16px; /* Standard */
--space-8: 32px; /* Large */

Shadow System

Small Shadow
Medium Shadow
Large Shadow
Extra Large Shadow
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
/* Medium elevation */