Style Guide

A complete guide to Lob’s modular interface elements

Colors

Color swatches used to color all interface elements on Lob.com

Primary Colors

Cobalt

#1878e0

Pantone 2387 C

Cerulean (Lob Logo)

#0099d7

Pantone 7461 C

Robinsegg

#7CC6DD

Pantone 2198 C

Grays

Use darks (e.g., Shadow, Midnight, Steel) for text, and lights (e.g., Fog, Mist, White) for background colors

Shadow

#27333c

Midnight

#324350

Shadow 50

#416581

Steel

#5f83a5

Dove

#c5d6e6

Fog

#ebf0f6

Mist

#F7F9FA

White

#ffffff

Secondary Colors

Secondary options for emphasized text

Turquoise

#57A1B9

Flint

#7798c8

Tertiary Colors

Only use these colors for spot illustrations and misc. graphics

Mint

#6cc399

Lime

#b8de62

Gold

#f7d669

Cornsilk

#FFF6CB

Burlywood

#EBB572

Caramel

#D79139

Tortilla

#CBAB7E

Clay

#D99980

Coral

#FF9E98

Pink

#FFCECE

Taffy

#f79fc3

Plum

#b29aec

Seafoam

#68CCBB

Azure

#70c0e0

Bluebird

#84bfd7

Sky

#96CDF2

Feedback Colors

For informational messaging

Success

#4bbc85

Error

#f76e40

Warning

#ffd158

Alert Bar

#ffe773

Buttons

Component, text style and size variations

Button Sizes

Primary Colors

Grays & White

Feedback Colors

Circle Buttons

Icons

Sign up with Google

Typography

Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Blue Intro Text

Text Large

Body Text

Small Text

text caps

Standard link

Link with hover underline

Lists

Headings, body and other common text elements.

Unstyled <ul></ul>

Dope
Sick
Amazing

Colored Bullets

Dope
Sick
Amazing

Checklist

Dope
Sick
Amazing

Icons - Interface

All interface icons pulled from https://iconsvg.xyz/

Icons - Custom

Icons unique to Lob, reach out to Emily for new icon request

Badges

Combine with other components to display metadata

Default

Badge Text

Primary Colors

Primary 1

Primary 2

Primary 3

Primary 4

Feedback Colors

Success

Warning

Error

Cards

A multipurpose component used to display content in boxed format.

Default Styles

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link

With Foot

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link

With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link

Form Inputs

Styles for form inputs and form feedback states.

Input Sizes

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.

Labelled Input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Input with Icon

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.

Radio & Checkbox

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.

Form Feedback

The form submission was a success!

There was an issue with the form submission!

Shadows

Preset styles to imply depth on interface components

Shadow Small

Shadow

Shadow Large

Dropdowns

Preset styles to imply depth on interface components

Tooltips

Provide additional information in a small pop-up.

Hover on this icon

Avatars

Multiple sizes and styles to represent users around the interface.

Avatar Sizes

Avatar Group

Avatar Indicators

Avatar with name

Leore Avidar