Mullins Creative

Design System

The building blocks behind the Mullins Creative brand — playful, warm, and consistent across every page.

Identity

Logo & brand mark

The MC monogram pairs a bold display wordmark with a rounded tangerine tile. Keep clear space around it and use the light variant on dark backgrounds.

Mullins Creative

Foundations

Color tokens

Semantic tokens defined in globals.css. Reference them through Tailwind classes like bg-primary or text-muted-foreground — never hard-coded hex values.

Brand accents

--primary

Primary / Brand

Tangerine. CTAs, key accents.

--highlight

Highlight

Sunny yellow. Callouts, badges.

--cool

Cool

Teal. Secondary accent.

Neutrals & surfaces

--background

Background

Warm cream page base.

--card

Card

Surfaces & panels.

--muted

Muted

Subtle fills.

--foreground

Foreground

Text & borders.

Use 3–5 colors per screen: cream background, dark foreground text, one dominant accent (tangerine), plus yellow and teal as supporting pops. Every accent has a paired -foreground token for accessible text contrast.

Foundations

Typography

Two families do all the work: Bricolage Grotesque for expressive display headings and Inter for clean, readable body copy.

Display / H1

Bring your ideas to life

Bricolage Grotesque · Extrabold · tracking-tight

Heading / H2

One creative team

Bricolage Grotesque · Extrabold

Heading / H3

Websites & software

Bricolage Grotesque · Extrabold

Eyebrow

What we create

Bricolage · Bold · uppercase · widest

Body / Large

Consistent marketing that helps your organization stay visible and communicate clearly.

Inter · Regular · leading-relaxed

Body

Professional, mobile-friendly websites that help people take action.

Inter · Regular

Small / Caption

Event & registration pages, donation links, and ongoing maintenance.

Inter · Regular · muted

Components

Buttons & links

Rounded pill actions with three variants and two sizes. Consistent focus rings and a subtle press state keep interactions tactile.

Variants

Primary Outline Dark With icon

Sizes

Medium Large

All actions are fully rounded pills from CtaLink / CtaButton. Use primary for the main action on a screen, and at most one per section.

Components

Cards & surfaces

The SurfaceCard primitive standardizes the three container styles used across the site, from the signature pop card to quieter panels.

Pop

Signature card with hard offset shadow. Used for services and features.

Soft

Quieter bordered surface for dense content, lists, and nested panels.

Dashed

Callout surface for prompts like “have an idea that doesn't fit in a box?”