Boomcycle Digital Marketing — Style Kit

v2.1 | 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 ✓

4. Button Styles

4.1 Primary Button

Default: bg #33477A / text #FFFFFF
Hover: bg #131A2B / text #FFFFFF
Border radius: 4px | Padding: 14px 28px | Weight: 600

4.2 Gold CTA Button

Default: bg #FFC107 / text #131A2B
Hover: bg #e6ac00 / text #131A2B
Border radius: 4px | Padding: 14px 28px | Weight: 700

4.3 Ghost / Outline Button

Default: bg #FFFFFF / text #33477A
Hover: bg #33477A / text #FFFFFF
Border radius: 4px | Padding: 13px 27px | Weight: 600

5. Form Elements

5.1 Text Input (Default)

Placeholder text…

border: #CCCCCC | bg: #FFFFFF | text: #363636 | placeholder: #767676 | radius: 4px

5.2 Text Input (Focus)

Placeholder text…

border: #33477A | bg: #FFFFFF | text: #363636 | placeholder: #767676 | radius: 4px

6. Spacing Scale

6.1

4px

6.2

8px

6.3

16px

6.4

24px

6.5

40px

6.6

2XL

64px

6.7

3XL

96px

7. Location Page Layout Conventions

Settled on the location pages, 2026-07-27 and 2026-07-28

#	Property	Value	Applies to
7.1	Section content width	Boxed, 1100px	Every top-level section. A full-width module beside boxed neighbours reads as broken.
7.2	Section top gap	70px desktop / 44px mobile	Applied to block-opening sections only. A heading and the content it introduces stay tight.
7.3	Hero min-height	36vh desktop and tablet	Legacy sections use custom_height. Mobile keeps its own px value.
7.4	Hero vertical padding	3.5% top and bottom	Paired with 7.3. Together these set the hero envelope.
7.5	Section headings (H2)	Kit global, zero inline typography	Never hardcode font family, size, weight or colour on a heading widget. Use __globals__.
7.6	Services tile grid	3 equal columns, 240px min-height, 16px gap	2 columns at 1024px, 1 column at 767px. Equal tiles only, no spanning or mosaic.
7.7	Locations block split	Pills 58% / map 42%	City pills render in 3 columns.
7.8	Long copy	icon-list, icon-box or accordion	Never a raw text block. Prose over roughly 600 characters gets a module.
7.9	Page intro copy	Page-level widget, never a shared template	Copy that should differ per page cannot live in a template every page embeds.

These are layout conventions, not colour or type tokens. They exist because every visual correction on the location pages was a conformance failure rather than a missing section. A new location page is checked against this table before it ships.

Boomcycle Digital Marketing — Style Kit

1. Color Palette

2. Typography

3. Contrast Matrix

4. Button Styles

5. Form Elements

6. Spacing Scale

7. Location Page Layout Conventions

Get a Free Website Review