Design Tokens
Copy-paste brand values in your preferred format. Source: tokens.json
Colors
| Name | Hex | CSS Var | Use |
|---|
| Midnight | #181E24 | --cn-midnight | Darkest background |
| Forest | #26413E | --cn-forest | Primary brand color |
| Lightning | #E9E730 | --cn-lightning | Secondary accent |
| Backlight (dark bg) | #37EEFB | --cn-backlight | On dark backgrounds only |
| Backlight (light bg) | #04CEDC | --cn-backlight-light | On light backgrounds |
| Backlight (w/ white) | #03838C | --cn-backlight-dark | Paired with white |
| Moonlight | #EEE5E9 | --cn-moonlight | Light backgrounds |
| White | #FFFFFF | --cn-white | Text on dark |
Copy as Code
Typography
| Role | Font Family | Weights |
|---|
| Headers | Roboto Condensed | Light (300), Regular (400), Bold (700) |
| Sub-headers & Body | Space Grotesk | Light (300), Regular (400), Medium (500), Semi-bold (600), Bold (700) |
| Code & Special | Space Mono | Regular (400), Bold (700) |
Page Geometry (Documents)
| Property | Value (DXA) | Value (inches) |
|---|
| Page width | 12240 | 8.5" |
| Page height | 15840 | 11" |
| Side margins | 763 | 0.53" |
| Top/bottom margins | 979 | 0.68" |
| Content width | 10714 | 7.44" |