zohelo design
Colours
Light and dark value of every colour token, with its contrast ratio against surface.
color.brand-teal
light #3B8B94 · 3.96:1
dark #5FB3BC · 7.13:1
color.brand-teal-strong
light #2C6E76 · 5.83:1
dark #7FC6CD · 8.94:1
color.brand-teal-soft
light #EBF5F6 · 1.11:1
dark #163238 · 1.27:1
color.brand-azure
light #3A6FA4 · 5.26:1
dark #8FB4E8 · 8.12:1
color.text
light #24292E · 14.67:1
dark #E8EAED · 14.35:1
color.text-muted
light #5D636B · 6.07:1
dark #A2A9B2 · 7.29:1
color.text-faint
light #8A9099 · 3.22:1
dark #737A83 · 3.99:1
color.bg
light #F4F7F9 · 1.08:1
dark #111315 · 1.08:1
color.surface
light #FFFFFF · 1.00:1
dark #181B1E · 1.00:1
color.surface-2
light #EDF1F4 · 1.14:1
dark #202428 · 1.11:1
color.border
light #E2E8F0 · 1.23:1
dark #2A2F34 · 1.28:1
color.grid
light #E8ECEF · 1.19:1
dark #262A2F · 1.20:1
color.ok
light #15803D · 5.02:1
dark #5FD39A · 9.28:1
color.warn
light #B45309 · 5.02:1
dark #F2C14E · 10.30:1
color.danger
light #B91C1C · 6.47:1
dark #FF8A80 · 7.58:1
color.focus
light #2B5480 · 7.83:1
dark #8FB4E8 · 8.12:1
Typography
font.display Polska w danych — Newsreader, serif 0123456789
font.ui Polska w danych — Plus Jakarta Sans, sans-serif 0123456789
font.data Polska w danych — Inter Variable, sans-serif 0123456789
font.mono Polska w danych — JetBrains Mono, monospace 0123456789
size.xs 12px Stopa bezrobocia
size.sm 13px Stopa bezrobocia
size.base 14px Stopa bezrobocia
size.body 16px Stopa bezrobocia
size.lg 20px Stopa bezrobocia
size.xl 24px Stopa bezrobocia
size.2xl 32px Stopa bezrobocia
size.display 44px Stopa bezrobocia
- line-height.body
- 1.5
- line-height.heading
- 1.2
Spacing & radius
space.1 4px
space.2 8px
space.3 12px
space.4 16px
space.6 24px
space.8 32px
space.12 48px
space.16 64px
radius.sm 6px
radius.md 10px
radius.lg 14px
shadow.card
dark: none
shadow.popover
dark: none
- shadow.card
- {"light":"0 4px 16px -2px rgba(15,23,42,0.04), 0 2px 6px -1px rgba(15,23,42,0.02)","dark":"none"}
- shadow.popover
- {"light":"0 12px 32px -4px rgba(15,23,42,0.12)","dark":"none"}
- layout.content-max
- 1280px
- layout.gutter-phone
- 16px
- layout.gutter-tablet
- 24px
- layout.gutter-desktop
- 32px
Components
Stopa bezrobocia (BAEL)
3.2%
+0.3 (up)
2025
Card
A surface panel with the card shadow.
Callout · info
Callout · warn
Callout · danger
| Region | Value |
|---|---|
| Mazowieckie | 3.1 |
| Łódzkie | 4.6 |
| Podkarpackie | 7.2 |
Source: GUS BDL (P2392), data as of 2026-10-01 · zohelo