Restaurant Codex Design System
A comprehensive design system for operational excellence
Color Palette
Core Colors
Primary
#1A472A
Secondary
#E6B33D
Background
#F9FAFB
Surface
#FFFFFF
Semantic Colors
Success
#2E7D32
Error
#D32F2F
Warning
#ED6C02
Typography
Display XL (5rem / 80px)
Display XL
Display LG (4rem / 64px)
Display LG
Heading XL (2.25rem / 36px)
Heading XL
Heading LG (1.875rem / 30px)
Heading LG
Body LG (1.125rem / 18px)
Body Large. Used for introductions and stand-out paragraphs.
Body MD (1rem / 16px)
Body Medium. The default for all paragraph text.
UI Components
Buttons
Various button styles and states
Primary
Secondary
Outline
Input Fields
Form input components
Select / Dropdown
Dropdown selection components
OTP / Verification Code
Code input for email/phone verification
Current value: (empty)
Badges
Status and label indicators
Default
Secondary
Outline
Destructive
Success
Warning
Card Component
Versatile container for grouping content
Cards are the primary way to group related information. They use surface color, shadows, and border radius from our design system.
Elevated
shadow-lifted-sm
Standard
shadow-lifted-md
Prominent
shadow-lifted-lg