Brand Identity

Voice & Tone

Storage Valet is a premium, white-glove storage concierge — not a storage facility, not a moving company. We are a service + data platform that brings reliability, clarity, and trust to urban household overflow.

Voice Principles

• Confident but not arrogant — We know our value; we don't oversell
• Clear and direct — No jargon, no filler, no corporate-speak
• Warm but professional — Approachable premium, like a trusted concierge
• Action-oriented — Every piece of copy should guide toward a next step

Do / Don't Examples

Language Rules

Content Principles

1. Lead with the resident benefit, not Storage Valet features
2. Specificity sells — "$2,000 included coverage" beats "insurance included"
3. One CTA per section — Don't create choice paralysis
4. Social proof when available — Building partnerships, resident count, promo redemptions
5. Seasonal hooks — Holiday decorations, back-to-school, spring cleaning, baby gear rotation

Color Palette

A 12-color system anchored by near-black Midnight and Electric Teal. Dark backgrounds are the default canvas; light surfaces are the exception. Status colors are functional tokens — they are not part of the brand palette count.

Dark Range — 3 Colors

Accent Range — 4 Colors (Teal Ramp)

Neutral Range — 5 Colors

Color Usage Rules

Which color goes where — and which combinations are prohibited.

Dark Surfaces (Default)

Light Surfaces

The Teal Accent Ramp

Four steps from luminous to deep. One teal can't work everywhere — the ramp solves dark-vs-light contrast without leaving the accent family.

Typography

DM Serif Display for emotional headlines. Outfit for everything else. Warmth meets precision.

Type Scale

Components

Live-rendered buttons, cards, chips, links, and status elements across both surface modes.

Buttons

Status Chips

Link Component Spec

Warm Cards

Motion & Interaction

Purposeful, restrained motion. Every animation must earn its place.

Transition Tokens

Permitted Animations

/* Mandatory reduced-motion override — must be in every implementation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Spacing & Layout

An 8px base grid with named tokens. Generous whitespace is a brand signal — not wasted space.

Space Tokens

Border Radius Tokens

Layout Constraints

Accessibility

WCAG 2.1 AA minimum for all text. AAA targeted for primary reading combinations. Ratios are Claude Desktop verified calculations.

Text on Dark Backgrounds

Text on Light Backgrounds

Button Text Contrast (WCAG 1.4.3)

WCAG 1.4.11 — Non-Text Contrast

UI component boundaries (button borders, input outlines, focus indicators) require a 3:1 minimum contrast against adjacent colors. Electric Teal button fill on Cloud is ~1.9:1 for the boundary alone — below the 3:1 requirement. Mitigation: light-surface primary buttons add a 2px solid var(--sv-teal-dark) border (Teal Dark on Cloud = 3.5:1 AA boundary). This is a light-mode-only addition; dark-surface primary buttons do not need it.

Key Accessibility Rules

Dark & Light Modes

Dark is the default. Light mode is the inversion for specific contexts — emails, print, property manager materials, and OS-level light-mode preference on certain products.

Per-Product Dark-Mode Behavior

Semantic Token Mapping

Portal & Wiki Implementation (prefers-color-scheme)

/* sv-portal-2026 and sv-wiki dark/light implementation */
/* Dark is the base — no condition required */
:root {
  --sv-bg-page:       #060E1A;
  --sv-bg-surface:    #0A1628;
  --sv-text-primary:  #FFFFFF;
  --sv-text-body:     #8BA4A8;
  --sv-text-secondary:#8BA4A8;
  --sv-accent-text:   #00D4AA;
  --sv-focus:         #00D4AA;
  --sv-border:        rgba(255,255,255,0.06);
}

/* Respect OS-level light mode preference */
@media (prefers-color-scheme: light) {
  :root {
    --sv-bg-page:       #F4F7F6;
    --sv-bg-surface:    #FFFFFF;
    --sv-text-primary:  #0A1628;
    --sv-text-body:     #3D4F54;
    --sv-text-secondary:#3D4F54;
    --sv-accent-text:   #007A62;
    --sv-focus:         #007A62;
    --sv-border:        rgba(0,0,0,0.06);
  }
}

/* sv-website: always dark — no media query, no toggle */

Photography & Art Direction

Cinematic, editorial, human. Never stock-photo sterile.

Aesthetic: "Cinematic Concierge"

Photography should feel like stills from a documentary about beautifully organized urban life. Moody natural light, shallow depth-of-field, real spaces with real wear. The dark palette means photos need to hold their own on both dark and light surfaces.

Principles

Color Treatment for Dark Surfaces

When placing photography on dark backgrounds, apply a subtle overlay: linear-gradient(rgba(6,14,26,0.3), rgba(6,14,26,0.6)) to ensure text readability over images. Photos should feel like they emerge from the darkness, not sit on top of it.

Logo Spec

The logo lockup is rendered as a single PascalCase word: StorageValet. The two-color treatment (White/Midnight for "Storage," teal accent for "Valet") provides visual word separation — no space is needed. DM Serif Display is the logo typeface. The one-word form applies only where the wordmark is being displayed as a visual mark (logo lockups, favicon/app icon, merchandise, URL slugs, social profile handles). In all written text — page titles, meta tags, email subject lines and body copy, calendar invites, headings in documents, product and plan names, press and legal copy, documentation — use Storage Valet (with space). The spaced form is also the form used in the legal entity name "My Storage Valet LLC."

Logo Lockup

Usage Rules

Email Templates

Email clients strip CSS variables, ignore dark backgrounds, and force their own dark-mode inversions. The rules here are different from the web — hardcode everything.

Default Email Structure

Email Design Rules

Client Behavior Notes

Warm Accent Migration

The Navy + Berry system (v2.0–v4.2) included warm accent tokens that have no equivalent in Midnight Teal. This section documents their canonical migration targets so agents encountering v4.x hex values in any codebase know exactly where they go.

Deprecated Token Mapping

Common Mistakes

The patterns developers reach for that break the system.

Quick Start

Copy-paste CSS custom properties. This is the complete design system in one code block — start here.

/* =============================================
   STORAGEVALET — Brand Tokens v6
   Operation Midnight Teal · Dark-First
   12 colors: 3 dark + 4 teal + 5 neutral
   ============================================= */

:root {

  /* PALETTE — 12 COLORS (LOCKED) */
  --sv-abyss:          #060E1A;
  --sv-midnight:       #0A1628;
  --sv-deep-sea:       #0D2137;
  --sv-electric-teal:  #00D4AA;
  --sv-teal-dark:      #00A888;
  --sv-deep-teal:      #008F72;
  --sv-link-teal:      #007A62;
  --sv-storm:          #3D4F54;
  --sv-mist:           #8BA4A8;
  --sv-seafoam:        #E6F0EE;
  --sv-cloud:          #F4F7F6;
  --sv-white:          #FFFFFF;

  /* TYPOGRAPHY */
  --sv-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sv-font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sv-font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* SEMANTIC TOKENS — dark mode default */
  --sv-bg-page:        var(--sv-abyss);
  --sv-bg-surface:     var(--sv-midnight);
  --sv-bg-elevated:    var(--sv-deep-sea);
  --sv-text-primary:   var(--sv-white);
  --sv-text-body:      var(--sv-mist);
  --sv-text-secondary: var(--sv-mist);
  --sv-accent:         var(--sv-electric-teal);
  --sv-accent-text:    var(--sv-electric-teal);
  --sv-focus:          var(--sv-electric-teal);
  --sv-border:         rgba(255,255,255,0.06);

  /* STATUS TOKENS — dark mode default */
  --sv-status-success-text: #34D399;
  --sv-status-success-bg:   rgba(52,211,153,0.10);
  --sv-status-info-text:    #67B8BF;
  --sv-status-info-bg:      rgba(103,184,191,0.08);
  --sv-status-warning-text: #FBBF24;
  --sv-status-warning-bg:   rgba(251,191,36,0.08);
  --sv-status-error-text:   #F87171;
  --sv-status-error-bg:     rgba(248,113,113,0.08);

  /* MOTION */
  --sv-transition:      0.2s cubic-bezier(0.22, 1, 0.36, 1);
  --sv-transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* SPACING (8px base) */
  --sv-space-xs: 4px;    --sv-space-sm: 8px;
  --sv-space-md: 16px;   --sv-space-lg: 24px;
  --sv-space-xl: 32px;   --sv-space-2xl: 48px;
  --sv-space-3xl: 64px;  --sv-space-4xl: 96px;

  /* BORDER RADIUS */
  --sv-radius-sm: 6px;   --sv-radius-md: 8px;
  --sv-radius-lg: 12px;  --sv-radius-xl: 16px;
  --sv-radius-2xl: 20px;
}

/* Light mode override — sv-portal-2026 and sv-wiki only */
@media (prefers-color-scheme: light) {
  :root {
    --sv-bg-page:        var(--sv-cloud);
    --sv-bg-surface:     var(--sv-white);
    --sv-bg-elevated:    var(--sv-seafoam);
    --sv-text-primary:   var(--sv-midnight);
    --sv-text-body:      var(--sv-storm);
    --sv-text-secondary: var(--sv-storm);
    --sv-accent-text:    var(--sv-link-teal);
    --sv-focus:          var(--sv-link-teal);
    --sv-border:         rgba(0,0,0,0.06);

    --sv-status-success-text: #1B6B4A;
    --sv-status-success-bg:   #E6F5EC;
    --sv-status-info-text:    #3D5A5E;
    --sv-status-info-bg:      #E0EBF0;
    --sv-status-warning-text: #8B5E1A;
    --sv-status-warning-bg:   #FFF3E0;
    --sv-status-error-text:   #9A2D22;
    --sv-status-error-bg:     #FDECEB;
  }
}

/* Reduced motion — mandatory in every stylesheet */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Activation Checklist

Every item a developer must verify before shipping. Check each against the guide sections cited.

Phase 1 — Palette & Tokens

• Google Fonts loaded: DM Serif Display (400, 400i) + Outfit (300–800) — §04
• All 12 palette hex values match this guide exactly — no approximations — §01
• No 13th color in the codebase. Status colors are functional tokens, not palette — §01
• CSS custom properties from §15 Quick Start are in the global stylesheet
• --sv-font-display uses the Georgia fallback stack — §04
• --sv-font-body uses the -apple-system stack — §04
• --sv-font-mono is defined and used for all hex displays, code blocks, token labels — §04
• --sv-text-secondary resolves to full-opacity Mist/Storm — no opacity shorthand — §09
• All 8 status semantic tokens (4 × text/bg) are defined and switch on mode — §09

Phase 2 — Color Correctness

• Dark mode is the :root default — light mode overrides via media query (portal + wiki) or never (site) — §09
• --sv-accent-text swaps from Electric Teal to Link Teal in light mode — §09
• --sv-focus swaps from Electric Teal to Link Teal in light mode — §09
• Zero instances of Electric Teal (#00D4AA) as text on Cloud, White, or Seafoam — §08
• Zero instances of Mist (#8BA4A8) as text on Cloud, White, or Seafoam — §08
• Zero instances of Storm (#3D4F54) as text on Abyss, Midnight, or Deep Sea
• Info status light-mode BG is #E0EBF0, not #E6F0EE — §05
• All warm-era hex values from v4.x have been migrated per §13

Phase 3 — Components

• All CTA buttons use Midnight text on Electric Teal fill — §05
• Light-surface primary buttons have a 2px solid Teal Dark border (WCAG 1.4.11) — §05, §08
• Dark button (Midnight fill) is not used on dark surfaces — §05
• Light-mode status chips have a 1px currentColor border — §05
• Status chips use icon + label — never color alone (WCAG 1.4.1) — §05
• All interactive elements have visible focus rings (2px solid, 2px offset) — §08
• Link colors match the spec table in §05: Electric Teal on dark, Link Teal on light
• Button hover includes translateY(-1px) and one-step color darken on the ramp — §06

Phase 4 — Typography

• DM Serif Display is used only for H1, H2, and the logo lockup — §04
• DM Serif Display is never set to font-weight: bold or 700 — §04
• Body and UI text use Outfit — no Plus Jakarta Sans or Inter anywhere — §04
• Hex values and code displays use the mono font stack — §04

Phase 5 — Accessibility & Motion

• prefers-reduced-motion: reduce media query is present in every stylesheet — §06
• Film grain overlay uses opacity ≤ 0.03 (decorative only) — §06
• Ambient glow radials use Electric Teal at ≤ 6% opacity — §06
• Focus ring: 2px solid, 2px offset

Phase 6 — Email & Assets (deferred)

• Email templates use hardcoded hex values — zero CSS custom properties — §12
• Email CTA uses Midnight (#0A1628) text on Electric Teal fill — §12
• Logo lockup implemented per §11 (White+Teal on dark, Midnight+Teal on light)
• Logo rendered as "StorageValet" (no space) in visual marks only — logo lockup, favicon, merchandise, URL slugs. Written text uses "Storage Valet" (with space) — §11
• Favicon and OG images updated to Midnight Teal system (deferred)
• Stripe portal branding updated (deferred)
• Canva brand kit updated to SV_Brand_Kit_2026_v6 (Midnight Teal)
• Print/Pantone mappings defined when producing physical materials (deferred)

Changelog