Design System

Branding

Typography

Hier vind je alles over de typografie voor de TGP-stijl. Dit is de basis van tekstuele uitingen van TGP. Ook developers zitten hier op de juiste plek: alle variabelen zijn op deze pagina te vinden.

Typeface

The Goodplace gebruikt de typeface Galano Grotesque voor haar huisstijl. Dit komt terug in zowel de website als drukwerk. De weights Regular en Bold staan hierin centraal.

Typescale

/ /
NameFontsize / Line-heightFont weight

Display

Heading

Heading

Heading

Heading

Body Large
Body Bold
Body
Body Light
Label

Colors

De kleuren van the Goodplace zijn vrolijk en basic. Want wij zijn uitzonderlijk gewone jongens(en meiden).

Primary colors

Dit zijn de primaire kleuren van The Goodplace

primary

Dit is de kernkleur voor TGP. De combinatie met wit, grijs geeft overzicht. Het accent van een secundaire kleur staat voor onze creativiteit.
RGB :
HEX :
SCSS: $primary

light-grey

Deze tint grijs wordt gebruikt voor cards, blocks en als achtergrond.
RGB :
HEX :
SCSS: $light-grey

white

Wit vormt de basis van onze website. Het ontwerp is zo kalm en minimalistisch met veel witruimte.
RGB :
HEX :
SCSS: $white

Secondary colors

Dit zijn de primaire kleuren van The Goodplace

secondary

Deze kleur wordt voor tekstlinks, buttons, iconen gebruikt.
RGB :
HEX :
SCSS: $secondary

tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $tertiary

quartiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $quartiary

black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $black

off-white

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $off-white

Extra colors

Dit zijn de primaire kleuren van The Goodplace

dark-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $dark-primary

dark-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $dark-secondary

dark-off-white

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $dark-off-white

light-off-white

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur magna tempor, finibus tortor.
RGB :
HEX :
SCSS: $light-off-white

light-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur mag
RGB :
HEX :
SCSS: $light-primary

light-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh euismod, consectetur mag
RGB :
HEX :
SCSS: $light-secondary

Buttons

 <?php getButton('primary', $buttonContent, '', false, false) ?>
 <?php  getButton('primary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php  getButton('secondary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('tertiary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('quartiary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('link', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-primary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-secondary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-white', $buttonContent, 'arrow_forward', false, false) ?>

Layout

Het gridsysteem van The Goodplace bestaat uit een flexible grid van 12 colums met een gutter van 2 x 12px (op desktop) of 2 x 0.75rem

Grid

Het gridsysteem van The Goodplace bestaat uit een flexible grid van 12 colums met een gutter van 2 x 12px (op desktop) of 2 x 0.75rem

Container widths:

sm: 540px
md: 720px
lg: 960px
xl: 1100px
xxl: 1200px

Container fluid

Col 12
Col 6
Col 6
Col 4
Col 4
Col 4
Col 3
Col 3
Col 3
Col 3
Col 2
Col 2
Col 2
Col 2
Col 2
Col 2
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1

Icons

Hier beschrijven we waarom we voor deze iconset van Google Material Icons Outlined hebben gekozen.

search
Zoeken
east
Pijltje rechts
menu
Menu
close
Close
user
Account

Custom icons Icons

Hier beschrijven we waarom we voor custom icons hebben gekozen. Deze custom icons zitten in de images/icons map

Instagram
Linkedin
X(Twitter)
Whatsapp
Building Balance
Meer weten?