Voltage Vet — Design Guide

1Brand summary

Voltage Vet is a one-person personal electric vehicle repair shop in Brightwood, Washington DC. Blake has completed 250+ repairs across 60+ brands of scooters, e-bikes and unicycles, working out of a home workshop rather than a storefront. The design intent follows from that: utilitarian, confident, workshop-honest. No showroom gloss, no stock-photo optimism. The palette stays near-monochrome — black ink on white paper, gray for structure — with a deep brick red used sparingly enough that it always means something: an action, a link, a section marker. The layout language is editorial and generous, borrowed from Hamlet: full-bleed photography with dark overlays, content panels that offset and overlap those images, small uppercase labels above large headings, and a lot of vertical air between sections. The result should read like a tradesperson’s portfolio, not a marketplace listing.

Sources merged here: the live Squarespace theme (typefaces and the four brand colors, all retained) and the Hamlet template at preview.colorlib.com/#hamlet (structure only — none of its type or color). Page references throughout point at mockups.html, screens 1–7.

2Color system

Four colors carry over unchanged from the existing site. Everything else is derived from them by fixed rules: the accent shades move only in lightness at hue 0, and the tint is a hand-tuned warm neutral in the same hue family.

2.1 Core palette

2.2 Form semantics

Two additional hues exist only for form and status feedback. The error red is deliberately brighter and slightly warmer than the brand accent so an inline error never reads as a section label. Never signal state by color alone — errors carry an icon and text, success carries text.

2.3 Contrast

Ratios computed against WCAG 2.1. Normal text needs 4.5:1, large text (24px, or 18.66px bold) needs 3:1, and UI borders / focus indicators need 3:1.

Put accent red on ink, or ink text on accent red. Both fail.

Introduce a fifth hue. If something needs to stand out and red is taken, use weight, size or space.

Assume any text over a photograph sits on the hero overlay (rgba(33,31,31,.55) or heavier) and is white.

3Typography

Two families, carried over from the existing site, with a hard division of labor.

Archivo Black ships one weight and no true italic. Never apply font-weight:bold or font-style:italic to it — the browser will synthesize both and the result smears. Arial Black is wider than Archivo Black by roughly 4%, so headings may gain a line during the font swap; keep display=swap and reserve headline space with min-height on the hero.

3.1 Display scale — Archivo Black

Sentence case throughout. Never all-caps a display heading; the face is already loud and Archivo Black in caps at large sizes loses word shape. Tight leading, negative tracking, and never let a display line exceed about 28 characters before it wraps.

3.2 Text scale — Space Grotesk

Pair every H1 and H2 with a label above it. That pairing is the signature of the layout.

Set a paragraph in Archivo Black, or a heading in Space Grotesk on a public page. The split is the identity.

4Layout patterns

Seven patterns, adapted from Hamlet. They compose the entire public site. The mockettes below are rendered at reduced type scale to fit this page; production sizes are in section 3.

4a — Hero

Full-bleed photograph, ink overlay at 55%, content anchored to the bottom-left of a 1140px container. Label, then display headline in white, then one sentence, then two actions. Height is 78vh on desktop with a 560px floor, 62vh on mobile.

4b — Offset detail card

Hamlet’s signature move. A tint panel pulled up over the bottom edge of the hero image, inset from the container edges, floating on a very long soft shadow. It holds the three facts a visitor needs immediately. This appears exactly once per site, on the home page.

4c — Standard section

The workhorse. Label, H2, and a 5/7 split: heading and a short stance on the left, the substance on the right. Vertical padding 96px desktop / 56px mobile. Alternate between paper and panel backgrounds down the page so sections separate without rules.

4d — Image-led card grid

Three across on desktop, two at tablet, one on mobile, 24px gaps. Photograph on top at 4:3, then H3, then two lines of copy, then the price range pinned to the bottom of the card above a hairline. Cards are equal height; the price rule aligns across the row.

4e — Stat counter row

Full-bleed ink band, four figures, hairline dividers at 14% white. Numbers in Archivo Black, captions in the accent-on-dark red. Count-up animation is optional and must respect prefers-reduced-motion; the final value is always in the markup so it renders without JavaScript.

4f — Testimonial block

Tint panel, an oversized quotation mark in accent at 50% opacity, the quote in Space Grotesk at 19–22px (not Archivo Black — a customer’s words are not a headline), attribution and the machine serviced separated by a tint rule. Two or three across, or a single centered block at 720px.

4g — Footer

Ink background, four columns: brand statement, two link columns, and contact. Column headers use the label style in accent-on-dark. Links rest at muted-on-dark and go pure white on hover. A hairline at 14% white separates the fine-print row.

5Components

5.1 Buttons

Three levels only. Radius 5px, 1.5px border on every variant so the outline and filled buttons share a bounding box. Padding 15px/26px at default size, 10px/16px small. Transitions at 180ms. The states below are pinned open so they can be read without hovering; live hover and keyboard focus also work.

Put two primary buttons in the same view. There is one action per screen that matters.

5.2 Form fields

The repair-request form is the site’s only real conversion surface, so it gets the most careful treatment. Single column, labels above inputs, hints below labels, generous 18px gaps between fields, no placeholder-as-label. Inputs are 16px to prevent iOS zoom on focus.

5.3 Status chips (admin)

Pill shape, 12px, sentence case. The job pipeline reads left to right; only “New” gets a solid accent fill, because only new requests demand action. Every chip is text-first — the color is reinforcement, not the signal.

5.4 Tables

No zebra striping and no vertical rules. A 1.5px ink rule under the header, 1px line rules between rows, panel fill on row hover. Numeric columns are right-aligned and tabular.

5.5 Price range display

Prices are ranges, never single figures, and the range is the honest part of the brand. Archivo Black for the figure with tabular numerals, an en dash with hair spaces around it, and a small uppercase qualifier underneath so nobody mistakes a range for a quote.

5.6 Brand logo strip

Logos sit grayscale at 50% opacity so the strip reads as texture rather than a set of competing brands, and come to full color on hover or focus. Equal-height cells divided by hairlines, five across desktop, two on mobile.

6Imagery

Photography is the only source of color and texture in an otherwise monochrome system, which makes it load-bearing. Everything should be shot on the actual bench: parts laid out, hands in the work, a scooter mid-teardown, the tidy corner of the workshop. Grease is fine. A person is better than an object.

Shoot real jobs. Blake’s own workshop, his own hands, actual customer machines with permission.

Use 5px radius on every image, everywhere, with no exceptions. It is the one shape rule in the system.

Apply the ink overlay whenever text or a button sits over a photograph, and verify white text clears 4.5:1 against the lightest region of the image, not the average.

Crop to 4:3 for cards, 3:2 for editorial blocks, and 16:9 or wider for the hero. Serve AVIF/WebP with a JPEG fallback and always set explicit dimensions.

Use stock photography of models on scooters, glossy studio product shots, lens flare, or anything with a color-graded teal-and-orange look.

Drop-shadow a photograph. The only long shadow in the system belongs to the offset detail card.

Desaturate photographs. Grayscale is reserved for the brand logo strip so that treatment stays meaningful.

Put a photograph behind body copy. Overlays are for headlines and short lines only.

7Spacing & grid

Base unit is 8px. Every margin, padding and gap is a multiple of it, with 4px available for optical adjustment inside components. Nothing else.

8Admin note

The internal admin — request queue, job detail, weekly books — runs on the same tokens with three deliberate departures. It is a tool Blake uses weekly on a laptop, not a page anyone is being persuaded by.

1. Space Grotesk only. Archivo Black appears nowhere below a page title, and arguably not at all: page titles are Space Grotesk 700 at 22px. Display type in a dense table view costs vertical space and buys nothing.
2. Denser spacing. Section padding drops from 96px to 24px, card padding to 16px, table rows to roughly 40px, controls to a 34px height. Body text steps down to 15px, secondary text to 13px. The 8px base unit still holds.
3. Same red, used less. The accent stays #591A1A and appears only on the primary action, the active sidebar item, links, and the “New” chip. No tint panels except in alert banners. Canvas is --color-panel, content sits on white cards with --color-line borders and a 4px radius.

9CSS tokens

Drop this into the global stylesheet. Every value in this document resolves to one of these tokens. The @import should become next/font/google with display:'swap' in the Next.js build; the fallback stacks stay as written so the site remains readable if the font request fails.

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:[email protected]&display=swap');

:root {
  /* ---- Color: carried over from the Squarespace theme ---- */
  --color-ink:              #211F1F;  /* hsl(0 3.1% 12.5%)   text, dark sections */
  --color-paper:            #FFFFFF;  /* page background, card fill            */
  --color-line:             #DFDFDF;  /* hsl(0 0% 87.5%)     borders, rules     */
  --color-accent:           #591A1A;  /* hsl(0 54.8% 22.5%)  the one accent     */

  /* ---- Color: derived ---- */
  --color-ink-muted:        #5C5858;  /* secondary text on light  7.02:1        */
  --color-panel:            #F2F2F2;  /* neutral surface                        */
  --color-tint:             #F4E7E7;  /* warm panel (offset card, testimonials) */
  --color-tint-line:        #EBD9D9;  /* rules inside a tint panel              */
  --color-accent-hover:     #6E2020;
  --color-accent-active:    #470F0F;
  --color-accent-on-dark:   #D9A6A6;  /* accent substitute on ink  7.77:1       */
  --color-on-dark:          #FFFFFF;
  --color-on-dark-muted:    #B5AEAE;  /* secondary text on ink     7.52:1       */

  /* ---- Color: form semantics ---- */
  --color-success:          #14654A;
  --color-success-surface:  #E8F3EE;
  --color-error:            #A4231C;
  --color-error-surface:    #FDECEA;

  /* ---- Overlays ---- */
  --overlay-hero:   rgba(33,31,31,.55);  /* text over photography          */
  --overlay-image:  rgba(33,31,31,.28);  /* mood only, no text on top      */

  /* ---- Type ---- */
  --font-display: 'Archivo Black', 'Arial Black', 'Arial Bold', Gadget, sans-serif;
  --font-sans:    'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.375rem, 1.05rem + 4.2vw, 4.25rem);  /* 38 -> 68 */
  --fs-h1:      clamp(2.125rem, 1.20rem + 2.9vw, 3.25rem);  /* 34 -> 52 */
  --fs-h2:      clamp(1.75rem,  1.22rem + 1.7vw, 2.5rem);   /* 28 -> 40 */
  --fs-h3:      clamp(1.25rem,  1.11rem + 0.4vw, 1.5rem);   /* 20 -> 24 */
  --fs-h4:      1.125rem;                                   /* 18       */
  --fs-stat:    clamp(2.5rem,   1.79rem + 2.2vw, 3.5rem);   /* 40 -> 56 */
  --fs-lead:    1.25rem;                                    /* 20       */
  --fs-body:    1.0625rem;                                  /* 17       */
  --fs-small:   0.875rem;                                   /* 14       */
  --fs-label:   0.8125rem;                                  /* 13       */
  --fs-input:   1rem;                                       /* 16, iOS  */

  --lh-display: 1.02;  --lh-heading: 1.08;  --lh-tight: 1.25;
  --lh-body:    1.65;  --lh-snug:    1.45;
  --ls-display: -0.02em;  --ls-label: 0.12em;
  --weight-label: 500;  --weight-field: 600;

  /* ---- Space: 8px base ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  --container:   1140px;
  --gutter:      24px;
  --section-y:   96px;
  --section-y-lg:128px;
  --grid-gap:    32px;
  --card-gap:    24px;
  --card-pad:    24px;

  /* ---- Surface ---- */
  --radius:        5px;
  --radius-pill:   999px;
  --shadow-offset: 73px 73px 78px -70px rgba(33,31,31,.24);  /* offset card only */
  --shadow-soft:   0 2px 4px rgba(33,31,31,.05),
                   0 12px 32px -12px rgba(33,31,31,.16);
  --focus-ring:      0 0 0 3px rgba(89,26,26,.30);
  --focus-ring-soft: 0 0 0 3px rgba(89,26,26,.18);   /* inputs           */
  --focus-ring-dark: 0 0 0 3px rgba(255,255,255,.55); /* on ink           */

  --dur: 180ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;  --section-y: 56px;  --section-y-lg: 72px;
    --grid-gap: 24px;  --card-gap: 16px;  --card-pad: 20px;
    --fs-body: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* Admin: same tokens, denser. Apply to the admin layout root. */
[data-density="admin"] {
  --section-y: 24px;  --card-pad: 16px;  --card-gap: 16px;  --grid-gap: 24px;
  --fs-body: 0.9375rem;  /* 15 */
  --fs-small: 0.8125rem; /* 13 */
  --radius: 4px;
  --row-height: 40px;
  --control-height: 34px;
}

Deliberately absent: a dark mode, a second accent, an elevation scale beyond the two shadows, and any token for a color not listed in section 2. Adding one is a design decision, not an implementation detail.