Styleguide

Colors, typography, and base styles for rpb.org

Colors #

#00497c
$color-blue
$color-primary

#01406d
$color-blue-2

#05558d
$color-blue-3

#003153
$color-navy-dark

#00b4ef
$color-cyan

#06C2FF
$color-cyan-bright

#82c341
$color-green
$color-secondary

#5f9f1f
$color-green-dark

#f57d20
$color-orange

#ffc222
$color-yellow

#d70269
$color-magenta

#00a5bd
$color-teal

#424750
$gray-dark

#FFFFFF
$white

#9cacb1
$gray

#c8d5d9
$gray-light

#e8eef0
$gray-lighter

#d8d8d8
$color-inactive

#f25b6d
$color-error

Font Stacks #

$font-family-base
Proxima Nova Regular

$font-family-base
Proxima Nova Regular Italic

$font-family-base, $font-weight-semibold (600)
Proxima Nova SemiBold

$font-family-base, $font-weight-bold (600)
Proxima Nova SemiBold Italic

$font-family-base, $font-weight-bold (700)
Proxima Nova Bold

$font-family-base, $font-weight-bold (700)
Proxima Nova Bold Italic

$font-family-display
Abril Text

$font-family-display
Abril Text Italic

Headings #

h1. First Level Heading

h2. Second Level Heading

h3. Third Level Heading

h4. Fourth Level Heading

h5. Fifth Level Heading

h6. Sixth Level Heading

h1. First Level Heading

h2. Second Level Heading

h3. Third Level Heading

h4. Fourth Level Heading

h5. Fifth Level Heading

Body Copy #

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. This is a link within body text excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footnotes #

Body copy bold size 17pt Retirement is a long-term investment.¹ Body copy normal If you’re just starting out in your career, then you will likely see your savings fluctuate with the markets over many decades. It’s important to remember that your account will weather these natural ups and downs with time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac semper nisl.² Vivamus erat tortor, ullamcorper at ipsum non, tristique vestibulum lectus.³ Mauris semper sed neque sed sagittis. Vivamus sit amet nulla interdum, pharetra nibh in, ornare lorem. Etiam felis mi, malesuada vitae urna eu, vehicula ornare elit.

Lorem ipsum dolor sit amet, 2018.
Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Maecenas faucibus mollis interdum, 2018.

Blockquotes #

Add class of quote to wrap in quote marks automatically. Smaller sized quote quote--sm. The emdash gets prepended automatically to the cite tag.

The seminar touched on so many aspects of retirement. It helped me focus on the emotional, spiritual and of course, financial components of retirement. My path is clearer to me as a result of the seminar.

Second paragraph example. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

2018 Seminar Atendee

The seminar touched on so many aspects of retirement. It helped me focus on the emotional, spiritual and of course, financial components of retirement. My path is clearer to me as a result of the seminar.

2018 Seminar Atendee

Lists #

Unordered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Definition Lists

Lorem ipsum dolor sit amet: Consectetur adipiscing elit
Lorem ipsum dolor sit amet: Consectetur adipiscing elit
Lorem ipsum dolor sit amet: Consectetur adipiscing elit
Lorem ipsum dolor sit amet: Consectetur adipiscing elit

Plain Unstyled Lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Buttons #

Let’s Go

Action links #

Learn more

Badges #

Staff Board of Trustees Life Events News Hebrew Union College Visits Webinars

Icons #

Tables #

Basic table

RPB’s Traditional 403(b)	RPB’s Roth 403(b)	Roth IRA
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate

Swipe to see more

Striped Table

RPB’s Traditional 403(b)	RPB’s Roth 403(b)	Roth IRA
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate

Swipe to see more

Table with Column Headers

	RPB’s Traditional 403(b)	RPB’s Roth 403(b)	Roth IRA
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate	No income restrictions to participate
No income restrictions to participate	No income restrictions to participate	No income restrictions to participate	No income restrictions to participate

Swipe to see more

Figure and Caption #

Photo caption here, lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor libero.

To learn more, visit our Resources Page

Forms #

Name

Phone Number

Topic

Radio Buttons

Yes

Checkboxes

Yes

Message

Grid #

Content with Sidebar

This layout has wider content area with a right-hand sidebar and wide gutter between them.

.col-content

Single Content Column

This layout has a centered narrow content column.

.col-content--centered

Three-Column Text Columns

Three narrow column layout that does not line up with the grid but instead distributes the spacing equally.

.col-thirds > .col

Utility Classes

All layouts are based on a 12-column grid. Grid utility classes enable quick responsive grids. In practice we should try to limit their usage to prototyping or one-offs.

.col .col-md-6 .col-lg-3