Farger
Farger
Fargene er basert på NVEs og Varsoms profilmanualer, men i designsystemet har farger kontekstbaserte roller. Det vil si at fargene blir tildelt en rolle og kontekst, og at du må sørge for å bruke fargene riktig basert på rollen.
I designsystemet har farger kontekstbaserte roller. Det vil si at når du bruker fargene, må du bruke de i riktig kontekst. F.eks: Vil det stå om fargen brukes i elementer med forgrunn eller bakgrunn. Dette sikrere at fargene brukes i riktig kontekst og gjør det enklere å oppfylle kravene til universell utforming. Det gjør også at vi får et felles og konsekvent uttrykk på tvers av design.
Fargekategorier
Vi har fire hovedkategorier:
TODO: Fikse disse kortene
Farger i designsystemet
Dette er fargene slik de er definert.
Man skal ikke bruke disse variablene direkte, men heller bruke andre variabler som bruker disse
000
050
100
150
200
300
400
500
600
700
800
850
900
950
999
brand
--brand-000
#ff5e5e
--brand-050
#ff4564
--brand-100
#ff2b4e
--brand-150
#ff153b
--brand-200
#f71439
--brand-300
#e61335
--brand-400
#d91232
--brand-500
#c8102e
--brand-600
#a40d26
--brand-700
#880b1f
--brand-800
#79091c
--brand-850
#6c0819
--brand-900
#5e0716
--brand-950
#510613
--brand-999
#440510
grey
--grey-000
#ffffff
--grey-050
#f7f7f8
--grey-100
#edeef0
--grey-150
#e4e5e7
--grey-200
#c9cbcf
--grey-300
#b7babf
--grey-400
#9fa3a9
--grey-500
#878c94
--grey-600
#60656c
--grey-700
#515459
--grey-800
#3c3f44
--grey-850
#292a2c
--grey-900
#1b1c1e
--grey-950
#0d0d0e
--grey-999
#0d0d0e
red
--red-000
#FFEBEE
--red-050
#ffd8de
--red-100
#ffc2c2
--red-150
#ffa8a8
--red-200
#ff9494
--red-300
#ff7575
--red-400
#ff5757
--red-500
#ff3131
--red-600
#ea2020
--red-700
#cc0000
--red-800
#bc0303
--red-850
#a80303
--red-900
#8f0a0a
--red-950
#6B0000
--red-999
#540000
yellow
--yellow-000
#fff9e9
--yellow-050
#fff5d9
--yellow-100
#FFF4D1
--yellow-150
#ffedb8
--yellow-200
#ffe8a5
--yellow-300
#ffe087
--yellow-400
#ffd867
--yellow-500
#ffd046
--yellow-600
#ecbf38
--yellow-700
#daad2a
--yellow-800
#c79c1c
--yellow-850
#be9315
--yellow-900
#b58a0e
--yellow-950
#AB8207
--yellow-999
#A27900
blue
--blue-000
#e6f4ff
--blue-050
#d5edff
--blue-100
#ceeaff
--blue-150
#a8daff
--blue-200
#91d0ff
--blue-300
#65bdff
--blue-400
#38a9ff
--blue-500
#008FFB
--blue-600
#0F81FA
--blue-700
#1E6FDC
--blue-800
#0668b1
--blue-850
#044b81
--blue-900
#034272
--blue-950
#0F3970
--blue-999
#0B2951
green
--green-000
#f6fff9
--green-050
#f0fef5
--green-100
#E8FCE8
--green-150
#CBF9Cb
--green-200
#8af0a1
--green-300
#97f2a8
--green-400
#8af0a1
--green-500
#6bf198
--green-600
#57ce7f
--green-700
#43ab66
--green-800
#00814b
--green-850
#247740
--green-900
#1a6533
--green-950
#004126
--green-999
#00301C
orange
--orange-000
#fff6f1
--orange-050
#FFECD6
--orange-100
#FFE3C2
--orange-150
#FFDAAE
--orange-200
#FFC98A
--orange-300
#ffb186
--orange-400
#FF9A24
--orange-500
#ff833e
--orange-600
#e87332
--orange-700
#d16325
--orange-800
#b95219
--orange-850
#ae4a13
--orange-900
#a2420c
--orange-950
#973a06
--orange-999
#8b3200
varsom_blue
--varsom_blue-000
#eff8fc
--varsom_blue-050
#c8eaf9
--varsom_blue-100
#a6d8ee
--varsom_blue-150
#7ec4e2
--varsom_blue-200
#43a9d5
--varsom_blue-300
#2c96c4
--varsom_blue-400
#0E89BE
--varsom_blue-500
#006b99
--varsom_blue-600
#005c85
--varsom_blue-700
#005175
--varsom_blue-800
#00425F
--varsom_blue-850
#00364e
--varsom_blue-900
#003147
--varsom_blue-950
#002738
--varsom_blue-999
#00131c
teal
--teal-000
#ffffff
--teal-050
#F0F9FC
--teal-100
#E2F3F9
--teal-150
#D3EDF6
--teal-200
#C4E7F3
--teal-300
#A7DBEC
--teal-400
#89CFE6
--teal-500
#6CC3E0
--teal-600
#58A1B9
--teal-700
#437F92
--teal-800
#2F5C6C
--teal-850
#254B58
--teal-900
#1A3A45
--teal-950
#102931
--teal-999
#06181E
purple
--purple-000
#ffffff
--purple-050
#F5F4FD
--purple-100
#ECE9FC
--purple-150
#E2DDFA
--purple-200
#D9D2F9
--purple-300
#C5BCF5
--purple-400
#B2A5F2
--purple-500
#9F8FEF
--purple-600
#8475CE
--purple-700
#685AAD
--purple-800
#4D408D
--purple-850
#3F337C
--purple-900
#31256C
--purple-950
#24185B
--purple-999
#160B4B
lime
--lime-000
#ffffff
--lime-050
#F4F9ED
--lime-100
#EAF4DA
--lime-150
#DFEEC8
--lime-200
#D4E9B6
--lime-300
#BFDD91
--lime-400
#A9D26D
--lime-500
#94C748
--lime-600
#769F3A
--lime-700
#59772B
--lime-800
#3B501D
--lime-850
#2C3C16
--lime-900
#1E280E
--lime-950
#0F1407
--lime-999
#000000
magenta
--magenta-000
#ffffff
--magenta-050
#FDF1F8
--magenta-100
#FAE3F1
--magenta-150
#F8D5EB
--magenta-200
#F5C7E4
--magenta-300
#F1ACD6
--magenta-400
#EC90C9
--magenta-500
#E774BB
--magenta-600
#C25E9C
--magenta-700
#9C497C
--magenta-800
#77335D
--magenta-850
#64284D
--magenta-900
#511E3D
--magenta-950
#3F132E
--magenta-999
#2C081E
neutralgrey
--neutralgrey-000
#ffffff
--neutralgrey-050
#f7f7f8
--neutralgrey-100
#edeef0
--neutralgrey-150
#e4e5e7
--neutralgrey-200
#c9cbcf
--neutralgrey-300
#b7babf
--neutralgrey-400
#9fa3a9
--neutralgrey-500
#878c94
--neutralgrey-600
#60656c
--neutralgrey-700
#515459
--neutralgrey-800
#3c3f44
--neutralgrey-850
#292a2c
--neutralgrey-900
#1b1c1e
--neutralgrey-950
#0d0d0e
--neutralgrey-999
#0d0d0e
Varsom overstyrer noen av disse fargene:
brand
--brand-000
#ffdfba
--brand-050
#fbc792
--brand-100
#fabf82
--brand-150
#f8b673
--brand-200
#f7ae63
--brand-300
#fabf82
--brand-400
#FF7B43
--brand-500
#FF5F1B
--brand-600
#F44900
--brand-700
#F44900
--brand-800
#874602
--brand-850
#763d02
--brand-900
#653502
--brand-950
#542c01
--brand-999
#432301
grey
--grey-000
#ffffff
--grey-050
#eff8fc
--grey-100
#f7f7f8
--grey-150
#c8eaf9
--grey-200
#7EC4E2
--grey-300
#b7babf
--grey-400
#9fa3a9
--grey-500
#878c94
--grey-600
#006b99
--grey-700
#00425F
--grey-800
#00425F
--grey-850
#002738
--grey-900
#1b1c1e
--grey-950
#00364E
--grey-999
#00131C
Se også
https://www.designsystemet.no/grunnleggende/designelementer/farger