Design system

Haley Marketing brand guide

Preview theme:

Colors

Brand palette from index.css @theme — swatches use live Tailwind hm-* classes.

Navy

#10233f

--color-hm-navy

Primary brand, headings, dark scrims, footer

Purple (hm-blue)

#4f2e9c

--color-hm-blue

Websites pillar, digital accents, secondary CTAs

Orange

#fb6615

--color-hm-orange

Primary CTA, eyebrows, branded content pillar

Green

#6aa140

--color-hm-green

Recruitment pillar, success states, industry hero

Rose

#d63c7c

--color-hm-rose

Company / footer accent column

Yellow

#e5a817

--color-hm-yellow

Smart Ideas / newsletter pillar

Cyan

#0ea5c9

--color-hm-cyan

Marketing technology pillar

Sky

#dcecff

--color-hm-sky

Light accent wash, icon shells

Cream

#f3f1ec

--color-hm-cream

Warm inset surfaces, icon backgrounds

Paper

#faf9f7

--color-hm-paper

Default page background

White

#ffffff

--color-hm-white

Cards, panels, elevated surfaces

Ink

#111827

--color-hm-ink

Body copy on light surfaces

Muted

#667085

--color-hm-muted

Secondary copy, meta labels

Subtle gradients

One wash gradient per color — tuned for section backgrounds and card shells. Classes live in index.css and use @theme variables so they track palette changes automatically.

Sample section headline

Navy wash

#10233f · --color-hm-navy

.hm-gradient-wash-navy

Dark section backgrounds, footer bands, hero scrims

Sample section headline

Purple (hm-blue) wash

#4f2e9c · --color-hm-blue

.hm-gradient-wash-blue

Websites / digital section washes, card overlays

Sample section headline

Orange wash

#fb6615 · --color-hm-orange

.hm-gradient-wash-orange

Branded content bands, warm CTA sections

Sample section headline

Green wash

#6aa140 · --color-hm-green

.hm-gradient-wash-green

Recruitment / industry hero washes

Sample section headline

Rose wash

#d63c7c · --color-hm-rose

.hm-gradient-wash-rose

Company and about-section accents

Sample section headline

Yellow wash

#e5a817 · --color-hm-yellow

.hm-gradient-wash-yellow

Newsletter and Smart Ideas panels

Sample section headline

Cyan wash

#0ea5c9 · --color-hm-cyan

.hm-gradient-wash-cyan

Marketing technology feature bands

Sample section headline

Sky wash

#dcecff · --color-hm-sky

.hm-gradient-wash-sky

Light blue tint panels, icon backdrop shells

Sample section headline

Cream wash

#f3f1ec · --color-hm-cream

.hm-gradient-wash-cream

Warm inset panels, secondary surfaces

Sample section headline

Paper wash

#faf9f7 · --color-hm-paper

.hm-gradient-wash-paper

Default page section wash (neutral band)

Sample section headline

White wash

#ffffff · --color-hm-white

.hm-gradient-wash-white

Elevated card shells, modal backgrounds

Sample section headline

Ink wash

#111827 · --color-hm-ink

.hm-gradient-wash-ink

Neutral depth on light layouts, subtle contrast bands

Sample section headline

Muted wash

#667085 · --color-hm-muted

.hm-gradient-wash-muted

Secondary meta sections, quiet content blocks

Source: site/src/index.css → @theme

Typography

Font stacks and type styles used across service pages, hubs, and marketing sections.

Font stacks

  • --font-sans

    DM Sans

    Body copy, UI labels, and long-form paragraphs across the site.

    Default body font — `font-sans` / `body`

  • --font-display

    Plus Jakarta Sans

    Display headings that lead every major section.

    Headlines — `font-display` with tight tracking

  • --font-accent

    Salted

    Hand-crafted accent moments

    Decorative accent — `font-accent` (Typekit)

Type scale & labels

  • Page H1

    Staffing marketing that drives growth

  • Section title (SectionTitle)

    Everything you need to win more business

  • H3 large (.h3-large)

    Starter

  • Eyebrow (.eyebrow-label)

    The staffing industry's growth partner

  • Section kicker (.section-kicker-muted)

    Trusted by staffing firms nationwide

  • Body copy (serviceBodyCopyClass)

    We help staffing and recruiting firms build websites, content, and campaigns that attract clients and candidates — with strategy, creative, and technology built for your industry.

  • Muted intro

    Supporting line for section intros and hero subheads.

Live component sample

SectionTitle + SectionEyebrow

These are imported directly from shared.tsx— the same components used on service and hub pages.

Buttons

BtnPrimary and BtnGhost from shared.tsx — same components used site-wide.

BtnPrimary accents

OrangeGreenRosePurpleNavyCyanYellow

btnPrimaryAccent keys: orange, green, rose, purple, navy, cyan, yellow

Layout

Shell, header clearance, and section spacing conventions.

  • Content shell

    Max-width page column with responsive gutters

    .hm-shell

  • Clear header

    Top padding that clears the floating header pill

    .hm-clear-header

  • Section rhythm

    Standard vertical padding between service page sections

    .py-16

hm-shell demo

This dashed band uses serviceSectionPy padding with an hm-shell column inside — the same layout pairing used on service detail pages.

Surfaces & cards

Card shells, pillar accents, and inset panels from production patterns.

Branded content

Pillar accent card

Left border uses border-l-hm-orange

Websites / digital

Pillar accent card

Left border uses border-l-hm-blue

Recruitment

Pillar accent card

Left border uses border-l-hm-green

Marketing technology

Pillar accent card

Left border uses border-l-hm-cyan

Smart Ideas

Pillar accent card

Left border uses border-l-hm-yellow

Company

Pillar accent card

Left border uses border-l-hm-rose

Neutral / navy

Pillar accent card

Left border uses border-l-hm-navy

Neutral inset surface

hmNeutralInsetSurface from serviceHubCardBranding — used for diagrams, callouts, and inset panels.