ColdCake

Stijlgids

Elk bouwblok van de site, een keer, met zijn echte naam erbij. Zie je iets dat niet klopt, noem de naam en ik pas het op een plek aan.

Kleur

De waarde onder elke chip wordt live uit de stylesheet gelezen, niet hier overgetypt.

--cc-creampagina
--cc-inktekst, donker vlak
--cc-coralaccent, hoofdactie
--cc-softtweede vlak
--cc-coral-2hover op koraal
--cc-hairhaarlijn, 10% inkt

Status

--cc-success
--cc-warning
--cc-error
--cc-info

Typografie

Stuur een cake, geen mail.

Een cake op iemands bureau.

Vier tiers, een maand opzegbaar.

Body, Inter. Leesmaat blijft tussen 60 en 75 tekens, want een regel die de volle breedte pakt leest goedkoop. Dit is precies zo lang dat je het verschil ziet.

Label, IBM Plex Mono

Label groot

Datum-label: Sep 2025, Lavender 2024, per maand

Vorm en beweging

Hoeken

12invoer 16kaart 999knop

Duur

  • knop, hover
  • kaart, staat
  • binnenkomen

Easing

Knoppen

Twee stijlen, elk een rol. Zeventien varianten worden deze twee.

Hoofdactie .cc-btn--sans

Stuur je eerste cake, 160 euro Bekijk de plannen Bouw een cake

Compacte actie .cc-btn--mono

Bekijk plan Verstuur bericht Meer

Tab er met je toetsenbord doorheen: elke knop hoort een koraal kader te krijgen. Dat kader is het enige teken dat een toetsenbordgebruiker heeft.

Kaarten

Vier recepten, dertig behandelingen. De eerste vervangt er in zijn eentje zes die exact hetzelfde ontwerp waren.

.cc-card--outline

Creme met haarlijn

Het standaardvlak. Beweeg eroverheen: twee pixels omhoog, rand wordt inkt. Vervangt .tier, .cc-plan, .cc-why__card, .cc-compare, .cc-omf__form en .cc-manifesto__stmt.

.cc-card--fill

Zacht vlak

Geen rand. Voor blokken die rust moeten geven naast een hairline-kaart.

.cc-card--ink

Inkt

Leestekens van de pagina. Een of twee per pagina, nooit afwisselend. Tekst wordt creme.

.cc-card--rule

Alleen een lijn

Geen doos. Een rij, gescheiden door een haarlijn. Voor lijsten die geen kaarten hoeven te zijn.

Velden

Vul een volledig adres in, met de punt erachter.

Wat waar in verdwijnt

Links het bouwblok, rechts de bestaande klassen die er straks doorheen renderen. Geen enkel sectiebestand wordt daarvoor aangeraakt.

.cc-btn--sans.btn .btn-primary .btn-secondary .cc-hoehero__btn .cc-hoeslot__btn
.cc-btn--mono.cc-plan__cta .cc-vsx__btn--primary .cc-quiz__result__cta .cc-omf__submit
.cc-card--outline.tier .cc-manifesto__stmt .cc-why__card .cc-plan .cc-compare .cc-omf__form
.cc-card--fill.card .step .contact-side .cake-stage
.cc-card--ink.tier.featured .cc-plan--featured .cc-quiz__result .cc-hoeslot__panel .price-summary
.cc-labelde 12 sierlabels die verborgen blijven
.cc-label--data.cc-tl__when .cc-prin__no .cc-vsh__side__sub .cc-compare__source .tier-num .step-num
.cc-visually-hidden.cc-hoehero__railtitle .cc-hoestap__num .cc-hoewaarom__num .cc-quiz__q-label .cc-quiz__result__label .cc-hoehero__n

Die laatste rij is inhoud, geen versiering. Nu staat ze op display:none, wat betekent dat Google en schermlezers haar ook niet zien. Straks blijft ze onzichtbaar voor het oog maar leesbaar voor de rest.