Base v5.1

GoBasic Design Framework

Et GoBasic website er født med et konfigurerbart basis stylesheet der dikterer designet. Vi kalder det GoBasic Design Framework. 

Farver

Vælg din egen farvepalette

For at få et alsidigt design, har du brug for fem-seks farver. I GoBasic Design Framework har du mulighed for at vælge din egen farvepalette bestående af én primær farve og fem sekundære farver. 

Primær farve

  • HEX #0e3a42
  • RGB (14, 58, 66)
  • CMYK (79%, 12%, 0%, 74%)

Sekundær farve

  • HEX #357366
  • RGB (53, 115, 102)
  • CMYK (54%, 0%, 11%, 55%)

Sekundær farve

  • HEX #c3d4cb
  • RGB (195, 212, 203)
  • CMYK (8%, 0%, 4%, 17%)

Sekundær farve

  • HEX #ded3ba
  • RGB (222, 211, 186)
  • CMYK (0%, 5%, 16%, 13%)

Sekundær farve

  • HEX #302509
  • RGB (48, 37, 9)
  • CMYK (0%, 23%, 81%, 81%)

Sekundær farve

  • HEX #f2f5f5
  • RGB (242, 245, 245)
  • CMYK (1%, 0%, 0%, 4%)
Farver

Tag farvepaletten i brug

Farverne, I vælger, kommer i spil på de forskellige bokse og moduler i GoBasic.

Primærfarve

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.

Læs mere

Sekundærfarve

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.

Læs mere

Sekundærfarve

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.

Læs mere

Sekundærfarve

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.

Læs mere

Fonte

Vælg skrifttyper til overskrifter og brødtekster

Der ligger en stor del af jeres visuelle identitet og udtryk i valget af skrifttyper. i GoBasic Design Framework kan I vælge to skrifttyper: En til overskrifter og en til brødtekst. 

Overskrifter

Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • Exo 2.0
  • Weight: 400
  • Style: Regular
Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • Exo 2.0
  • Weight: 400
  • Style: Italic

Brødtekster

Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • Arial
  • Weight: 500
  • Style: Regular
Aa
  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890(,.;:?!$&*)
  • Arial
  • Weight: 500
  • Style: Italic
Header

Indstil farver og grafiske elementer der indrammer dit website

I toppen af websitet placerer I jeres logo. Der er også mulighed for at vælge en baggrundsfarve i headeren samt en farve, der lægger sig bag topnavigationen. Søgeikonet får jeres valgte primærfarve.

Former

Juster hvor afrundede hjørner I vil have

Kantet og formelt eller rundt og blødt - graden af hvor runde jeres hjørner er, er med til at give jeres website et udtryk. Bokse og knapper kan fx have helt vinkelrette eller ganske afrundede hjørner - eller et sted, I vælger, midt imellem. 

Runde hjørner

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac.

Læs mere

Kantede hjørner

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac.

Læs mere

Eksempel

Små justeringer der gør den store forskel

Når farver, skrifttyper og former på elementer sættes sammen, sker der noget med udtrykket. De fotos, I bruger, spiller også en stor rolle for, hvordan jeres website fremstår. Prøv at se forskellen på eksemplet herunder:

Oversigt

Basis design-variable

Det lyder måske af meget, men det er er faktisk ganske få variable, der er at skrue på. For de mere nørdede har vi lavet en liste over, hvad vi kalder de variable, der kan skrues på, i GoBasic Design Framework herunder:

Farver

$color-a
$color-b 
$color-c
$color-d
$color-e
$color-f

Fonte

$font-base
$font-heading

Header

$header-background-color
$nav-main-background-color

Runde hjørner

$universal-border-radius