DaVita.com Website Style Guide
Below is a listing of the DaVita brand palette for use on the web and the SASS variables/hex associated with each color.
DaVita utilizes a custom Bree Bold font and various weights of Lato. The below example shows heading and copy sizes that are used throughout the site in RTE (rich text editable) areas as well as the web fonts themselves. Headings in components may be larger than the base sizes for text content listed here e.g. Hero Band H1
All headings use the $color-grey (#414141) variable as their base color.
Heading 1 - 40px - Bree DaVita Bold
Heading 2 - 32px - Bree DaVita Bold
Heading 3 - 28px - Bree DaVita Bold
Heading 4 - 20px - Lato Bold
Heading 5 - 18px - Lato Bold
Heading 6 - 16px - Lato Bold
Paragraph text - Lato Regular - $color-grey (#414141)
$font-size-xlarge - 20px
$font-size-large - 18px
$font-size-medium - 16px
$font-size-base - 14px
$font-size-small - 12px
$font-size-xsmall - 10px
Footer - Social Icons
These icons, featured in the global footer, link to the various DaVita social channels.
Sample Global Components
Below is a small sampling of some of global components used throughout the DaVita Kidney Care website.
Action Tile - Border Variant
The Action Tile Box Border variant consists of a headline, descriptive text and a CTA. These may also feature a location text input where a user can input a zip code for finding a class or center. These are predomninantly used in the right rail content well as supplementary content.
Manage Your Kidney Care
From your phone to your laptop, myDaVita can help you understand all aspects of your condition.
Action Tile - Two Tone Variant
The Action Tile Two Tone variants consists of a headline, descriptive text and a CTA. This a themeable component so a content author can select a color pairing for the top and bottom portion of the component. These are predomninantly used in the right rail content well as well as in the Two Column Band as supplementary content.
Take a closer look at our Trilogy of Care—caring for our patients, caring for each other and caring for our world.
Two Column Band - Action Tile Two Tone
The Two Column Band is used at the bottom of pages and features two content wells that are filled by Action Tile Two Tone variants.
The Image Tile consists of a background image, headline, descriptive text and a CTA. The Image Tile is a themeable component and can have its top border changed to match the color scheme of the section in which it appears. They are predomninantly used in the right rail content well.
Get Free Kidney-Friendly Cookbooks
Deeper Look Tile
The Deeper Look Tile consists of an icon, headline and descriptive text. This is a themeable component and the content author has the ability to select from a multitude of color themes which will change the background of the top portion of the component. These are usually found in a grid and are used to drive the user to tertiary pages within the section.
The Curated Accordion is found on several level 2/3 landing pages and is made up of Accordion Blocks. Each block contains a headline, subhead and content wells for Band Icon Blocks as well as the Video Player Block. Each Band IconBlock is a hyperlinked icon and descriptive text that drives a user to tertiary (or deeper) content within thesection. The Video Player Block is a YouTube embed that allows for descriptive text below the video.
Take control of your health by learning all you can about the late stages of kidney disease.
5 Steps to Take When Diagnosed With Late Stage Kidney Disease
Learn the steps to take if diagnosed with late stage kidney disease.