Living styleguide

This living style guide is a reference for Utomik's designers and developers to understand how an application or website will look and feel. It is used to convey design language, define design rationale, and explain how to use markup. This living style guide should create a shared understanding among all team members and is a place for the whole team to reference how something should look and feel.

Living style guides should change and adapt to new needs and challenges that arise during the life of a project. Nothing should be written in stone, and they should consistently be refined and revised.

Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Poppins Semibold 56px | 3.5em

.font-size-xxl

Poppins Regular 40px | 2.5em

.font-size-xl

Poppins Regular 32px | 2em

.font-size-l
Poppins Regular 24px | 1.5em
.font-size-m
Poppins Regular 20px | 1.25em
.font-size-s
Poppins Regular: 16px | 1em
.font-size-xs
Poppins Regular: 14px | 0.875em
.font-size-xxs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
Block Quote
Block quote
Adventure
.tag-button
Adventure
.tag-button.disabled
Text Link
Text link
CTA button small
.cta-button-small
CTA button small
.cta-button-small.disabled
CTA button medium
.cta-button-medium
CTA button medium
.cta-button-medium.disabled
CTA button large
.cta-button-large
CTA button large
.cta-button-large.disabled
Regular button small
.regular-button-small
Regular button small
.regular-button-small.disabled
Regular button medium
.regular-button-medium
Regular button medium
.regular-button-medium.disabled
Regular button large
.regular-button-large
Regular button large
.regular-button-large.disabled
Warning button small
.warn-button-small
Warning button small
.warn-button-small.disabled
Warning button medium
.warn-button-medium
Warning button medium
.warn-button-medium.disabled
Warning button large
.warn-button-large
Warning button large
.warn-button-large.disabled

Our style has to look good on both a light as a dark background, that's why we have different classes depending where the element is shown. In case of a dark background we use [elementname]-white as naming convention.

Poppins Semibold 56px | 3.5em

.font-size-xxl.white

Poppins Regular 40px | 2.5em

.font-size-xl.white

Poppins Regular 32px | 2em

.font-size-l.white
Poppins Regular 24px | 1.5em
.font-size-m.white
Poppins Regular 20px | 1.25em
.font-size-s.white
Poppins Regular 16px
.font-size-xs.white
Poppins Regular 14px
.font-size-xxs.white

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.p-white
Block Quote
.blockquote-white
Adventure
.tag-button
Adventure
.tag-button.disabled
Text Link
.link white
CTA button small
.cta-button-small
CTA button small
.cta-button-small.disabled
CTA button medium
.cta-button-medium
CTA button medium
.cta-button-medium.disabled
CTA button large
.cta-button-large
CTA button large
.cta-button-large.disabled
Glass button small
.glass-button-small
Glass button small
.glass-button-small.disabled
Glass button medium
.glass-button-medium
Glass button medium
.glass-button-medium.disabled
Glass button large
.glass-button-large
Glass button large
.glass-button-large.disabled

Colors

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Main colors

Utomik green
#0ab90a
R: 10
G: 185
B: 10
Dodger blue
#3a81ba
R: 58
G: 129
B: 186
Random orange
#eea43c
R: 238
G: 164
B: 60
Firebrick red
#ba3a3a
R: 186
G: 58
B: 58
Dim purple
#535369
R: 83
G: 83
B: 105
Utomik green + Glass
#078b07
R: 7
G: 139
B: 7
Dodger blue + Glass
#2b618b
R: 43
G: 97
B: 139
Random orange + Glass
#b27b2e
R: 178
G: 123
B: 46
Firebrick red + Glass
#8b2b2b
R: 139
G: 43
B: 43
Dim purple + Glass
#3e3e4f
R: 62
G: 62
B: 79
Utomik green 10%
#e6f8e6
R: 230
G: 248
B: 230
Dodger blue 10%
#ebf2f8
R: 235
G: 242
B: 248
Random orange 10%
#fdf6eb
R: 253
G: 246
B: 235
Firebrick red 10%
#f8ebeb
R: 248
G: 235
B: 235

Font colors

Font color: High contrast - Light BG
#333333
R: 51
G: 51
B: 51
Font color: Inactive tabs
#666666
R: 51
G: 51
B: 51
Support color / Borders etc
#cccccc
R: 204
G: 204
B: 204
Font color: Inactive tabs
#999999
R: 51
G: 51
B: 51

Background colors

White bg color
#ffffff
R: 255
G: 255
B: 255
Midnight blue
#171a39
R: 23
G: 26
B: 57
Midnight blue 5%
#171a39 (opacity 5%)
R: 23
G: 26
B: 57
Subtle bg color
#fafafa
R: 250
G: 250
B: 250
Dark slate grey
#2f4639
R: 47
G: 70
G: 57
Midnight blue 10%
#171a39 (opacity 10%)
R: 23
G: 26
B: 57

Glass can be used specifically on top of dark backgrounds. Regarding the opacity it works well in combination with subtle background images. It's used for buttons and to highlight text blocks.

Glass

Glass
#000000 (opacity: 25%)
R: 0
G: 0
B: 0
Glass 5%
#000000 (opacity: 5%)
R: 0
G: 0
B: 0
Double glass
#000000 (opacity 50%)
R: 0
G: 0
B: 0
Glass 10%
#000000 (opacity 10%)
R: 0
G: 0
B: 0

Font colors

Font color: High contrast - Dark BG
#ffffff
R: 255
G: 255
B: 255
Font color: Low contrast - Dark BG
#cccccc
R: 204
G: 204
B: 204

Logos

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

Utomik logo: Horizontal black - RGB
Download
Utomik logo: Square black - RGB
Download
Utomik logo: Horizontal white - RGB
Download
Utomik logo: Square white - RGB
Download

Components

These are a few example components.

Alerts

This is an alert used in regular situations + text link
.Regular message box
This alert indicates a successful action + text link
.Success message box
This alert indicates a warning + text link
.Warning message box
This alert indicates an urgent matter or error + text link
.Error message box

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

List

Icons

Tabs

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tables

  • Table (can be used without head)
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Small list
  • Table (can be used without head)
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Medium list
  • Table (can be used without head)
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Large list

Our style has to look good on both a light as a dark background, that's why we have different classes depending where the element is shown. In case of a dark background we use [elementname]-white as naming convention.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

List

Navigation list

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tables

  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Small list
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Medium list
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Large list
Small clickable list