Skip to content
Boomcycle Digital Marketing logo with upward arrow and bar chart

Boomcycle Digital Marketing

Style Kit — Generated 2026-04-15  |  Items are numbered — reference by number when requesting changes

1. Color Palette

1.1Primary Navy#131A2BPrimary brand — dark backgrounds, hero, nav
1.2Secondary Gray#555555Secondary text, captions, muted labels
1.3Body Text#363636Default body copy color
1.4Accent Amber#FFC107CTA buttons, highlights, accent elements
1.5Dark Text#333333Dark text variant — paragraphs, body copy
1.6Black#111111Headings, button text on amber, near-black elements
1.7White#FFFFFFPage background, text on dark backgrounds, cards
1.8Accent Blue#33477AAlternate accent — links, secondary CTAs, hover states
1.9Light Gray#EDEBEBProgress bar labels, light UI backgrounds
1.10Off White#F9F9F9Alternate page/section background

2. Typography

2.1Heading 1 — RegularPoppins • 700 • 45px desktop • 26px mobile

The quick brown fox jumps over the lazy dog — 0123456789

2.2Heading 2 — Services (Large)Poppins • 700 • 60px desktop • 36px mobile • line-height: 1.2em

The quick brown fox jumps over the lazy dog — 0123456789

2.3Heading 2 — RegularPoppins • 400 • 40px desktop • 26px mobile • line-height: 1.1em

The quick brown fox jumps over the lazy dog — 0123456789

2.4Heading 3 — RegularPoppins • 400 • 28px desktop • 24px mobile • line-height: 1.2em

The quick brown fox jumps over the lazy dog — 0123456789

2.5Heading 4 — RegularPoppins • 400 • 22px desktop • line-height: 1.2em

The quick brown fox jumps over the lazy dog — 0123456789

2.6Body — Base (Inter)Inter • 400 • 16px desktop • 18px mobile • line-height: 1.6em

The quick brown fox jumps over the lazy dog — 0123456789

2.7Body Large — PoppinsPoppins • 400 • 18px desktop • 18px mobile

The quick brown fox jumps over the lazy dog — 0123456789

2.8Section Label / OverlinePoppins • 400 • 18px desktop • 20px mobile • line-height: 0.84em • tracking: 1.8px • uppercase

The quick brown fox jumps over the lazy dog — 0123456789

2.9Image CaptionPoppins • 400 • 16px desktop • line-height: 22px • italic

The quick brown fox jumps over the lazy dog — 0123456789

3. Contrast Matrix

110 combinations checked. 54 fail WCAG AA for normal text. 56 pass.

WCAG 2.1 thresholds: AA normal = 4.5:1 • AA large text = 3.0:1 • AAA normal = 7.0:1 • AAA large = 4.5:1 • Large text = 24px+ regular or 18.67px+ bold

IDSwatchesCombinationRatioWCAG
3.1 Secondary Gray on Black
#555555 on #111111		2.53:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.2 Black on Secondary Gray
#111111 on #555555		2.53:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.3 Primary Navy on Secondary Gray
#131A2B on #555555		2.33:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.4 Secondary Gray on Primary Navy
#555555 on #131A2B		2.33:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.5 Secondary Gray on Near-Black
#555555 on #1A1A1A		2.33:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.6 Near-Black on Secondary Gray
#1A1A1A on #555555		2.33:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.7 Black on Accent Blue
#111111 on #33477A		2.09:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.8 Accent Blue on Black
#33477A on #111111		2.09:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.9 Accent Blue on Near-Black
#33477A on #1A1A1A		1.93:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.10 Near-Black on Accent Blue
#1A1A1A on #33477A		1.93:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.11 Primary Navy on Accent Blue
#131A2B on #33477A		1.92:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.12 Accent Blue on Primary Navy
#33477A on #131A2B		1.92:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.13 Secondary Gray on Dark Text
#555555 on #333333		1.69:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.14 Dark Text on Secondary Gray
#333333 on #555555		1.69:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.15 Accent Amber on White
#FFC107 on #FFFFFF		1.63:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.16 White on Accent Amber
#FFFFFF on #FFC107		1.63:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.17 Secondary Gray on Body Text
#555555 on #363636		1.62:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.18 Body Text on Secondary Gray
#363636 on #555555		1.62:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.19 Body Text on Black
#363636 on #111111		1.56:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.20 Black on Body Text
#111111 on #363636		1.56:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.21 Accent Amber on Off White
#FFC107 on #F9F9F9		1.55:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.22 Off White on Accent Amber
#F9F9F9 on #FFC107		1.55:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.23 Dark Text on Black
#333333 on #111111		1.49:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.24 Black on Dark Text
#111111 on #333333		1.49:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.25 Primary Navy on Body Text
#131A2B on #363636		1.44:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.26 Body Text on Primary Navy
#363636 on #131A2B		1.44:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.27 Body Text on Near-Black
#363636 on #1A1A1A		1.44:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.28 Near-Black on Body Text
#1A1A1A on #363636		1.44:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.29 Dark Text on Accent Blue
#333333 on #33477A		1.4:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.30 Accent Blue on Dark Text
#33477A on #333333		1.4:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.31 Dark Text on Near-Black
#333333 on #1A1A1A		1.38:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.32 Near-Black on Dark Text
#1A1A1A on #333333		1.38:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.33 Primary Navy on Dark Text
#131A2B on #333333		1.37:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.34 Accent Amber on Light Gray
#FFC107 on #EDEBEB		1.37:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.35 Dark Text on Primary Navy
#333333 on #131A2B		1.37:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.36 Light Gray on Accent Amber
#EDEBEB on #FFC107		1.37:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.37 Body Text on Accent Blue
#363636 on #33477A		1.34:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.38 Accent Blue on Body Text
#33477A on #363636		1.34:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.39 Secondary Gray on Accent Blue
#555555 on #33477A		1.21:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.40 Accent Blue on Secondary Gray
#33477A on #555555		1.21:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.41 White on Light Gray
#FFFFFF on #EDEBEB		1.19:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.42 Light Gray on White
#EDEBEB on #FFFFFF		1.19:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.43 Light Gray on Off White
#EDEBEB on #F9F9F9		1.13:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.44 Off White on Light Gray
#F9F9F9 on #EDEBEB		1.13:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.45 Primary Navy on Black
#131A2B on #111111		1.09:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.46 Black on Primary Navy
#111111 on #131A2B		1.09:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.47 Black on Near-Black
#111111 on #1A1A1A		1.08:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.48 Near-Black on Black
#1A1A1A on #111111		1.08:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.49 Body Text on Dark Text
#363636 on #333333		1.05:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.50 Dark Text on Body Text
#333333 on #363636		1.05:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.51 White on Off White
#FFFFFF on #F9F9F9		1.05:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.52 Off White on White
#F9F9F9 on #FFFFFF		1.05:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.53 Primary Navy on Near-Black
#131A2B on #1A1A1A		1.0:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.54 Near-Black on Primary Navy
#1A1A1A on #131A2B		1.0:1AA ✗AA Lg ✗AAA ✗AAA Lg ✗
3.55 Black on White
#111111 on #FFFFFF		18.88:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.56 White on Black
#FFFFFF on #111111		18.88:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.57 Black on Off White
#111111 on #F9F9F9		17.94:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.58 Off White on Black
#F9F9F9 on #111111		17.94:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.59 White on Near-Black
#FFFFFF on #1A1A1A		17.4:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.60 Near-Black on White
#1A1A1A on #FFFFFF		17.4:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.61 Primary Navy on White
#131A2B on #FFFFFF		17.35:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.62 White on Primary Navy
#FFFFFF on #131A2B		17.35:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.63 Off White on Near-Black
#F9F9F9 on #1A1A1A		16.53:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.64 Near-Black on Off White
#1A1A1A on #F9F9F9		16.53:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.65 Primary Navy on Off White
#131A2B on #F9F9F9		16.48:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.66 Off White on Primary Navy
#F9F9F9 on #131A2B		16.48:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.67 Black on Light Gray
#111111 on #EDEBEB		15.9:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.68 Light Gray on Black
#EDEBEB on #111111		15.9:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.69 Light Gray on Near-Black
#EDEBEB on #1A1A1A		14.66:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.70 Near-Black on Light Gray
#1A1A1A on #EDEBEB		14.66:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.71 Primary Navy on Light Gray
#131A2B on #EDEBEB		14.61:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.72 Light Gray on Primary Navy
#EDEBEB on #131A2B		14.61:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.73 Dark Text on White
#333333 on #FFFFFF		12.63:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.74 White on Dark Text
#FFFFFF on #333333		12.63:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.75 Body Text on White
#363636 on #FFFFFF		12.08:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.76 White on Body Text
#FFFFFF on #363636		12.08:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.77 Dark Text on Off White
#333333 on #F9F9F9		12.0:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.78 Off White on Dark Text
#F9F9F9 on #333333		12.0:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.79 Accent Amber on Black
#FFC107 on #111111		11.58:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.80 Black on Accent Amber
#111111 on #FFC107		11.58:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.81 Body Text on Off White
#363636 on #F9F9F9		11.48:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.82 Off White on Body Text
#F9F9F9 on #363636		11.48:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.83 Accent Amber on Near-Black
#FFC107 on #1A1A1A		10.68:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.84 Near-Black on Accent Amber
#1A1A1A on #FFC107		10.68:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.85 Primary Navy on Accent Amber
#131A2B on #FFC107		10.64:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.86 Accent Amber on Primary Navy
#FFC107 on #131A2B		10.64:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.87 Dark Text on Light Gray
#333333 on #EDEBEB		10.64:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.88 Light Gray on Dark Text
#EDEBEB on #333333		10.64:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.89 Body Text on Light Gray
#363636 on #EDEBEB		10.18:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.90 Light Gray on Body Text
#EDEBEB on #363636		10.18:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.91 White on Accent Blue
#FFFFFF on #33477A		9.04:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.92 Accent Blue on White
#33477A on #FFFFFF		9.04:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.93 Accent Blue on Off White
#33477A on #F9F9F9		8.59:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.94 Off White on Accent Blue
#F9F9F9 on #33477A		8.59:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.95 Accent Amber on Dark Text
#FFC107 on #333333		7.75:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.96 Dark Text on Accent Amber
#333333 on #FFC107		7.75:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.97 Accent Blue on Light Gray
#33477A on #EDEBEB		7.61:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.98 Light Gray on Accent Blue
#EDEBEB on #33477A		7.61:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.99 Secondary Gray on White
#555555 on #FFFFFF		7.46:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.100 White on Secondary Gray
#FFFFFF on #555555		7.46:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.101 Body Text on Accent Amber
#363636 on #FFC107		7.41:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.102 Accent Amber on Body Text
#FFC107 on #363636		7.41:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.103 Secondary Gray on Off White
#555555 on #F9F9F9		7.08:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.104 Off White on Secondary Gray
#F9F9F9 on #555555		7.08:1AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.105 Secondary Gray on Light Gray
#555555 on #EDEBEB		6.28:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.106 Light Gray on Secondary Gray
#EDEBEB on #555555		6.28:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.107 Accent Amber on Accent Blue
#FFC107 on #33477A		5.55:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.108 Accent Blue on Accent Amber
#33477A on #FFC107		5.55:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.109 Secondary Gray on Accent Amber
#555555 on #FFC107		4.57:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.110 Accent Amber on Secondary Gray
#FFC107 on #555555		4.57:1AA ✓AA Lg ✓AAA ✗AAA Lg ✓

4. Button Styles

4.1Primary Button
Primary Button

Default: bg #FFC107 / text #111111
Hover: bg #111111 / text #FFC107
Border: 2px solid #FFC107
Radius: 5px • Font: Poppins 600

5. Form Elements

5.1 — Text Input (Default)
Placeholder text…

border: #CCCCCC • bg: #FFFFFF • text: #333333 • placeholder: #999999 • radius: 4px • font: Poppins 20px

5.2 — Text Input (Focus)
Placeholder text…

border: #131A2B • bg: #FFFFFF • text: #333333 • placeholder: #999999 • radius: 4px • font: Poppins 20px
Focus ring: box-shadow 0 0 0 3px rgba(19,26,43,0.15)

6. Spacing Scale

IDLabelValueVisual
6.1XS4px
6.2SM8px
6.3MD16px
6.4LG24px
6.5XL40px
6.62XL64px
6.73XL96px

Style kit generated 2026-04-15 — Boomcycle Digital Marketing
Reference items by number when requesting changes. e.g. “Update 1.4 to a deeper amber”

Danville Digital Marketing and SEO
David Victor presenting search visibility SEO strategy to clients in conference room
David Victor presenting search visibility SEO strategy to clients in conference room

Get a Free Website Review

As expert SEO consultants since 2003, Boomcycle Digital Marketing knows what you need to do to push your website to the top of the Google search results.

Click the button to book your FREE consultation today!

Book Your Free Review