Brand & Pattern Library
Every token, every pattern, one source of truth
The real design system behind allstatesexpressinc.com — every color, font and shape below is pulled from the live theme CSS (dist/main.css) and the confirmed-correct /cdl-driver-jobs/ build. Build new pages against this page, not from memory.
Color Palette
Safety yellow and near-black carry almost the entire site. The charcoal panel color is reserved for the blob-corner sections in §5. Green/amber/pink only belong to the survey widget — don’t reuse them as general status colors.
Typography
Exo family, six self-hosted weight/style files each registered as its own font-family. Headings are always Exo700Italic, uppercase — there is no non-italic heading anywhere on the live site.
Connecting your business to more opportunities nationwide
For Owner Operators
All States Express Inc is a nationwide expedited and full-truckload carrier running dry van, reefer, straight truck, box truck, sprinter and cargo van equipment, with 24/7 dispatch and cross-border coverage to Canada and Mexico.
Buttons
The primary CTA is an asymmetric “flag” shape (border-radius: 2px 60px) — not a pill. The only true pill on the site is the outline nav button. A third shape (50% 0 50% 0) shows up on small circular badges.
border-radius:2px 60px · Outline: border-radius:50px · Badge: border-radius:50% 0 50% 0 “Blob Corner” Panels
The site’s signature structural device: one corner of a charcoal panel balloons into a huge quarter-circle radius (400px desktop → 160px tablet → 100px mobile), alternating sides between consecutive sections. Always a radius, never a diagonal clip-path.
Equipment Photo Cards
Six real equipment photos, 30px rounded corners, bottom gradient fade, italic label. On hover the live slider swaps in a yellow overlay with a truck-silhouette pattern — shown here as the static card treatment.
Watermark Pattern
A faint repeating truck-silhouette texture (banner-bg.svg) sits behind the hero at 30% opacity, and behind this template’s content area at 10% opacity, tiled. Never used above ~30% opacity — it is a texture, not a graphic element.
Campaign-Page Variant
The /cdl-driver-jobs/ recruiting page is a deliberate, confirmed-correct mutation of this system for conversion-focused landing pages — reuse this recipe for future campaign pages rather than the plain dark sitewide sections above.
- Kicker pillSmall yellow badge above H1, uppercase, letter-spacing .22em, border-radius 3px (not the button shape)
- Mixed-color H1White base, <em> wraps the yellow phrase — same two-tone idea as the sitewide H1, different tag
- Dual-CTA rowFilled yellow flag button + outline button (2px solid rgba(255,255,255,.65)) side by side
- Stat cardsDark #1e1e1e card, 4px solid yellow bottom border only — not a full border
- Checklist rowsDark card per row, small circular yellow checkmark icon on the left
- Equipment grid, white-card variantSame 6 truck photos as §5, on white cards for light content blocks
- Full-bleed CTA bandSolid yellow band, dark pill/flag button, used as the page’s closing conversion moment (see §09 “This page is a build reference” band below for the live equivalent)
Build Gotchas
Multi-line raw HTML pasted into page content gets stray <p>/<br> injected — including inside <style>/<script> blocks, silently breaking CSS/JS. This page itself was deployed as a single minified line for exactly that reason. Always minify to one line before wp post update.
No header/footer duplication, no page-builder collision. It auto-prints the page title as a real Exo700Italic uppercase H1 — treat that as your headline, don’t hide it and add a second one.
Full-bleed bands use width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw) to break out of the template’s constrained wrapper, exactly as /cdl-driver-jobs/ does with its own .fb class.
wp --path=~/domains/... does not shell-expand inside a quoted SSH command — use $HOME/domains/... or the wp-cli call fails with a false “not a WordPress installation” error.
This page is a build reference
Every color, font, spacing rule and shape above is copied from the live theme CSS on 2026-07-02, cross-checked against the confirmed-correct /cdl-driver-jobs/ build. When in doubt, view-source this page or grep dist/main.css — don’t improvise new tokens.