Southern Lifts

Overview

Southern Lifts is a premium B2B lift solutions provider serving Victoria with residential, commercial, and accessibility lift installations. The design system embodies **Technical Confidence**—a visual language that balances industrial precision with approachable professionalism. The brand aesthetic combines a deep Egyptian Blue hero canvas (#2a3490) with bold accent colors (Flame Orange #e5623c, Cyan #26ace2) and a proprietary typeface (PPTelegraf) that conveys strength and reliability. The UI evokes a sense of engineered excellence: clean geometric forms, purposeful spacing, and high-contrast typography that commands attention without sacrificing clarity.

The brand voice is authoritative yet accessible, speaking to both technical decision-makers and homeowners. Tone: direct, confident, solution-focused. Vocabulary favors concrete benefits over marketing hyperbole. Example sentence: "Over 20 years, we've installed 3,000+ lifts—from compact home units to complex commercial systems. Your project is our expertise."

Colors

The color system is anchored by a primary Egyptian Blue (#2a3490), used for headers, navigation, and the hero background. This deep, sophisticated blue establishes trust and technical credibility. The secondary accent, Flame Orange (#e5623c), appears on CTAs, highlights, and interactive elements—creating visual urgency and drawing the eye to key actions. A tertiary Cyan (#26ace2) provides a cool counterpoint for secondary information, links, and status indicators. The surface stack ranges from pure white (#ffffff) for body backgrounds down through grays (surface-container-highest: #6a7282) for disabled or recessive states. On-surface text is near-black (#171717) for maximum readability on light backgrounds; inverse-on-surface is white (#ffffff) for contrast on the Egyptian Blue hero. Error

Typography

The type system is built entirely on PPTelegraf, a geometric sans-serif that reinforces the brand's technical, engineered personality. Display (64px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section breaks, commanding attention with tight letter-spacing. Headline-lg (48px, 700 weight) and headline-md (36px, 700 weight) structure content hierarchy, with negative letter-spacing (-0.015em, -0.01em respectively) maintaining visual cohesion at large sizes. Body text (18px and 16px, 400 weight, 0em tracking) is set with generous line-height (28px, 24px) for legibility in dense service descriptions. Labels (14px and 12px, 600–700 weight, 0.01–0.05em tracking) are used for buttons, badges, and form fields, with increased tracking adding visual separation. On small lab

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered with auto margins. The hero section spans full viewport width with a fixed header (backdrop-filter: blur(12px), padding: 24px 48px) overlaid at z-index 50. Content sections use lg spacing (40px) for vertical rhythm between major blocks, with md spacing (24px) for subsection separation. The gutter is consistently 24px on desktop, scaling to 16px on tablet and 12px on mobile. Cards and containers use md padding (24px) internally, with rounded corners at lg (1rem) for primary surfaces and DEFAULT (0.5rem) for inputs. White-space is generous—never cramped—reflecting the brand's confidence and premium positioning. The container max-width of 1280px ensures readability without excessive line-length, and full-width hero secti

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering. Level 1 (Base): flat surfaces with no shadow, used for body backgrounds and neutral containers. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted UI elements; this creates a soft, readable separation without heaviness. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used when cards are hovered or when modals need maximum prominence. The header uses backdrop-filter: blur(12px) with a semi-transparent background (rgba(0, 0, 0, 0.05) implied) to cr

Shapes

The shape philosophy is **Geometric Precision**—sharp, engineered corners that reflect the industrial nature of lift engineering, tempered with full-radius pill buttons to soften CTAs and improve tap targets. Buttons use rounded: full (9999px) for maximum approachability and accessibility. Cards and containers use rounded: lg (1rem / 16px) for a modern, professional appearance without excessive softness. Input fields use rounded: DEFAULT (0.5rem / 8px) for a clean, utilitarian feel. The header and nav elements use rounded: full for pill-shaped nav links, creating a cohesive, premium aesthetic.

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (background: #2a3490, text: white, padding: 12px 24px, height: 48px, rounded: full, border: 2px solid #2a3490) is used for primary CTAs like "Explore Our Lifts" and form submissions. On hover, the background transitions to primary-fixed-dim (#d1d5dc) with text color shifting to on-primary-container (#0f172b), maintaining the 2px border. **button-secondary** (background: transparent, text: #2a3490, border: 2px solid #2a3490) is used for secondary actions and navigation alternatives; on hover, it fills with primary-container (#e5e7eb). **button-accent** (background: #e5623c, text: white) is reserved for high-priority secondary actions or status updates. All buttons use transition: all 300ms cubic-bezier(0.4,

Do's and Don'ts

**Do**

• Do use Egyptian Blue (#2a3490) for primary CTAs, headers, and hero backgrounds—it is the signature brand color and must be prominent.
• Do apply Flame Orange (#e5623c) sparingly on secondary CTAs, highlights, and status indicators to create visual urgency without overwhelming the palette.
• Do maintain generous white-space (lg spacing: 40px between sections) to reflect premium positioning and prevent visual clutter.
• Do use PPTelegraf exclusively for all typography—its geometric precision reinforces technical credibility and brand consistency.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and lifted elements; never use harsh or dark shadows that feel heavy.
• Do use rounded: full (9999px) for all buttons to improve accessibility and create a cohesive, modern interaction pattern.
• Do layer nav links and hero overlays with backdrop-filter: blur(12px) and semi-transparent borders (rgba(255, 255, 255, 0.2)) for a premium frosted-glass effect.

**Don't**

• Don't use near-black or near-white as primary colors—Egyptian Blue and Flame Orange are the brand anchors; grays are supporting surfaces only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur values exceeding 12px on standard elements; this creates a muddy, unprofessional appearance.
• Don't mix typefaces—PPTelegraf is mandatory for all UI text, including body copy, labels, and headings. System fonts are not acceptable.
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements; this reduces tap targets and feels cramped on mobile.
• Don't compress white-space below md spacing (24px) between major sections; the brand's premium positioning requires breathing room.
• Don't apply color overlays or gradients to the hero background without maintaining contrast ratios ≥ 4.5:1 for text legibility (WCAG AA).
• Don't animate transitions faster than 200ms or slower than 300ms; this maintains a professional, responsive feel without feeling sluggish or jarring.