Foundations

Design Principles

Five guiding principles that inform every design decision at Delecca's. These are non-negotiable and apply to every touchpoint — digital and physical.

1. Clarity First

Every element earns its place. Remove until there's nothing left to remove. Rural customers need information fast — on a phone, in the sun, one-handed.

2. Confidence Without Arrogance

Bold type, strong colour, direct copy. The customer is the hero. We show up as the trusted expert who makes the choice easy.

3. Built for Regional Australia

Design for low bandwidth, bright daylight, and calloused thumbs. Generous touch targets (min 44px), high contrast, no fluff.

4. Systematic & Consistent

Every decision references the token system. No magic numbers, no one-off styles. If it's not in the system, it doesn't ship.

5. Accessible by Default

WCAG 2.1 AA minimum. Every colour pairing tested for contrast. Every interactive element keyboard-navigable. Every image has alt text. No exceptions.

Foundations

Colour System

A comprehensive palette built around Delecca's signature red (#E10600) and deep charcoal (#0D0D0F). All pairings meet WCAG 2.1 AA contrast ratios.

Primary Red Scale

Red 50#FFF0EF

Red 100#FFD4D3

Red 200#FF8A87

Red 300#FF4D47

Red 400 (Buttons)#FF2119

Red 500 (Primary)#E10600

Red 600#C00500

Red 700#9E0400

Neutral Scale

White Warm#F5F5F7

Neutral 50#F2F2F7

Neutral 100#E5E5EA

Neutral 200#D1D1D6

Neutral 300#AEAEB2

Neutral 400#8E8E93

Neutral 500#636366

Charcoal 600#3A3A3C

Charcoal 700#2C2C2E

Charcoal 800#1D1D1F

Charcoal 900#0D0D0F

Semantic Colours

Success#30A14E

Success Light#D4EDDA

Warning#E6A817

Warning Light#FFF3CD

Error#E10600

Info#0A84FF

Contrast Ratios (WCAG 2.1 AA)

Foreground	Background	Ratio	AA Normal	AA Large
Charcoal 900 (#0D0D0F)	White (#FFFFFF)	19.7:1	Pass	Pass
Red 500 (#E10600)	White (#FFFFFF)	4.6:1	Fail*	Pass
Red 600 (#C00500)	White (#FFFFFF)	5.5:1	Pass	Pass
Red 700 (#9E0400)	White (#FFFFFF)	7.2:1	Pass	Pass
White (#FFFFFF)	Red 500 (#E10600)	4.6:1	Fail*	Pass
White (#FFFFFF)	Charcoal 900 (#0D0D0F)	19.7:1	Pass	Pass
Body (#373A36)	White (#FFFFFF)	11.0:1	Pass	Pass
Body (#373A36)	Warm White (#F5F5F7)	9.8:1	Pass	Pass

*Red 500 on white fails AA for normal text (<18px). Use Red 600+ for body copy, or use Red 500 only at heading sizes (24px+ bold / 19px+ regular).

Dark Mode

Toggle dark mode with the moon button (bottom-right) to see all tokens switch. Dark mode uses elevated surfaces, not inverted colours.

Surface Primary
#0D0D0F

Surface Secondary
#1D1D1F

Surface Elevated
#2C2C2E

Text Primary
#F5F5F7

Link
#FF4D47

Foundations

Typography

Montserrat for headlines, navigation, and UI. EB Garamond for body copy. A 13-level scale with responsive behaviour across four breakpoints.

Type Scale

Display XL · Montserrat 900 · 72/56/48/36px
End of Season

Display LG · Montserrat 900 · 56/48/40/32px
Clearance Event

H1 · Montserrat 900 · 48/40/36/30px
Bobcat Zero Turn Mowers

H2 · Montserrat 800 · 36/32/28/24px
Save up to $5,500 per unit

H3 · Montserrat 700 · 28/24/22/20px
First in, best dressed

H4 · Montserrat 600 · 22/20/18/17px
While stocks last

H5 · Montserrat 500 · 18/18/16/16px
Pickup from Delecca's Bendigo

H6 · Montserrat 500 · 16/16/16/16px
All Prices Include GST

Body Large · EB Garamond 400 · 20/18/17/16px
Premium zero-turn mowers engineered for the toughest Australian conditions. Built to handle anything your property throws at them.

Body · EB Garamond 400 · 18/17/16/15px
These machines are built for serious acreage owners who demand reliability, power, and a clean cut every time.

Body Small · EB Garamond 400 · 16/16/16/14px
Terms and conditions apply. See in-store for full details.

Caption · Montserrat 500 · 14px
Last updated 13 March 2026

Overline · Montserrat 700 · 12px · Uppercase · 0.1em tracking
LIMITED STOCK AVAILABLE

Responsive Behaviour

Token	Desktop (≥1200px)	Tablet L (992–1199px)	Tablet P (600–991px)	Mobile (<600px)
Display XL	72px / 4.5rem	60px / 3.75rem	48px / 3rem	36px / 2.25rem
Display LG	56px / 3.5rem	48px / 3rem	40px / 2.5rem	32px / 2rem
H1	48px / 3rem	40px / 2.5rem	36px / 2.25rem	30px / 1.875rem
H2	36px / 2.25rem	32px / 2rem	28px / 1.75rem	24px / 1.5rem
H3	28px / 1.75rem	24px / 1.5rem	22px / 1.375rem	20px / 1.25rem
H4	22px / 1.375rem	20px / 1.25rem	18px / 1.125rem	17px / 1.0625rem
H5	18px / 1.125rem	18px	16px	16px / 1rem
H6	16px / 1rem	16px	16px	16px / 1rem
Body LG	20px / 1.25rem	18px / 1.125rem	17px / 1.0625rem	16px / 1rem
Body	18px / 1.125rem	17px / 1.0625rem	16px / 1rem	15px / 0.9375rem
Body SM	16px / 1rem	16px	16px	14px / 0.875rem
Caption	14px / 0.875rem (fixed)
Overline	12px / 0.75rem (fixed)

Foundations

Spacing

An 8px base unit with a half-step at 4px. All spacing derives from this scale. No magic numbers.

128

--space-1: 0.25rem /* 4px */ --space-2: 0.5rem /* 8px */ --space-3: 0.75rem /* 12px */ --space-4: 1rem /* 16px */ --space-5: 1.25rem /* 20px */ --space-6: 1.5rem /* 24px */ --space-8: 2rem /* 32px */ --space-10: 2.5rem /* 40px */ --space-12: 3rem /* 48px */ --space-16: 4rem /* 64px */ --space-20: 5rem /* 80px */ --space-24: 6rem /* 96px */ --space-32: 8rem /* 128px */

Foundations

Grid System

12-column grid on desktop and tablet, collapsing to 4 columns on mobile. Max width 1280px, 24px gutters.

Breakpoint	Columns	Gutter	Margin	Max Width
Desktop (≥1200px)	12	24px	24px	1280px
Tablet Landscape (992–1199px)	12	24px	32px	Fluid
Tablet Portrait (600–991px)	12	16px	24px	Fluid
Mobile (<600px)	4	16px	16px	Fluid

Foundations

Shadows & Elevation

Five elevation levels create depth hierarchy. Use sparingly — shadows indicate interactivity or prominence.

Foundations

Logo & Brand Architecture

Delecca's is the primary brand at 100% scale. All supporting brand logos render at 65% of the primary logo size. This creates clear visual hierarchy while respecting partner brands.

Primary Logo — Light Background

100% scale · Min clear space = logo height × 0.5 on all sides

Primary Logo — Dark Background

Red text + white strapline variant

Brand Architecture — Size Relationship

Primary — 100%

Secondary — 65%

Always place Delecca's logo before partner logos
Maintain 65% ratio for all secondary logos
Use mono/dark versions on light backgrounds
Use white/reverse versions on dark backgrounds
Maintain minimum clear space around all logos

Don't

Display secondary logos larger than primary
Change logo colours outside approved variants
Place logos on busy or low-contrast backgrounds
Rotate, distort, or add effects to any logo
Use coloured logos for partner brands

Supporting Brand Logos — Light Background

Supporting Brand Logos — Dark Background

Components

Buttons

Six variants, three sizes, icon support. All buttons use Montserrat Bold, uppercase, 0.08em letter-spacing. Minimum touch target 44px.

Variants

Sizes

Icon Buttons

With Icons

Specifications

Font: Montserrat 700, uppercase
Letter-spacing: 0.08em
Border-radius: 4px (--radius-sm)
Min height (SM): 32px
Min height (MD): 40px
Min height (LG): 48px
Padding (SM): 8px 16px
Padding (MD): 12px 24px
Padding (LG): 16px 32px
Focus ring: 0 0 0 3px rgba(225,6,0,0.25)
Transition: all 150ms ease
Active state: scale(0.98)

Components

Form Elements

Text inputs, selects, textareas, checkboxes, radio buttons, and toggles. All with label, hint, error, and disabled states.

Full Name As it appears on your driver's licence

Email Address Please enter a valid email address

Interested In

Message

Disabled Input

Subscribe to updates Terms & conditions

Phone Email In-store

Notifications

Components

Cards

Versatile content containers with image, body, and footer slots. Support for vertical and horizontal layouts.

Standard Cards

Clearance

ZT3000 42"

Kawasaki FR Series V-Twin engine. Perfect for properties up to 2 acres.

$8,490 $6,490

In Stock

ZT6000 52"

Kawasaki FX Series V-Twin engine. Commercial-grade for larger properties.

$16,490 $12,990

Last One

ZT7000 61"

Vanguard BIG BLOCK engine. The ultimate in zero-turn performance.

$22,490 $16,990

Horizontal Card

Save $3,500

ZT6100 52"

Kawasaki FX730V engine with Hydro-Gear ZT-3400 transaxles. Built for commercial use.

Components

Navigation

Sticky top navigation with logo, links, and CTA. Collapses to hamburger on tablet and below.

Components

Badges, Tags & Chips

Three types of labelling elements for status, categorisation, and filtering.

Badges

Clearance In Stock Low Stock New Archived Sale

Chips (Filterable)

All Mowers Excavators Tractors Forklifts

Components

Alerts

Four semantic alert types for inline messaging. Include optional title, icon, and dismiss button.

⚠

Limited Stock

Only 2 units remaining at this price. First in, best dressed.

✓

Enquiry Sent

We'll get back to you within 24 hours.

⚠

Pickup Only

All clearance items must be collected from Delecca's Bendigo.

ℹ

Finance options available on selected models. Ask in-store for details.

Components

Modals

Overlay dialogs for confirmations, forms, and focused content. Click the button below to preview.

Components

Tabs

Horizontal tabs for switching between related content panels. Active state uses the primary red underline.

The Bobcat ZT6000 delivers commercial-grade performance with a 52-inch fabricated deck and Kawasaki FX Series V-Twin engine. Built for properties that demand more.

Engine: Kawasaki FX730V · Deck: 52" Fabricated · Speed: 16 km/h · Fuel Tank: 18.9L · Weight: 340kg

"Handles our 5-acre block without breaking a sweat. Best mower we've owned." — Dave, Castlemaine

Components

Accordion

Collapsible content sections for FAQs and progressive disclosure.

All clearance items are pickup only from our Bendigo showroom. We're open Monday to Friday 8am-5pm, Saturday 8am-12pm.

Yes, finance options are available on selected models. Speak with our team in-store for a tailored quote.

All clearance mowers include the full manufacturer's warranty. Bobcat provides a 3-year / 500-hour residential warranty.

Clearance prices are already heavily reduced and are firm. No rainchecks — once they're gone, they're gone.

Components

Tables

Responsive data tables with hover states and overflow scrolling on small screens.

Model	Deck	Engine	RRP	Sale	Save	Stock
ZT3000	42"	Kawasaki FR	$8,490	$6,490	$2,000	3
ZT3000	48"	Kawasaki FR	$9,490	$7,290	$2,200	2
ZT6000	48"	Kawasaki FX	$14,490	$11,290	$3,200	1
ZT6000	52"	Kawasaki FX	$16,490	$12,990	$3,500	2
ZT6100	52"	Kawasaki FX	$18,990	$14,490	$4,500	1
ZT7000	61"	Vanguard BB	$22,490	$16,990	$5,500	1

Components

Breadcrumbs

Components

Pagination

Components

Tooltips

Components

Avatars

Avatar Group

Components

Progress Bars

Stock Level — 82%

Enquiries — 45%

Target Hit — 100%

Components

Skeleton Loaders

Components

Toasts / Snackbar

✓ Enquiry submitted successfully

⚠ Something went wrong. Please try again.

Components

Dropdown Menus

Components

Stepper

✓

Select Model

Your Details

Confirm

Components

Empty States

🔍

No results found

We couldn't find any mowers matching your filters. Try broadening your search.

Components

Hero / Banner

End of Season Clearance

Save up to $5,500 on Bobcat mowers

11 units across 6 models. All prices include GST. Pickup from Delecca's Bendigo. While stocks last — no rainchecks.

Components

Testimonials

Best machinery dealership in the region. Bought our ZT6000 and the team couldn't have been more helpful. Straight-talking, no pressure.

Dave Mitchell

Hobby Farmer, Castlemaine

Picked up a clearance mower last year — incredible value. The after-sales service has been top-notch. Highly recommend.

Sarah Kennedy

Property Owner, Heathcote

Components

Pricing Cards

Basic Service

$299

per service

Oil & filter change
Blade sharpening
Safety check

Full Service

$549

per service

Everything in Basic
Belt replacement
Deck levelling
Hydro fluid check

Premium Service

$899

per service

Everything in Full
Complete overhaul
Pickup & delivery
48-hour turnaround

Components

Stat Counters

Units available

$3,270

Average saving

Models

21.5%

Average discount

Components

Logo Bar

Components

Footer

Components

Dividers

Standard divider

Thick divider

Content below

Reference

Design Tokens

All tokens are defined as CSS Custom Properties on :root. The JSON below provides a platform-agnostic reference for developers consuming these tokens in any framework or build system.

{
  "color": {
    "primary": {
      "50":  "#FFF0F0",
      "100": "#FFD6D5",
      "200": "#FFB3B1",
      "300": "#FF7A77",
      "400": "#FF3D38",
      "500": "#E10600",
      "600": "#C00500",
      "700": "#9E0400",
      "800": "#7A0300",
      "900": "#570200"
    },
    "neutral": {
      "0":   "#FFFFFF",
      "50":  "#F5F5F7",
      "100": "#E8E8ED",
      "200": "#D2D2D7",
      "300": "#ACACB0",
      "400": "#86868B",
      "500": "#6E6E73",
      "600": "#48484A",
      "700": "#333336",
      "800": "#1D1D1F",
      "900": "#0D0D0F"
    },
    "semantic": {
      "success":  "#1B7A3D",
      "warning":  "#C27803",
      "error":    "#D92D20",
      "info":     "#1570CD",
      "successBg": "#ECFDF3",
      "warningBg": "#FFFAEB",
      "errorBg":   "#FEF3F2",
      "infoBg":    "#EFF8FF"
    }
  },
  "typography": {
    "fontFamily": {
      "heading": "'Montserrat', sans-serif",
      "body":    "'EB Garamond', serif",
      "mono":    "'SF Mono', 'Fira Code', monospace"
    },
    "scale": {
      "display-xl": { "size": "4rem",    "lineHeight": 1.1, "weight": 800, "font": "heading" },
      "display-lg": { "size": "3.25rem", "lineHeight": 1.1, "weight": 800, "font": "heading" },
      "h1":         { "size": "2.5rem",  "lineHeight": 1.2, "weight": 700, "font": "heading" },
      "h2":         { "size": "2rem",    "lineHeight": 1.25,"weight": 700, "font": "heading" },
      "h3":         { "size": "1.5rem",  "lineHeight": 1.3, "weight": 600, "font": "heading" },
      "h4":         { "size": "1.25rem", "lineHeight": 1.35,"weight": 600, "font": "heading" },
      "h5":         { "size": "1.125rem","lineHeight": 1.4, "weight": 600, "font": "heading" },
      "h6":         { "size": "1rem",    "lineHeight": 1.4, "weight": 600, "font": "heading" },
      "body-lg":    { "size": "1.125rem","lineHeight": 1.6, "weight": 400, "font": "body" },
      "body-md":    { "size": "1rem",    "lineHeight": 1.6, "weight": 400, "font": "body" },
      "body-sm":    { "size": "0.875rem","lineHeight": 1.5, "weight": 400, "font": "body" },
      "caption":    { "size": "0.75rem", "lineHeight": 1.5, "weight": 400, "font": "body" },
      "overline":   { "size": "0.6875rem","lineHeight": 1.5,"weight": 600, "font": "heading", "transform": "uppercase", "letterSpacing": "0.08em" }
    }
  },
  "spacing": {
    "unit": "8px",
    "scale": {
      "1":  "0.25rem",
      "2":  "0.5rem",
      "3":  "0.75rem",
      "4":  "1rem",
      "5":  "1.5rem",
      "6":  "2rem",
      "8":  "3rem",
      "10": "4rem",
      "12": "5rem",
      "16": "8rem"
    }
  },
  "grid": {
    "columns": 12,
    "gutter": "1.5rem",
    "maxWidth": "1200px",
    "breakpoints": {
      "mobile":          "<600px",
      "tabletPortrait":  "600–991px",
      "tabletLandscape": "992–1199px",
      "desktop":         "≥1200px"
    }
  },
  "elevation": {
    "xs": "0 1px 2px rgba(0,0,0,.05)",
    "sm": "0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)",
    "md": "0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06)",
    "lg": "0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05)",
    "xl": "0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.04)"
  },
  "radius": {
    "sm":   "0.25rem",
    "md":   "0.5rem",
    "lg":   "0.75rem",
    "xl":   "1rem",
    "2xl":  "1.5rem",
    "full": "9999px"
  },
  "transition": {
    "fast":   "150ms cubic-bezier(.4,0,.2,1)",
    "base":   "250ms cubic-bezier(.4,0,.2,1)",
    "slow":   "400ms cubic-bezier(.4,0,.2,1)",
    "spring": "500ms cubic-bezier(.175,.885,.32,1.275)"
  },
  "zIndex": {
    "dropdown": 100,
    "sticky":   200,
    "overlay":  300,
    "modal":    400,
    "toast":    500
  },
  "brandArchitecture": {
    "primary":   { "scale": "100%", "brand": "Delecca's" },
    "secondary": { "scale": "65%",  "brands": ["Bobcat","Develon","McCormick","Segway","Clark","EP"] }
  }
}

Reference

Accessibility

Every component in this system targets WCAG 2.1 Level AA compliance. The guidelines below are non-negotiable for all production implementations.

Colour & Contrast

Normal text (<18px): minimum 4.5:1 contrast ratio
Large text (≥18px bold / ≥24px regular): minimum 3:1 ratio
UI components & graphical objects: minimum 3:1 ratio against adjacent colours
Never convey meaning through colour alone — pair with icons, text, or pattern
Primary Red 500 (#E10600) on white = 4.12:1 — use only at ≥18px bold. For body copy, use Red 600+

Keyboard Navigation

All interactive elements must be reachable via Tab
Focus indicator: 2px solid offset ring using --color-primary-500
Modals trap focus within; Esc closes
Dropdowns: Arrow keys navigate, Enter selects, Esc closes
Skip-to-content link as first focusable element on every page

Semantic HTML & ARIA

Use native elements first: <button>, <a>, <input>
Add ARIA only when native semantics are insufficient
Landmarks: <header>, <nav>, <main>, <footer>
All images require alt; decorative images use alt=""
Heading hierarchy: never skip levels (h1 → h2 → h3)

Motion & Animation

Respect prefers-reduced-motion — disable non-essential animation
No auto-playing video or audio without user consent
Avoid flashing content (>3 flashes per second)
Provide pause/stop controls for any moving content

Checklist per Component

Check	Requirement
Contrast	All text and UI elements meet AA ratios (4.5:1 / 3:1)
Keyboard	Fully operable without a mouse
Screen reader	Announced correctly with role, name, state
Focus	Visible focus ring; logical tab order
Zoom	Content reflows at 200% zoom without horizontal scroll
Touch target	Minimum 44×44px touch area on mobile
Error states	Errors identified by text + colour + icon (not colour alone)
Motion	Respects prefers-reduced-motion

Reference

Do's & Don'ts

Colour

Use Red 500 (#E10600) as the primary accent for CTAs and brand moments
Use Red 600+ for body-size text on light backgrounds (better contrast)
Pair semantic colours with icons and text labels
Test colour combinations in both light and dark mode

Don't

Use Red 500 for small body text on white (fails AA at <18px)
Place red text on dark backgrounds without checking contrast
Use colour as the sole indicator of state or meaning
Modify the locked primaries: Red #E10600 and Charcoal #0D0D0F

Typography

Use Montserrat for headings, UI labels, buttons, and navigation
Use EB Garamond for body paragraphs and long-form content
Maintain heading hierarchy (h1 → h2 → h3, never skip)
Use the responsive scale — sizes auto-adjust per breakpoint
Use sentence case for all copy — capitalise only the first word, brand names (Delecca's, Bobcat), and product names (ZT6000)
Display XL and H1 use text-transform: uppercase via CSS — write source copy in sentence case

Don't

Mix EB Garamond into headings or UI elements
Use title case in headlines, buttons, or labels (e.g. "Save Up To" → "Save up to")
Use more than 2 type sizes on a single card or component
Override responsive sizes with fixed px values
Go below 14px (0.875rem) for any readable content

Spacing & Layout

Use spacing tokens from the 8px scale exclusively
Use the 12-column grid with named breakpoints
Collapse to 4 columns on mobile
Keep content within the 1200px max-width container

Don't

Use arbitrary spacing values (e.g. 13px, 22px)
Nest grids more than 2 levels deep
Break the 8px rhythm for margin or padding
Use percentage-based widths outside the grid system

Components

Use existing component classes — they handle states, focus, and a11y
Include hover, focus, active, and disabled states on interactive elements
Use the card component for all content groupings
Ensure modals trap focus and close on Esc
Use alerts with semantic colours and icons

Don't

Create one-off button styles — extend the existing variants
Use <div> for clickable elements — use <button> or <a>
Remove focus outlines without providing an alternative indicator
Disable buttons without explaining why (use tooltips or helper text)
Auto-dismiss toasts containing error messages

Brand Architecture

Display the Delecca's logo at 100% scale (primary brand)
Display all partner logos at 65% scale (secondary brands)
Maintain minimum clear-space of 1× logo height around all logos
Swap to light-variant logos on dark backgrounds

Don't

Display partner logos larger than or equal to the Delecca's logo
Modify, recolour, or distort any logo
Place logos on busy backgrounds without a container
Use the dark-variant logo on dark backgrounds

Reference

Developer Handoff

Token Consumption

All design decisions are captured as CSS Custom Properties on :root. Consume them directly in any CSS/SCSS file.

/* Use tokens, never raw values */
.my-component {
  color: var(--color-neutral-800);
  background: var(--color-neutral-0);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  transition: all var(--transition-base);
}

Responsive Implementation

Typography and grid tokens auto-adjust at each breakpoint. No manual overrides needed for type scale.

/* Breakpoints */
--bp-mobile:           600px;
--bp-tablet-portrait:  600px;
--bp-tablet-landscape: 992px;
--bp-desktop:          1200px;

/* Grid auto-adjusts */
@media (max-width: 599px) {
  .grid { --grid-columns: 4; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .grid { --grid-columns: 8; }
}

Dark Mode

Toggle dark mode by adding data-theme="dark" to <html>. All tokens automatically remap — no component-level overrides needed.

// Toggle dark mode
const toggle = () => {
  const html = document.documentElement;
  const current = html.getAttribute('data-theme');
  html.setAttribute('data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
};

Naming Conventions

Follow these patterns to keep the system consistent as it grows.

Category	Pattern	Example
Colour	`--color-{scale}-{step}`	`--color-primary-500`
Spacing	`--space-{n}`	`--space-4`
Typography	`--text-{level}`	`--text-h2`
Shadow	`--shadow-{size}`	`--shadow-md`
Radius	`--radius-{size}`	`--radius-lg`
Component	`.{component}[-variant]`	`.btn-primary`

Recommended File Structure

styles/
├── tokens/
│   ├── _colors.css        /* Colour scales & semantic */
│   ├── _typography.css    /* Font families, scale, responsive */
│   ├── _spacing.css       /* 8px spacing tokens */
│   ├── _elevation.css     /* Shadow & z-index */
│   └── _grid.css          /* Grid & breakpoint tokens */
├── base/
│   ├── _reset.css         /* Normalise / reset */
│   └── _global.css        /* html, body, links, focus */
├── components/
│   ├── _buttons.css
│   ├── _cards.css
│   ├── _forms.css
│   ├── _nav.css
│   ├── _modals.css
│   ├── _tables.css
│   └── ...
├── utilities/
│   ├── _flex.css
│   ├── _text.css
│   └── _visibility.css
└── main.css               /* Imports all partials */

Design Principles

Colour System

Primary Red Scale

Neutral Scale

Semantic Colours

Contrast Ratios (WCAG 2.1 AA)

Dark Mode

Typography

Type Scale

Responsive Behaviour

Spacing

Grid System

Shadows & Elevation

Logo & Brand Architecture

Primary Logo — Light Background

Primary Logo — Dark Background

Brand Architecture — Size Relationship

Supporting Brand Logos — Light Background

Supporting Brand Logos — Dark Background

Buttons

Variants

Sizes

Icon Buttons

With Icons

Specifications

Form Elements

Cards

Standard Cards

ZT3000 42"

ZT6000 52"

ZT7000 61"

Horizontal Card

ZT6100 52"

Navigation

Badges, Tags & Chips

Badges

Tags

Chips (Filterable)

Alerts

Modals

Enquire about this mower

Tabs

Accordion

Tables

Breadcrumbs

Pagination

Tooltips

Avatars

Progress Bars

Skeleton Loaders

Toasts / Snackbar

Dropdown Menus

Stepper

Empty States

No results found

Hero / Banner

Save up to $5,500 on Bobcat mowers

Testimonials

Pricing Cards

Stat Counters

Logo Bar

Footer

Dividers

Design Tokens

Accessibility

Colour & Contrast

Keyboard Navigation

Semantic HTML & ARIA

Motion & Animation

Checklist per Component

Do's & Don'ts

Colour

Typography

Spacing & Layout

Components

Brand Architecture

Developer Handoff

Token Consumption

Responsive Implementation

Dark Mode