Carrington
v2.0

Design System

Typography, color, spacing, and every token — the complete Carrington visual language reference.

Typography

Display 800 — 76/92 Light
The quick brown fox jumps
Heading 700 — 60/76 Light
The quick brown fox jumps
Heading 600 — 48/56 Light
The quick brown fox jumps
Heading 500 — 40/48 Light
The quick brown fox jumps
Heading 400 — 32/40 Light
The quick brown fox jumps
Heading 300 — 24/32 Medium
The quick brown fox jumps
Heading 200 — 20/28 Medium
The quick brown fox jumps
Paragraph 150 — 18/24
Lutron's Carrington design system brings precision lighting control to life through a refined visual language. Every interaction is intentional.
Paragraph 100 — 16/24
Designed for clarity at every scale, from mobile device panels to large-format architectural displays. Typography breathes with generous line-height and careful weight selection.
Paragraph 090 — 14/20
Secondary text for labels, descriptions, and supporting content across all device surfaces.
Paragraph 080 — 12/16
Fine print, captions, timestamps, and metadata.
Subtitle 090 — 14/20 Uppercase Tracked
The quick brown fox jumps
Eyebrow — 12/16 Uppercase Tracked
The quick brown fox jumps
Font Stacks
--hyp-font-displayLutron Sans Screen, Helvetica Neue, system-ui
--hyp-font-bodyLutron Sans Screen, Helvetica Neue, system-ui
--hyp-font-uiLutron Sans Screen, Helvetica Neue, system-ui

Color Palette

Brand Blue
Blue 25
Blue 40 ★
Blue 66
Blue 80
Blue 85
Neutrals
White
150
200
300
400
500
600
700
750
800
900
1000
Informative
Orange 43
Green 60
Semantic Tokens
--hyp-fg-primaryneutral-900 / white
--hyp-fg-secondaryneutral-750 / 78% white
--hyp-fg-mutedneutral-600 / 60% white
--hyp-bg-pagewhite / neutral-900
--hyp-bg-surfaceneutral-200 / neutral-1000
--hyp-accentblue-40

Spacing, Radii & Shadows

Spacing Scale
space-00500.5rem / 8px
space-01001rem / 16px
space-01501.5rem / 24px
space-02002rem / 32px
space-03003rem / 48px
space-04004rem / 64px
space-05005rem / 80px
Border Radius
radius-sm4px
radius-md8px
radius-lg16px
radius-xl24px
radius-pill999px
Elevation / Shadows
shadow-sm0px 3.2px 7.2px rgba(0,0,0,0.13)…
shadow-md0px 14.8px 28.2px rgba(18,18,18,0.18…
shadow-lg0px 40px 80px rgba(18,18,18,0.25)…
shadow-product0px 10px 14px rgba(0,0,0,0.20)…

Buttons & Actions

Standard Buttons
Text Link →
Glass Buttons
Chips & Badges
ActiveWarningSyncingOffline
Live

Form Controls

Standard Slider65
Color Temperature
3500K
WarmCool
Count
4
72Dial
Enabled toggle
Disabled state

Data Display & Feedback

◉
↑ 12%
847kWh
Energy
◈
↓ 3%
71°F
Temperature
◧
↑ 8%
32
Devices
0
EnergyExcellent
0
UptimeGood
0
NetworkStrong
0
SolarLearning
CPU72/100
Memory45/100
Storage88/100
Weekly Usage152 kWh

Responsive Behavior

BreakpointRangeGridSpacingTypographyNotes
Mobile< 540px1 column16pxBase sizes scale to 90%Stack all grids, full-bleed cards, bottom sheet nav
Tablet540–860px2 columns20pxBase sizes2-col grids, side panels collapse, cards maintain aspect ratio
Desktop> 860px3–4 columns24pxFull type scaleFull grid layouts, side panels visible, hover states active
Mobile (<540px)
1
2
3
4