Welcome to the Sakara Life Digital Style Guide

Use this style guide to quickly align new pages of the site with the brand and visual direction of Sakara Life.

cofounders

Why use this Digital Guide?

This style guide should be referenced when creating new components, pages, and elements in the digital design system of Sakara.com. Developers, designers, and content creators should use this system in order to keep a coherent and stadardized visual system.

Color Palette

The global system for colors used throughout the digital applications.

Color Palette

black

#000000

Color primary

Relevant files:
  • styles/styles-v2/settings/_colors.scss
Example:
background-color: $color-v2-brand-primary;

gray

#F8FAF9

Color secondary

Relevant files:
  • styles/styles-v2/settings/_colors.scss
Example:
background-color: $color-v2-brand-secondary;

accent blue 1

#DFE9E4

Color tertiary

Relevant files:
  • styles/styles-v2/settings/_colors.scss
Example:
background-color: $color-v2-brand-tertiary;

accent blue 2

#9299A9

Color quaternary

Relevant files:
  • styles/styles-v2/settings/_colors.scss
Example:
background-color: $color-v2-brand-quaternary;

error red

#d0021b

Color quinternary

Relevant files:
  • styles/styles-v2/settings/_colors.scss
Example:
background-color: $color-v2-brand-quinternary;

Typography

The global system for typography used throughout the digital applications.

Typography

Headings

Desktop

Mobile

Campaign Title

FreightDisplay Pro Book / Font Size: 74px / Letter-Spacing: 0px / Line-Height: 77px

Campaign Title

FreightDisplay Pro Book / Font Size: 40px / Letter-Spacing: 0px / Line-Height: 43px

Main Title

FreightDisplay Pro Book / Font Size: 60px / Letter-Spacing: 0px / Line-Height: 64px

Main title

FreightDisplay Pro Book / Font Size: 34px / Letter-Spacing: 0px / Line-Height: 40px

Sub Title

FreightDisplay Pro Book / Font Size: 48px / Letter-Spacing: 0px / Line-Height: 54px

Sub Title

FreightDisplay Pro Book / Font Size: 30px / Letter-Spacing: 0px / Line-Height: 36px

Secondary Title

FreightDisplay Pro Book / Font Size: 36px / Letter-Spacing: 0px / Line-Height: 42px

Secondary Title

FreightDisplay Pro Book / Font Size: 26px / Letter-Spacing: 0px / Line-Height: 42px

Small Title

FreightDisplay Pro Book / Font Size: 26px / Letter-Spacing: 0px / Line-Height: 32px

Small Title

FreightDisplay Pro Book / Font Size: 20px / Letter-Spacing: 0px / Line-Height: 24px

Typography

Relevant files:
  • styles/styles-v2/settings/_typography.scss
Example:
.class { @include font-v2-campaign-title; }

Paragraphs

Desktop

Mobile

Big Paragraph This is a link

FreightText Pro Book / Font Size: 20px / Letter-Spacing: 0px / Line-Height: 26px

Big Paragraph This is a link

FreightText Pro Book / Font Size: 16px / Letter-Spacing: 0px / Line-Height: 22px

Paragraph This is a link

FreightText Pro Book / Font Size: 16px / Letter-Spacing: 0px / Line-Height: 22px

Paragraph This is a link

FreightText Pro Book / Font Size: 14px / Letter-Spacing: 0px / Line-Height: 20px

Small-paragraph This is a link

FreightText Pro Book / Font Size: 13px / Letter-Spacing: 0px / Line-Height: 20px

Small-paragraph This is a link

FreightText Pro Book / Font Size: 12px / Letter-Spacing: 0px / Line-Height: 16px

Paragraph Sans This is a link

Fututa PT Book / Font Size: 16px / Letter-Spacing: 0px / Line-Height: 20px

Paragraph Sans This is a link

Fututa PT Book / Font Size: 14px / Letter-Spacing: 0px / Line-Height: 18px

label

Fututa PT Medium / UPPERCASE / Font Size: 14px / Letter-Spacing: 0px / Line-Height: 20px

label

Fututa PT Medium / UPPERCASE / Font Size: 12px / Letter-Spacing: 0px / Line-Height: 18px

Forms & Buttons

Forms and buttons used to fill out forms and their associated interactive elements.

Site Forms & Buttons

Input Field

States

Desktop

Mobile

Placeholder
Default
Error

Input field

Relevant files:
  • styles/styles-v2/objects/_input-text.scss
  • styles/styles-v2/components/_input-text.scss
  • styles/styles-v2/objects/_input-error.scss

Zip Code Checker

States

Desktop

Mobile

Placeholder
errors
errors
Entered
errors
errors

Zip Code field

Relevant files:
  • styles/styles-v2/objects/_input-text.scss
  • styles/styles-v2/components/_zipcode-input.scss
  • styles/styles-v2/objects/_input-error.scss

Dropdown

States

Desktop

Mobile

Placeholder
Default
Error

Dropdown field

Relevant files:
  • styles/styles-v2/objects/_dropdown.scss

Radio Button

States

Desktop

Mobile

Inactive
Active
Error

radio field

Relevant files:
  • styles/styles-v2/components/_input-radio.scss
  • styles/styles-v2/objects/_input-error.scss

Checkbox

States

Desktop

Mobile

Inactive
Active
Error

Square Checkbox field

Relevant files:
  • styles/styles-v2/components/_input-checkbox-square.scss
  • styles/styles-v2/objects/_input-error.scss

Buttons

States

Desktop

Mobile

Clean Boutique (Hover to see hover state)
OMD Buton (Hover to see hover state)
Standard
Disabled
Alternative

Buttons

Relevant files:
  • styles/styles-v2/objects/_button.scss
  • styles/styles-v2/components/_atc-button.scss

Qty Selector Button

States

Desktop

Mobile

Default (Hover to see hover state, click to see default dropdown)

Quantity Selector

Relevant files:
  • styles/styles-v2/objects/_button.scss
  • styles/styles-v2/components/_quick-shop.scss

Components

The global system for smaller UI components used throughout the digital applications.

UI components

Switch

States

Desktop

Mobile

Inactive
Active

Switch

Relevant files:
  • styles/styles-v2/components/_input-switch.scss

Toggle

Desktop

Mobile

Toggle

Relevant files:
  • styles/styles-v2/objects/_pill.scss

Tabs

Check Buttons

States

Desktop

Mobile

Inactive
Active

Check Button

Relevant files:
  • styles/styles-v2/components/_input-checkbox-plus.scss
  • styles/styles-v2/components/_input-checkbox-square.scss

Tertiary 'Swap' Button

Desktop

Mobile

Swap Button

Relevant files:
  • styles/styles-v2/objects/_pill.scss

Indicators

States

Desktop

Mobile

Stylized

Tooltip

States

Desktop

Mobile

Inactive
Active

Quantity

States

Desktop

Mobile

Default

Quantity input

Relevant files:
  • styles/styles-v2/components/_input-quantity.scss

Iconography

The global system for typography used throughout the digital applications.

Iconography

Marketing Icons

MI-1

MI-2

MI-3

MI-4

MI-5

MI-6

MI-7

MI-8

MI-9

MI-10

MI-11

MI-12

MI-13

MI-14

MI-15

MI-16

MI-17

MI-18

MI-19

MI-20

MI-21

MI-22

MI-23

MI-24

MI-25

MI-26

MI-27

MI-28

Utility Icons

UI-1

UI-2

UI-3

UI-4

Active
Inactive
Active
Inactive
Active
Inactive
Active
Inactive

UI-5

UI-6

UI-7

UI-8

Active
Inactive
Active
Inactive
Combo Stars
Closed
Opened

UI-9

UI-10

UI-11

UI-12

Email
Logo, Thick
Logo, Thin

UI-13

UI-14

UI-15

UI-16

Check
Plus
Minus

UI-17

UI-18

UI-19

UI-20

UI-21

UI-22

UI-23

UI-24

Arrows

Arrow-Large

Arrow-Medium

Arrow-Small

Social

Social-FB

Social-Twttr

Social-Insta

Social-Pinterest

Social-YT

Back To Top