Brookdale Web Style Guide

This page describes styles used in Brookdale web properties, and serves as a reference for future web design and development work.



Colors

These colors can be changed by theme (e.g. home-health theme, landing page theme, etc). The colors listed below are for the "generic theme" that are used in the corporate site, and in most other cases.

Brand Colors

Main
#0e46af

Background color for some component pieces

Blue
#00539b

Background color for some component pieces

Green
#17a062

Buttons, used in conjunction with orange (either as default or hover color)

Orange
#fc6b21

Buttons, used in conjunction with green (either as default or hover color)

Link, Border & Text Colors

Link
#0e46af
Link Hover
#fc6b21
Text
#333333
Border & Divider
#e5e5e5


Typography

Primary Font

Gotham from Hoefler & Co. is the primary brand font and should be used in all cases.

CSS Font Stack

'Gotham', Arial, sans-serif

Headlines

Headlines can be created with HTML headings <h1>,<h2>,<h3>, etc. or with classes class="h2" or class="h3".

H1: Headline Level 1

H2: Headline Level 2

font-size:44px; font-weight:300; line-height:1.1;
margin-top:20px;margin-bottom:20px;

Headlines 1 and 2 are the same so that they can be used consistently down the page. Only the first title should be H1 and it should represent the content of the page.

H3: Headline Level 3

font-size:30px; font-weight:500; line-height:1.1;
margin-top:10px;margin-bottom:10px;

H4: Headline Level 4

font-size:30px; font-weight:300; line-height:1.1;
margin-top:10px;margin-bottom:10px;

Headlines 3 and 4 are used to structure text and within some component designs. Headlines 5 and 6 are not currently used.

Paragraphs

Standard paragraphs are 18px. Width font-weight of 300 and margin bottom of 1em. There is a utility class called ctcore-util-content which can be used to apply the standard styles.



Buttons and Inputs

Regular Button

Dropdown

Text Input



Logo

CSS for SVG Logo

background-size: 100% auto;
background-position: left center;
background-repeat: no-repeat;
width: auto;
height: 100%;
url("data:image/svg+xml,%3Csvg width='212' height='48' viewBox='0 0 212 48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M.06.988h26.562v18.031H.06z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M84.488 38.142l.702-.835c.636.55 1.281.863 2.098.863.721 0 1.176-.341 1.176-.835v-.019c0-.475-.265-.731-1.5-1.016-1.413-.341-2.211-.759-2.211-1.983v-.02c0-1.138.95-1.926 2.269-1.926.968 0 1.736.295 2.41.836l-.626.882c-.597-.446-1.196-.683-1.803-.683-.683 0-1.083.351-1.083.787v.019c0 .513.304.741 1.586 1.044 1.405.342 2.125.845 2.125 1.946v.019c0 1.243-.977 1.984-2.372 1.984a4.096 4.096 0 0 1-2.771-1.063M91.77 32.466h4.926v1.044h-3.759v1.727h3.332v1.044h-3.332v1.785h3.807v1.044H91.77v-6.644M98.891 32.466h1.082l3.559 4.594v-4.594h1.149v6.644h-.978l-3.663-4.727v4.727h-1.149v-6.644M107.217 34.375v-1.909h1.168v6.644h-1.168v-4.735M116.35 35.807v-.019c0-1.291-.939-2.364-2.259-2.364-1.319 0-2.24 1.054-2.24 2.345v.019c0 1.291.94 2.354 2.259 2.354s2.24-1.044 2.24-2.335zm-5.723 0v-.019c0-1.87 1.443-3.436 3.483-3.436 2.041 0 3.464 1.547 3.464 3.417v.019c0 1.87-1.443 3.436-3.483 3.436-2.041 0-3.464-1.548-3.464-3.417zM122.626 35.759c.835 0 1.367-.436 1.367-1.11v-.019c0-.712-.513-1.101-1.376-1.101h-1.699v2.23h1.708zm-2.875-3.293h2.96c.835 0 1.491.246 1.917.665.352.36.551.854.551 1.432v.02c0 1.091-.654 1.746-1.575 2.012l1.794 2.515h-1.386l-1.633-2.316h-1.461v2.316h-1.167v-6.644zM130.982 32.466h1.168v5.581h3.492v1.063h-4.66v-6.644M137.685 33.97v-1.504h1.168v6.644h-1.168v-5.14M140.82 32.466h1.291l2.001 5.106 1.994-5.106h1.262l-2.752 6.691h-1.035l-2.761-6.691M149.334 34.016v-1.55h1.168v6.644h-1.168v-5.094M153.038 32.466h1.082l3.558 4.594v-4.594h1.149v6.644h-.979l-3.662-4.727v4.727h-1.148v-6.644M161.004 35.807v-.019c0-1.86 1.424-3.436 3.426-3.436 1.158 0 1.869.323 2.555.902l-.742.882c-.512-.436-1.016-.712-1.86-.712-1.224 0-2.156 1.073-2.156 2.345v.019c0 1.367.904 2.373 2.26 2.373.625 0 1.195-.2 1.603-.503v-1.244h-1.697v-1.016h2.828v2.791a4.24 4.24 0 0 1-2.771 1.035c-2.078 0-3.446-1.481-3.446-3.417M40.294 35.812h41.562M40.294 36.312h41.562v-1H40.294zM169.903 36.312h41.562v-1h-41.562z' fill='%23767575'/%3E%3Cpath d='M45.336 24.86c1.043.227 2.071.34 3.087.34 1.626 0 2.866-.342 3.72-1.026.853-.685 1.281-1.531 1.281-2.538 0-.664-.194-1.302-.58-1.915-.387-.613-1.016-1.096-1.887-1.449-.872-.353-1.95-.529-3.235-.529-.557 0-1.034.008-1.429.026a7.646 7.646 0 0 0-.957.087v7.004zm0-8.162c.333.058.713.103 1.14.132.426.029.895.044 1.408.044 1.311 0 2.298-.132 2.958-.397.661-.265 1.166-.669 1.516-1.215a3.242 3.242 0 0 0 .526-1.789c0-.999-.436-1.852-1.307-2.557-.872-.706-2.143-1.059-3.814-1.059-.899 0-1.708.093-2.427.278v6.563zm7.063.68c1.267.252 2.215.655 2.844 1.209.871.773 1.308 1.718 1.308 2.834 0 .849-.288 1.661-.864 2.438-.575.777-1.363 1.344-2.365 1.701-1.002.356-2.532.535-4.59.535h-8.626v-.467h.688c.764 0 1.311-.226 1.645-.68.207-.293.309-.919.309-1.877V12.037c0-1.058-.13-1.726-.391-2.003-.35-.369-.871-.555-1.563-.555h-.688v-.465h7.899c1.474 0 2.655.1 3.545.302 1.347.302 2.377.838 3.087 1.606.709.768 1.064 1.652 1.064 2.652 0 .856-.278 1.623-.836 2.299-.556.676-1.379 1.177-2.466 1.505zM68.086 18.922c.139 0 .259.001.361.005.102.003.186.005.252.005 1.416 0 2.483-.287 3.201-.86.72-.572 1.079-1.302 1.079-2.188 0-.867-.29-1.571-.87-2.113-.58-.542-1.348-.813-2.305-.813-.422 0-.995.065-1.718.194v5.77zm10.54 7.129h-3.961l-5.024-6.485c-.372.014-.674.02-.91.02-.094 0-.195-.002-.305-.005-.11-.003-.223-.009-.34-.015v4.03c0 .873.103 1.415.307 1.626.277.3.693.451 1.248.451h.579v.378h-6.359v-.378h.559c.627 0 1.076-.192 1.346-.573.153-.211.23-.713.23-1.504v-8.961c0-.872-.102-1.414-.306-1.626-.285-.3-.708-.45-1.27-.45h-.559v-.378h5.408c1.575 0 2.738.107 3.485.321a4.033 4.033 0 0 1 1.905 1.187 2.97 2.97 0 0 1 .782 2.061c0 .853-.297 1.593-.892 2.22-.594.627-1.516 1.071-2.763 1.329l3.064 3.98c.701.914 1.303 1.52 1.806 1.821.504.3 1.16.491 1.97.573v.378zM90.365 12.61c-1.329 0-2.394.461-3.196 1.381-1 1.145-1.499 2.823-1.499 5.032 0 2.264.517 4.007 1.554 5.228.796.927 1.845 1.391 3.151 1.391 1.395 0 2.546-.508 3.455-1.524.906-1.016 1.361-2.619 1.361-4.808 0-2.373-.5-4.143-1.499-5.309-.803-.927-1.912-1.391-3.327-1.391zm.207-.747c1.927 0 3.596.684 5.008 2.051 1.413 1.368 2.118 3.074 2.118 5.12 0 2.107-.712 3.856-2.134 5.247-1.423 1.392-3.144 2.087-5.166 2.087-2.044 0-3.76-.679-5.15-2.035-1.39-1.357-2.084-3.114-2.084-5.269 0-2.203.801-3.999 2.407-5.39 1.393-1.207 3.06-1.811 5.001-1.811zM109.993 12.61c-1.33 0-2.395.461-3.199 1.381-.999 1.145-1.497 2.823-1.497 5.032 0 2.264.516 4.007 1.552 5.228.797.927 1.849 1.391 3.153 1.391 1.396 0 2.546-.508 3.455-1.524.907-1.016 1.362-2.619 1.362-4.808 0-2.373-.501-4.143-1.499-5.309-.803-.927-1.912-1.391-3.327-1.391zm.205-.747c1.929 0 3.596.684 5.01 2.051 1.412 1.368 2.119 3.074 2.119 5.12 0 2.107-.713 3.856-2.137 5.247-1.421 1.392-3.144 2.087-5.166 2.087-2.042 0-3.761-.679-5.148-2.035-1.392-1.357-2.086-3.114-2.086-5.269 0-2.203.802-3.999 2.406-5.39 1.394-1.207 3.062-1.811 5.002-1.811zM128.715 18.358l5.473 5.085c.896.838 1.663 1.41 2.298 1.713.637.303 1.27.475 1.903.517v.378h-7.059v-.378c.422 0 .729-.068.918-.2.182-.133.276-.281.276-.445a.937.937 0 0 0-.104-.44c-.073-.129-.296-.371-.685-.726l-5.121-4.737v4.471c0 .702.045 1.166.14 1.391.074.171.23.318.461.44.315.164.649.246.996.246h.504v.378h-6.328v-.378h.524c.615 0 1.059-.168 1.34-.502.174-.218.261-.743.261-1.575v-8.961c0-.701-.05-1.169-.143-1.401-.073-.163-.22-.307-.446-.43a2.22 2.22 0 0 0-1.012-.245h-.524v-.378h6.328v.378h-.504c-.343 0-.677.078-.996.235a.9.9 0 0 0-.468.492c-.092.217-.133.668-.133 1.349v4.245c.148-.13.643-.562 1.501-1.299 2.165-1.854 3.473-3.092 3.928-3.713.196-.273.292-.512.292-.716 0-.156-.074-.295-.229-.414-.154-.119-.409-.179-.776-.179h-.34v-.378h5.452v.378a3.495 3.495 0 0 0-.876.122 4.62 4.62 0 0 0-.96.436c-.384.214-.849.56-1.404 1.038-.162.136-.904.835-2.222 2.096l-2.265 2.107M147.662 25.048c.929.191 1.708.286 2.335.286 1.691 0 3.093-.555 4.211-1.667 1.119-1.111 1.677-2.618 1.677-4.521 0-1.915-.558-3.426-1.677-4.531-1.118-1.104-2.549-1.657-4.296-1.657-.66 0-1.409.099-2.25.297v11.793zm-4.234 1.003v-.378h.558c.627 0 1.075-.188 1.338-.564.159-.225.241-.729.241-1.513v-8.961c0-.865-.102-1.407-.308-1.626-.287-.3-.708-.45-1.271-.45h-.558v-.378h6.042c2.218 0 3.907.235 5.062.706 1.159.469 2.088 1.254 2.792 2.352.701 1.098 1.057 2.366 1.057 3.806 0 1.929-.628 3.542-1.881 4.837-1.414 1.446-3.558 2.169-6.441 2.169h-6.631zM171.35 20.65l-2.519-5.606-2.58 5.606h5.099zm.309.757h-5.748l-1.009 2.189c-.247.539-.369.941-.369 1.207 0 .212.106.397.318.557.22.16.685.265 1.4.313v.378h-4.675v-.378c.62-.103 1.019-.236 1.203-.399.372-.327.783-.993 1.238-1.995l5.222-11.416h.381l5.167 11.539c.414.927.79 1.529 1.13 1.805.343.276.812.431 1.421.466v.378h-5.858v-.378c.593-.027.991-.12 1.196-.277.211-.157.317-.348.317-.573 0-.3-.151-.773-.44-1.421l-.894-1.995zM193.875 22.215l.361.072-1.271 3.764h-11.489v-.378h.556c.63 0 1.077-.192 1.346-.573.155-.219.23-.723.23-1.514v-8.951c0-.865-.101-1.407-.305-1.626-.284-.3-.71-.45-1.271-.45h-.556v-.378h6.719v.378c-.787-.007-1.341.061-1.659.205-.317.143-.535.323-.651.542-.119.218-.174.739-.174 1.565v8.715c0 .566.055.955.174 1.166a.758.758 0 0 0 .406.317c.183.069.751.102 1.707.102h1.081c1.14 0 1.937-.078 2.398-.235.461-.157.879-.435 1.263-.833.376-.399.756-1.029 1.135-1.888M203.109 12.937v5.483h3.264c.843 0 1.412-.119 1.693-.358.379-.313.595-.866.636-1.657h.406v4.828h-.406c-.103-.674-.204-1.109-.307-1.299-.131-.239-.348-.426-.644-.562-.299-.137-.761-.205-1.378-.205h-3.264v4.572c0 .614.031.988.085 1.12.06.134.164.239.311.317.146.079.418.118.83.118h2.52c.834 0 1.445-.055 1.827-.163.377-.11.745-.324 1.093-.645.453-.423.918-1.061 1.39-1.913h.437l-1.281 3.478h-11.438v-.378h.529c.351 0 .679-.078.995-.236a.896.896 0 0 0 .477-.49c.083-.218.121-.666.121-1.341v-9.012c0-.88-.09-1.421-.279-1.626-.267-.273-.7-.409-1.314-.409h-.529v-.378h11.438l.168 3.038h-.431c-.15-.73-.32-1.231-.509-1.505-.182-.272-.461-.48-.824-.624-.292-.101-.808-.153-1.544-.153h-4.072' fill='%23004A86'/%3E%3Cpath d='M17.59 5.238c.179-.253.373-.492.574-.72a13.397 13.397 0 0 0-.396-.884c-.683-1.416-1.36-2.31-1.36-2.31s-4.321 3.277-4.956 7.962c-.638 4.684 2.651 8.996 2.651 8.996s2.251-1.711 3.745-4.428c-1.236.432-2.117.575-2.117.575s-.892-5.348 1.859-9.191' fill='%23007845'/%3E%3Cpath d='M25.694.516s-4.67.767-7.53 4.002c.658 1.608 1.184 3.667.895 5.8a9.99 9.99 0 0 1-.91 2.948c-.095.201-.201.397-.301.588 1.113-.392 2.512-1.008 3.805-1.965.795-.595 1.554-1.312 2.176-2.183 1.503-2.091 1.919-4.633 1.986-6.513.063-1.57-.121-2.677-.121-2.677' fill='%236DAB88'/%3E%3Cpath d='M19.059 10.318c.289-2.133-.237-4.192-.895-5.8a8.626 8.626 0 0 0-.574.72c-2.751 3.843-1.859 9.191-1.859 9.191s.881-.143 2.117-.575c.1-.191.206-.387.301-.588a9.99 9.99 0 0 0 .91-2.948' fill='%23288F62'/%3E%3Cpath d='M4.055 22.267s-1.347 2.774-1.347 6.049c1.657.953 4.027 2.684 5.222 5.32.646 1.428.869 2.942.875 4.325.517.315.853.478.853.478s2.374-4.877.825-9.342c-1.544-4.469-6.428-6.83-6.428-6.83M26.622 24.988c1.751-3.434 1.348-7.377 1.348-7.377s-5.397.546-8.382 4.209c-2.986 3.665-2.428 9.06-2.428 9.06s.391-.04 1.018-.17c.622-1.213 1.487-2.445 2.682-3.418 1.79-1.451 3.984-2.06 5.762-2.304' fill='%236DAB88'/%3E%3Cpath d='M26.622 24.988a8.873 8.873 0 0 1-1.086 1.68c-2.182 2.681-5.652 3.696-7.358 4.042-1.288 2.508-1.542 4.956-1.542 4.956s5.393.566 9.066-2.415c3.671-2.979 4.222-8.374 4.222-8.374s-1.423-.146-3.302.111' fill='%23007845'/%3E%3Cg transform='translate%280 24%29'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath d='M25.536 2.668a8.873 8.873 0 0 0 1.086-1.68c-1.778.244-3.972.853-5.762 2.304-1.195.973-2.06 2.205-2.682 3.418 1.706-.346 5.176-1.361 7.358-4.042' fill='%23288F62' mask='url%28%23b%29'/%3E%3Cpath d='M3.232 7.606c-.38-1.095-.524-2.218-.524-3.29a14.765 14.765 0 0 0-1.81-.888s-1.914 5.079.038 9.381c1.954 4.305 7.033 6.21 7.033 6.21s.855-2.269.836-5.058c-1.465-.899-4.43-3.052-5.573-6.355' fill='%23007845' mask='url%28%23b%29'/%3E%3C/g%3E%3Cpath d='M2.708 28.316c0 1.072.144 2.195.524 3.29 1.143 3.303 4.108 5.456 5.573 6.355-.006-1.383-.229-2.897-.875-4.325-1.195-2.636-3.565-4.367-5.222-5.32' fill='%23288F62'/%3E%3Cpath d='M8.973 47.552c5.916-6.152 4.71-12.095 5.674-19.688 1.303-10.306 7.908-14.018 7.794-13.949.216-.129.148-.125-.177.03-1.814.866-7.875 4.524-9.118 15.305-.79 6.851.763 10.332-4.183 18.298-.006.014 0 .018.01.004' fill='%23007845'/%3E%3C/g%3E%3C/svg%3E")


Helper Classes

.visually-hidden

Hide visually, but available for accessibility

.retain

Layout box for content that isn't edge-to-edge.

.retain--padded

Same as above, but with more built-in padding.

.ctcore-util-hide--mobile

Hide for small screens

.ctcore-util-hide--desk

Hide for big screens

.ctcore-util-unlist

remove dots from a list

.ctcore-util-content

Apply content styling to standard styles like headlines, paragraphs, etc.