Design system

Haley Marketing brand guide

Every sample on this page is rendered with production components and CSS tokens. Update index.css or shared.tsx and this guide updates with the rest of the site.

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.