Top Drawer Merch | Brand Guidelines 2026

Brand Overview

Top Drawer Merch is a premium full-service merchandising & brand management agency based in Los Angeles, CA. Our mission is to provide the highest caliber merchandise solutions and brand management services to world-class musicians, industry leading festivals & events, championship athletes, innovative creators, bleeding-edge blockchain projects, and influential brands spanning a variety of industries across the globe. Our visual identity reflects a premium, understated aesthetic.

Download Brand Guidelines PDF

Warm Neutrals

Use #EFEFE6 (warm off-white) over pure white. Use #181818 (warm near-black) over pure black. The palette avoids stark contrasts in favor of warmth.

Light Weights

Prefer font weights 200–400. Reserve bold (600+) for small labels and UI elements. Headings should feel airy and refined, never heavy.

Sharp Corners

Default border-radius is 0px everywhere. Exceptions: 6px on buttons for touch ergonomics, 50% on circular hero imagery only.

Negative Tracking

Apply -0.5px letter-spacing on all heading levels. This creates a tighter, more intentional typographic feel across the brand.

Minimal Decoration

Avoid gradients, complex shadows, and ornamental borders. Let content and photography breathe. Whitespace is a design element.

Section Theming

Alternate between dark (#222221) and light (#D3D3CB) section backgrounds to create visual rhythm and narrative hierarchy.

Logo System

The Top Drawer logo combines our proprietary symbol mark — an abstract sound wave / asterisk form — with the wordmark "Top Drawer" in a custom rounded sans-serif. Use the symbol alone when space is limited.

Download Logo Files

Full Logo, Symbol + Wordmark

Dark on light

Light on dark

Symbol Only

Dark on light

Light on dark

Usage Rules

Do

Use dark logo on light backgrounds
Use light / white logo on dark backgrounds
Maintain minimum clear space around logo
Use symbol mark alone when space is limited
Scale proportionally from original artwork

Don't

Stretch or distort the logo proportions
Add colors, gradients, or effects
Adjust internal spacing of the lockup
Place on busy or low-contrast backgrounds
Rotate, skew, or add drop shadows

Color Palette

Download Color Specifications

Primary — 95% Usage

Pantone Black C (Dark)

#181818

Pantone Black C

Pantone White C

#FFFFFF

Pantone White C

Lightest

#EFEFE6

Pantone 7527 C (approx)

Secondary — 5% Usage

Light

#DDDDD5

Light Elevation

#D3D3CB

Dark Elevation

#222221

Support — Accent Use Only

Olive

#5D6339

Pantone 7762 C

Orange

#DF854F

Pantone 7576 C

Gold

#CC9F53

Pantone 7407 C

Typography

Inter — Primary Typeface

The quick brown fox jumps over the lazy dog

Inter is used for all body text and heading text. Available in weights 100–900 via Google Fonts. Apply -0.5px letter-spacing on all headings.

Download Typography Resources

Inter

Primary

Aa Bb Cc

100 · 200 · 300 · 400

Inter

Display

Aa Bb Cc

500 · 600 · 700

DM Mono

Monospace

Aa Bb Cc

300 · 400 · 500

Type Scale

Element	Size	Weight	Letter Spacing	Line Height
Hero Heading	72px	200	`-0.5px`	1.05
H1	52px	300	`-0.5px`	1.1
H2	40px	300	`-0.5px`	1.15
H3	28–32px	400	`-0.5px`	1.2
H4	20–24px	500	`normal`	1.3
Body Large	18–20px	300	`normal`	1.6
Body	16px	400	`normal`	1.6
Body Small	14px	400	`normal`	1.5
Caption	12–13px	400–500	`0.5px`	1.4
Fine Print	12px	300	`normal`	1.4

Spacing & Layout

All spacing derives from an 8px base grid system. Consistent spacing creates visual harmony and reinforces the brand's disciplined aesthetic.

xs8

sm16

md24

lg40

xl60–80

2xl80–100

3xl100–120

4xl120–140

Container Widths

Container	Max Width	Usage
Large	`1440px`	Hero sections, edge-to-edge
Default	`1200px`	Standard content, grids
Narrow	`900px`	Text-heavy, articles, forms

Breakpoints (Desktop-First)

Breakpoint	Target
`> 992px`	Desktop (default)
`991px`	Tablet landscape
`767px`	Tablet / large mobile
`479px`	Mobile

Visual Effects & Borders

Shadows

Minimal shadows maintain a clean, flat aesthetic. When needed, use warm-tinted values.

Default: 0 1px 3px rgba(24,24,24,0.08)

Elevated: 0 4px 12px rgba(24,24,24,0.12)

Border Radius

Element	Radius
Default (all elements)	`0px` — brand signature
Buttons	`6px`
Hero circular images	`50%`
Input fields	`0px`

Border Styles

Cards

1px solid rgba(221,221,213,0.5)

Buttons

1px solid #EFEFE6

Dividers

1px solid rgba(221,221,213,0.3)

Theme System

TDM uses a section-based theming approach, alternating dark and light sections for visual rhythm. Each theme defines its own background, text colors, and component styling.

Dark Theme

Dark sections use warm charcoal backgrounds

Background: #222221 · Headings: #EFEFE6 · Body: #DDDDD5

Sample card component with dark theme styling

Light Theme

Light sections use warm stone backgrounds

Background: #D3D3CB · Headings: #181818 · Body: #333333

Sample card component with light theme styling

Component Patterns

Navigation Bar

Fixed. Inter 400 for nav links. Logo left, nav right. ~80px height desktop, hamburger on mobile.

backdrop-filter: blur(20px)

Service Cards

0px radius, 1px border rgba(221,221,213,0.5). Background: #EFEFE6 on light / #222221 on dark. Padding: 24–32px.

border-radius: 0px

Buttons

Primary: bg #EFEFE6, text #181818, 6px radius. Secondary: transparent with 1px border. Inter 500, 14px.

border-radius: 6px; padding: 12px 24px

Footer

Background: #222221 (Dark Elevation). Text: #DDDDD5. Links: #EFEFE6. Multi-column grid. Copyright 12px.

background: var(--dark-elev)

Motion & Transitions

Motion should be purposeful and restrained, reinforcing the brand's refined aesthetic without drawing attention to itself.

Default Transition

transition: all 0.3s ease;

Principles

Prefer ease / ease-out curves. Keep durations 200–500ms. Respect prefers-reduced-motion. Platform: Webflow Interactions 2.0.

Page Load

Fade + slide in, staggered 100–200ms

Scroll Reveals

Fade up from 20–30px below final position

Hover States

Color/opacity transitions, 0.2–0.3s

Parallax

Subtle, 10–20% rate on hero imagery

CSS Variables Reference

Colors
--color-dark	#181818
--color-white	#FFFFFF
--color-lightest	#EFEFE6
--color-light	#DDDDD5
--color-light-elevation	#D3D3CB
--color-dark-elevation	#222221
--color-olive	#5D6339
--color-orange	#DF854F
--color-gold	#CC9F53

Borders & Radius
--radius-default	0px
--radius-button	6px
--radius-circle	50%
--border-card	1px solid rgba(221,221,213,0.5)
--border-button	1px solid #EFEFE6

Typography
--font-primary	Inter, system-ui
--font-mono	DM Mono, monospace
--font-display	Darker Grotesque
--font-secondary	Jost, sans-serif
--heading-letter-spacing	-0.5px
--body-letter-spacing	normal

Spacing
--spacing-base	8px
--spacing-xs	8px
--spacing-sm	16px
--spacing-md	24px
--spacing-lg	40px
--spacing-xl	60–80px
--spacing-2xl	80–100px
--spacing-3xl	100–120px
--spacing-4xl	120–140px

Transitions
--transition-default	all 0.3s ease
--transition-fast	all 0.2s ease

Accessibility

All digital implementations should meet WCAG 2.1 AA standards.

Color Contrast

Minimum 4.5:1 for body text, 3:1 for large text. Primary palette (#181818 on #EFEFE6) achieves ~14:1 contrast ratio.

Focus States

All interactive elements need visible focus indicators. 2px solid outline in #181818 (light) or #EFEFE6 (dark) with 2px offset.

Motion

Respect prefers-reduced-motion. Disable parallax, auto-playing animations, and scroll-triggered effects for users requesting reduced motion.

Images & Semantics

All images require descriptive alt text. Decorative images use empty alt. Icon-only buttons require aria-label. Minimum 16px body text.