Huisstijlanalyse

Voor de huisstijlanalyse ben ik in eerste instantie de code ingedoken om de exacte waarden op te halen van de IAMSTERDAM-huisstijl, maar dit bleek zo'n gedoe dat ik uiteindelijk toch maar een handmatige analyse op heb gesteld.

Ik heb er bewust voor gekozen deze niet megauitgebreid te maken; ik zette liever de huisstijl direct om in code volgens standaarden.

Style guide

Typografie

Ik heb de volgende afmetingen gebruikt per heading/tekstsoort:

$h1: 3rem;
$h2: 2.4rem;
$h3: 2rem;
$h4: 1.8rem;
$h5: 1.62rem;
$h6: 1.45rem;
$p: 1.3rem;
$footer: 1rem;
$figcaption: 1rem;
$baseline: 1.9rem;

Ik heb er hierbij voor gekozen om de fontgrootte ruim binnen de minimale leesbaarheidregels te weergeven en genoeg regelafstand te hanteren.

In eerste instantie maakte ik gebruik van een formule voor het berekenen van de optimale fontgrootte (zoals hier omschreven), uiteindelijk heb ik dit uit het prototype gehaald omdat het toch niet helemaal lekker werkte. Duurde wel even.

IAMSTERDAM gebruikt de fontsoort Avenir Black voor headings en Avenir voor verdere teksten; dit heb ik uiteraard in mijn ontwerp verwerkt.

html {
  font-family: Avenir;
}

h1, h2, h3, h4, .logo {
  font-family: Avenir Black;
}

Kleurgebruik

Wat betreft kleurgebruik vooral de hoofdkleuren van IAMSTERDAM toegepast; rood en groen. Met de groene kleur heb ik ook gebruikgemaakt van de verschillende saturatie/helderheidssoorten.

$red: rgb(255, 0, 0);
$almost-red: rgba(255, 0, 0, 0.95);
$white: rgb(255, 255, 255);
$grey: rgb(156, 156, 156);

$green: rgb(24, 175, 117);
$transparent-dark-green: rgba(7, 52, 35, 0.45);
$semi-green: rgba(24, 175, 117, 0.675);
$darker-green: rgba(7, 52, 35, 0.9);
$dark-green: #04111f;

Logo

Het label/logo is gebonden aan een redelijk strakke set regels; het mag maar op bepaalde wijze worden toegepast en moet de breedte hebben van (height/width) van de parent. Dit heb ik toegepast. Ook is er, zoals vereist, een minimale hoogte van 20px.

brand manual over toepassing IAMSTERDAM-logo