Style Guide

We love that you love ToolTime. We want to make it easy for you to use our brand in the right way. Explore this quick guide of our most basic brand and design elements.
Colors

Primary and grey text colors

Sunset 400
#ee5e5e
Sunset 300
#fd6b54
Sunset 200
#fbc7be
Sunset 100
#fef5f4
Midnight 400
#102f4b
Midnight 300
#365067
Midnight 200
#657a8b
Midnight 200
#8294a7
Sky 400
#d1d7dc
Sky 300
#e7e9ed
Sky 200
#eff1f3
Midnight 100
#f9f9fb
Gray 1
#353e44
Gray 2
#4f5c65
Gray 3
#e9eef1
Sunset 300
#fd6b54
Midnight 400
#102f4b
Headline blue
#01315c
Background gray
#f7fafc
White
#ffffff
Typography

There are 2 main fonts used. Barlow for headlines and Rubik for body copy

Barlow 800 Extra Bold

Only used for the main headline

Barlow 700 Bold

Used for headlines outside of main headline
Rubik 400 Normal
Used for body copy
Rubik 500 Medium
Used for text links and button text
Font styles

Headings, body text, links and other common text elements.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Large Text
Large Link
Body Text
Body Link
Small Text
Small text Link
Tiny Text
Tiny Link
Buttons and text links

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

arrow
Graphic elements

Supportive graphics to set a mood, these graphics should be used sparingly in user interfaces

icon spark positivity
icon spark positivity
icon best together
icon user centric
icon user centric
icon user centric
icon user centric
icon user centric
icon user centric
icons
GewerkMitarbeiter
Ikon service
Ikon service
Ikon service
Ikon service
Ikon service
icon stay curious
icon best together
icon spark positivity
icon user centric
icon collaboration
Forms

Size and state variations for text inputs

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
* Here is some input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cards

Structural component for displaying boxed content

Default Style

Some card text

Text Link
Offset Style

Some card text

Text Link
Dark Style

Some card text

Text Link
Default Style

Some card text

Text Link
Pills
Pill with icon
Pill with icon
Shadows

Preset shadow utilities to imply varying levels of depth

Small
Medium
Large