The Good Guys

Overview

The Good Guys is Australia's leading appliance and entertainment retailer, serving homeowners and businesses seeking value-driven product discovery across cooking, cooling, laundry, and entertainment categories. The design system embodies 'Energetic Retail Clarity'—a visual language that combines high-impact promotional messaging (bold red sale badges, yellow price highlights, deep blue hero backgrounds) with clean, accessible product browsing. The brand personality is confident, direct, and customer-focused: it celebrates deals without shouting, prioritizes information hierarchy, and makes price comparisons effortless. The UI evokes trust through consistent typography (Futura PT for headlines, Sofia Pro for body text), generous whitespace, and a rational color palette anchored by a professional blue (#0055a5) for primary actions and navigation. Voice example: 'Save $2600 on the Hisense 100" 4K HI-QLED Smart AI TV—ends 27/06/2026.'

Colors

The color system is built on a neutral foundation (white #ffffff, cool grays #1a1d23 to #f2f5f8) with three strategic accent roles. Primary (#0055a5) is the brand's signature blue, used exclusively for CTAs ('Shop Now', 'Sign In'), navigation links, and focus states—it conveys professionalism and trustworthiness. Secondary (#e20613) is a vibrant red reserved for sale badges, discount callouts, and promotional overlays; it creates urgency without overwhelming. Tertiary (#e4a812) is a warm gold used for price highlights, featured product badges, and secondary promotional elements. The surface stack progresses from pure white (surface) through cool-gray tints (surface-container-low #f2f5f8, surface-container #e4eaf1, surface-container-high #ced9e3) to support layering and depth. On-surface te

Typography

The type system pairs Futura PT (headlines, display, labels) with Sofia Pro (body, input, supporting text) to balance geometric precision with humanist warmth. Futura PT's condensed letterforms and high x-height make it ideal for promotional headlines ('EOFY FINAL DAYS!', '$2600 OFF') where impact and scannability are critical; it is always set at fontWeight 700. Sofia Pro, a humanist sans-serif, provides legibility for product descriptions, search inputs, and navigation at weights 400 (body) and 500 (labels). Display text (56px, 64px line-height, -0.02em letter-spacing) is reserved for hero sections and major sale announcements. Headline-lg (40px, 700 weight) anchors category pages. Body-md (16px, 400 weight, 24px line-height) is the default for product cards and descriptions. Label-md (1

Layout

The layout system uses a 12-column grid with a max-width of 1280px (88rem), centered with 24px gutters on desktop and 16px on mobile. The page rhythm is driven by semantic spacing: lg (40px) separates major sections (hero, product grid, footer), md (24px) separates cards within a grid, and sm (12px) separates inline elements. The header is fixed at the top with padding 0 32px, background white, and a subtle shadow (0 1px 3px rgba(120, 141, 165, 0.24)). The hero section spans full width with a deep blue background (#0055a5 or gradient overlay) and white typography, creating high contrast. Product grids use a responsive 4-column layout on desktop, 2 columns on tablet, 1 column on mobile. Cards have consistent padding (24px) and a 1px border in outline-variant (#ced9e3). Whitespace is generou

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle background color shifts. Level 1 (Base): no shadow, surface color #ffffff. Level 2 (Cards, Inputs): box-shadow 0 1px 3px rgba(120, 141, 165, 0.24), 0 1px 2px rgba(209, 219, 229, 0.16), with a 1px border in outline-variant (#ced9e3). Level 3 (Modals, Dropdowns, Hover States): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), background surface-container-low (#f2f5f8). Hover transitions use 200ms ease-out timing to feel responsive without being jarring. The hero section uses a full-bleed background image or gradient (deep blue #0055a5 with

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and consistently to soften hard edges without introducing visual noise. Buttons and inputs use border-radius 0.25rem (4px) for a subtle, professional appearance that feels modern without being trendy. Cards use border-radius 0.5rem (8px) to create gentle containment. Modals and larger containers use border-radius 1rem (16px). The full-radius (9999px) is reserved for badges and pill-shaped elements (e.g., 'Store Cash' badges). This graduated scale ensures visual hierarchy: smaller, more interactive elements (butt

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (background #0055a5, text white, padding 12px 16px, height 44px, border-radius 4px) is used for all primary CTAs ('Shop Now', 'Sign In', 'Add to Cart'). On hover, background shifts to #1a548c with a 200ms ease-out transition. Button-secondary (transparent background, 2px border #0055a5, text #0055a5) is used for secondary actions ('Learn More', 'View Details'). On hover, background becomes primary-container (#d6e5f5). Button-ghost (transparent, no border, text #1a1d23) is used for tertiary actions and navigation links; on hover, background becomes surface-container-low (#f2f5f8) and text becomes primary (#0055a5). All buttons must have a minimum touch target of 44px height and 44px width for accessibility.

###

Do's and Don'ts

**Do**

• Do use primary blue (#0055a5) exclusively for CTAs and interactive elements—it is the brand's signature action color and must remain reserved.
• Do apply the 200ms ease-out transition timing consistently across all hover and focus states for a cohesive, responsive feel.
• Do maintain a minimum 44px × 44px touch target for all interactive elements (buttons, links, inputs) to ensure accessibility on mobile.
• Do use Futura PT (700 weight) for all headlines and promotional text to create visual hierarchy and brand recognition.
• Do respect the 24px gutter and 40px section spacing to maintain visual rhythm and reduce cognitive load.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) to small text overlaid on promotional images or busy backgrounds for legibility.

**Don't**

• Don't use secondary red (#e20613) or tertiary gold (#e4a812) for primary CTAs—these are reserved for promotional badges and price highlights.
• Don't apply border-radius greater than 1rem (16px) to buttons or inputs; maintain the functional minimalism aesthetic.
• Don't use system fonts or fallback sans-serif; always load Futura PT and Sofia Pro via @font-face or Google Fonts to preserve brand identity.
• Don't exceed a 1280px container max-width; wider layouts dilute the visual hierarchy and reduce readability.
• Don't animate shadows or colors with transitions longer than 200ms; slower transitions feel sluggish and reduce perceived responsiveness.
• Don't use transparency (rgba) for primary backgrounds; the design system relies on solid colors and clear layering for accessibility and performance.