Naar de inhoud
PARTYPPLMerk
EnglishNaar partyppl.nl
02Kleuren

KLEUREN

De nacht is het podium. Roze leidt, violet ondersteunt en amber is de flits: spaarzaam, alleen waar twee dingen samenkomen. Een bevestiging, een match, uitverkocht.

Verhouding

60 inkt, 20 surface, 10 roze, 7 violet, 3 amber. Een scherm voelt donker, met kleur op de plekken waar je iets kiest.

Accenten

De drie kleuren van het merk.

Roze --pink

HEX#FF4D6D
RGB255, 77, 109

Primaire knop en het merk. Tekst op roze is inkt.

Violet --violet

HEX#7B61FF
RGB123, 97, 255

Organisatoren, volgen en vermeldingen.

Amber --amber

HEX#FFB020
RGB255, 176, 32

Live, highlights, beoordelingen en beheer. Minder dan 5% van een scherm.

Signaal en data

Voor gelukt en voor grafieken. Niet als merkkleur.

Teal --teal

HEX#2EC4B6
RGB46, 196, 182

Gelukt en bevestigd.

Oranje --orange

HEX#F26430
RGB242, 100, 48

Alleen in data en grafieken.

Lime --lime

HEX#9BC53D
RGB155, 197, 61

Alleen in data en grafieken.

Donker thema

Het standaardthema van de site en de apps.

Inkt --ink

HEX#0E0B16
RGB14, 11, 22

Achtergrond. Ook de tekstkleur op roze.

Diep --deep

HEX#07050C
RGB7, 5, 12

De diepste laag, achter vellen en vensters.

Surface --surface

HEX#1A1524
RGB26, 21, 36

Kaarten en vellen.

Surface 2 --surface2

HEX#251E36
RGB37, 30, 54

Velden, chips en een kaart op een kaart.

Rand --border

HEX#2A2338
RGB42, 35, 56

Randen van 1 px.

Rand, hover --border-h

HEX#3A3350
RGB58, 51, 80

Rand bij hover en focus.

Tekst --text

HEX#FFF5F0
RGB255, 245, 240

Koppen en tekst.

Lopende tekst --body

HEX#C9C3D6
RGB201, 195, 214

Lopende tekst.

Gedempt --muted

HEX#9A93AB
RGB154, 147, 171

Tijden, metadata en hulptekst.

Licht thema

Hetzelfde merk op crème. De accenten blijven gelijk.

Crème --bg

HEX#FFF5F0
RGB255, 245, 240

Achtergrond van het lichte thema.

Surface --surface

HEX#FFFFFF
RGB255, 255, 255

Kaarten en vellen.

Surface 2 --surface2

HEX#F3ECF0
RGB243, 236, 240

Velden, chips en een kaart op een kaart.

Rand --border

HEX#E8DFE6
RGB232, 223, 230

Randen van 1 px.

Rand, hover --border-h

HEX#D9CFD8
RGB217, 207, 216

Rand bij hover en focus.

Tekst --text

HEX#0E0B16
RGB14, 11, 22

Koppen en tekst: inkt.

Lopende tekst --body

HEX#3D3550
RGB61, 53, 80

Lopende tekst.

Gedempt --muted

HEX#6B6478
RGB107, 100, 120

Tijden, metadata en hulptekst.

Accenten als tekst

Roze en violet halen als kleine tekst niet overal 4,5:1. Daarom heeft elk accent een tekstvorm: het accent met wat tekstkleur (donker) of inkt (licht) erdoor. Gebruik die voor tekst onder 24 px; vlakken, randen en stippen houden het gewone accent.

Aa--pink-tDonker#FF5E7A
Aa--violet-tDonker#9C86FB
Aa--pink-tLicht#AB364F
Aa--violet-tLicht#604CC5
Aa--teal-tLicht#20716E
Aa--amber-tLicht#AE4928

Contrast

Gemeten met de formule van WCAG 2. Tekst onder 24 px vraagt 4,5:1 (AA), grote tekst en de randen van knoppen en velden 3:1.

Donker

  • Tekst op inkt#FFF5F0 / #0E0B1618,2:1AAA
  • Lopende tekst op inkt#C9C3D6 / #0E0B1611,4:1AAA
  • Gedempt op inkt#9A93AB / #0E0B166,6:1AA
  • Gedempt op surface 2#9A93AB / #251E365,4:1AA
  • Inkt op roze, de knop#0E0B16 / #FF4D6D6,1:1AA
  • Roze op inkt#FF4D6D / #0E0B166,1:1AA
  • Violet op surface#7B61FF / #1A15244,2:1Groot en randen
  • Violet als tekst op surface#9C86FB / #1A15246,1:1AA
  • Amber op inkt#FFB020 / #0E0B1610,7:1AAA
  • Teal op inkt#2EC4B6 / #0E0B169,0:1AAA

Licht

  • Inkt op crème#0E0B16 / #FFF5F018,2:1AAA
  • Lopende tekst op crème#3D3550 / #FFF5F010,7:1AAA
  • Gedempt op crème#6B6478 / #FFF5F05,3:1AA
  • Inkt op roze, de knop#0E0B16 / #FF4D6D6,1:1AA
  • Roze op crème#FF4D6D / #FFF5F03,0:1Alleen decoratie
  • Roze als tekst op crème#AB364F / #FFF5F05,8:1AA
  • Violet als tekst op wit#604CC5 / #FFFFFF6,3:1AA
  • Amber als tekst op crème#AE4928 / #FFF5F05,2:1AA

Verloop

Roze naar violet onder 135 graden. Alleen op het app-icoon, op de achtergrond van een hero (hooguit 25% dekking) en in posterbeeld. Nooit op tekst of knoppen.

linear-gradient(135deg, #FF4D6D, #7B61FF)

Tokens

Dezelfde waarden als in de code van de site, als CSS-variabelen en als JSON.

/* PartyPPL colour tokens. Source: brand.partyppl.nl/kleuren. Never add colours; derive tints with alpha. */
:root {
  --pink: #FF4D6D;
  --violet: #7B61FF;
  --amber: #FFB020;
  --teal: #2EC4B6;
  --orange: #F26430;
  --lime: #9BC53D;
  --ink: #0E0B16;
  --deep: #07050C;
  --surface: #1A1524;
  --surface2: #251E36;
  --border: #2A2338;
  --border-h: #3A3350;
  --text: #FFF5F0;
  --body: #C9C3D6;
  --muted: #9A93AB;
  --bg: var(--ink);
  --on-pink: #0E0B16;
}
:root[data-theme="light"] {
  --bg: #FFF5F0;
  --surface: #FFFFFF;
  --surface2: #F3ECF0;
  --border: #E8DFE6;
  --border-h: #D9CFD8;
  --text: #0E0B16;
  --body: #3D3550;
  --muted: #6B6478;
}
CSS-variabelen, CSS, 1 kBJSON, JSON, 1 kB