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 (Figma 761-800, left column). Values collapse on mobile — see tokens.css.
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
Page divider spacing
Compressed vertical rhythm between sections (Figma 761-800, right column). Use --as-divider-space-* or py-as-divider-* Tailwind keys.
3XS
4px
2XS
8px
XS
12px
S
16px
M
16px
L
24px
XL
32px
2XL
40px
3XL
64px
4XL
80px
5XL
96px
Grid
Figma Foundations → Grid (41-101). Use .asi-container + .asi-grid, or max-w-site px-as-margin gap-as-gutter.
| 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 |
1920+ · 12 cols
1440 · 12 cols
1024 · 12 cols
375 · 4 cols
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 | 72px / 110% / -3% | 40px / 116% / -3% |
| H2 | Recife Text | 56px / 112% / -2% | 36px / 116% / -2% |
| H3 | Recife Text | 48px / 120% / -2% | 32px / 120% / -2% |
| H4 | Recife Text | 32px / 120% / -2% | 26px / 120% / -2% |
| H5 | Frutiger Neue LT Pro | 24px / 128% / -2% | 20px / 132% / -2% |
| P1 | Frutiger Neue LT Pro | 16px / 143% / -0.5% | 16px / 143% / -0.5% |
| P1 Bold | Frutiger Neue LT Pro | 16px / 143% / -0.5% / Bold | 16px / 143% / -0.5% / Bold |
| 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
H5 — Subhead for cards and lists
P1 — Body copy for descriptions and supporting content across the site.
P1 Bold — Emphasized body and column titles.
P2 — Navigation and utility text.
Caption — Legal and metadata.