Brand Kit & Design System

Tilley Design System

The visual language behind the Tilley brand. Colors, type, spacing, and components, all built on a dark-first, warm-light philosophy.

Photo Bank Brand Assets muncly.com

Section 01

Color Palette

Dark-first throughout. Sections are distinguished by shade, never by alternating dark and light.

Brand Colors

Forest #213D36 --mn-forest

Sage #325E55 --mn-sage

Moss #2A4A44 --mn-moss

Linen #DED5BE --mn-linen

Orange #E8440A --mn-orange

Orange Hover #C93A08 --mn-orange-hover

Dark Depth Scale

#14261F

#192E28

#213D36

#243F38

#2A4A44

#2E5248

#1E3C34

Hover to expand. From darkest (footer) through forest (primary) to card-level tones.

Semantic Colors

Success #2D6A4F

Warning #B5621E

Error #C0392B

Info #1A5276

Text Opacity Scale

Primary headings (full opacity)

Secondary headings (0.92)

Body copy (0.78 to 0.85)

Captions, labels, meta (0.60 to 0.65)

Placeholder text (0.30)

Section 02

Typography

Playfair Display for authority. DM Sans for clarity. Classical meets modern.

Hero H1 Expertise Made Legible Playfair 500 / clamp

Section H2 Section Heading Playfair 500 / clamp

Card Title Card Title Example Playfair 600 / 20px

Overline Section Overline DM Sans 700 / 14px

Body This is standard body copy at 17px. Readable, warm, and never glaring on dark backgrounds. DM Sans 400 / 17px

Card Body Card description text at 15px with reduced opacity. DM Sans 400 / 15px

Button Book a Call DM Sans 600 / 16px

Caption Meta text, dates, categories DM Sans 400 / 13px

Logo/Brand Muncly Playfair Italic 500

Section 03

Spacing

Base unit: 4px. All spacing values are multiples of 4.

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

Section 04

Border Radius

Rounded corners are a deliberate brand signal. Warm, approachable, modern.

sm / 4px
Badges, tags

md / 7px
Buttons, inputs

lg / 10px
Cards, dropdowns

xl / 16px
Feature cards

full / pill
Avatars, pills

Section 05

Shadows

On dark backgrounds, shadows use pure black for depth. Green-tinted shadows are invisible against green.

tile

tile hover

btn glow

modal

Section 06

Glass Tile System

Warm gold light from top-left, cool dark shadow to bottom-right. Never flat solid fills.

Process Step

Glass gradient with directional light border. Hover to see the lift and glow effect.

Testimonial Card

Same glass treatment across all card types. Consistent warmth and depth.

Feature Card

The gold top-line shimmer is created with a pseudo-element gradient.

Section 07

Buttons

Orange is reserved strictly for action. Three tiers: Primary, Secondary, Ghost.

Primary

Secondary

Ghost

Section 08

Icons & Bullets

Solid orange circle, white checkmark, orange glow. Never dark-on-dark.

Check

Check (lg)

Bullet

Step Number

Section 09

Form Inputs

Dark context. Orange focus ring. All forms live on dark backgrounds.

Full Name

Message

Section 10

Design Philosophy

"Expertise made legible." Modern and tech-forward, calm and authoritative.

Clarity Over Cleverness

Information hierarchy is never sacrificed for visual effect.

Depth Through Light

Sections feel distinct via shade contrast, radial atmospheric glows, and glass-effect tiles.

Earned Confidence

Orange is reserved strictly for action. Glow effects amplify, never decorate.