Internal · Brand reference

Adhere Studio brand sheet

Colors, type, logos, voice, components. One page so every email, ad, decal, and landing page sounds like the same shop.

01 - Color

Tokens are the source of truth

Never hardcode hex in components. Reference the CSS custom property (e.g. var(--mint)) or the Tailwind alias (bg-mint, text-ink).

Brand core

Ink#212529

oklch(0.241 0.012 256)

Primary gunmetal - text, dark surfaces

Ink Soft#495057

oklch(0.38 0.013 256)

Surface#F8F9FA

oklch(0.985 0.003 247)

Light neutral background

Surface Elevated#FFFFFF

oklch(1 0 0)

Slate Brand#3F548D

oklch(0.46 0.078 264)

Secondary - trust, calm

Mint#20C997

oklch(0.78 0.155 168)

Primary action - CTAs

Mint Soft#E6FFFA

oklch(0.95 0.04 168)

Blue Glow#4D94FF

oklch(0.62 0.17 255)

Electric accent - status, links

Blue Soft#EBF4FF

oklch(0.95 0.03 255)

Safety#FFD700

oklch(0.86 0.18 95)

DOT hi-vis - compliance accents

Google Star#FBBC04

oklch(0.84 0.18 88)

Review stars only

Gradients

linear-gradient(135deg, var(--mint), oklch(0.7 0.15 195))

linear-gradient(180deg, var(--ink), oklch(0.16 0.012 256))

linear-gradient(120deg, var(--slate-brand), var(--blue-glow) 45%, var(--mint))

Trade colors

Used by the hero trade-rotator and trade-specific landing pages. Each trade gets one color - don't reuse across trades.

Plumbers

#5A8DEE

HVAC

#E89B4A

Electricians

#D9C04A

Roofers

#D9543A

Landscapers

#3DB87A

Contractors

#A95ACB

Pest

#3FAEB8

Movers

#D9A14E

Painters

#D9528E

Locksmiths

#7A6FD9

Tree

#5BBF6A

Cleaners

#5AA8D9

02 - Typography

Geist for display, Inter for body

Display

Geist Semibold

The quick brown fox jumps over

Weight 600 · letter-spacing -0.02em

Headings h1–h4, hero numbers, big stats.
Tight leading on display sizes (leading-tight or tighter).

Body

Inter Regular

Drop the truck at the Greensboro Drop-off and most kits go on in a few hours.

font-feature-settings: "ss01", "cv11"

All paragraph and UI text.
Use weight 400/500/600 only. Never 700+ in body.

Scale

text-6xlHero

text-4xlSection

text-2xlSubsection

text-lgLead paragraph

text-baseBody copy default

text-smCaptions, helper text

eyebrowEyebrow Label

03 - Logo & marks

Wordmark, mascot, topographic

Wordmark on light

SVG uses currentColor - set with text color.

Wordmark on ink

Primary lockup for hero sections.

Rock dove mascot

Use as decorative mark at low opacity (~0.06–0.10) via <DoveMark/>.

<BgTopo /> - contour backdrop

Topographic backdrop

Pair with dove on hero / section accents.

Clear space

Minimum margin = height of the "A".

Minimum size

24px tall on screen, 0.5" in print.

Don't

No drop shadows, gradients, or recoloring outside brand palette.

04 - Components

Signature elements

Buttons

Primary CTA always mint with shadow-mint.

Badges & chips

Default

Secondary

Outline

Destructive

DOT Compliance

Safety stripe & caution tape

Reserved for compliance/DOT contexts. Don't decorate marketing surfaces with it.

Shadows & elevation

shadow-mint

shadow-blue

shadow-elevated

Radius scale

2xl

3xl

Base --radius: 0.875rem (14px).

05 - Voice & tone

Founder-led, direct, no fluff

Founder-led. Use 'I' or 'Chris' - never 'our team'.
Second-person, present tense. 'Your trucks look professional and legal - fast.'
Concrete nouns: Greensboro Drop-off, Randleman shop, Transit, DOT.
Lead with the customer's outcome. Specs come second.
Short sentences. One idea per line.

Don't

✕No corporate 'we' or 'our team of experts'.
✕No vague adjectives: 'premium', 'best-in-class', 'cutting-edge'.
✕No hype emoji or exclamation marks in headlines.
✕Don't bury the price or the timeline.
✕Never say 'reach out' - say 'text me' or 'call'.

Sample copy in the wild

"Your trucks look professional and legal - fast. Installed by me."

"Lettering, decals, and DOT compliance for service fleets across the Triad."

"Booked in days, not weeks - with one point of contact from quote to install."

"We work while your fleet sleeps. Zero downtime."

"Most fleets don't know they're out of compliance until a truck gets flagged. We find it first."

"Your art is the job. Let's make it bulletproof."

Vocabulary

Greensboro Drop-offRandleman shopthe Triadzero-downtimefleet kitpartial wrapfull wrapdecalletteringDOT compliancepre-flightspot graphic

06 - Motion

Purposeful, never decorative

float-slow

Gentle hover on stat cards / hero badges. 6s ease-in-out.

marquee

Fleet galleries, logo strips. Pause on hover/focus.

trade-slide

Hero trade-rotator. Steps through 12 trades on a cycle.

calendar-glow

Availability badges only. 2.6s pulse.

All keyframes honor prefers-reduced-motion. Don't add new looping animations without one - it breaks the rule.