The marketing-site dialect of the VDI system — a warmer, higher-contrast take that pairs Barlow and PT Sans with the VDI yellow on a paper background. It exists alongside the primary system; reach for it on public-facing marketing surfaces (vdiaustralia.com.au, model pages, configurator entry), not on internal application screens.
Four rules govern every pattern on this page. They translate the brand book (driven, trusted, customer-centric) into the specific moves the website is allowed to make.
Hero headings live at 88–140 px. Anything smaller and the page reads like an admin tool.
One yellow moment per screen — a marquee, a hover state, a CTA band. Never a yellow background and a yellow button.
Hero zones sit on #F7F7F1 paper. White is reserved for cards and modal surfaces.
Cards use hairline #E6E6E6 borders. Elevation enters only on hover.
The website ships with Barlow as the display family (a condensed, engineered grotesk with strong weight at 800/900) and PT Sans as the body face. Both are available on Google Fonts and load with the tokens.
Comfort, capacity and Cummins Euro VI performance — the C12 is the most flexible coach in the Yutong range. School run in the morning, charter on the weekend, mining crew at midnight.
Every public page opens with two stacked bars. The thin blue utility strip carries contact + dealer affordances; the white sticky header carries the primary nav and the Build & Order CTA. Together they always resolve to a single page-spanning yellow accent.
Australia
Square-cornered (2px), letter-spaced, never pill-shaped. The hero CTA flips colors on hover — blue base, yellow on intent — which is the visual signature of the marketing site. Pair it with a quiet ghost button; never two strong buttons together.
Two-column hero (140 px display on the left, supporting copy + pills + CTAs on the right), a full-bleed image well below, then a 5-column stat row banded by hairline rules. The pattern repeats for every model page.
Comfort, capacity and Cummins Euro VI performance — the most flexible coach in the Yutong range.
A full-bleed yellow band that punctuates the page transitions — typically immediately under a hero or before a final CTA. Use it once per page. Pair short, telegraphic phrases separated by 4 px dots.
A 4-up grid that lays out product configurations side-by-side. Each card carries a kicker (variant ##), the configuration name, a dash-led feature list, and a seats-count footer separated by a hairline. Hover lifts the card by 3 px and brings in a navy border.
A stack of half-and-half rows that alternate image-left and image-right. Each row carries a numbered kicker (01 / Visibility), a tight one-line headline, and a single supporting paragraph capped at 440 px.
See everything around the bus in real time. Navigate tight depots, pick-up zones and school gates with confidence — the system warns you before anyone gets too close.
Coach seats with leg room. Individual passenger AC. USB charging. Curtains. The cabin is engineered for the eight-hour run, not the eight-minute one.
Deep-navy slab that flips the page into "data mode" — used once per model, late in the scroll, to surface the full technical spec. Two columns of label / value rows separated by 8% white hairlines.
Two patterns that share the same row in our standard model template. Reviews live on paper with a 3 px yellow left bar; the price CTA floats over the hero image as a navy slab anchored bottom-right.
"I do a lot of extended charter work from down south. When I'm taking a C12, I know I'll get there in comfort and my passengers will love it too."
"Our Yutongs have been incredibly reliable — we've never had a breakdown during a run. That reliability gives us peace of mind."
Every model and service page closes with a full-bleed yellow band carrying a 96 px headline, a single supporting paragraph, and a dark / ghost button pair. It's the only place where the dark button is allowed at this scale.
In stock and ready for immediate delivery. Build & order online in under 8 minutes — variant, accessories, finance, trade-in. We'll handle the rest.
Paper · Yellow · Navy · Barlow