Zoeken

Typ waar je naartoe wilt.

Huisstijl

De naam, kleuren, logo's en taal van je winkel. Pas ze hier aan; de rest van het portaal volgt vanzelf.

Je huisstijl kan nu niet worden geladen. Ververs de pagina of probeer het later opnieuw.

Kleuren

De naam onder elk vlak is wat je gebruikt. Nooit de code zelf ergens intypen.

Basis

brown
brown-dark
brown-deep
burgundy
burgundy-deep
red
red-deep
red-warm

Rustige vlakken

sand
sand-soft
sand-deep
cream
ivory
paper

Accenten uit de prints

pink-bubblegum
pink-soft
pink-blush
olive-wild
olive-deep
green-forest
green-pistachio
blue-sky

Tekstkleuren

ink — gewone tekst

ink-70 — iets rustiger

ink-50 — gedempt, bijvoorbeeld een oude prijs

brown — koppen

burgundy — prijs en accent

red — link en actie

ink-40 en ink-30 zijn geen tekstkleuren. Die zijn voor lijntjes en randjes. Tekst daarin is te licht om te lezen.

Letters

Drie letters, verder niets.

Fraunces — koppen en prijzen

Geist — alle gewone tekst en knoppen

Smal lettertype — artikelnummers

Maten

Hero

Display

Kop 1

Kop 2

Kop 3

Kop 4

Titel op een productkaart

Gewone tekst

Kleine tekst, knoppen en menu

Heel klein: chips en meta

Bovenkopje

Diktes

Gewoon — lopende tekst

Halfdik — knoppen en menu

Dik — kaarttitels en bovenkopjes

Vet — grote koppen

Extra vet — hero en prijs

Knoppen en labels
NieuwJust inLimitedBestsellerSaleUitverkocht

Elk label heeft een vaste tekstkleur die erop leesbaar blijft. Kies dus een heel label, niet los een achtergrond.

Ruimte en vorm

Tien stappen ruimte. Alles daartussen bestaat niet.

s-1
s-2
s-3
s-4
s-5
s-6
s-7
s-8
s-9
s-10

Ronde hoeken

r-smr-mdr-lgr-xlr-pill
Leesbaar voor iedereen

Vier afspraken die de winkel bruikbaar houden voor wie slecht ziet of geen muis gebruikt.

  • Tekst heeft altijd minstens viereneenhalf keer verschil met de achtergrond.
  • Een rand om een invoerveld of knop is altijd duidelijk te zien.
  • Wie met de toetsenbordtab werkt, ziet altijd waar hij staat.
  • Alles wat je aantikt is minstens zo groot als een vingertop.

Zo ziet de toetsenbord-rand eruit. Tab naar de knop hieronder:

Dit scherm is intern. Klanten zien het niet. Verandert er een kleur in de winkel, pas hem hier ook aan.