Brand Identity

Quick Start (Developers)

This covers 90% of implementation work. Reference detailed sections below for edge cases.

Use These 90% of the Time

Quick Token Reference

/* Copy-paste starter for any new component */
--color-heading: var(--charcoal-blue);    /* Headlines */
--color-body: var(--gunmetal);            /* Body text */
--color-cta: var(--berry);               /* Buttons */
--color-cta-hover: var(--berry-dark);    /* Button hover */
--color-link: var(--stormy-teal);        /* Links, focus */
--bg-page: var(--parchment);             /* Main background */
--bg-card: var(--rosey-tint);            /* Warm card surface */
--color-accent: var(--rose-taupe);       /* Warm accent */

Brand Overview

Storage Valet — Premium pickup, storage, and delivery for the New Jersey Gold Coast

Brand Personality

• Warm and approachable — never cold or corporate
• Reliable and trustworthy — your belongings are safe with us
• Premium without being pretentious
• Efficient and technology-forward
• Calm and organized — we handle the chaos so you don't have to

Visual Language

The palette combines grounded teals (reliability, trust) with warm neutrals (approachability, premium feel) and a distinctive berry call-to-action (warmth, confidence). Rose Taupe and Rosey Tint add a warm, sophisticated accent layer that complements the parchment backgrounds.

The dual-font typography system — DM Serif Display for high-impact headlines paired with Inter for all UI and body text — signals "premium concierge service" rather than "generic storage company."

Logo Specifications

Logo Variants

Minimum Size

• Digital: 120px wide minimum
• Print: 1 inch (25mm) wide minimum
• Below these sizes, use the icon-only mark

Clear Space

Maintain clear space equal to the height of the "V" in "Valet" on all sides. No other elements should enter this zone.

Incorrect Usage

• Do not stretch, skew, or distort the logo
• Do not add drop shadows, glows, or effects
• Do not recolor outside of approved variants
• Do not place on low-contrast or busy backgrounds
• Do not rotate or place at angles

Color Palette (v2.0 — Canonical)

The palette consists of 10 core colors with distinct functional roles, plus one hover state derivative.

Primary Colors

Accent & Action

Warm Surfaces

Backgrounds

Warm Accent: Usage Guidelines

Rose Taupe (#AC928A) and Rosey Tint (#E8DAD6) are warm accent colors added in v2.0. They provide a sophisticated warm layer that complements the parchment-based backgrounds.

Typography

Font Families

Type Scale

Font Weights

Spacing & Layout Grid

All spacing derives from an 8px base unit for consistent rhythm.

Component Spacing

• Cards: 16px padding, 8px gap between elements, 24px margin between cards
• Buttons: 12px vertical, 16px horizontal padding
• Banners: 16px padding, 8px icon-to-text gap
• Form inputs: 12px padding, 8px label-to-input gap

Digital Applications

Customer Portal

• Info banners: Rosey Tint bg + Rose Taupe left border + Deep Teal text
• Tooltips: Rose Taupe icon + Gunmetal text on white
• "New item" badges: Rosey Tint bg + Deep Teal text
• Secondary chart series: Rose Taupe (primary = Stormy Teal)
• Empty states: Rose Taupe illustrations on Parchment

Marketing Website

• Hero panels: Deep Teal bg + white text + DM Serif Display headlines
• CTAs: Berry buttons with white text (hover: Berry Dark)
• Info callouts: Rosey Tint bg with Rose Taupe accents
• Footer: Deep Teal bg with white/Parchment text

Email Templates (Resend)

5 transactional templates in Resend. 2 updated to v2.0 colors (Feb 19, 2026); 3 had no brand colors to update.

Email Brand Rules

• Headers: Deep Teal (#213C47)
• Info sections: Rosey Tint bg
• CTAs: Berry (#A14567) buttons with white text
• Invoice accents: Rose Taupe rule lines

Remaining Manual Items

Data Visualization

Don't rely on color alone — supplement with patterns, direct labels, icons in legends, and sufficient contrast between adjacent series for colorblind safety.

UI State Colors

Focus States

All interactive elements must have visible focus indicators: 2px solid Stormy Teal (#0E6F6A) with 2px offset. Never remove outline without a compliant replacement.

*:focus-visible {
  outline: 2px solid var(--stormy-teal);
  outline-offset: 2px;
}

Physical Applications

Vehicle Wraps

Storage Containers & Packaging

Uniforms

CSS Design Tokens

Core Palette Tokens

:root {
  /* Core Palette (v2.0 — 10 colors + 1 hover derivative) */
  --charcoal-blue: #213C47;
  --gunmetal: #343A40;
  --slate-grey: #6A7F83;
  --stormy-teal: #0E6F6A;
  --berry: #A14567;
  --berry-dark: #8A3755;
  --rose-taupe: #AC928A;
  --rosey-tint: #E8DAD6;
  --parchment: #EEEBE5;
  --alabaster: #E0E1DD;
  --white: #FFFFFF;
}

Semantic Aliases

:root {
  /* Text */
  --color-heading: var(--charcoal-blue);
  --color-body: var(--gunmetal);
  --color-secondary: var(--slate-grey);

  /* Backgrounds */
  --bg-page: var(--parchment);
  --bg-alt: var(--alabaster);
  --bg-card: var(--rosey-tint);
  --bg-dark: var(--charcoal-blue);

  /* Interactive */
  --color-cta: var(--berry);
  --color-cta-hover: var(--berry-dark);
  --color-link: var(--stormy-teal);
  --color-success: var(--stormy-teal);

  /* UI Chrome */
  --color-accent: var(--rose-taupe);
}

Component Tokens

:root {
  /* Info banner */
  --sv-banner-info-bg: var(--rosey-tint);
  --sv-banner-info-border: var(--rose-taupe);
  --sv-banner-info-text: var(--charcoal-blue);

  /* Badges */
  --sv-badge-new-bg: var(--rosey-tint);
  --sv-badge-new-text: var(--charcoal-blue);

  /* States */
  --sv-state-success-accent: var(--stormy-teal);
  --sv-state-warning-accent: var(--berry);

  /* Data visualization */
  --sv-chart-series-1: var(--stormy-teal);
  --sv-chart-series-2: var(--berry);
  --sv-chart-series-3: var(--rose-taupe);
}

Spacing Tokens

:root {
  --sv-space-1: 4px;
  --sv-space-2: 8px;
  --sv-space-3: 12px;
  --sv-space-4: 16px;
  --sv-space-6: 24px;
  --sv-space-8: 32px;
  --sv-space-12: 48px;
  --sv-space-16: 64px;
}

Typography Tokens

:root {
  --sv-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Helvetica, Arial, sans-serif;
  --sv-font-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
}

Accessibility Standards

Text on Light Backgrounds

White Text on Dark Backgrounds

Key Rules

1. Never use Rose Taupe for text on any background — fails WCAG AA
2. Slate Grey on warm backgrounds: large text (18pt+) only. Use Gunmetal for small text.
3. Deep Teal on Rosey Tint: excellent contrast for info panels
4. Berry on white: 5.46:1 — passes AA for all text sizes (buttons)
5. Always verify new combinations with WebAIM Contrast Checker

Common Mistakes

Email Best Practices

• Web-safe fallbacks: DM Serif Display may not render in all clients — use Georgia fallback for display headlines
• Dark mode: Test in Gmail, Apple Mail, Outlook. Use transparent PNGs for logos. Avoid pure white backgrounds — use Parchment.
• Mobile: 44px minimum tap targets. 16px minimum body text to prevent auto-zoom. 8px minimum gap between tappable elements.
• Accessibility: Alt text for all images. Semantic HTML where supported. Test critical transactional emails with screen readers.

Governance & Changelog

Changelog

Implementation Checklist

• CSS/design tokens imported into codebase
• DM Serif Display + Inter loaded with correct weights
• H1/H2 using DM Serif Display; H3+ using Inter
• Button hover states using --color-cta-hover token
• Logo assets in all required formats
• Contrast ratios verified for all text/background combinations
• Focus states keyboard-tested across all interactive elements
• Rose Taupe usage audited (never as text)
• Slate Grey audited (large text only on warm backgrounds)
• Mobile breakpoints tested on warm backgrounds

Deprecated Tokens (v1.x → v2.0)