Lever website design guidelines

Website design system

CSS classes and modules that will help you build Lever-branded pages fast, while keeping the CSS codebase small.

Layout

Centering

Use the class '.ctr' on container groups to center content in the middle of the page with the default page width.

Grid

We use a 12-column grid with a 40px gutter. The grid is created with Flexbox. On mobile, the grid collapses to a single column layout by default.

span3
span3
span3
span3

Wrapping

Columns can wrap if you add the class '.wrap' to the parent div.

span2
span2
span2
span2
span2
span2
span2 - when there's extra content, each element has the same height
span2
span2
span2

Centering wrapped columns

Wrapped columns are aligned left by default. You can center them by adding '.justify-center'.

span4
span4
span4
span4

Removing the column gutter

If you want all the columns to be right next to each other, you can add the '.no-gutter' class.

span4
span4
span4

Utilities

Margin and padding

There are classes to specify most common margin and padding rules. The classes are in increments of 10 and are written like this:

m – margin
p – padding
mv – vertical (top and bottom)
mh – horizontal (left and right)
mt – top
mr – right
mb – bottom
ml – left

Example

m10 – margin: 10px;
pv30 – padding-left: 30px; padding-right: 30px;
pt10 mh50 – padding-top: 10px; margin-left: 50px; margin-right; 50px;

Positionting

Display properties

.none{display:none!important}
.no-min-height{min-height:0!important}
.absolute {position: absolute;}
.relative {position: relative;}
.inline{display:inline}
.block{display:block}
.inline-block{display:inline-block}

Visibility

.visible{visibility:visible}
.invisible{visibility:hidden}
.opacity0{opacity:0}
.opacity05{opacity:.5}
.opacity1{opacity:1}

Background properties

.bg-fixed{background-attachment:fixed}
.bg-centered{background-position:center center}
.bg-cover{background-size:cover}

Floats

Using floats are rarely necessary for positioning content, since we have a flexbox grid system.

.fl{float:left}
.fr{float:right!important}
.fn{float:none}
.cl{clear:left}
.cr{clear:right}
.cb{clear:both}
.clear{clear:both}

Borders

Other handy utilities related to borders and backgrounds

.border {border: 1px solid $borderColor;}
.border-radius-50 {border-radius: 50%;}

Color backgrounds

Classes to show common background colors.

white-background
gray50-background
gray50-background
gray100-background
gray200-background
gray300-background
gray800-background
gray900-background
blue50-background
blue100-background
blue200-background
blue300-background
blue800-background
red50-background
red100-background
red200-background
red300-background
rose50-background
rose100-background
rose200-background
rose300-background
green50-background
green100-background
green200-background
green300-background
yellow50-background
yellow100-background
yellow200-background
yellow300-background
turquoise50-background
turquoise100-background
turquoise200-background
turquoise300-background

Typography

Text elements

There are default text sizes and margin, but each property can be overridden with text-color-XXX, fsXX (font-size), or margin/padding utility classes.

H1 headline

H2 headline

H3 headline

H4 headline

H5 headline
H6 headline

Standard text - Lorem ipsum

I am a link

Bold text in an otherwise normal paragraph

Italic text in an otherwise normal paragraph

Headline defaults

The default headline font is Meta Serif, but it can be changed by adding the class 'sans-serif-headlines' to the body (or parent element).

H1 sans-serif headline

H2 sans-serif headline

H3 sans-serif headline

H4 sans-serif headline

H5 sans-serif headline
H6 sans-serif headline

Text styles

You can change the default text elements with a couple of handy classes.

class='Regular'

class='Italic'

class='Bold'

class='underline'

class='text-caps'

class='serif'

class='serif-bold'

Text sizes

You can change the size of text (or existing headline elements) with these classes.

fs64
fs48
fs30
fs22
fs18
fs16
fs14
fs12
fs10

Alignment

Align text left, center, or right.

text-left
text-right
text-center

Other text utilities

.cursor-pointer {cursor: pointer;}
.va-top{vertical-align:top;}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}

text-color
text-color-80
text-color-70
text-color-50
text-color-gray200
text-color-gray300
text-color-gray700
text-color-gray900
text-color-blue700
text-color-green700
text-color-green900
text-color-yellow700
text-color-yellow900
text-color-red500
text-color-red700
text-color-white

Tables

Standard table

WARNING! Not mobile responsive. Only use this if you know the table will not be too wide for a mobile screen.

Event Location Time
Talent Innovation Summit San Francisco 9/21/2018
Recruiter Meetup Chicago 9/22/2018
Product Webinar Online only 9/23/2018

Mobile responsive table

This table is responsive on mobile, however, the content can get hard to read when the table is just one column wide. Make sure you check what it looks like on mobile before shipping.

eBooks
Pages
Author
Datasheet: How Lever Supports Diversity and Inclusion
65
Kiran Dhillon
Meet your compliance needs with Lever's GDPR Compliance Toolkit
119
Lever Team
How to Choose the Best Applicant Tracking System
18
Lever Team

Lists

There are a couple of different ways to show lists – bulleted, plain, and with styled checkmarks.

Default list

  • Apple
  • Banana
  • Strawberry

List with no bullets

Use the class '.no-bullets' on the ul element to create a list with no bullets.

  • Rock
  • Hip-hop
  • Jazz

List with colored checkmark bullets

Use the class '.checkmarks' and '.yellow', or '.blue' to create a list with colored bullets.

  • Easy Book
  • Nurture Recommendations
  • Agency Portal
  • San Francisco
  • Oakland
  • San Jose

Buttons

Buttons come in three sizes – large, medium, and small



Buttons with custom backgrounds

The buttons can be combined with the background utilities to create new variations. This should not be standard – it should be limited to landing pages that are not connected to the main site (where there's no expectation of consistency.) Note that the hover and active state will not change.

Buttons with icons

Useful modules

Hero image

A full width image that has a set height regardless of image size. 

Hero image with text overlay

A hero image module can be combined with the ".text-overlay" class to create a nice overlap effect.

Tackling the most strategic problem companies face

We founded Lever in 2012 to tackle the most strategic challenge that companies face: how to grow their teams. We're injecting the values we respect – collaboration, transparency, and humanity – into our software and re-imagining how organizations can think about growth, with talent and teamwork at the center.

Hero image with video 

An image with a play button that can play a Wistia video in a popup.

Wistia video thumbnail

Cards

A card that can advertise many types of content. Cards have to be shown on a 'gray50-background' to stand out from the background.

ebooks

How to Choose the Best Applicant Tracking System

To help recruiting and hiring teams jump start their interviewing know-how, or simply brush up on their current strategies, we ...

Download free ebook
Video

Building a Diverse and Inclusive Culture

Complete your 2018 Hiring Toolkit with our final short video, where talent leaders share their most successful strategies for ...

Watch Video
Tools

How 500 Companies Plan to Recruit Under GDPR

Download our brand new report to learn what kinds of decisions organizations are making as they prepare for full GDPR compliance ...

download report

Want to work with us?

We're always looking for talented people.