How design tokens work
Design tokens allow you pull in values from the design system when you need to create additional CSS
to support your website or application. Using design tokens ensures that your extra CSS will
always have the correct values when updates to the design system are released over time.
Here is how you call design tokens into your CSS:
CSS
CSS
.your-class {background-color: var(--gnb-blue);}
Colour tokens
| Colour |
Token |
| Brand colours |
| Blue |
gnb-blue |
| Green |
gnb-green |
| Yellow |
gnb-yellow |
| Red |
gnb-red |
| Status colours |
| Success |
gnb-success |
| Warning |
gnb-warning |
| Danger |
gnb-critical |
| Info |
gnb-info |
| Grayscale colours |
| White |
gnb-white |
| Gray 100 |
gnb-gray-100 |
| Gray 200 |
gnb-gray-200 |
| Gray 300 |
gnb-gray-300 |
| Gray 400 |
gnb-gray-400 |
| Gray 500 |
gnb-gray-500 |
| Gray 600 |
gnb-gray-600 |
| Black |
gnb-black |
Typography tokens
| Font family |
Token |
| DM Serif Text |
font-family-serif |
| Public Sans |
font-family-sans-serif |
| Font Awesome (icon font) |
font-family-icon |
Spacing tokens
| Size |
Value |
Token |
| none |
0 |
gnb-spacing-none |
| xxs |
0.25rem (4px) |
gnb-spacing-xxs |
| xs |
0.5rem (8px) |
gnb-spacing-xs |
| sm |
1rem (16px) |
gnb-spacing-sm |
| md |
1.5rem (24px) |
gnb-spacing-md |
| lg |
2rem (32px) |
gnb-spacing-lg |
| xl |
3rem (48px) |
gnb-spacing-xl |
| xxl |
4rem (64px) |
gnb-spacing-xxl |
Breakpoint tokens
| Size |
Value |
Token |
| xs |
576px |
gnb-breakpoint-xs |
| sm |
768px |
gnb-breakpoint-sm |
| md |
992px |
gnb-breakpoint-md |
| lg |
1200 |
gnb-breakpoint-lg |
Border tokens
| Attribute |
Value |
Token |
| Border width |
1px |
gnb-border-width |
| Border colour |
#ddd |
gnb-border-color |
| Border radius |
.25rem |
gnb-border-radius |
| Small border radius |
.2rem |
gnb-border-radius-sm |
| Large border radius |
.3rem |
gnb-border-radius-lg |
| Pill border radius |
50rem |
gnb-border-radius-pill |
Border tokens
| Attribute |
Value |
Token |
| Box shadow |
0 2px 4px rgba(0, 0, 0, 0.08) |
gnb-box-shadow |
