Lob’s website experience is not optimized for Internet Explorer.
Please choose another browser.
Products
APIs
Print & Mail
Program and control direct mail just like email
Address Verification
Validate, clean, and standardize address data
Partners
Build on Lob
Add personalized offline communications to
your app
Solutions
Industry
Financial Services
Insurance
Healthcare
Retail & Ecommerce
Role
Product Managers
Developers
Marketers
Pricing
Pricing
Print & Mail
Address Verification
Premium Support
Customers
Resources
Docs & Resources
API Reference
API Status
Guides
Template Gallery
Help Center
Company
About
About Lob
Careers
Partners
Partnerships
Print Network
Content & Events
Library
Events
Blog
Search
Sign up
Log in
Log in
Search
Sign up
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
Pantone 2727 C
Cerulean
(Lob Logo)
#0099d7
Pantone 7461 C
Pantone 2192 C
Robinsegg
#7CC6DD
Pantone 630 C
Pantone 2198 C
Lemon
#ffda74
Pantone 120 C
Grays
Shadow
#27333c
Pantone 4280 CP
Midnight
#324350
Shadow 50
#416581
Steel
#5f83a5
Dove
#c5d6e6
Pantone 2707 C
Fog
#ebf0f6
Mist
#F7F9FA
White
#ffffff
Secondary
Sky
#96CDF2
Green
#67cda4
Seafoam
#68CCBB
Bluebird
#84bfd7
Robinsegg
#7CC6DD
Turquoise
#57A1B9
Cornsilk
#FFF6CB
Caramel
#D79139
Tortilla
#CBAB7E
Sushi
#E39C84
Coral
#FF9E98
Pink
#FFCECE
Secondary Colors
Turquoise
#57A1B9
Bluebird
#84bfd7
Sky
#96CDF2
Azure
#70c0e0
Seafoam
#68CCBB
Green
#67cda4
Mint
#6cc399
Lime
#b8de62
Gold
#f7d669
Cornsilk
#FFF6CB
Burlywood
#EBB572
Caramel
#D79139
Tortilla
#CBAB7E
Clay
#D99980
Sushi
#E39C84
Coral
#FF9E98
Pink
#FFCECE
Taffy
#f79fc3
Plum
#b29aec
Flint
#7798c8
Tertiary
Clay
#D99980
Salmon
#ff9d93
Taffy
#f79fc3
Plum
#b29aec
Burlywood
#ebb572
Gold
#FFF6CB
Lime
#b8de62
Mint
#6cc399
Azure
#70c0e0
Bluebird
#84bfd7
Flint
#7798c8
Feedback
Success
#6bc4a6
Warning
#ffd158
Error
#f76e40
Alert Bar
#ffe773
Buttons
Component, text style and size variations
Button Sizes
Small
Standard
Large
Primary Colors
Primary
Primary 2
Primary 3
Secondary
Extra Emphasis
Tertiary
Grays & White
Dark
Dark 2
Dark 3
Gray 4
White
Feedback Colors
Success
Warning
Error
Circle Buttons
Icons
Search
Finish
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.
Text Link
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
Input Label
* Hint Text
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
Radio Label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
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
Basic
Link 1
Link 2
Link 3
Multi Column
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
With Footer
Link 1
Link 2
Link 3
Foot Link
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Leore Avidar