HOOFDSTUK 03 · KLEUR

Kleur

Het palet van atlascorporation.org is donker: een bijna zwart canvas, donkerblauwe panelen, wit in drie dekkingen, en één blauw dat alles draagt. Goud is het tweede, zuinige accent. Alle waarden zijn overgenomen uit de live module atlas_corp_design, niet bedacht.

Let op voor druk

De merkkleuren zijn schermkleuren (donker thema). De CMYK-kolom is een rekenkundige omzetting zonder kleurprofiel en dus een startpunt: proef altijd. De Pantone-kolom is de dichtstbijzijnde indicatieve referentie uit een kleine lijst en niet officieel: controleer met een fysieke Pantone-waaier. Neonachtige schermkleuren (live-groen, helder blauw) vallen buiten het CMYK-bereik.

Hoofdkleuren

Canvas / body#05080FRGB 5, 8, 15 · CMYK 67/47/0/94 · Pantone Black 6 CPaginaachtergrond, header (86% dekking), footer.

Achtergrond 1#080C18RGB 8, 12, 24 · CMYK 67/50/0/91 · Pantone Black 6 CSecundaire vlakken, Academy-achtergrond.

Achtergrond 2#0C1428RGB 12, 20, 40 · CMYK 70/50/0/84 · Pantone 296 CVerloop- en sectievlakken.

Paneel#080E1CRGB 8, 14, 28 · CMYK 71/50/0/89 · Pantone Black 6 CKaarten, secundaire knop, invoervelden.

Paneel 2#0A1224RGB 10, 18, 36 · CMYK 72/50/0/86 · Pantone 296 CDropdowns, chips, blockquote, hover.

Paneel 3#0B1222RGB 11, 18, 34 · CMYK 68/47/0/87 · Pantone 296 CDieper paneel.

Paneel 4#0F1A33RGB 15, 26, 51 · CMYK 71/49/0/80 · Pantone 289 CSPA-paneel (Academy surface 2).

Merk 400 (link/accent)#4EA0FFRGB 78, 160, 255 · CMYK 69/37/0/0 · Pantone 2718 CLinks, eyebrows, accenten, focusring.

Merk 500 (CTA)#1F6FE0RGB 31, 111, 224 · CMYK 86/50/0/12 · Pantone 285 C (ver weg)Primaire knop, blockquote-rand.

Merk 600#145ED2RGB 20, 94, 210 · CMYK 90/55/0/18 · Pantone 2728 CHover primaire knop (SPA).

Merk cc4#1F6FEBRGB 31, 111, 235 · CMYK 87/53/0/8 · Pantone 2728 C (ver weg)Odoo palet Color 1.

Merk glow#2E80FFRGB 46, 128, 255 · CMYK 82/50/0/0 · Pantone 285 C (ver weg)Midden CTA-verloop en gloed.

Merk donker#0B3D78RGB 11, 61, 120 · CMYK 91/49/0/53 · Pantone 2767 C (ver weg)Diepblauw accent (SPA).

Goud#D4A24CRGB 212, 162, 76 · CMYK 0/24/64/17 · Pantone 7407 CTweede accent: goud-CTA, pills, iconen.

Goud licht#E8C46ARGB 232, 196, 106 · CMYK 0/16/54/9 · Pantone 7407 C (ver weg)Ghost-hover.

Succes / live-groen#2EE59DRGB 46, 229, 157 · CMYK 80/0/31/10 · Pantone 354 C (ver weg)Status live, bevestiging.

Waarschuwing#F1D38CRGB 241, 211, 140 · CMYK 0/12/42/5 · Pantone 7401 CWaarschuwing.

Fout#FF5C7ARGB 255, 92, 122 · CMYK 0/64/52/0 · Pantone 1788 C (ver weg)Fout / gevaar.

Info#77A7FFRGB 119, 167, 255 · CMYK 53/35/0/0 · Pantone 2718 CInformatief.

EU-blauw#003399RGB 0, 51, 153 · CMYK 100/67/0/40 · Pantone 2728 CAlleen bij EU-verwijzingen.

Alle waarden in een tabel

Naam	Token	HEX	RGB	CMYK (ca.)	Pantone (ca., indicatief)	Gebruik
Canvas / body	color.bg.0	#05080F	5, 8, 15	67/47/0/94	Black 6 C	Paginaachtergrond, header (86% dekking), footer.
Achtergrond 1	color.bg.1	#080C18	8, 12, 24	67/50/0/91	Black 6 C	Secundaire vlakken, Academy-achtergrond.
Achtergrond 2	color.bg.2	#0C1428	12, 20, 40	70/50/0/84	296 C	Verloop- en sectievlakken.
Paneel	color.panel.base	#080E1C	8, 14, 28	71/50/0/89	Black 6 C	Kaarten, secundaire knop, invoervelden.
Paneel 2	color.panel.2	#0A1224	10, 18, 36	72/50/0/86	296 C	Dropdowns, chips, blockquote, hover.
Paneel 3	color.panel.3	#0B1222	11, 18, 34	68/47/0/87	296 C	Dieper paneel.
Paneel 4	color.panel.4	#0F1A33	15, 26, 51	71/49/0/80	289 C	SPA-paneel (Academy surface 2).
Merk 400 (link/accent)	color.brand.400	#4EA0FF	78, 160, 255	69/37/0/0	2718 C	Links, eyebrows, accenten, focusring.
Merk 500 (CTA)	color.brand.500	#1F6FE0	31, 111, 224	86/50/0/12	285 C (ver weg)	Primaire knop, blockquote-rand.
Merk 600	color.brand.600	#145ED2	20, 94, 210	90/55/0/18	2728 C	Hover primaire knop (SPA).
Merk cc4	color.brand.cc4	#1F6FEB	31, 111, 235	87/53/0/8	2728 C (ver weg)	Odoo palet Color 1.
Merk glow	color.brand.glow	#2E80FF	46, 128, 255	82/50/0/0	285 C (ver weg)	Midden CTA-verloop en gloed.
Merk donker	color.brand.dark	#0B3D78	11, 61, 120	91/49/0/53	2767 C (ver weg)	Diepblauw accent (SPA).
Goud	color.gold.base	#D4A24C	212, 162, 76	0/24/64/17	7407 C	Tweede accent: goud-CTA, pills, iconen.
Goud licht	color.gold.light	#E8C46A	232, 196, 106	0/16/54/9	7407 C (ver weg)	Ghost-hover.
Succes / live-groen	color.state.success	#2EE59D	46, 229, 157	80/0/31/10	354 C (ver weg)	Status live, bevestiging.
Waarschuwing	color.state.warning	#F1D38C	241, 211, 140	0/12/42/5	7401 C	Waarschuwing.
Fout	color.state.danger	#FF5C7A	255, 92, 122	0/64/52/0	1788 C (ver weg)	Fout / gevaar.
Info	color.state.info	#77A7FF	119, 167, 255	53/35/0/0	2718 C	Informatief.
EU-blauw	color.extra.eu-blue	#003399	0, 51, 153	100/67/0/40	2728 C	Alleen bij EU-verwijzingen.

Tekst en randen

Tekst is wit in drie dekkingen over het canvas. Randen zijn een haarlijn van wit met lage dekking.

text.1 · koppen (92%)

text.2 · bodytekst (72%)

text.3 · secundair en footer (60%)

BORDER.BASE · HAARLIJN 8%

Gecomposteerd over canvas #05080F voor de effectieve kleur.

Token	Waarde	Effectief HEX op canvas	Gebruik
color.text.1	rgba(255,255,255,.92)	#EBEBEC	Koppen, primaire tekst
color.text.2	rgba(255,255,255,.72)	#B9BABC	Bodytekst
color.text.3	rgba(255,255,255,.6)	#9B9C9F	Secundair, footer
color.text.4	rgba(255,255,255,.62)	#A0A1A4	Naast text.3
color.border.base	rgba(255,255,255,.08)	#191C22	Hairline
color.border.strong	rgba(255,255,255,.14)	#282B31	Rand hover/invoer

Verlopen

Letterlijk overgenomen uit de live CSS.

CTA-verloop. linear-gradient(108deg,#1A6AEE 0%,#2E80FF 50%,#2565CC 100%), rand rgba(78,160,255,.4), gloed rgba(46,128,255,.28).

Footer-streep. linear-gradient(90deg,transparent,#1F6FE0 30%,#4EA0FF 50%,#1F6FE0 70%,transparent).

Glass. linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) over een paneel.

Aurora. De achtergrondgloed van de pagina (twee radiale verlopen in blauw) over het canvas.

Contrast

Normale tekst: AA >= 4,5, AAA >= 7. Grote tekst (>= 24 px of 19 px vet): AA >= 3. Transparante tekst is eerst over de achtergrond gelegd.

Paar	Ratio	Normaal AA	Normaal AAA	Groot AA
text.1 op canvas	16.82:1	ja	ja	ja
text.2 op canvas	10.32:1	ja	ja	ja
text.3 op canvas	7.30:1	ja	ja	ja
text.2 op paneel	10.12:1	ja	ja	ja
text.3 op paneel	7.26:1	ja	ja	ja
Wit op merk 500 (primaire knop)	4.76:1	ja	nee	ja
Wit op merk 600	5.90:1	ja	nee	ja
Wit op merk cc4	4.63:1	ja	nee	ja
Wit op CTA-verloop begin #1A6AEE	4.84:1	ja	nee	ja
Wit op CTA-verloop midden #2E80FF	3.72:1	nee	nee	ja
Wit op CTA-verloop eind #2565CC	5.51:1	ja	nee	ja
Merk 400 op canvas (link)	7.44:1	ja	ja	ja
Merk 400 op paneel	7.15:1	ja	ja	ja
Merk 500 op canvas	4.21:1	nee	nee	ja
Goud op canvas	8.66:1	ja	ja	ja
Goud op paneel	8.32:1	ja	ja	ja
Live-groen op canvas	12.22:1	ja	ja	ja
Fout op canvas	6.74:1	ja	nee	ja
Waarschuwing op canvas	13.77:1	ja	ja	ja
Info op canvas	8.35:1	ja	ja	ja
Works: wit op logo-blauw #0066CC	5.57:1	ja	nee	ja
Works: inkt op wit	17.96:1	ja	ja	ja
Agency: inkt op achtergrond	17.78:1	ja	ja	ja
Agency: blauw #0EA5FF op wit	2.68:1	nee	nee	nee
Agency: blauw-tekst #0369A1 op wit	5.93:1	ja	nee	ja
POS: wit op #0EA5FF	2.68:1	nee	nee	nee

Lees de tabel zo: een paar met nee bij normaal AA mag alleen voor grote tekst, decoratie of niet-tekst (iconen, randen, 3:1) worden gebruikt.

Sub-merken

Werk met de kern-tokens voor atlascorporation.org. Sub-merken hebben hun eigen echte palet. Combineer ze niet.

Atlas Works (licht)

Navy 900 #0E2A47Navy 600 #2456A0Blauw #3B82F6Logo-blauw #0066CCOranje #E76A1EGroen #1F8A52Inkt #0E1726Cream #FAFBFD

Atlas Agency (licht)

Achtergrond #FBFDFFInkt #0A1628Blauw #0EA5FFBlauw diep #0284C7Blauw helder #5EE0FFBlauw tekst #0369A1Warm #E76A1E

Atlas POS

Primair #0EA5FFSecundair #0A1628Amber #F59E0BMuted #9DB4CC

Atlas Academy (donker)

Achtergrond #080C18Surface 3 #15223FBrand #1F6FE0Brand donker #1858B8Link #6CB2FFCyaan #5EE0FFRood #FF6B6B

Backend / portaal

Navbar van #0C1626Navbar naar #1B3A5BPrimair #2F6FE0