Brand Style Guide
A living reference of the real, live design tokens used across dieselpowertruckcenter.com — extracted directly from the theme’s CSS and rendered pages, not guessed. Use this page as the baseline for every new page, section, or component built on this site going forward.
Color Palette
One accent color, everything else grayscale. #ce152d appears 104× across the theme’s
compiled CSS — by far the dominant token. Do not introduce a second accent hue on new pages.
#ce152d
Buttons, ribbon headings, links, active states, bullet dots — the single accent color
#000000
Hero photo backdrop, job-posting / About-Us dark hero bands
#f2f2f2
Alternating section backgrounds, trust-badge strip
#8b8b8b
Secondary / muted copy
#f5f5f5
Secondary background variant
#6a6a6a
Body copy on select blocks
#cacaca
Input borders, hairline dividers
#ffffff
Base background, button/hero text
#21759b
Leftover Underscores.me starter-theme link color. Vestige only — never use intentionally.
rgba(233,30,99,x)
Appears only in .button--reverse:hover box-shadow — looks like an unswapped Material Design default. Prefer red-tinted shadows instead.
Typography
Two self-hosted families, no Google Fonts CDN. Headings default to italic everywhere — this is deliberate, not a mistake, and applies to every h1–h6 site-wide.
Body copy runs on Barlow, 16px / 1.3, regular weight — the plain-text counterpart to VoxRoundWide’s italic display voice. Bulleted lists inside content sections stay italic and use a small red-dot bullet instead of a default marker:
- Remanufactured parts
- OEM parts
- Aftermarket parts
The Red Ribbon
The closest thing this site has to a logo-level signature shape: a red rectangle, rounded only on its trailing edge, skewed into a diagonal “cut flag.” It precedes every major section heading, site-wide.
Real recipe from .content-section__title::before: red rectangle,
border-radius:0 15px 15px 0, transform:skewX(165deg). Reuse this exact shape for any
new section heading — don’t invent a new ribbon angle or radius.
Buttons
Pill-shaped, symmetric 10px radius (not the ribbon’s asymmetric cut). Two variants, almost always paired: solid for the primary action, ghost for the secondary.
Trust-Badge Strip
4-column icon + italic title + short line, used on the homepage and About Us. Real icons from the live media library, referenced directly (not re-uploaded).
Low Prices
Rates start from $115/per hour.
ASE Certified Mechanics
All techs are ASE certified with 2+ years experience.
Large Inventory
Over $1,000,000 in parts for every make and model.
90 Days Warranty
On all parts and services performed at any location.
Header Photo Band
Every hero photo renders at 65% opacity over a black backdrop — moody by default, regardless of source exposure. What changes between page types is whether an H1 overlay is set.
Careers
Home / Careers — H1 setReal Photography
Authentic shop-floor and facility photography throughout — no stock photos observed anywhere on the site. Keep sourcing real photos of real work for new pages.
Careers Pattern
The site already has working JobPosting/Organization JSON-LD (inc/json-ld.php —
not touched by this page). New roles should follow this exact shape so the schema keeps working and the
listing stays visually consistent.
Suspension & Alignment Specialist
We’re looking for a dedicated Suspension & Alignment Specialist who takes pride in precision work and enjoys keeping trucks safe and road-ready.
Read moreJob posting page shape (9 parts)
- Hero H1 (black/photo band, white uppercase italic)
- Red-ribbon content title (job title repeated)
- Intro paragraph(s)
- “What you’ll do” — italic bullet list
- “Requirements:” — italic bullet list
- Closing one-liner
- Standard benefits list (fixed, reused verbatim)
- Application form incl. CV upload
- Location card + map
Benefits Offered for All Positions
- Medical Insurance (company pays 75%)
- Dental & Vision Insurance (company pays 100%)
- Paid Holidays
- Paid Vacations
- Annual Safety Shoe Reimbursement Program
- 401(k) program (employee funded)
404 Page
Confirmed live by requesting a dead URL — reuse this shape for any custom error handling.
For Developers
Empirically confirmed facts about this theme and site — see the full write-up in
deliverables/style-guides/dieselpowertruckcenter.md for details and sourcing.
diesel-power-truckcenter v1.0.2 — bespoke, no page builder, ~15 custom Gutenberg blockspage.php → templates/template-service.php → header-servicebt_seo_data (plugin bt-seo-fields) — controls H1, header image, robots, footer form/map toggleinc/json-ld.php — confirmed via curl. Do not modify.<!-- wp:html --> block to bypass it.noindex, nofollow, not in any nav menu, reference-only