Design System

Arctic

A cool-toned SaaS design system built on glacial blues, deep navy, and crystalline whites.

#5289AD
#243C4C
#698696
#ACBCBF
#F4FCFB
Foundations
Color Palette
The core palette is drawn from arctic landscapes — deep ocean navy, glacial blue, steel gray, frost white, and muted sea foam.
Primary
Primary Blue
#5289AD
--primary
Dark
Dark Navy
#243C4C
--dark
Steel
Steel Blue
#698696
--steel
Muted
Muted Gray
#ACBCBF
--muted
Surface
Frost White
#F4FCFB
--surface
Border
Border Light
#CDD9DB
--border-light

Semantic Colors

Success
Success Green
#4CAF7D
--success
Warning
Warning Amber
#E2A84B
--warning
Error
Error Red
#D45B5B
--error
Info
Info Blue
#5289AD
--info
Foundations
Typography
Space Grotesk for headings delivers sharp, modern authority. DM Sans for body text ensures comfortable reading.
Display / 48px
Arctic
H1 / 36px
Dashboard Overview
H2 / 28px
Section Heading
H3 / 22px
Card Title
Body / 16px
The quick brown fox jumps over the lazy dog. This is the default body text.
Small / 14px
Secondary text for descriptions and supporting information.
Caption / 12px
Captions, timestamps, helper text, and metadata labels.
Overline / 11px
Section Label
Foundations
Spacing & Radius
A 4px base grid ensures consistent rhythm across all components.
Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px
Border Radius
6px
10px
16px
24px
Full
Foundations
Shadows & Elevation
Four elevation levels cover every UI scenario with cohesive depth.
Level 1
--shadow-sm
Level 2
--shadow-md
Level 3
--shadow-lg
Level 4
--shadow-xl
Components
Buttons
Buttons communicate priority through fill, border, and color.
Variants
Sizes
States
Button Group
Components
Inputs & Forms
Form controls prioritize clarity with generous padding and clear focus rings.
Text Inputs
We will never share your email.
Please enter a valid URL
Controls
Email Notifications
Dark Mode
Select & Textarea
Components
Data Display
Tables, badges, and indicators for structured data.
Table
UserRoleStatusUsageActions
Sarah Chen
sarah@arctic.io
Admin Active
72%
Marcus Rivera
marcus@arctic.io
Editor Active
45%
Aisha Patel
aisha@arctic.io
Viewer Away
18%
Badges
Primary Success Warning Error Info
Tabs

Tab content area with active state tracking.

Components
Feedback
Toasts, modals, and inline alerts keep users informed.
Toast Notifications

Click to trigger live toasts:

Modal Dialog

Trigger a modal:

Inline Alerts
Deployment successful
Your app was deployed 2 minutes ago.
Rate limit approaching
You have used 85% of your quota.
Payment failed
Your card was declined.
Components
Cards & Layout
Cards are the building blocks of SaaS dashboards.
12%
2,847
Total Users
8%
$48.2K
Revenue
2%
99.8%
Uptime
5%
23
Tickets
Feature Card
Quick Deploy
One-click deployments

Deploy your applications to production in seconds.

User Card
Jordan Lee
Product Designer
DesignFrontend