Wilcoe — Style Guide

Brand Colors

Core palette. Primary surface is Indigo. Accent is Iris. Green CTAs are Lime. Body bg is Paper — warm cream-paper white.

#023377

Indigo

--surface-dark

#1a459c

Iris

--accent

#153a83

Iris Dark

--accent-hover

#93C5FD

Lilac

--accent-light

#FFB266

Lime Light

--accent-orange-light

#f7931e

Lime

--accent-orange

#e5830f

Lime Dark

--accent-orange-hover

#001B40

Eclipse

--navy-deep

#1d1d1f

Ink

--black

#fbfbfd

Paper

--white

Neutral Grays

Text, borders, and surface shading.

#f5f5f7

Gray 50

--gray-50

#e8e8ed

Gray 100

--gray-100

#d2d2d7

Gray 200

--gray-200

#86868b

Gray 400

--gray-400

#6e6e73

Gray 600

--gray-600

#424245

Gray 800

--gray-800

#3a3a3f

Body Text

#3a3a3f

Category Colors

Used for dock icons, skill badges, and accent pops across the site.

#f7931e

Skills / Orange

--accent-orange

#FF6B35

Strategy

--cat-strategy

#00D4AA

Content / Success

--cat-content

#7B61FF

SEO / Purple

--cat-seo

#FF3366

Sales / Red

--cat-sales

#E84393

Creative / Pink

#E84393

Dark Theme Section

Primary background for homepage hero, interior pages, and product pages. Background: --surface-dark (#1a459c).

Primary text — --white (#fbfbfd)

Secondary text — rgba(255,255,255,0.7)

Muted text — rgba(255,255,255,0.5)

Dark Card

Surface: rgba(255,255,255,0.03). Text adapts automatically inside dark sections.

Accent Heading

Using --accent-orange for emphasis.

Frosted Card

Used for pricing cards, upsell blocks, and dock modals.

Usage: background: var(--surface-dark) or class="product-section"

Navy Deep Section

Alternating dark section. Background: --navy-deep (#023377). Used for product-section--light, upsells, and alternating dark blocks.

Card on Navy

Same frosted surface treatment. Provides subtle depth contrast against navy-deep.

Highlighted Card

Orange border treatment used for "Most Popular" pricing cards.

Success / Check Color

Using --cat-content (#00D4AA) for checkmarks.

Usage: background: var(--navy-deep) or class="product-section--light"

Light Theme Section

Homepage sections on light backgrounds. Background: --gray-50 (#f5f5f7) or --white (#fbfbfd).

Primary text — --black (#1d1d1f)

Body text — #3a3a3f

Muted text — --gray-600 (#6e6e73)

White Card

Surface: --white (#fbfbfd) with --gray-100 border. Used for product cards, step items.

Accent on Light

Using --accent (#1a459c) for links and emphasis.

Orange Pill

01 Step number pill pattern.

Usage: background: var(--gray-50) or class="section-services"

Typography on Dark

System font stack: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif.

H1 — Hero Title (clamp 48px – 88px, weight 700)

Learn to market your company.

H2 — Section Title (clamp 36px – 56px, weight 700)

What's inside the playbook.

H3 — Card Title (18–22px, weight 600)

Foundations & Positioning

Body — Paragraph (15–17px, line-height 1.6)

Body text on dark backgrounds uses rgba(255,255,255,0.7) for comfortable reading without harsh contrast.

Small / Muted (13–14px)

Secondary text, captions, metadata.

Label / Badge (12px, uppercase, 600 weight, 0.12em tracking)

10-Week Program

Typography on Light

Same font stack, adapted colors for light backgrounds.

H1 — Hero Title

The marketing agency in your pocket.

H2 — Section Title

Built for founders who wear the marketing hat.

H3 — Card Title

Templates & Frameworks

Body — Paragraph

Body text on light backgrounds uses #3a3a3f for readability without being harsh black.

Small / Muted

Secondary text, captions, metadata.

Buttons on Dark

All buttons: border-radius: 100px, font-weight: 600, padding: 14px 36px, transition: 0.3s

Buttons on Light

Contrast Ratios

Key text/background combinations used across the site.

Text	Background	Ratio	Preview
`#fbfbfd` White	`#1a459c` Surface Dark	`9.8:1`	Sample
`rgba(255,255,255,0.7)`	`#1a459c` Surface Dark	`6.5:1`	Sample
`#f7931e` Orange	`#1a459c` Surface Dark	`4.7:1`	Sample
`#1d1d1f` Black	`#fbfbfd` White	`17.9:1`	Sample
`#3a3a3f` Body	`#fbfbfd` White	`11.2:1`	Sample
`#6e6e73` Gray 600	`#fbfbfd` White	`5.0:1`	Sample
`#00D4AA` Content	`#023377` Navy Deep	`7.8:1`	Sample
`#fbfbfd` White	`#f7931e` Orange	`2.7:1`	Sample

Spacing Scale

Common spacing values used across sections and components.

Section padding (desktop)

100–160px

Section padding (mobile)

60–80px

Card padding

28–40px

Grid gap

16–20px

Container max-width

1080px

Container horizontal pad

24px

Border radius (cards)

16–24px

Border radius (buttons/pills)

100px

Component Patterns

Key reusable patterns across the site.

LABEL BADGE

Label Text

.product-label, .skills-label, .upsell-block__label

STEP NUMBER PILL

01

.product-step__num

CHECKMARK ICON

✓

.upsell-block__icon, .pricing-card__features li::before

MOST POPULAR BADGE

Card Shape: rounded corners

Content cards use rounded corners on all sides, site-wide. Radius scales with the card: 12–16px for compact cards, 20–24px for larger content blocks.

Compact card (16px)

Card content Rounded on all four corners.

Larger card (20px)

Card content A softer, larger radius for big blocks.

CSS: border-radius: Npx; — where N is the radius for that card type (typically 12, 14, 16, 18, or 20px depending on size).

Applies to: all content cards across the site — .product-card, .product-step, .pricing-card, .case-card, .process-card, .service-item, .skill-card, .deliverables-card, .playbook-card, .form-card, .assessment-track-card, .vertical-card, .role-card, .metric-card, .engage-tier, .pa-* family, etc.

Excluded: buttons, pills, tag chips, inputs, modals, avatars, dock items — these stay fully rounded by their own conventions.

Wilcoe Style Guide