Identity system · v1 · August 2026
A shop badge,
built for screens.
The existing logo is a retro American service badge: cream field, slate frame, brick red call-out, and a mascot with real personality. Everything here extends that badge into a system that survives at 32px on a phone and still feels like the sign over the door.
01 / The mark
Three lockups
Each one has a job. Don't recreate, redraw or recolor them. The supplied files are the only versions.
Do
- Give it clear space on all sides equal to the height of the "D" in Dee's.
- Use the head mark below 120px wide. The full badge stops being legible there.
- Place it on cream, on ink, or on a dark photo area with enough contrast.
- Keep the badge's own cream field intact; it's part of the mark, not a background.
Don't
- Recolor it, add a gradient, add a drop shadow or add an outer glow.
- Stretch, skew, rotate or rebuild the wordmark in another typeface.
- Set it on a busy part of a photo, or on mid-tone gray where the frame disappears.
- Separate the mascot from the badge except as the approved head mark.
02 / Color
Sampled from the badge
Every value below was pulled directly out of the logo artwork, then extended into a ramp dark enough for screen. Cream is the text color on dark grounds, not white. That single choice is what makes the site read as Dee's rather than as any other black-and-red auto site.
Contrast pairs that pass
| Pair | Ratio | Use |
|---|---|---|
| Cream on Ink | 15.4 : 1 | Body and headline text on the dark ground. Passes AAA. |
| Steel on Ink | 9.1 : 1 | Secondary and muted copy on dark. Passes AAA. |
| Ink on Cream | 15.4 : 1 | All text on the cream sections. Passes AAA. |
| Cream on Brick | 5.2 : 1 | Button labels and the CTA band. Passes AA. |
| Amber on Ink | 8.6 : 1 | Data values, eyebrows, spec readouts. Passes AAA. |
| Brick on Cream | 4.9 : 1 | Links and the badge red on warm sections. Passes AA. |
Amber on cream fails at small sizes. Use the darker Amber 500 (#D18B27) on warm grounds instead.
03 / Typography
Two families, one voice
Archivo does display and body, using its width axis to get badge-like headlines without a second display face. JetBrains Mono carries anything that is a measurement, a code or a label, which is most of what a shop actually writes down.
Archivowdth 118 · wght 800uppercasetracking −0.025emline-height 0.92
We work on cars we'd own
Display. Page headlines. The wide axis is the brand's signature.
Archivowdth 108 · wght 750uppercase
Suspension repair & upgrades
Subhead. Card titles, section labels, buttons.
Archivowdth 100 · wght 40016.5px / 1.6
Worn shocks, tired bushings, control arms, wheel bearings and the clunk you've been ignoring for six months. We measure what's left rather than guessing, so you're not replacing parts that had another season in them.
Body. Everything the customer reads. Max 66 characters per line.
JetBrains Monowght 500tracking 0.16emuppercase
FRONT CAMBER −1.1° · TURNAROUND 1–2 DAYS · WORK ORDER 0412
Data. Measurements, codes, eyebrows, labels. Tabular numerals on.
04 / Voice
Like Dee explaining it
Plain, direct, specific, and never selling. The differentiator is that a real person tells you what's actually wrong, so the writing has to sound like that person, not like a marketing department describing him.
We measure what's left and tell you honestly, rather than selling you a set you don't need yet.
Our certified technicians leverage industry-leading diagnostic protocols to deliver unparalleled brake solutions.
Clunk over bumps at the front left, worse when it's cold.
Experiencing a suboptimal ride quality event? We're here to help!
Bring in an M3 or a Corolla. Same rack, same attention.
Servicing luxury, exotic and premium European marques since day one.
That didn't send. Call the shop directly, or try again in a minute.
Oops! Something went wrong. Sorry about that!
Rules
- Sentence case everywhere except display headlines and mono labels.
- Say the specific thing: "rear pads 4mm", not "brake wear detected".
- Name the action on the button, and use the same word in the confirmation.
- Errors explain what happened and what to do. They never apologize.
- No em dashes. No "unlock", "elevate", "seamless", "solutions", "journey".
Claims to avoid
- Don't state certifications, affiliations or years in business until Dee confirms them.
- Don't invent numbers. No "500+ cars serviced" without a real count behind it.
- Don't imply dealer authorization or factory partnership.
- Don't guarantee turnaround the shop can't hold to; "typical" is the honest word.
05 / Photography
Warm light, dark shop
Every photo on this site is Dee's own, shot on a phone in the shop and put through one
grading pass (brand/grade.py) that pulls the blown fluorescent
highlights, deepens and cools the shadows, warms the mids and mutes the beige wall. That
single recipe is what makes forty-five snaps read as one set. Shoot first, grade after.
Do
- Shoot the shop's real cars. Accuracy is the whole point for this audience.
- Get in close on components: a caliper, a coilover, a torque wrench on a hub.
- Leave the bay door open in the frame; the cool/warm split is the brand's light.
- Keep the frame tidy. Clean floor, coiled hoses, no clutter behind the subject.
Don't
- Use other shops' or other accounts' photos. It's their copyright and their car, and a customer who recognises it is the worst possible outcome.
- Use flash. It kills the amber and flattens the paint.
- Use generated imagery for the shop, the cars or the parts. This audience spots it, and a photo's job here is to prove the work is real.
- Include readable third-party branding, plates, faces or customer details.
Shot list for Dee
Wide down the shop, a car on the rack, bay door open behind. Landscape, lots of headroom for the headline.
21:9Both bays in use, tool wall visible. Shot at dusk with the interior lights on.
3:2The building with one door open and glowing. Blue hour. This is the "we're a real place" shot.
16:9Hood up, shot from above at a three-quarter angle. Carbon, braces, tidy loom.
4:3Wheel off, caliper and rotor at eye level on the lift.
4:3Coilovers on the bench before install, plus one underside shot on the lift.
4:3Three-quarter on the lip, caliper visible through the spokes.
4:3Scan tool on the fender cover, cable running into the cabin.
4:3A Camry or CR-V on the lift. Essential, because it proves the range claim.
4:3Before and after for each job posted. Feeds the Work page and the CRM later.
4:3Shoot portrait, hold the phone level, get closer than feels natural and don't zoom. Portrait is deliberate: the cards on the site are 4:5, so a portrait frame crops to almost nothing. Landscape phone shots lose the wheels.
06 / Components
The parts bin
Built once in /assets/css/styles.css and reused across the site.
The same components carry into the CRM in phase two.
Buttons
Brick fill is the primary action and there is only ever one per view. Ghost is everything else. 8px radius, uppercase Archivo, 2px lift on hover.
Spec panel
Work order
Sample- We found
- Failed coil, cylinder 4
- Also noted
- Rear pads 4mmYour call
The signature element. Mono labels, amber values, a bar per row, red when something needs the customer's attention. Reused for checklists and readouts.
Shape and spacing tokens
| Token | Value | Used for |
|---|---|---|
| --r-sm | 8px | Buttons, inputs, small chips |
| --r-md | 14px | Cards, panels, media frames |
| --r-lg | 22px | Large feature blocks |
| --gutter | 20–40px fluid | Page side margins |
| --section-y | 72–136px fluid | Vertical rhythm between sections |
| --maxw | 1280px | Content container |
07 / Motion
Mechanical, not springy
Motion here should feel like a well-made switch: quick, decisive, settles hard. No bounce,
no elastic overshoot, nothing that draws attention to itself. Everything respects
prefers-reduced-motion.
| Token | Curve | Used for |
|---|---|---|
| --ease | cubic-bezier(.2, .7, .2, 1) | Reveals, color and opacity changes, layout shifts |
| --snap | cubic-bezier(.16, 1, .3, 1) | Hover lifts, the arrow nudge, anything that should feel positive |
| Reveal | 600ms, 18px rise | Section entrances, staggered 80ms per item |
| Hover | 140–180ms | Cards, buttons, links. Fast enough to feel instant. |
| Filter swap | 320ms view transition | Service and work grids re-sorting |
See it applied.
Every rule here is already live on the site.