Typography
Body copy
The Benefits Delivery & Administration UI Toolkit uses Source Sans Pro which was chosen because of its weights, character sets, legibility, and pleasantness. Our fallback font stack satisfies similar goals as well (Segoe UI, Segoe, Calibri, Tahoma, sans-serif). We use the "Regular" font for body text, the "Bold" font for bolded itens (e.g.: <strong>), and the "Light" font for headings.
Global default font-size is 18px, with a line-height of 1.5. This is applied to the <body> and all <p> tags (paragraphs). In addition, paragraphs receive a bottom margin of twice their font-size (36px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Italics and legibility
Studies have shown that italicized text presents significant legibility issues for those with dyslexia. For this reason, we have chosen to not use italics.
Links
Links that take the user to another spot on the page—or another page entirely—are underlined when appearing within a larger body of text, with no underline on :hover. Contextual help (popover) links have a dotted line, which goes to solid on :hover. Also note the cursor when hovering over these links. Contxtual help links maintain this pattern, regardless of context (within a body of text or stand-alone, etc.).
Cum sociis text link natoque penatibus et magnis dis parturient montes. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Small text
For de-emphasizing inline or blocks of text, set text at 85% the size of the parent.
This line of text is meant to be treated as fine print.
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want to maintain a proper header heirarchy in your markup.
h1. Heading | Light 44.78976px |
h2. Heading | Light 37.3248px |
h3. Heading | Light 31.104px |
h4. Heading | Light 25.92px |
h5. Heading | Light 21.6px |
h6. Heading | Light 18px |
Secondary text within headings
Secondary text in any heading should have a lighter and smaller appearance.
h1. Heading Secondary text |
h2. Heading Secondary text |
h3. Heading Secondary text |
h4. Heading Secondary text |
h5. Heading Secondary text |
h6. Heading Secondary text |
Icons within headings
Place icons within the heading tags, and they will inherit the appropriate type size.
Heading (h1) |
Heading (h2) |
Heading (h3) |
Heading (h4) |
Heading (h5) |
Heading (h6) |
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890Full Name
first.last@example.com
Blockquotes
For quoting blocks of content from another source within your document.
Default blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naming a source
Add <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Text Alignment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Brand Alignment
Blockquotes can inherit border-color from any of the non-monochromatic brand colors.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Supplementary content
When using the above supplementary text treatments, make sure you use the appropriate HTML5 tags, ARIA attributes, and location within your markup to avoid interrupting ATs reading main content text.
Lists
Unordered
A list of items in which the order does not explicitly matter.
- 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
Brand-Aligned
When a context requires, you can designate a color for top-level bullets.
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Replace Bullets with Icons
We use icons for bullets sparingly … to emphasize and add interest to a short list. For icon-bullet treatment, we would use no more than four bullets and would use the [functional icons only].
Ordered
A list of items in which the order does explicitly matter.
- 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
Unstyled
- 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
Inline
Place all list items on a single line with some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Description
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal description
Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Color Palette
Benefits Delivery & Administration UI Toolkit colors include brand, semantic, tint/shade, and grayscale palettes
Benefits Delivery & Administration UI Toolkit Colors
Primary
| $blue-500: | #00a0d2; |
|---|---|
| $green-500: | #00c389; |
| $magenta-500: | #c110a0; |
Secondary
| $gray-600: | #919191; |
|---|---|
| $violet-500: | #5a0c6f; |
Functional Colors
The $primary color is used for links and primary calls to actionand maps to the $blue-900 variant of the BDA Brand Blue.
| $blue-900: | #0073b6; |
|---|---|
| $primary: | $blue-900; |
Semantic Colors
Semantic colors are assigned to meaningful contextual values that are saturated enough to meet contrast requirements when using white type. These values cascade to buttons, alerts, and more.
| $software-success: | #298544; |
|---|---|
| $software-info: | #006699; |
| $software-warning: | #c25400; |
| $software-danger: | #cc0000; |
Tints / Shades
Tints and shades are a result of a collaborative effort across Benefits Delivery & Administration service lines. Do not deviate from them, and always account for color contrast when considering their use.
Brand Tints / Shades
Semantic Tints / Shades
Semantic Tints / Shades
| $blue-50: | #e0f4fa; |
|---|---|
| $blue-100: | #b3e3f2; |
| $blue-300: | #4dbde0; |
| $blue-500: | #00a0d2; |
| $blue-700: | #008ec7; |
| $blue-900: | #0073b6; |
| $green-50: | #e0f8f1; |
| $green-100: | #b3eddc; |
| $green-300: | #4dd5ac; |
| $green-500: | #00c389; |
| $green-700: | #00b576; |
| $green-900: | #00a159; |
| $magenta-50: | #f8e2f4; |
| $magenta-100: | #ecb7e3; |
| $magenta-300: | #d458bd; |
| $magenta-500: | #c110a0; |
| $magenta-700: | #b30c8e; |
| $magenta-900: | #9e0573; |
| $violet-50: | #ebe2ee; |
| $violet-100: | #ceb6d4; |
| $violet-300: | #8c559a; |
| $violet-500: | #5a0c6f; |
| $violet-700: | #48085c; |
| $violet-900: | #2e0340; |
| $info-50: | #e0edf3; |
| $info-100: | #b3d1e0; |
| $info-300: | #4d94b8; |
| $info-500: | #006699; |
| $info-700: | #005386; |
| $info-900: | #00386b; |
| $success-50: | #e5f0e9; |
| $success-100: | #bfdac7; |
| $success-300: | #69aa7c; |
| $success-500: | #298544; |
| $success-700: | #1f7235; |
| $success-900: | #0f551f; |
| $warning-50: | #f8eae0; |
| $warning-100: | #edccb3; |
| $warning-300: | #d4874d; |
| $warning-500: | #c25400; |
| $warning-700: | #b44300; |
| $warning-900: | #9f2900; |
| $danger-50: | #f9e0e0; |
| $danger-100: | #f0b3b3; |
| $danger-300: | #db4d4d; |
| $danger-500: | #cc0000; |
| $danger-700: | #c00000; |
| $danger-900: | #ad0000; |
Grays
Grayscale colors provide quick access to commonly used tints of black.
| $white: | #ffffff; |
|---|---|
| $gray-50: | #f9f9f9; |
| $gray-100: | #f4f4f4; |
| $gray-200: | #ededed; |
| $gray-300: | #e4e4e4; |
| $gray-400: | #d8d8d8; |
| $gray-500: | #c5c5c5; |
| $gray-600: | #919191; |
| $gray-700: | #787878; |
| $gray-800: | #5e5e5e; |
| $gray-900: | #444444; |
| $black: | #000000; |
Color Contrast
Always check contrast
When choosing colors for content on our sites, it is important to keep contrast in mind. Our accessitiblity standards dictate that we need to maintain a contrast ratio of 4.5:1 for "normal" text, and 3:1 for "large" text (18px or higher; 14px or higher, if bolded). Some of the brand colors don't meet this criterion—for example: magenta is the only color that passes the contrast check on a white background.
Some analysis has been done on the brand palette, and the grayscale palette, using WebAIM's Color Contrast Checker tool. The results are presented here for quick reference.
Pardon Our Dust! With the color palette currently undergoing a bit of re-tooling, we'll need to re-analyze contrast ratios. Please come back again to see if this work has been completed.
Badges
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
Loaders
Provide feedback on the status of a workflow or action with a progress bar or a spinner.
Progress Bars
Provides detailed feedback on the determinate progress (percentage completed) of a particular action.
Basic Progress Bar
Provides a simple progress feedback mechanism of an expanding bar on a neutral field.
With label
Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.
Alternative implementations
Contextual colors
Progress bars use some of the same button and alert classes for consistent styles.
Striped
A gradient can be used to create a striped effect. Not available in IE9 and below.
Animated
Stripes can be animated, from right to left. Not available in IE9 and below.
Stacked
Place multiple bars into the same .progress to stack them.
Spinners
Provides indeterminate feedback on the progress (that something is happening, but no progress completion status) of a particular action.