Site Style Guide
Typography
| Class | Font Size (rem) | Font Size (px) |
|---|---|---|
| text-5xl | 5rem | 80px |
| text-4xl | 4rem | 64px |
| text-3xl | 3rem | 48px |
| text-2xl | 2.25rem | 36px |
| text-xl | 1.75rem | 28px |
| text-lg | 1.25rem | 20px |
| text-base | 1rem | 16px |
| text-sm | 0.875rem | 14px |
| text-xs | 0.75rem | 12px |
| text-xxs | 0.625rem | 10px |
Container Queries
| Class | Width (rem) | Width (px) |
|---|---|---|
| @7xl | 80rem | 1280px |
| @6xl | 72rem | 1152px |
| @5xl | 64rem | 1024px |
| @4xl | 56rem | 896px |
| @3xl | 48rem | 768px |
| @2xl | 44rem | 704px |
| @xl | 40rem | 640px |
| @lg | 36rem | 576px |
| @md | 32rem | 512px |
| @sm | 28rem | 448px |
| @xs | 24rem | 384px |
Brand Colours
amber-500
amber-500/5
slate-200
slate-200/20
slate-400
slate-500/10
slate-500/20
slate-600
slate-600/10
slate-700
slate-800
slate-900
Project Colours
epl
fn-dark-blue
fn-light-blue
magpl
rose-500
rose-900
rose-950