The real design system behind freightallianceinc.com — every token, class and pattern below is pulled from the live theme CSS. Build new pages against this page, not from memory.
Core brand palette plus the supporting neutrals actually shipped in dist/main.css. Orange and near-black carry almost the entire site; the panel gray is reserved for diagonal section backgrounds.
Muller family, four self-hosted weights served as separate font-families. Headings always use the two-tone convention: base color from the class, a bare <span> inside flips to the second color.
Owner Operators take home 90% of total load gross! No hidden fees! We have a wide range of services that include reefer and dry van with no forced dispatch.
1px border-radius everywhere — deliberately near-square, not rounded. Hover always swaps to the peach tint with orange text.
Real markup from /owner/ — zero-padded two-digit numbers, solid black (not orange), 1px solid black border boxing each row.
Left photo grayscale filter, right photo orange overlay via mix-blend-mode:overlay pseudo-element (not a CSS filter). Real assets from /owner/: owner-truck.webp + owner-driver.webp.
asymmetric grid: 0.6fr / 0.42fr, 30px gap, 1px border-radius on each frame.
06 · Marquee — real @keyframes scroll, 5s linear infinite, native CSS (not JS). Solid words alternate with outline-only "ghost" words via -webkit-text-stroke.
Signature structural device: a solid-fill panel bleeds in from one edge with a diagonal clip-path, sitting behind content as an absolutely-positioned sibling — never applied to the section itself.
max-width 72%, background #F3F2F7. Tightens to a shallower cut on tablet/mobile.
The "+" is a real character, not an icon — it rotates 45° into "×" and turns orange when active.
Multi-line raw HTML pasted into page content gets stray <p>/<br> injected — including inside <style>/<script> blocks, silently breaking CSS/JS. Always minify to one line before wp post update.
The full-bleed template used for this page and /owner-operator-jobs/ auto-prints <h1 class="privacy-policy__header title-h1"> from the page title. Hide the duplicate with .privacy-policy__header{display:none!important}.
Full-bleed bands use width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw) to break out of the theme's 1330px .container and the policy template's 894px wrapper.
#FFCB05 italic pill button in dist/main.css is unstyled Gutenberg core CSS bleed-through, not a brand color. Real buttons are .button / .button-big (orange, 1px radius).
Every color, font, spacing rule and interaction pattern above is copied verbatim from the live theme CSS on 2026-07-02. When in doubt, view-source this page or grep dist/main.css — don't improvise new tokens.
Please fill out the form and one of our experts will contact you as soon as possible.
Please fill out the form and one of our experts will contact you as soon as possible.
Thank you! Your message has been sent!
Thank you! Your message has been sent!
