Style Guide
Design system, components, and color schemes for System 365
Color Schemes
Palm Springs
✓ Active
Desert Pastel
Click to activate
Art Deco Miami
Click to activate
Modern Sand & Teal
Click to activate
Palm Springs
Click to activate
Desert Pastel
Click to activate
Art Deco Miami
Click to activate
Modern Sand & Teal
Click to activate
Current Scheme: Palm Springs Light
primary
#f59e0b
secondary
#14b8a6
accent
#f97316
background
#fffbeb
surface
#ffffff
text
#92400e
muted
#b45309
border
#fde68a
success
#10b981
warning
#f59e0b
error
#ef4444
Typography
Heading 1 - 5xl Bold
Used for main page titles
Heading 2 - 4xl Bold
Used for section titles
Heading 3 - 3xl Semibold
Used for card titles
Heading 4 - 2xl Medium
Used for subsection titles
Body text - lg size
Used for main content
Body text - base size
Used for regular content
Buttons
Button Variants
Button Sizes
Button States
Progress Components
Progress Variants
Progress75%
Progress45%
Progress60%
Progress25%
Card Components
Sample Card
A basic card example
This is a sample card with some content to demonstrate the design.
Another Card
Another description
Cards now have a modern design without borders and with subtle shadows.
Third Card
Yet another description
The design is clean, modern, and uses the selected color scheme.
Spacing Scale
4px (w-1)
8px (w-2)
12px (w-3)
16px (w-4)
20px (w-5)