Tokens
Designtokens er vårt felles designspråk satt i system - bindeleddet mellom alle flater.
Ved bruk av pakken @entur/tokens så har man tilgang til alle gjenbrukbare verdier
som kan brukes for å designe sider og komponenter for å følge Entur sin visuelle identitet.
Disse kan aksesseres enten ved CSS, SASS, LESS eller Javscript-variabler. Eksempelvis, importering av SASS-variablene og bruk av dem.
@import '~@entur/tokens/dist/styles.scss';
.grey-text {
color: \$colors-greys-grey90;
}
SASS og LESS variablene aksesseres med henholdsvis \$ og @, og er semantisk delt opp ved - (bindestrek).
CSS-variablene prefikses med to bindestrek. Javascript-variablene aksesseres som nestede objekter.
Px vs rem
For CSS, SASS og LESS gis alle relevante variabler i rem
-enheten.
For Javascript finnes tokens både i px
- og rem
-enheter. De kan hentes ut slik:
import { fontSizes } from '@entur/tokens';
fontSizes.small; // gir tallet 12 (i px)
fontSizes.rem.small; // gir tallet 0.75 (i rem)
En .rem
etter token-navnet vil altså la deg velge mellom rem
-størrelser i stedet for px
-størrelser.
Tokens
Du kan lese mer om fargene våre i visuell identitet-seksjonen.
Farger
Navn | Verdi | Eksempel |
---|---|---|
#181c56 | ||
#aeb7e2 | ||
#ffffff | ||
#ff5959 | ||
#ffbf9e | ||
#292b6a | ||
#393d79 | ||
#54568c | ||
#656782 | ||
#8285a8 | ||
#babbcf | ||
#d1d4e3 | ||
#ebebf1 | ||
#f5f5f8 | ||
#121212 | ||
#2a2a2a | ||
#353535 | ||
#4d4d4d | ||
#646464 | ||
#949494 | ||
#d1d3d3 | ||
#e9e9e9 | ||
#f3f3f3 | ||
#f8f8f8 | ||
#0082b9 | ||
#64b3e7 | ||
#e1eff8 | ||
#d31b1b | ||
#ff9494 | ||
#ffcece | ||
#1a8e60 | ||
#5ac39a | ||
#d0f1e3 | ||
#ffca28 | ||
#ffe082 | ||
#fff4cd | ||
rgba(68, 192, 255, 0.5) | ||
#000000 | ||
#bf5826 | ||
#c5044e | ||
#800664 | ||
#800664 | ||
#642e88 | ||
#642e88 | ||
#642e88 | ||
#181c56 | ||
#181c56 | ||
#181c56 | ||
#00367f | ||
#0c6693 | ||
#0c6693 | ||
#388f76 | ||
#f08901 | ||
#ff6392 | ||
#fbafea | ||
#e258c3 | ||
#b482fb | ||
#a476e5 | ||
#a476e5 | ||
#ffffff | ||
#ffffff | ||
#ffffff | ||
#42a5f5 | ||
#6fdfff | ||
#6fdfff | ||
#00db9b | ||
#181c56 | ||
#ff5959 | ||
#0ea2a8 | ||
#2f98fa | ||
#8692ca | ||
#ca825b | ||
#57a257 | ||
#8e57e3 | ||
#6466aa | ||
#ff5959 | ||
#0fc2b3 | ||
#64b2fb | ||
#aeb7e2 | ||
#ffbf9e | ||
#7bc00b | ||
#ea8bea |
Avstander
Navn | Verdi | Eksempel |
---|---|---|
0px (0rem) | ||
16px (1rem) | ||
4px (0.25rem) | ||
8px (0.5rem) | ||
12px (0.75rem) | ||
16px (1rem) | ||
24px (1.5rem) | ||
32px (2rem) | ||
40px (2.5rem) | ||
48px (3rem) | ||
56px (3.5rem) | ||
64px (4rem) | ||
72px (4.5rem) | ||
80px (5rem) | ||
88px (5.5rem) | ||
96px (6rem) |
Tekstvekting
Navn | Verdi | Eksempel |
---|---|---|
500 | ABC abc | |
600 | ABC abc |
Tekststørrelser
Navn | Verdi | Eksempel |
---|---|---|
10px (0.625rem) | ABC abc | |
12px (0.75rem) | ABC abc | |
14px (0.875rem) | ABC abc | |
16px (1rem) | ABC abc | |
20px (1.25rem) | ABC abc | |
24px (1.5rem) | ABC abc | |
28px (1.75rem) | ABC abc | |
32px (2rem) | ABC abc | |
40px (2.5rem) | ABC abc |
Linjehøyder
Navn | Verdi |
---|---|
14px (0.875rem) | |
16px (1rem) | |
20px (1.25rem) | |
22px (1.375rem) | |
24px (1.5rem) | |
28px (1.75rem) | |
30px (1.875rem) | |
36px (2.25rem) | |
42px (2.625rem) | |
48px (3rem) | |
60px (3.75rem) |
Breakpoints
Navn | Verdi |
---|---|
800px (50rem) | |
1200px (75rem) |
Border-bredde
Navn | Verdi | Eksempel |
---|---|---|
2px (0.125rem) | ||
1px (0.0625rem) | ||
2px (0.125rem) | ||
4px (0.25rem) |
Border-radius
Navn | Verdi | Eksempel |
---|---|---|
1px (0.0625rem) | ||
1px (0.0625rem) | ||
4px (0.25rem) | ||
8px (0.5rem) |
Z-indexer
Navn | Verdi |
---|---|
-1 | |
0 | |
10 | |
20 | |
30 | |
40 | |
50 |
Timings
Navn | Verdi | Eksempel |
---|---|---|
0.1s | Hover for transisjonstid | |
0.2s | Hover for transisjonstid | |
0.5s | Hover for transisjonstid |
Shadows
Navn | Verdi | Eksempel |
---|---|---|
0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56 | ||
0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff | ||
0 0.0625rem 0.1875rem 0 rgba(0,0,0, 0.12) | ||
0 0.125rem 1rem 0 rgba(0,0,0, 0.1) | ||
0 0.0625rem 0.1875rem 0 rgba(57,61,121, 1) | ||
0 0.125rem 1rem 0 rgba(57,61,121, 1) | ||
0 0.0625rem 0.1875rem rgba(0,0,0, 0.25) | ||
0 0.0625rem 0.1875rem rgba(57,61,121, 1) |