Cost Analysis Report — Design System

Page Layouts

Three structural layouts used across slides. Each is a shell — components slot in as needed. What goes where depends on the data available for each prospect.

Component

Title

Red background. Content bottom-aligned. Components stack vertically.

.page-title • justify-content: flex-end

Column

Two-Column

White background. Equal 1fr 1fr grid, 32px gap. Any components in either column.

.two-col • collapses to single column at 768px

Full width — components stack or use inline grids

Full-Width Accent

Red gradient background. Single column. Components use white/translucent variants.

.page-accent • components adapt to dark background

Every slide follows the same outer structure

A .page wrapper (100vh, scroll-snap) containing a .page-inner (flex column, centred, 48px 72px padding). Inside that: a decorative slide number, a section heading with red bar, an optional subtitle, then the layout content below.

Components

Every component used in cost analysis reports, rendered at the width it occupies on a slide. Two-column components are shown at half-slide width; full-width components span the full content area. These are the exact CSS classes used in production.

Data Components

Data Table

Example: travel spend breakdown • Appears on: light pages

Category	Amount (ex GST)
Original Travel
Flights, hotels, car hire, transfers	$220,382
Airline ancillary (baggage, seats)	$4,141
Other	$232
Upfront Travel Subtotal	$224,755
Change-Related Travel
Changed booking fares	$69,537
Airline change fees	$200
Change Travel Subtotal	$69,737
Total Travel Spend	$294,493

Key CSS classes

.data-table — base table • .section-header — red-underline section break • .subtotal — bold with top border • .total — dark background row with white text • Even rows get var(--bg-muted) striping automatically

Compare Table

Example: head-to-head fee comparison • Appears on: light pages

	Corporate Traveller	WBT Premium
Fee base	$294,493 all travel	$224,755 upfront only
Management fees	$12,368	–
Travel fee	–	$7,866 3.5%
Platform fee	–	$3,588 $299/mo
Annual fee cost	$12,368	$11,454
Effective rate	4.20%	3.89%
Annual saving	–	$914

Key CSS classes

.compare-table — base • .ct-col — dark header, light gray cells • .wbt-col — red header, red-tint cells • .saving-row — bold bottom row with green WBT value

Bar Chart

Example: fee breakdown by type • Appears on: light pages

New Booking

$7,198

Change Fee

$3,375

Chargeback

$1,545

Sector

$250

Key CSS classes

.bar-chart — flex column container • .bar-row — flex row • .bar-label — right-aligned fixed-width label • .bar-track — gray background track • .bar-fill-red / .bar-fill-green / .bar-fill-muted — fill colours

Donut Chart

Example: upfront vs change-related spend split • Appears on: light pages

76% upfront

Upfront travel — $225K

Change-related — $70K

Implementation note

Uses SVG <circle> with stroke-dasharray for segments. The donut is 190px square with 18px stroke-width on a radius-64 circle (circumference ~402). The center label sits in an absolute overlay.

Three-Scenario Table

Example: status quo vs competitor vs WBT comparison • Appears on: red/accent pages

	Status Quo CT + Unmanaged	CT Manages All Hypothetical	WBT Premium Recommended
Managed travel	$294K	$562K	$562K
Management fees	$12,368	$27,818	$20,829
Finance cost	$1,625	$3,125	$8,747
Subtotal (fees + finance)	$13,993	$30,943	$29,576
Internal labour cost booking, admin, reconciliation @ $54/hr	$27,821 515 hrs	$18,101 335 hrs	$13,709 254 hrs
True total cost	$41,814	$49,044	$43,285
Hours spent on travel management	515 hrs 0.29 FTE	335 hrs 0.19 FTE	254 hrs 0.14 FTE

Implementation note

This table is inline-styled (no shared CSS class) because it only appears once per report. Three data columns use progressively brighter rgba(255,255,255, 0.04/0.08/0.12) backgrounds. The "True total cost" row uses 18px weight-800 text with a thicker top border. Column headers have rounded top corners.

Metric Components

Big Stat

Red variant (cost/negative) and green variant (saving/positive) • Appears on: light pages

Red variant

4.20% Management fees as % of total travel

$12,368 in fees on $294,493 travel spend (12 months, ex GST)

Green variant

261 Hours returned to the business per year

515 hrs today → 254 hrs with WBT • $54/hr loaded rate

Key CSS classes

.big-stat — flex row container • .big-stat-number — 56-88px weight-900 number (default red, override with inline color) • .big-stat-label — supporting text • .big-stat-source — italic footnote below

Stat Card

Regular variant and coloured-border variant • Appears on: light pages

Regular (stat-grid)

376

Total bookings

$783

Avg travel per booking

With coloured left border

$14,094

Value of hours freed

$27,821

Current internal labour cost

Key CSS classes

.stat-card — centered card with number + label • .stat-grid — 2-column grid • .stat-grid-3 — 3-column grid • Coloured borders added with inline border-left: 3px solid

Red Stat

Example: consolidation benefit metrics • Appears on: red/accent pages only

$233K

Brought under management

671

Bookings with duty of care restored

1

Invoice per booking (replaces scattered txns)

40%

Reconciliation time reduction

Key CSS classes

.red-stats-row — flex row container • .red-stat — semi-transparent white card • .red-stat-number — 34px white • .red-stat-label — 13px muted white. Only used on red/accent backgrounds.

Hero Stat Card

Example: headline KPIs on the title page • Appears on: red/title page only

$12,623

Net annual benefit vs status quo

261

Hours returned to the business

Implementation note

These are inline-styled cards (not a CSS class) on the title page. Semi-transparent white background (rgba(255,255,255,0.12)), 52px weight-900 number, 14px muted-white label. Used on the title page for the two hero KPIs.

Pricing Card

Example: WBT fee structure • Appears on: red/accent pages only

3.5%

of upfront travel cost

WBT Premium fee

$299

monthly platform fee

Covers all travellers & bookers

Implementation note

Inline-styled cards on the accent page. Slightly brighter than hero stat cards (rgba(255,255,255,0.15)). Three text lines: 48px number, 13px description, 11px subtitle. Used on the pricing slide.

Narrative Components

Info Card

Default, red, and green variants

The typical trip today

1. Someone books a flight via the TMC. 2. The centralised booker finds a hotel direct via an OTA. 3. The traveller uses a prepaid card for a taxi. 4. Finance reconciles both systems.

Fixed fees push accommodation off-platform

Per-booking and chargeback fees can reach $27 per accommodation booking. On a $150 regional motel that is an 18% effective rate, driving bookers to book direct.

84% online adoption

56% web 28% mixed web 16% email/phone

Travellers already booking online. Only 16% of bookings go through email or phone — a strong fit for a self-service platform.

Info Card (continued)

Blue, purple, and gold variants

Accommodation dominates

$352K accommodation (85%), $43K car/taxi (10%), $22K flights (5%). A field sales team running multi-day regional road trips.

Purple variant

Uses --accent-purple: #311EA8 as the left border colour.

Gold variant

Uses --accent-gold: #E8C23A as the left border colour.

Key CSS classes

.info-card — default (dark border) • .info-card-red • .info-card-green • .info-card-blue • .info-card-purple • .info-card-gold — All differ only in border-left-color

Quote Card White

Example: consolidation benefits • Appears on: red/accent pages only

Duty of care restored

Hundreds of bookings with zero traveller tracking today. Field staff travelling to remote locations with no emergency location data.

Accommodation consolidated

Hotels through one platform. Negotiated rates loaded in. Each booking produces one consolidated invoice with full itinerary.

Reconciliation transformed

Scattered unmanaged transactions across multiple budget codes and dozens of merchants. With WBT, each booking generates one invoice from one merchant.

Airline discounts on flights

QBR (Qantas) and VABF (Virgin) corporate discounts applied at point of sale — free to join. Unmanaged flights currently booked at retail rates would benefit.

Key CSS classes

.quote-card-white — semi-transparent card with left white border • .quote-text — white text at 13px. Only used on red/accent pages. Hover lifts 2px.

Key Drivers

Three-column text section from the title page • Appears on: red/title page only

Fee Structure

Multiple fee types across bookings, changes and chargebacks create a complex cost structure that penalises smaller transactions.

Unmanaged Spend

Significant travel spend sits outside the managed programme — booked direct, paid on prepaid cards, with no visibility or duty of care.

Internal Labour

Hundreds of hours per year spent on booking, reconciliation, and admin across multiple systems and suppliers.

Implementation note

Three-column grid on the title page. Each column has an uppercase label (11px, 0.06em spacing) and body text (13px, translucent white). Content varies per prospect based on the key findings in their data.

Page Styles

Three page backgrounds used in reports. Each slide gets one of these as its .page-* class. The choice affects text colour, component styling, and which component variants are available.

Section heading with accent.

Subtitle text in muted colour.

page-light

White background. Used on the majority of analytical slides. Heading gets red accent bar above. Dark text, coloured stat numbers. Components use info-card, stat-card, data-table, compare-table.

Title Label

Heading with highlight.

Subtitle in translucent white.

page-title (red)

Solid red background. Used on the opening executive summary slide. Content pushed to bottom (justify-content: flex-end). Uses hero stat cards, red-stats, title-label, title-badge, key drivers section.

Heading with accent.

Subtitle in lower-opacity white.

page-accent (red)

Solid red background. Used on pricing, benefits, and decision slides. No accent bar on heading. Components use quote-card-white, red-stat, pricing cards, scenario tables. Accent span uses #ffb0b0.

Colours

The complete colour palette defined as CSS custom properties in :root. Every colour in the report references these variables.

Brand / Primary

WBT Red

--wbt-red

#E24747

WBT Red Light

--wbt-red-light

#ef6b6b

WBT Red Dark

--wbt-red-dark

#c73535

WBT Dark

--wbt-dark

#111111

Accent Colours

Accent Green

--accent-green

#51823D

Accent Purple

--accent-purple

#311EA8

Accent Blue

--accent-blue

#67BBE0

Accent Gold

--accent-gold

#E8C23A

Backgrounds

Background Light

--bg-light

#FFFFFF

Background Muted

--bg-muted

#F7F8FA

Background Secondary

--bg-secondary

#F0F1F5

Background Dark

--bg-dark

#111111

Text & Borders

Text Primary

--text-primary

#1a1a1a

Text Muted

--text-muted

#5a6070

Border Light

--border-light

#D8DCE6

Typography

The report uses Figtree exclusively, loaded from Google Fonts at weights 300-900. All headings use letter-spacing: -0.02em to -0.04em for a tighter feel.

title-heading / 36-56px / weight 700 / -0.03em

Insights into Corporate Travel Spend

section-heading / 32-48px / weight 700 / -0.03em

Where the travel dollar goes.

big-stat-number / 56-88px / weight 900 / -0.04em

$73K

hero-stat-number / 52px / weight 900 / -0.03em (on red bg)

$12,623

pricing-number / 48px / weight 900 / -0.03em (on red bg)

3.5%

stat-card-number / 32px / weight 800

376

red-stat-number / 34px / weight 800 / -0.02em (on red bg)

$233K

section-sub / 16px / weight 400

Multiple management fee types totalling 4.20% of travel spend. Every booking incurs fees regardless of its size.

big-stat-label / 19px / weight 500

Management fees as % of total travel

body text / 14px / weight 400 / line-height 1.5

WBT charges its percentage on upfront travel cost only. Change-related fare differences and airline fees don't attract a WBT fee — reducing the effective fee base by ~24%.

info-card text / 12-13px / weight 400-600

Webjet Business advantage

WBT does not charge its percentage fee on change-related costs. No change fees, no additional margin on fare differences.

table-header / 11px / weight 700 / uppercase / 0.06em spacing

Category Amount (ex GST)

table-cell / 14px / weight 400 (left) / 500 (right, numeric)

Flights, hotels, car hire, transfers $220,382

stat-card-label / 13px / weight 400 / muted

Total bookings

title-label / 12px / weight 600 / uppercase / 0.06em spacing

Corporate Travel Cost Analysis

footnote / 10px / weight 400 / italic

All figures ex GST • Period: 12 months to date • Source: TMC transaction data

Spacing

Slide dimensions, internal padding, component spacing, card specs, and responsive breakpoints.

Slide Dimensions

Property	Value
Slide height	100vh (min-height), scroll-snap-align: start
Inner padding (desktop)	48px 72px
Inner padding (mobile < 768px)	32px 24px
Print size	A4 landscape (297mm x 210mm), padding: 32px 48px
Background (body)	var(--bg-dark) #111 between slides

Grid & Layout

Property	Value
Two-column grid gap	32px
Stat grid gap	12px
Red stats row gap	20px
Bar chart row gap	14px
Quote card grid gap	16px

Card Specs

Component	Specs
Border radius (global)	0.75rem (12px) via var(--radius)
Card shadow	0 4px 20px -4px rgba(0,0,0,0.08), 0 2px 8px -2px rgba(0,0,0,0.04)
Stat card padding	20px 24px
Info card padding	20px 24px
Info card left border	3px solid [colour]
Red stat padding	22px 28px
Quote card white padding	16px 20px 16px 22px
Quote card white left border	3px solid rgba(255,255,255,0.5)
Bar track height	40px (28px on print)
Bar label width	120px (right-aligned)
Donut size	190px x 190px (130px on print)

Spacing Between Elements

Context	Value
Section heading to sub	10px (margin-bottom on heading)
Section sub to content	32px (margin-bottom on sub)
Slide number offset	top: -8px, left: 40px, font-size: 140px
Heading accent bar	40px wide, 3px high, 12px margin-bottom
Between stacked info cards	margin-top: 4px to 16px depending on context
Stat grid below chart/stat	margin-top: 4px to 8px

Responsive Breakpoints

Breakpoint	Changes
< 768px (mobile)	Two-col collapses to single column. Stat grids go 1-col. Title stats stack vertically. Padding reduces to 32px 24px.
Print (@page)	A4 landscape. All sizes scale down ~30%. No animations, no scroll UI. Fixed logo becomes absolute positioned.

Constraints

What to design within, and what we need back from the marketing team.

Design within these constraints

Each slide is 100vh tall with scroll-snap. Content must fit one viewport without scrolling.
Print target is A4 landscape (297mm x 210mm). Every slide must fit this format with reduced padding and font sizes.
Three page styles only: page-light (white), page-title (red, opening slide), page-accent (red, used for pricing, benefits, and decision slides).
Font is Figtree only, loaded from Google Fonts. Weights 300-900 available.
Colour palette is fixed (see Colours section). All values via CSS custom properties.
The component library is the vocabulary. New components should be rare and well-justified.
Data-heavy content (tables, charts) drives the layout. Visuals support the data, not the other way around.
Two-column grid (.two-col) is the primary layout for light pages. Avoid three-column or complex grid layouts.
Report must work as a self-contained single HTML file with no external dependencies beyond Google Fonts.
Animations are limited to fade-up (opacity + translateY on intersection). No complex animations.
All monetary values are shown ex GST. Footnotes should clarify this.
Reports vary per prospect. Designs must accommodate variable content — different numbers of table rows, different stats, slides that may or may not be included.

Deliverables checklist

Revised visual hierarchy for each slide type (title page, light data page, red accent page).
Updated component designs that maintain the existing CSS class structure where possible.
Colour adjustments (if any) specified as hex values with CSS variable names.
Typography recommendations specified as: font-size, font-weight, letter-spacing, line-height.
Layout refinements shown as annotated wireframes with pixel/rem measurements.
Chart styling recommendations (bar chart proportions, donut sizing, etc.).
Print stylesheet considerations — how designs adapt from screen to A4 landscape.
Responsive behaviour recommendations for < 768px.
Any new component proposals with CSS class names and usage guidelines.

Important

Report content is generated dynamically from prospect data. Designs must accommodate variable text lengths, different numbers of line items in tables, and different numbers of slides. The sample data shown in this guide is representative — actual values change per prospect.