Boomcycle Digital Marketing — Style Kit

v2.0 | Generated 2026-07-01 | Items are numbered — reference by number when requesting changes

1. Color Palette

1.1

Dark Navy

#131A2B

Headings, hero section backgrounds, dark overlay sections

1.2

Brand Blue

#33477A

Primary CTA backgrounds, nav accents, link hover — sitewide but not yet a kit global

1.3

Body Text

#363636

Primary paragraph text, general content body

1.4

Secondary Text

#555555

Captions, secondary info, less prominent labels

1.5

Muted Text (WCAG floor)

#767676

Placeholder text, fine print, meta info. Minimum compliant gray on white (4.5:1). Do not go lighter.

1.6

Accent Gold

#FFC107

Accent backgrounds, decorative highlights, gold bars, button variant. NOT text on white (fails 1.63:1). Use only as bg or on dark sections.

1.7

White

#FFFFFF

Page backgrounds, text on dark/navy/blue sections

2. Typography

2.1

Heading 1

Poppins 700 48px

The quick brown fox jumps over the lazy dog — 0123456789

2.2

Heading 2 / 3

Poppins 600 32px

The quick brown fox jumps over the lazy dog — 0123456789

2.3

Body

Poppins 400 18px

The quick brown fox jumps over the lazy dog — 0123456789

2.4

Caption / Label

Poppins 400 14px

The quick brown fox jumps over the lazy dog — 0123456789

3. Contrast Matrix

WCAG 2.2 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

22 usable combinations. AAA (≥7.0:1): 16 | AA only (≥4.5:1): 6 | Below AA: excluded.

ID	Preview	Combination	Ratio	WCAG
3.1	Boomcycle Digital Marketing	White on Near-Black #FFFFFF on #1A1A1A	17.4:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.2	Boomcycle Digital Marketing	Near-Black on White #1A1A1A on #FFFFFF	17.4:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.3	Boomcycle Digital Marketing	Dark Navy on White #131A2B on #FFFFFF	17.35:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.4	Boomcycle Digital Marketing	White on Dark Navy #FFFFFF on #131A2B	17.35:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.5	Boomcycle Digital Marketing	Body Text on White #363636 on #FFFFFF	12.08:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.6	Boomcycle Digital Marketing	White on Body Text #FFFFFF on #363636	12.08:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.7	Boomcycle Digital Marketing	Accent Gold on Near-Black #FFC107 on #1A1A1A	10.68:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.8	Boomcycle Digital Marketing	Near-Black on Accent Gold #1A1A1A on #FFC107	10.68:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.9	Boomcycle Digital Marketing	Dark Navy on Accent Gold #131A2B on #FFC107	10.64:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.10	Boomcycle Digital Marketing	Accent Gold on Dark Navy #FFC107 on #131A2B	10.64:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.11	Boomcycle Digital Marketing	Brand Blue on White #33477A on #FFFFFF	9.04:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.12	Boomcycle Digital Marketing	White on Brand Blue #FFFFFF on #33477A	9.04:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.13	Boomcycle Digital Marketing	Secondary Text on White #555555 on #FFFFFF	7.46:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.14	Boomcycle Digital Marketing	White on Secondary Text #FFFFFF on #555555	7.46:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.15	Boomcycle Digital Marketing	Body Text on Accent Gold #363636 on #FFC107	7.41:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.16	Boomcycle Digital Marketing	Accent Gold on Body Text #FFC107 on #363636	7.41:1	AA ✓AA Large ✓AAA ✓AAA Large ✓
3.17	Boomcycle Digital Marketing	Brand Blue on Accent Gold #33477A on #FFC107	5.55:1	AA ✓AA Large ✓AAA ✗AAA Large ✓
3.18	Boomcycle Digital Marketing	Accent Gold on Brand Blue #FFC107 on #33477A	5.55:1	AA ✓AA Large ✓AAA ✗AAA Large ✓
3.19	Boomcycle Digital Marketing	Secondary Text on Accent Gold #555555 on #FFC107	4.57:1	AA ✓AA Large ✓AAA ✗AAA Large ✓
3.20	Boomcycle Digital Marketing	Accent Gold on Secondary Text #FFC107 on #555555	4.57:1	AA ✓AA Large ✓AAA ✗AAA Large ✓
3.21	Boomcycle Digital Marketing	Muted Text (WCAG floor) on White #767676 on #FFFFFF	4.54:1	AA ✓AA Large ✓AAA ✗AAA Large ✓
3.22	Boomcycle Digital Marketing	White on Muted Text (WCAG floor) #FFFFFF on #767676	4.54:1	AA ✓AA Large ✓AAA ✗AAA Large ✓