sohne-var display
Weights: 300, 400
Source: self-hosted
Foreground
#000000 · 47%Brand
#533AFD · 20%Foreground
#50617A · 8%Accent
#061B31 · 7%Background
#FFFFFF · 5%Foreground
#64748D · 3%Accent
#0000EE · 2%Accent
#7F7DFC · 2%Foreground
#273951 · 2%Background
#E5EDF5 · 1%Foreground
#3C4F69 · 1%Accent
#FF6118 · 1%Foreground
#6480B2 · 0%Accent
#B9B9F9 · 0%Accent
#D6D9FC · 0%Foreground
#839BC8 · 0%Foreground
#101010 · 0%Foreground
#A3B5D6 · 0%Accent
#81B81A · 0%Accent
#2863B1 · 0%| Token | Px | Rem | Weight | LH | Tracking | Role |
|---|---|---|---|---|---|---|
| heading-4 | 16 | 1 | 400 | 1.5 | — | heading |
| heading-4 | 16 | 1 | 300 | 1.4 | — | heading |
| caption | 10 | 0.625 | 300 | 1.5 | 0.1px | body |
| caption | 10 | 0.625 | 400 | 1.15 | 0.1px | body |
| caption | 9 | 0.563 | 300 | 1.5 | — | body |
| small | 14 | 0.875 | 400 | 1 | — | ui |
| small | 14 | 0.875 | 300 | 1.5 | -0.42px | body |
| caption | 11 | 0.688 | 300 | 1.45 | — | body |
| heading-3 | 26 | 1.625 | 300 | 1.12 | -0.26px | heading |
| heading-3 | 22 | 1.375 | 300 | 1.1 | -0.22px | heading |
| heading-1 | 48 | 3 | 300 | 1.15 | -0.96px | heading |
| heading-large | 26 | 1.625 | 400 | 1.5 | — | body |
| caption | 8 | 0.5 | 400 | 1.12 | — | body |
| text-14 | 18 | 1.125 | 300 | 1.4 | — | body |
4px grid.
Spacing scale
space-2 · 2pxspace-4 · 4pxspace-6 · 6pxspace-8 · 8pxspace-10 · 10pxspace-12 · 12pxspace-14 · 14pxspace-16 · 16pxspace-18 · 18pxspace-20 · 20pxspace-22 · 22pxspace-24 · 24px
Border radius
r-1 · 1pxr-2 · 2pxr-3 · 3pxr-4 · 4pxr-5 · 5pxr-6 · 6pxr-7 · 8px
Shadows
| shadow-xs | rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px |
| shadow-sm | rgba(50, 50, 93, 0.12) 0px 16px 32px 0px |
| shadow-md | rgba(0, 0, 0, 0.1) 0px 30px 60px -50px, rgba(50, 50, 93, 0.25) 0px 30px 60px -10px |
| shadow-lg | rgba(23, 23, 23, 0.08) 0px 15px 35px 0px |
| shadow-xl | rgba(23, 23, 23, 0.06) 0px 3px 6px 0px |
| Property | Duration | Timing function | Frequency |
|---|---|---|---|
| color | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | 137 |
| fill | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | 111 |
| stroke | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | 45 |
| opacity | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | 45 |
| transform | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | 45 |
| transform | 0.8s | cubic-bezier(0.165, 0.84, 0.44, 1) | 43 |
| opacity | 0.15s | linear | 36 |
| background-color, color, border | 0.3s, 0.3s, 0.3s | cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1) | 28 |
| opacity | 0.12s | ease | 16 |
| transform | 0.6s | cubic-bezier(0.16, 1, 0.3, 1) | 12 |
Easings
cubic-bezier(0.25, 1, 0.5, 1) × 387cubic-bezier(0.165, 0.84, 0.44, 1) × 55linear × 46triple cubic-bezier × 28cubic-bezier(0.16, 1, 0.3, 1) × 20ease × 18
Durations
0.3s × 3910.8s × 550.15s × 360.3s, 0.3s, 0.3s × 280.25s × 170.4s × 16