torgius
Style guide
visual identity
color palette
torgius 1.0
primary
#1E1810
primary
#_________
primary
#_________
secondary
#FF7A3D
secondary
#FF5100
secondary
#_________
background
#F8F5F4
background
#_________
background
#_________
background
#_________
overlay
30-60%
H1
#FFFFFF
H1 S
#_________
H2
#1E1810
H3
#1E1810
body B
#_________
body S
#_________
body
#575250
torgius 2.0
primary
#1E1810
primary
#575250
primary
#4B4F5B
secondary
#FFA43C
secondary
#FF8945
secondary
#FFFFFFF
background
#FAF9F8
background
#FDFDFD
background
#F9F9FA
background
#F9FAF9
overlay
30-60%
H1
#FFFFFF
H1 S
#C0BEBE
H2
#1E1810
H3
#1E1810
body B
#1E1810
body s
#ACACAC
body
#575250
style guide
Template - Headers and body
Device: Desktop
h2: overskrift
Body tekst afsnit, man fylder teksten ind på.
H3: under-overskrift
Body tekst afsnit, man fylder teksten ind på.
H3: under-overskrift
Body tekst afsnit, man fylder teksten ind på.
style guide
Template - top section
Mission og Vision
det der bevæger os frem
style guide
Template - bullets
Select text editor (the text box) and click > Style > Typography > Line height - to change bullet spacing
Bodytekst afsnit forud for bullets.
- Bullet 1: Beskrivelse af bullet.
- Bullet 2: Beskrivelse af bullet.
- Bullet 3: Beskrivelse af bullet.
- Bullet 4: Beskrivelse af bullet.
Select the second text editor (the text box with bullets) and click > Style > Typography > Line height - to change bullet spacing
Bodytekst afsnit forud for bullets.
- Bullet 1: Beskrivelse af bullet.
- Bullet 2: Beskrivelse af bullet.
- Bullet 3: Beskrivelse af bullet.
- Bullet 4: Beskrivelse af bullet.
style guide
templates - text size - devices
Device: Desktop
H2: Subheader titel
H3: Sub-subheader titel
Body: Fremtidens forvaltningsplatform
Device: Tablet
H2: Subheader titel
H3: Sub-subheader titel
Body: Fremtidens forvaltningsplatform
Device: mobile
H2: Subheader titel
H3: Sub-subheader titel
Body: Fremtidens forvaltningsplatform
style guide
templates - core elements
Spacer (invisible) - use it to control spacing between individual elements - select it below
I recommend using "airy spacing" for aestetics. It reduces visual load, minimizes clutter and increases focus.
Such as 130 px to the top section of the page (box with h1 header) and 90 px to the footer (bottom of the page)
See what works, when you use it.
Divider (line of various thickness and color) - use it to split sections or frame text
Click the divider > Style > Weight - to change thickness and Gap - to change spacing
Icon - use it emphasize the theme of a section, create visual interest and create an anchor point for attention
There are many icons available - click the icon > Icon field - then scroll or search for the fitting icon
Click > Style - to change color, size, alignment or rotate the icon
Image - useful element to keep visual attention, let people know us, and transport them into the brand universe of Torgius
Click > Style - to adjust the width (the one below is at 40%)
Max width - the max width it stretches to (dynamically, across different browser sizes, when viewed) on the page
Click > Content > Choose image - to select an image among the ones we have uploaded.
Click > Content - to change the resolution (lower is better for faster loading, just make sure it looks decent)
Container with image background - allows for options, that the image element does not provide.
So as, adding text, icons and other elements onto it. Even darkening or adding colored hues to it.
Click container (grey box in the upper left corner) > Style - choose Classic for background style > Choose image - and select one
In style tab - choose > Display Size - try the different display conditions
In style tab, choose Background Overlay > Classic - choose darkest black - then use the Opacity slider, to choose your percentage
You can drag and drop element onto this box, like any normal container.
This is not possible with images, only containers with image backgrounds.
Slider - displays text on similar or different backgrounds, by switching between the created slides, at chosen intervals of time
Carousel - displays text on similar or different backgrounds, slides a chosen amount to one side, side by side, at chosen intervals
Grid - container for structured and repeating patterns of elements on the page
Great for precise horizontal and vertical control (spacing and alignment) of containers within the grid structure.
Remember to drag and drop containers into the placeholder field (grey box) if you want to stack several elements together
Otherwise, you can only drop one element in each placeholder spot .
Use it for our main page content. Headers, sidebars, portfolio grids, image galleries, cards and more.
Flexbox - container for
Also great for precise spacing and aligment, but only one chosen direction.
Which means that elements stack side by side, vertically, or top to bottom, one below the other.
Use it for navigation bars, footer navigation links, breadcrumbs, buttons in a row, icons and text sections.
Tabs - chosen amount of tabs, for users to choose between, to have specifically categorized content displayed for them
Typography
header text
torgius 2.0
Device: Desktop
H1: 54px (desktop)
Color: #FFFFFF (ren hvid)
H1 (S): 46px (desktop)
Color: #FFFFFF (ren hvid)
H2: 46px (desktop)
Color: #1E1810
H3: 32px (desktop)
Color: #1E1810
Font family: Oswald
Weight: 600 (semi-bold)
Transform: uppercase
Body: 18px
Color: #5E5A56
Family: Poppins
torgius 2.0
Device: Desktop
H1: PRIOPTI
H1: subtekst
H2: PRIOPTI
H3: PRIOPTI
Body: Fremtidens forvaltningsplatform
torgius 2.0
Device: Tablet
H1: 50px (tablet)
Color: #FFFFFF (ren hvid)
H1 (S): 44px (tablet)
Color: #FFFFFF (ren hvid)
H2: 38px (tablet)
Color: #1E1810
H3: 26px (tablet)
Color: #1E1810
Body: 16px
Color: #5E5A56
Family: Poppins
torgius 2.0
Device: Tablet
H1: PRIOPTI
H1: subtekst
H2: PRIOPTI
H3: PRIOPTI
Body: fremtidens forvaltningsplatform
torgius 2.0
Device: Mobile
H1: 30px (mobile)
Color: #FFFFFF (ren hvid)
H1 (S): 25px (mobile)
Color: #FFFFFF (ren hvid)
H2: 24px (mobile)
Color: #1E1810
H3: 20px (mobile)
Color: #1E1810
Body: 16px
Color: #5E5A56
Family: Poppins
torgius 2.0
Device: Mobile
H1: PRIOPTI
H1: subtekst
H2: PRIOPTI
H3: PRIOPTI
Body: fremtidens forvaltningsplatform