Allsteel Design Library
Design system
Foundations, elements, global components, and Sprint compositions from the shared Figma library.
Color
primary
Black
#000000
--as-black
Dark Grey
#737778
--as-dark-grey
Light Grey
#E1E2E3
--as-light-grey
Dark Taupe
#DCD7D4
--as-dark-taupe
Light Taupe
#F6F5F4
--as-light-taupe
White
#FFFFFF
--as-white
secondary
Stone
#9E8B87
--as-stone
Earth
#8B5E37
--as-earth
Mineral
#727466
--as-mineral
Sand
#DFD0BA
--as-sand
Clay
#51433A
--as-clay
hero
Ocean
#1F2638
--as-ocean
utility
Red
#B32415
--as-red
Spacing
Desktop scale collapses to the mobile value at small breakpoints.
3XS
4px
2XS
8px
XS
12px
S
16px
M
24px · 16px mobile
L
32px · 24px mobile
XL
40px · 32px mobile
2XL
64px · 40px mobile
3XL
80px · 64px mobile
4XL
96px · 80px mobile
5XL
120px · 96px mobile
Grid
| Breakpoint | Max width | Columns | Margin | Gutter |
|---|---|---|---|---|
| 1920+ | 1920px | 12 | 24px | 24px |
| 1440 | 1440px | 12 | 24px | 16px |
| 1024 | 1024px | 12 | 24px | 16px |
| 375 | 375px | 4 | 16px | 16px |
Radius
None — 0px
--as-radius-none
Global default — images, cards, containers
Full — 999px
--as-radius-full
Pills — chips, tags, round buttons
Typography
| Style | Family | Desktop | Mobile |
|---|---|---|---|
| H1 | Recife Text | 64px / 110% / -2% | 48px / 112% / -2% |
| H2 | Recife Text | 56px / 112% / -2% | 36px / 116% / -2% |
| H3 | Recife Text | 48px / 120% / -2% | 32px / 125% / -1% |
| H4 | Recife Text | 32px / 125% / -1% | 26px / 120% / -2% |
| P1 | Frutiger Neue LT Pro | 16px / 143% / -0.5% | 16px / 143% / -0.5% |
| P2 | Frutiger Neue LT Pro | 14px / 143% / -0.5% | 14px / 143% / -0.5% |
| Caption | Frutiger Neue LT Pro | 12px / 150% / 0% | 12px / 150% / 0% |
| Button | Frutiger Neue LT Pro | 14px / 100% / 0% | 14px / 100% / 0% |
H1 — Park collection
H2 — Inspired workplaces
H3 — What's new
H4 — Introducing Dimension
P1 — Body copy for descriptions and supporting content across the site.
P2 — Navigation and utility text.
Caption — Legal and metadata.