The Hollywood Reporter
hollywoodreporter.com · 4 days ago
SaveUnofficial A style guide made by SiteStyleGuide from bankofamerica.com’s public web pages. Not affiliated with or endorsed by Bank of America. The real site is bankofamerica.com ↗
Unofficial style guide
Bank of Americastyle guide
Bank of America’s website (bankofamerica.com) uses cnx-regular for its headings and body text. Its palette is led by Crimson (#E31837), Deep Royal Blue (#0053C2) and Midnight Blue (#012169), with #000000 text on #FFFFFF. Captured from the live site on 1 November 2026.
- Website
- bankofamerica.com
- Typefaces
- cnx-regular, roboto-regular, Arial
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 1 Nov 2026 · added by @sitestyleguide
https://www.bankofamerica.com/
Screenshot
bankofamerica.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Bank of America - Banking, Credit Cards, Loans and Merrill Investing
- ▲ 68 / 60 characters
- Meta description
- What would you like the power to do? At Bank of America, our purpose is to help make financial lives better through the power of every connection.
- ● 146 / 160 characters
- Site name
- Bank of America
- og:title
- Bank of America - Banking, Credit Cards, Loans and Merrill Investing
- og:description
- What would you like the power to do? At Bank of America, our purpose is to help make financial lives better through the power of every connection.
- Language
- en-US
- Theme colour
- #ffffff
In search results
Bank of Americahttps://www.bankofamerica.com/
Bank of America - Banking, Credit Cards, Loans and Merrill In…
What would you like the power to do? At Bank of America, our purpose is to help make financial lives better through the power of every connection.
When shared
bankofamerica.com
Bank of America - Banking, Credit Cards, Loans and Merrill Investing
What would you like the power to do? At Bank of America, our purpose is to help make financial lives better t…
Logo & favicons
Found as: schema.org logo. PNG, 360 × 36.
Logo
On white
On black
On Crimson
Favicons
7 found-
192 px · PNG
icon
-
180 px · PNG
apple-touch-icon
-
152 px · SVG
mask-icon
-
48 px · ICO shortcut icon
-
32 px · PNG
icon
-
16 px · PNG
icon
-
16 px · ICO favicon.ico
Bank of America - Banking, Credit Cards, Loans and Merrill Investing
Light browser tab
Bank of America - Banking, Credit Cards, Loans and Merrill Investing
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 26.4%
- Black 16.5%
- Crimson 8.5%
- Deep Royal Blue 7.2%
- Light Grey 6.8%
- Midnight Blue 6.2%
- Fire Brick 6.2%
- Dark Grey 5.8%
- Steel Blue 5.4%
- Green 2%
- Pink 1.6%
- Dodger Blue 1.6%
- Brown 1.6%
- Light Coral 1.4%
- Thistle 1.4%
- Light Royal Blue 1.2%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 21.00:1 AAA
- On white
- —
Background, text, border · [data-sparta-container] .masthead-container-module [data-rates-template=_rates-t, .large-up [data-sparta-container] .masthead-container-module .expandable-basic.e
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- —
- On white
- 21.00:1 AAA
Text, border, background · [data-sparta-container] .masthead-container-module [data-rates-template=_rates-t, [data-sparta-container] .highlight-lowlight-module .highlight-lowlight-container
-
Light Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 16
- On text
- 14.31:1 AAA
- On white
- 1.47:1 Fail
Background, border, text · [data-sparta-container] .gt-unauth-main-module:has(.header-theme--bofa):after, [data-sparta-container] .spa-input.spa-input--sparta2 .spa-input-options-wrapper
-
Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 61
- On text
- 3.55:1 AA large
- On white
- 5.92:1 AA
Text, border, graphic · [data-sparta-container] .masthead-container-module .standard-expandable-two-colu, [data-sparta-container] .masthead-container-module .standard-rates-expandable.ex
Colours
Brand colours and accents, most used first-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 89 76 11
- On text
- 4.45:1 AA large
- On white
- 4.72:1 AA
Text, background, border · [data-sparta-container] .masthead-container-module [data-rates-template=_rates-t, [data-sparta-container] .highlight-lowlight-module .highlight-lowlight-container
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 57 0 24
- On text
- 3.02:1 AA large
- On white
- 6.96:1 AA
Text, border, background · [data-sparta-container] .spa-input.spa-input--sparta2 .spa-input-options-wrapper, [data-sparta-container] .masthead-container-module [data-rates-template=_rates-t
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 69 0 59
- On text
- 1.42:1 Fail
- On white
- 14.76:1 AAA
Text, background, graphic · [data-sparta-container] .masthead-container-module [data-rates-template=_rates-t, [data-sparta-container] .masthead-container-module .merrill-lynch .expanded-sect
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 91 76 23
- On text
- 3.48:1 AA large
- On white
- 6.04:1 AA
Text, background, border · [data-sparta-container] .spa-input.spa-input--sparta2 .spa-input-options-wrapper, [data-sparta-container] .spa-input.spa-input--condensed .spa-fieldset.spa-error-
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 44 0 19
- On text
- 4.35:1 AA large
- On white
- 4.82:1 AA
Text, background, border · [data-sparta-container] .masthead-container-module .merrill-edge.guided-investin, [data-sparta-container] .navigation-module .menu-content .bottom-link a .spa-arr
-
Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 73 0 97 53
- On text
- 3.75:1 AA large
- On white
- 5.60:1 AA
Border, background, text · [data-sparta-container] .spa-cms-border-horizontal-color--secondary-three-dark, [data-sparta-container] .spa-cms-border-vertical-color--secondary-three-dark
-
Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 16 14 2
- On text
- 15.13:1 AAA
- On white
- 1.39:1 Fail
Border, background, graphic · [data-sparta-container] .spa-cms-border-horizontal-color--brand-primary-s20, [data-sparta-container] .spa-cms-border-vertical-color--brand-primary-s20
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 30 0 13
- On text
- 6.81:1 AA
- On white
- 3.08:1 AA large
Border, graphic, background · [data-sparta-container] .spa-cms-border-horizontal-color--royal-three, [data-sparta-container] .spa-cms-border-vertical-color--royal-three
-
Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 76 35
- On text
- 2.69:1 Fail
- On white
- 7.80:1 AAA
Border, background, text · [data-sparta-container] .spa-cms-border-horizontal-color--regal-one-dark, [data-sparta-container] .spa-cms-border-vertical-color--regal-one-dark
-
Light Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 42 36 5
- On text
- 8.91:1 AAA
- On white
- 2.36:1 Fail
Border, graphic, background · [data-sparta-container] .spa-cms-border-horizontal-color--brand-primary-s50, [data-sparta-container] .spa-cms-border-vertical-color--brand-primary-s50
-
Thistle
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 11 6 11
- On text
- 13.91:1 AAA
- On white
- 1.51:1 Fail
Border, background, text · [data-sparta-container] .spa-cms-border-horizontal-color--regal-two-s20, [data-sparta-container] .spa-cms-border-vertical-color--regal-two-s20
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 44 0 29
- On text
- 3.48:1 AA large
- On white
- 6.03:1 AA
Background, border, graphic · [data-sparta-container] .ah-hp-sign-in-module .row .splash-title .sign-in-btn, [data-sparta-container] .ah-hp-sign-in-module .row .splash-title .sign-in-btn:ho
Gradients
-
linear-gradient(#007dc3,#0067b1)
-
linear-gradient(180deg,#ededed 0,#fff)
-
linear-gradient(180deg,#d5d5d5 0,#f6f6f6)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
cnx-regular
Aa
300
Aa
700
cnx-regular
Served from www1.bac-assets.com · weights 300, 400, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
300
Aa
700
roboto-regular
Served from www1.bac-assets.com · weights 300, 400, 500, 700 · headings · shown in a stand-in if you don’t have it
Aa
100
Aa
700
Arial
System font, or not loaded on this page · weights 100, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
cnx-bold
Served from www1.bac-assets.com · weights 400, 700 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
16px / 24px
weight 400 · cnx-bold
Bank of America
Heading 2
28px / 32px
weight 700 · cnx-regular
Bank of America - Banking, Credit Cards, Loans …
Heading 3
18px / 22px
weight 700 · Arial
Bank of America - Banking, Credit Cards, Loans …
Heading 4
18px / 18px
weight 400 · cnx-regular
Bank of America - Banking, Credit Cards, Loans …
Heading 5
20px / 28px
weight 400 · cnx-bold
Bank of America - Banking, Credit Cards, Loans …
Heading 6
16px / 24px
weight 400 · cnx-bold
Bank of America - Banking, Credit Cards, Loans …
Paragraph
16px / 14px
weight 700
What would you like the power to do? At Bank of America, our purpose is to help make financial lives better through the power of every conn…
Small
80% / 0
What would you like the power to do? At Bank of America, our purpose is to help make financial lives better through the power of every conn…
Button
16px / normal
weight 700 · none · Helvetica Neue
Get started
Link
14px / 1.2
weight 500 · roboto-regular
Read more about Bank of America
Sizes in use
Most common across the site- 36pxline 44px · 11 rules
- 28pxline 24px · 29 rules
- 24pxline 25px · 20 rules
- 20pxline 28px · 58 rules
- 18pxline 24px · 38 rules
- 16pxline 24px · 65 rules
- 14pxline 20px · 84 rules
- 12pxline 12px · 43 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
[data-sparta-container] button · #008CBA
Corner radius
- 16px · 36×
- 22px · 29×
- 18px · 27×
- 28px · 27×
- 2px · 23×
- 4px · 12×
Shadows
- 0 2px 20px 0 rgba(0,0,0,.12)
- 0 -12px 10px -3px rgba(0,0,0,.12)
- 0 12px 10px 0 rgba(0,0,0,.12)
- 2px 2px 15px 4px rgba(0,0,0,.8)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
319
374
425
767
768
1024
1025
1310
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1296 px
1256 px
500 px
400 px
360 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 68 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Bank of America use?
- Bank of America’s website uses three typefaces: cnx-regular (headings and body text), served from www1.bac-assets.com; roboto-regular, served from www1.bac-assets.com; cnx-bold, served from www1.bac-assets.com.
- What are Bank of America’s brand colours?
- The main colours on bankofamerica.com are Crimson (#E31837), Deep Royal Blue (#0053C2), Midnight Blue (#012169), Fire Brick (#C41230), Steel Blue (#0073CF) and Green (#207804).
- What colour is Bank of America’s text and background?
- Body text is #000000 on a #FFFFFF background.
- Where is Bank of America’s logo from?
- The logo shown in this guide was found on bankofamerica.com’s homepage. For official logo files and usage rules, check Bank of America’s own brand or press page.
- Is this Bank of America’s official style guide?
- No. SiteStyleGuide made it from bankofamerica.com’s public web pages on 1 November 2026, and isn’t affiliated with Bank of America. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
bankofamerica-com-tokens.css
/* bankofamerica.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/bankofamerica.com) */
:root {
/* Colours */
--text: #000000;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-light-grey: #D5D5D5;
--colour-dark-grey: #646464;
--colour-crimson: #E31837;
--colour-deep-royal-blue: #0053C2;
--colour-midnight-blue: #012169;
--colour-fire-brick: #C41230;
--colour-steel-blue: #0073CF;
--colour-green: #207804;
--colour-pink: #F9D1D7;
--colour-dodger-blue: #009CDE;
--colour-brown: #A50E28;
--colour-light-coral: #F18B9B;
--colour-thistle: #E4CCD6;
--colour-light-royal-blue: #0064B4;
--gradient-1: linear-gradient(#007dc3,#0067b1);
--gradient-2: linear-gradient(180deg,#ededed 0,#fff);
--gradient-3: linear-gradient(180deg,#d5d5d5 0,#f6f6f6);
/* Typefaces */
--font-headings: 'cnx-regular', 'Arial', 'Helvetica', sans-serif;
--font-buttons: 'cnx-regular', 'Arial', 'Helvetica', sans-serif;
/* Type scale */
--text-h1: 16px;
--leading-h1: 24px;
--text-h2: 28px;
--leading-h2: 32px;
--text-h3: 18px;
--leading-h3: 22px;
--text-h4: 18px;
--leading-h4: 18px;
--text-h5: 20px;
--leading-h5: 28px;
--text-h6: 16px;
--leading-h6: 24px;
--text-p: 16px;
--leading-p: 14px;
--text-small: 80%;
--leading-small: 0;
--text-button: 16px;
--leading-button: normal;
--text-a: 14px;
--leading-a: 1.2;
/* Shape */
--radius-1: 16px;
--radius-2: 22px;
--radius-3: 18px;
--radius-4: 28px;
--radius-5: 2px;
--radius-6: 4px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 319px;
--breakpoint-2: 374px;
--breakpoint-3: 425px;
--breakpoint-4: 767px;
--breakpoint-5: 768px;
--breakpoint-6: 1024px;
--breakpoint-7: 1025px;
--breakpoint-8: 1310px;
--max-width-1: 1440px;
--max-width-2: 1296px;
--max-width-3: 1256px;
--max-width-4: 500px;
--max-width-5: 400px;
--max-width-6: 360px;
}
{
"site": "bankofamerica.com",
"source": "https://sitestyleguide.com/bankofamerica.com",
"text": "#000000",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Light Grey",
"hex": "#D5D5D5",
"rgb": [
213,
213,
213
]
},
{
"name": "Dark Grey",
"hex": "#646464",
"rgb": [
100,
100,
100
]
},
{
"name": "Crimson",
"hex": "#E31837",
"rgb": [
227,
24,
55
]
},
{
"name": "Deep Royal Blue",
"hex": "#0053C2",
"rgb": [
0,
83,
194
]
},
{
"name": "Midnight Blue",
"hex": "#012169",
"rgb": [
1,
33,
105
]
},
{
"name": "Fire Brick",
"hex": "#C41230",
"rgb": [
196,
18,
48
]
},
{
"name": "Steel Blue",
"hex": "#0073CF",
"rgb": [
0,
115,
207
]
},
{
"name": "Green",
"hex": "#207804",
"rgb": [
32,
120,
4
]
},
{
"name": "Pink",
"hex": "#F9D1D7",
"rgb": [
249,
209,
215
]
},
{
"name": "Dodger Blue",
"hex": "#009CDE",
"rgb": [
0,
156,
222
]
},
{
"name": "Brown",
"hex": "#A50E28",
"rgb": [
165,
14,
40
]
},
{
"name": "Light Coral",
"hex": "#F18B9B",
"rgb": [
241,
139,
155
]
},
{
"name": "Thistle",
"hex": "#E4CCD6",
"rgb": [
228,
204,
214
]
},
{
"name": "Light Royal Blue",
"hex": "#0064B4",
"rgb": [
0,
100,
180
]
}
],
"fonts": [
{
"name": "cnx-regular",
"stack": "cnx-regular, Arial, Helvetica, sans-serif",
"weights": [
300,
400,
700
],
"source": "Served from www1.bac-assets.com"
},
{
"name": "roboto-regular",
"stack": "roboto-regular",
"weights": [
300,
400,
500,
700
],
"source": "Served from www1.bac-assets.com"
},
{
"name": "Arial",
"stack": "Arial, Helvetica, sans-serif",
"weights": [
100,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "cnx-bold",
"stack": "\"cnx-bold\"",
"weights": [
400,
700
],
"source": "Served from www1.bac-assets.com"
},
{
"name": "roboto-medium",
"stack": "\"roboto-medium\"",
"weights": [
300,
400,
500
],
"source": "Served from www1.bac-assets.com"
},
{
"name": "cnx-light",
"stack": "cnx-light, Arial, Helvetica, sans-serif",
"weights": [
200
],
"source": "Served from www1.bac-assets.com"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run bankofamerica.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/bankofamerica.com" title="Bank of America style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Bank of America’s
The Independent
independent.co.uk · 2 days ago
Save
Super User
superuser.com · 2 days ago
Save
香港專業花式跳繩學校 Hong Kong Rope Skipping Academy
hkrsa.asia · 3 days ago
Save
Captured from bankofamerica.com on 1 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Bank of America; this guide describes the public website for reference.