Dcreative Styleguide

Handleiding voor het gebruik van Dcreative branding elementen.

Logo

Het Dcreative logo vormt de basis van het Dcreative brand. De standaard versie heeft in het blauw Dcreative staan met een / tussen D en c. Dit is een verwijzing naar de technische achtergrond van Dcreative.

Er is ook een variant van het logo die op een donkere achtergrond gebruikt kan worden. Zoals bijvoorbeeld de blauw groene gradient.

Rondom het logo moet altijd een safespace aanwezig zijn die ervoor zorgt dat het logo apart staat. Elk element waarin het logo terug komt moet zo ontworpen zijn dat er geen andere elementen in deze safespace kunnen komen. De safespace is gedefinieerd als "zo groot als de hoogte van de letter C in het logo".

Kleuren

Het Dcreative brand bestaat uit 2 kleuren, 2 grijstinten en wit. De twee primaire kleuren zijn Blue en Red.

De twee primaire kleuren kunnen gebruikt worden voor koptext of achtergrond kleur. Op een achtergrond van één van de twee primaire kleuren wordt altijd wit gebruikt. Voor kopjes wordt in beginsel Blue gebruikt.

Dark Gray wordt gebruikt voor body text. Wanneer een iets donkere achtergrond gewenst is word Light Gray gebruikt. Dark Gray kan gebruikt worden voor donkere achtegronden. Op Dark Gray wordt White gebruikt voor text.

  • Blue
  • #2695cb
  • Red
  • #f62449
  • Dark Gray
  • #343a40
  • Light Gray
  • #e9ecef
  • White
  • #ffffff

Gradients

Naast de branding kleuren kent Dcreative ook nog de Gradients. Deze worden gebruikt als achtergrond en zijn bedoeld om Dcreative een fris en gedurfd uiterlijk te geven.

De Blue-Green gradient is de primaire gradient. Dat wil zeggen dat deze gebruikt wordt wanneer er slechts ruimte is voor één gradient. Het Dcreative logo wordt alleen gebruikt in de witte variant op de Blauw-Groene gradient.

Wanneer er ruimte is voor meerdere gradiënts worden de gradients in de volgende volgorde gebruikt: Blue-Green, Yellow-Orange, Teal-Indigo, Pink-Purple. Dit om er voor te zorgen dat er zo veel mogelijk contrast is tussen opvolgende gradients.

  • Blue - Green
  • #2695cb - #1fd386
  • Yellow - Orange
  • #ffcb25 - #ff9325
  • Teal - Indigo
  • #1dcbb3 - #6b30d2
  • Pink - Purple
  • #de20a0 - #8f29d0

Lettertype

Als lettertype wordt Roboto gebruikt. Roboto is gratis beschikbaar via Google fonts . Roboto is beschikbaar in 6 diktes, waarvan er maar 4 gebruikt worden.

Light word gebruikt als small text binnen een heading. Thin word gebruikt als body text. Bold word gebruikt voor Bold en voor Headings. Black word gebruikt voor Bold text binnen Headings.

Light

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Thin

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Bold

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Black

Lorem ipsum dolor sit amet, consectetur elit.

Lorem ipsum dolor sit amet, consectetur elit.

Elementen

Deze website gebruikt enkele elementen die veelvuldig terugkomen. Hieronder worden deze zonder verdere toelichting getoond.

Titels

h1 Titel

h2 Titel

h3 Titel

h4 Titel

h5 Titel
h6 Titel

Lead Text

Paragraaf. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Body Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.