Xero

Overview

Xero is a cloud-based accounting platform that transforms financial complexity into clarity through confident, data-driven design. The brand aesthetic is 'Professional Clarity'—combining authoritative navy (#213b55, #000856) with vibrant accent colors (primary blue #1f65d6, growth green #68b631) to create interfaces that feel both trustworthy and energizing. The visual language prioritizes legibility and hierarchy, using generous whitespace and precise typography to guide users through multi-step financial workflows. The emotional response is one of control and confidence: users feel capable of managing their business finances without overwhelm.

Xero's voice is direct, encouraging, and jargon-aware. The brand speaks to small business owners and accountants with respect for their time and intelligence, avoiding corporate platitudes. Tone examples: 'Know your numbers. Control your cash flow.' (aspirational yet concrete) and 'Free standard ACH bill payments are now included in Xero business plans' (factual, benefit-forward). The vocabulary favors active verbs, concrete outcomes, and human-centered language over feature lists.

Colors

Xero's color system is built on a foundation of professional neutrality (whites, light grays, and navy) with two strategic accent colors that drive user action and emotional response. **Primary (#1f65d6)** is the signature call-to-action blue, used exclusively on buttons, links, and interactive focus states. It conveys trust and forward motion—the color users click to take control. **Secondary (#68b631)** is a vibrant growth green reserved for promotional CTAs, success states, and premium offers (e.g., 'Get 90% off for 6 months' button). **Tertiary (#213b55)** is a deep navy used for headings, navigation, and high-contrast text on light backgrounds, reinforcing authority and professionalism.

The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5

Typography

Xero's type system uses National2 (a custom geometric sans-serif) paired with Helvetica Neue as fallback, creating a modern yet approachable voice. The hierarchy spans from Display (72px, 700 weight) for hero statements down to Label-sm (12px, 500 weight) for metadata and form hints. **Display (72px, 700 weight, -0.02em letter-spacing)** is reserved for the main hero headline ('Know your numbers. Control your cash flow.'), commanding attention with its scale and weight. **Headline-lg (48px, 700 weight)** anchors section introductions and modal titles. **Headline-md (32px, 700 weight)** is used for subsection headers and card titles. **Body-lg (18px, 400 weight)** carries hero copy and introductory paragraphs. **Body-md (16px, 400 weight)** is the default for form labels, list items, and bo

Layout

Xero uses a fluid 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on tablet and mobile. The page rhythm is built on a semantic spacing scale: **xs (4px)** for micro-interactions (icon padding, tight component gaps); **sm (12px)** for internal component spacing (button padding, list item gaps); **md (24px)** for standard section gutters and card padding; **lg (40px)** for major section separation (hero to feature section, feature to testimonial); **xl (64px)** for page-level breaks. The hero section uses lg spacing (40px) above and below to create visual breathing room. Feature cards are laid out in a 3-column grid on desktop with md (24px) gaps between cards. Form inputs use sm (12px) vertical spacing between fields. The containe

Elevation & Depth

Xero's depth model is subtle and functional, using soft shadows and layering to create visual hierarchy without drama. **Level 1 (Base)**: No shadow; flat surfaces like the page background and input fields sit at the base plane. **Level 2 (Standard Card)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, dropdowns, and modals. This shadow is tight and close, suggesting the element is just above the base. **Level 3 (Elevated/Hover)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) applied on card hover, modal overlays, and floating action elements. The larger blur radius (24px) and vert

Shapes

Xero's shape philosophy is 'Measured Softness'—corners are rounded just enough to feel modern and approachable, but never so much that they undermine the professional, data-driven nature of the product. **Buttons and CTAs** use rounded.md (6px), a subtle curve that softens the rectangular form without appearing playful. **Cards and containers** use rounded.lg (10px), creating a slightly more pronounced curve that distinguishes them from the page background. **Input fields** use rounded.full (50px), a pill shape that signals interactivity and approachability—users immediately recognize these as

Components

Action Elements **Button-Primary** (backgroundColor: #1f65d6, textColor: #ffffff, height: 44px, padding: 12px 24px, rounded: 6px, fontSize: 15px, fontWeight: 500) is the primary call-to-action for all user-initiated actions: 'Buy now', 'Start free trial', 'Save changes'. On hover, transition backgroundColor to #1a4fa8 over 200ms ease-in-out. On active/pressed, darken further to #0d3a7d. **Button-Secondary** (backgroundColor: #68b631, textColor: #ffffff) is used for time-limited offers and promotional CTAs ('Get 90% off for 6 months'). Hover state: #5a9d2a. **Button-Ghost** (backgroundColor: transparent, border: 1px solid #1f65d6, textColor: #1f65d6) is used for secondary actions and navigation links. Hover state: backgroundColor #f0f0f0, maintaining the border. All buttons must have a

Do's and Don'ts

**Do**

• Do use Primary Blue (#1f65d6) exclusively for primary CTAs and interactive focus states—it is the signature brand color and should never be diluted or overused on secondary elements.
• Do maintain the 40px (lg spacing) vertical gap between major sections (hero, features, testimonials, footer) to create visual breathing room and guide the eye through the page.
• Do apply the 200ms ease-in-out transition to all interactive state changes (button hover, card hover, input focus) to create a responsive, polished feel.
• Do use National2 font-family with Helvetica Neue fallback for all text; never substitute with system fonts or generic sans-serif.
• Do pair Display (72px) headlines with Body-lg (18px) supporting copy to create clear visual hierarchy and guide users through the narrative.
• Do use the full surface stack (surface, surface-container-low, surface-container, surface-container-high) to create subtle depth and layering without introducing color.

**Don't**

• Don't use Secondary Green (#68b631) on non-promotional or non-success elements—it is reserved for time-limited offers and positive confirmations to maintain its urgency and impact.
• Don't apply rounded corners greater than 20px to any component; excessive rounding undermines the professional, data-driven brand personality.
• Don't use shadows with blur radius greater than 24px or vertical offset greater than 8px; Xero's depth model is subtle and functional, not theatrical.
• Don't mix Primary Blue and Secondary Green in the same button or component—they compete for attention and create visual confusion.
• Don't use text-shadow on body text or large headlines; reserve it only for Label-sm (12px) text over busy backgrounds to ensure legibility.
• Don't exceed a container max-width of 1280px; content should remain scannable and not stretched across ultra-wide displays.