Xero
MIT
Clean, modern SaaS design system built on navy and mint green with sharp corners and purposeful typography for accounting and business software
Colour (41)
color.navbgvar(--xero-bg-nav)
color.cardbgtransparent
color.xerobgapprgb(80, 220, 170)
color.xerobgnavvar(--primitive-white)
color.brandmark1rgb(19, 181, 234)
color.xeroaccentrgb(33, 59, 85)
color.btnprimarybgvar(--xero-accent)
color.xerotextbodyrgb(23, 44, 64)
color.brandsurface1rgb(111, 239, 193)
color.brandsurface2rgb(0, 120, 200)
color.xerobgsurfacergb(111, 239, 193)
color.xeroborderctavar(--primitive-navy-700)
color.xerotextmutedrgb(236, 242, 246)
color.btnsecondarybgvar(--xero-bg-app)
color.primitiveblackrgb(0, 0, 0)
color.primitivewhitergb(255, 255, 255)
color.xeroaccentdarkrgb(11, 24, 35)
color.xerobgapphoverrgb(74, 196, 157)
color.xerotextondarkrgb(255, 255, 255)
color.brandprimaryctargb(33, 59, 85)
color.primitiveborderrgb(112, 112, 112)
color.primitivegrey50rgb(236, 242, 246)
color.primitivesky400rgb(19, 181, 234)
color.xeroaccenthoverrgb(0, 120, 200)
color.xeroborderinputvar(--primitive-border)
color.xerotextprimaryrgb(19, 181, 234)
color.btnprimarybordervar(--xero-accent)
color.primitiveblue400rgb(0, 137, 220)
color.primitiveblue500rgb(0, 120, 200)
color.primitivemint200rgb(111, 239, 193)
color.primitivenavy700rgb(33, 59, 85)
color.primitivenavy800rgb(23, 44, 64)
color.primitivenavy900rgb(11, 24, 35)
color.primitiveteal300rgb(80, 220, 170)
color.primitiveteal400rgb(74, 196, 157)
color.brandsecondaryctargb(80, 220, 170)
color.btnprimarybghovervar(--xero-accent-dark)
color.btnsecondarybordervar(--xero-bg-app)
color.btnsecondarybghovervar(--xero-bg-app-hover)
color.btnprimaryborderhovervar(--xero-accent-dark)
color.btnsecondaryborderhovervar(--xero-bg-app-hover)
Spacing (19)
spacing.xerospace14px
spacing.xerospace28px
spacing.xerospace312px
spacing.xerospace414px
spacing.xerospace515px
spacing.xerospace624px
spacing.xerospace732px
spacing.xerospace840px
spacing.xerospace10160px
spacing.otfooterspace160px
spacing.bpxs400px
spacing.bpsm425px
spacing.bpsm2426px
spacing.bpmd500px
spacing.bpmd2530px
spacing.bpmd3550px
spacing.bplg600px
spacing.bpxl768px
spacing.bp2xl896px
Radius (8)
radiussm2px
xeroradiussm2px
radiusmd3px
xeroradiusmd3px
radiuslg4px
xeroradiuslg4px
radiusfull50px
xeroradiusfull50px
# layout.md — Xero.com Design System
---
## 0. Quick Reference
> **Standalone injectable** — copy-paste into `CLAUDE.md` or `.cursorrules`.
> **Use as** `var(--xero-*)` in CSS, `style={{ prop: 'var(--xero-*)' }}` in JSX, or `bg-[var(--xero-*)]` in Tailwind.
```css
/* ── Xero Design Tokens (reconstructed-from-computed, low confidence) ── */
:root {
/* COLOURS */
--xero-accent: rgb(33, 59, 85); /* Primary CTA bg, h2/h3 text, nav dark bg */
--xero-accent-dark: rgb(11, 24, 35); /* Button hover state — darkened navy */
--xero-bg-surface: rgb(111, 239, 193); /* Promo/banner surface (mint green) */
--xero-bg-app: rgb(80, 220, 170); /* Secondary CTA bg (teal green) */
--xero-bg-app-hover: rgb(74, 196, 157); /* Secondary CTA hover */
--xero-accent-hover: rgb(0, 120, 200); /* Link/interactive hover blue */
--xero-text-primary: rgb(19, 181, 234); /* Brand mark, focus ring (sky blue) */
--xero-text-on-dark: rgb(255, 255, 255); /* Text on dark/navy backgrounds */
--xero-text-body: rgb(23, 44, 64); /* Card body text (dark navy) */
--xero-text-muted: rgb(236, 242, 246); /* Body default (light blue-grey) */
/* TYPOGRAPHY */
--xero-font-family: 'National2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--xero-font-size-xs: 12px;
--xero-font-size-sm: 14px;
--xero-font-size-md: 15px;
--xero-font-size-lg: 15.6px;
--xero-font-size-xl: 18px;
--xero-font-size-2xl: 21.96px;
--xero-font-size-3xl: 42px;
--xero-font-size-h1: 72px;
--xero-font-weight-regular: 400;
--xero-font-weight-bold: 700;
/* RADIUS — sharp UI, pill only on inputs */
--xero-radius-sm: 2px; /* Cookie/utility buttons */
--xero-radius-md: 3px; /* Primary CTA buttons */
--xero-radius-lg: 4px; /* Consent/secondary buttons */
--xero-radius-full: 50px; /* Search input only */
/* SPACING */
--ot-footer-space: 160px; /* Footer bottom padding (preserved original) */
/* MOTION */
--xero-duration-fast: 0.05s;
--xero-duration-base: 0.1s;
--xero-duration-slow: 0.3s;
--xero-ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
```
```tsx
// Primary CTA Button — correct token usage with all states
<button
className="xero-btn-primary"
style={{
fontFamily: 'var(--xero-font-family)',
fontSize: 'var(--xero-font-size-sm)',
fontWeight: 'var(--xero-font-weight-bold)',
backgroundColor: 'var(--xero-accent)',
color: 'var(--xero-text-on-dark)',
borderRadius: 'var(--xero-radius-md)',
border: '2px solid var(--xero-accent)',
padding: '0 14px',
lineHeight: '32px',
transition: 'background-color var(--xero-duration-slow) var(--xero-ease-default)',
position: 'relative',
}}
>
Buy now
</button>
```
**NEVER rules:**
- NEVER use `Inter`, `Roboto`, or `Arial` as the primary font — Xero uses `National2` exclusively
- NEVER use `border-radius > 4px` on buttons — Xero buttons use 3px; only search inputs use 50px
- NEVER hardcode `#213B55` or `rgb(33,59,85)` — always use `var(--xero-accent)`
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Mood
Xero's visual identity is **professional, trustworthy, and quietly confident**. The palette pairs a deep navy (`rgb(33, 59, 85)`) with a fresh teal-mint family (`rgb(80, 220, 170)` / `rgb(111, 239, 193)`), projecting financial authority softened by approachability. The brand mark sky-blue (`rgb(19, 181, 234)`) appears as an accent and focus indicator, reinforcing the Xero logo colour.
### Aesthetic Intent
- **Sharp geometry**: Buttons are near-flat with 3px radius. The UI explicitly rejects rounded-card aesthetics.
- **Type-led hierarchy**: `National2` is a geometric grotesque with optical authority. Large, tight headlines (72px at −1px tracking) communicate scale and confidence.
- **Restrained motion**: Transitions are short (0.05–0.3s). Hover states are subtle underline shifts, not dramatic transforms.
- **High-contrast dark navy on white**: Core readability is built around navy-on-white and white-on-navy — never pastels on pastels.
### What This Design Explicitly Rejects
- **Warm tones**: No amber, orange, red, or warm-grey. Palette is strictly cool.
- **Heavy rounded corners**: No card radii > 4px on interactive elements. No `border-radius: 8px`, `12px`, `16px` buttons.
- **Drop shadows as decoration**: Elevation is handled through colour contrast, not diffuse box-shadows.
- **Playful / informal typography**: No display fonts, no all-caps labels (except where functionally required), no tight tracking on body text.
- **Dense, cluttered layouts**: Generous whitespace (160px footer spacing signals the rhythm).
---
## 2. Colour System
### Tier 1 — Primitive Values
```css
:root {
/* Primitive palette */
--primitive-navy-900: rgb(11, 24, 35); /* Deepest navy — button hover dark */
--primitive-navy-800: rgb(23, 44, 64); /* Dark navy — card text */
--primitive-navy-700: rgb(33, 59, 85); /* Core navy — primary CTA, headings */
--primitive-teal-400: rgb(74, 196, 157); /* Teal hover */
--primitive-teal-300: rgb(80, 220, 170); /* Secondary CTA */
--primitive-mint-200: rgb(111, 239, 193); /* Promo surface */
--primitive-blue-500: rgb(0, 120, 200); /* Interactive link blue */
--primitive-blue-400: rgb(0, 137, 220); /* Hover underline gradient */
--primitive-sky-400: rgb(19, 181, 234); /* Brand mark / focus ring */
--primitive-white: rgb(255, 255, 255);
--primitive-black: rgb(0, 0, 0);
--primitive-grey-50: rgb(236, 242, 246); /* Body default text (light) */
--primitive-border: rgb(112, 112, 112); /* Input border */
}
```
### Tier 2 — Semantic Aliases
```css
:root {
/* Backgrounds */
--xero-bg-surface: var(--primitive-mint-200); /* Promo/banner bg (mint) — reconstructed: medium confidence */
--xero-bg-app: var(--primitive-teal-300); /* Secondary CTA bg — reconstructed: low confidence */
--xero-bg-nav: var(--primitive-white); /* Navigation bar bg — reconstructed: high confidence */
/* Actions */
--xero-accent: var(--primitive-navy-700); /* Primary CTA bg, borders — reconstructed: high confidence */
--xero-accent-dark: var(--primitive-navy-900); /* Primary CTA hover bg — reconstructed: high confidence */
--xero-bg-app-hover: var(--primitive-teal-400); /* Secondary CTA hover — reconstructed: high confidence */
--xero-accent-hover: var(--primitive-blue-500); /* Link/text hover — reconstructed: medium confidence */
/* Text */
--xero-text-on-dark: var(--primitive-white); /* Text on navy/dark bg */
--xero-text-heading: var(--primitive-navy-700); /* h2, h3 on light bg */
--xero-text-body: var(--primitive-navy-800); /* Card/body copy */
--xero-text-muted: var(--primitive-grey-50); /* Body element default */
--xero-text-link: var(--primitive-blue-500); /* Inline text links */
/* Brand / Focus */
--xero-text-primary: var(--primitive-sky-400); /* Brand mark, focus rings — extracted: high confidence */
--xero-focus-ring: var(--primitive-sky-400); /* Focus ::before border on teal contexts */
--xero-focus-ring-alt: var(--primitive-navy-700); /* Focus ::before border on navy contexts */
--xero-focus-ring-inv: var(--primitive-white); /* Focus ::before border on dark bg */
/* Borders */
--xero-border-input: var(--primitive-border); /* Input field border */
--xero-border-cta: var(--primitive-navy-700); /* CTA button border (matches bg) */
}
```
### Tier 3 — Component Tokens
```css
:root {
/* Button — Primary (navy) */
--btn-primary-bg: var(--xero-accent);
--btn-primary-bg-hover: var(--xero-accent-dark);
--btn-primary-border: var(--xero-accent);
--btn-primary-border-hover: var(--xero-accent-dark);
--btn-primary-text: var(--xero-text-on-dark);
/* Button — Secondary (teal) */
--btn-secondary-bg: var(--xero-bg-app);
--btn-secondary-bg-hover: var(--xero-bg-app-hover);
--btn-secondary-border: var(--xero-bg-app);
--btn-secondary-border-hover:var(--xero-bg-app-hover);
--btn-secondary-text: var(--xero-text-body);
/* Navigation */
--nav-bg: var(--xero-bg-nav);
--nav-text: var(--primitive-black);
/* Card */
--card-text: var(--xero-text-body);
--card-bg: transparent;
}
```
### Colour Role Table
| Token | Value | Purpose |
|---|---|---|
| `--xero-accent` | `rgb(33, 59, 85)` | **Primary CTA bg**, headings on light |
| `--xero-accent-dark` | `rgb(11, 24, 35)` | Primary button hover |
| `--xero-bg-app` | `rgb(80, 220, 170)` | Secondary CTA ("Try Xero for free") |
| `--xero-bg-app-hover` | `rgb(74, 196, 157)` | Secondary CTA hover |
| `--xero-bg-surface` | `rgb(111, 239, 193)` | Promotional banner surface |
| `--xero-accent-hover` | `rgb(0, 120, 200)` | Link hover, underline gradient |
| `--xero-text-primary` | `rgb(19, 181, 234)` | Brand mark, focus rings |
| `--xero-text-on-dark` | `rgb(255, 255, 255)` | Text/icons on navy bg |
| `--xero-text-body` | `rgb(23, 44, 64)` | Card body copy |
---
## 3. Typography System
**Font family: `National2`** — geometric grotesque, custom web font. Falls back to `Helvetica Neue`, `Helvetica`, `Arial`, `sans-serif`. `font-display: swap`.
### Font Stack
```css
:root {
--xero-font-family: 'National2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Applied to all headings, body, CTAs, navigation — the universal Xero typeface */
/* Exception: browser-native form elements (input, label, checkbox, modal) may render Helvetica Neue */
}
```
### Composite Typography Tokens
```css
:root {
/* ── Display / Hero ── */
--xero-type-h1: {
font-family: var(--xero-font-family);
font-size: 72px;
font-weight: 700;
line-height: 64.8px; /* 0.9 ratio — tight display */
letter-spacing: -1px;
color: var(--xero-text-on-dark); /* h1 appears on dark/hero bg */
}
/* ── Section Heading ── */
--xero-type-h2: {
font-family: var(--xero-font-family);
font-size: 42px;
font-weight: 700;
line-height: 48.3px;
letter-spacing: -0.84px;
color: var(--xero-text-heading);
text-align: center; /* h2 is centred in section contexts */
}
/* ── Card / Sub-section Heading ── */
--xero-type-h3: {
font-family: var(--xero-font-family);
font-size: 21.96px;
font-weight: 700;
line-height: 25.254px;
letter-spacing: -0.44px;
color: var(--xero-text-heading);
}
/* ── Body Copy ── */
--xero-type-body: {
font-family: var(--xero-font-family);
font-size: 15px;
font-weight: 400;
line-height: 18px;
letter-spacing: normal;
color: var(--xero-text-muted);
}
/* ── Card Body ── */
--xero-type-card-body: {
font-family: var(--xero-font-family);
font-size: 15.6px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
color: var(--xero-text-body);
}
/* ── CTA / Button Label ── */
--xero-type-button: {
font-family: var(--xero-font-family);
font-size: 15px;
font-weight: 700;
line-height: 32px;
letter-spacing: normal;
}
/* ── Small / Caption ── */
--xero-type-small: {
font-family: var(--xero-font-family);
font-size: 14px;
font-weight: 400;
line-height: 17.5px;
letter-spacing: normal;
}
/* ── XS / Legal / Badge ── */
--xero-type-xs: {
font-family: var(--xero-font-family);
font-size: 12px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
}
/* ── Nav Heading (section title at 18px) ── */
--xero-type-nav-section: {
font-family: var(--xero-font-family);
font-size: 18px;
font-weight: 700;
line-height: 23.4px;
letter-spacing: normal;
}
}
```
### Typography Scale Table
| Role | Size | Weight | Line-height | Letter-spacing |
|---|---|---|---|---|
| Hero H1 | 72px | 700 | 64.8px (0.9×) | -1px |
| Section H2 | 42px | 700 | 48.3px | -0.84px |
| Card H3 | 21.96px | 700 | 25.25px | -0.44px |
| Nav section | 18px | 700 | 23.4px | normal |
| Card body | 15.6px | 400 | normal | normal |
| Body | 15px | 400 | 18px | normal |
| Button label | 15px | **700** | 32px | normal |
| Small/caption | 14px | 400 | 17.5px | normal |
| XS/legal | 12px | 400 | normal | normal |
**Pairing rule**: Headings always use weight 700. Body always 400. There is no 500 weight used on xero.com despite the font file being available.
---
## 4. Spacing & Layout
### Base Unit & Scale
Xero does not use an explicit 4px/8px grid token system — spacing is derived from computed element geometry. The one extracted CSS variable is `--ot-footer-space: 160px`, suggesting generous vertical rhythm at macro scale.
```css
:root {
/* ── Preserved original CSS variable ── */
--ot-footer-space: 160px; /* Footer bottom clearance — extracted: high confidence */
/* ── Synthesised spacing scale (reconstructed from computed paddings/margins) ── */
--xero-space-1: 4px; /* Micro — reconstructed: moderate confidence */
--xero-space-2: 8px; /* Tight gap (cls_btn margin-right) — reconstructed: high confidence */
--xero-space-3: 12px; /* Card negative margin base unit — reconstructed: moderate confidence */
--xero-space-4: 14px; /* Button horizontal padding — reconstructed: high confidence */
--xero-space-5: 15px; /* Input left padding, input margin-left — reconstructed: high confidence */
--xero-space-6: 24px; /* [TBD - extract manually] */
--xero-space-7: 32px; /* Button line-height / min-height proxy — reconstructed: moderate confidence */
--xero-space-8: 40px; /* [TBD - extract manually] */
--xero-space-10: 160px; /* Footer spacing (matches --ot-footer-space) */
}
```
### Grid & Breakpoints
```css
/* ── Breakpoints (extracted from media queries) ── */
:root {
--bp-xs: 400px; /* Extra small mobile */
--bp-sm: 425px; /* Small mobile */
--bp-sm2: 426px; /* Small mobile + 1 (likely min-width boundary) */
--bp-md: 500px; /* Medium mobile */
--bp-md2: 530px; /* Medium mobile variant */
--bp-md3: 550px; /* Medium mobile variant */
--bp-lg: 600px; /* Large mobile / small tablet */
--bp-xl: 768px; /* Tablet */
--bp-2xl: 896px; /* Large tablet / small desktop */
}
```
### Layout Principles
- **Navigation**: `display: flex`, `flex-direction: row`, `align-items: center` — horizontal bar, full width
- **Cards**: `display: flex`, `flex-direction: row`, `align-items: stretch` — horizontal card rows with `margin: 0 -12px` (negative margin for bleed)
- **Buttons**: `display: flex`, `flex-direction: row`, `justify-content: center`, `align-items: baseline` — inline-flex label containers
- **Modals/alerts**: `display: block` — full-width stacked layout
```css
/* ── Container width pattern (reconstructed: moderate confidence) ── */
.xero-container {
max-width: 1200px; /* [TBD - extract manually] */
margin: 0 auto;
padding: 0 var(--xero-space-4);
}
```
---
## 5. Page Structure & Layout Patterns
> **Source**: Layout digest + component inventory. No screenshots available. Rows marked **(inferred)** are not visually confirmed.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | Global Navigation | `flex row`, full-width | ~64px | Logo, nav links, "Log in" + "Try free" CTAs (inferred) |
| 2 | Hero / H1 Banner | Full-width, dark bg | ~500px (inferred) | H1 72px white text, primary + secondary CTA buttons, promo surface |
| 3 | Promotional Banner | Full-width, mint bg | ~80px (inferred) | `--xero-bg-surface` (#6FEFC1) background, dismissible promo copy |
| 4 | Feature / Card Grid | `flex row`, contained | ~400px (inferred) | 166 card instances — multi-column flex grid, card body 15.6px |
| 5 | Stats / Social Proof | Centred, contained | ~200px (inferred) | H2 42px centred ("Join over 4.9 million…") |
| 6 | Secondary Feature Section | Contained | ~400px (inferred) | H2 + body copy + secondary CTA (teal) |
| 7 | How It Works / Demo | Contained | ~400px (inferred) | H2 + supporting body + link CTAs |
| 8 | Footer | Full-width, dark bg | ~320px + 160px pad | Nav links, legal copy, `--ot-footer-space` bottom padding |
### 5.2 Layout Patterns
**Navigation**
- `display: flex; flex-direction: row; align-items: center; background: #fff`
- Logo left, nav items centre/right, CTA buttons far right
- "Log in" button: navy bg (`--xero-accent`), 3px radius, white text
- "Try Xero for free" button: teal bg (`--xero-bg-app`), 3px radius, dark text
**Hero**
- Full-width dark background (navy `--xero-accent` or darker) — inferred from h1 `color: white`
- H1 at 72px / −1px tracking / 64.8px line-height — tightly leaded display size
- CTA row: primary navy button + secondary teal button side-by-side (inferred)
**Promotional Banner** *(inferred)*
- `background-color: var(--xero-bg-surface)` (mint green)
- Single-line copy + dismiss link
- Full viewport width, no border-radius
**Feature Card Grid**
- Parent: `display: flex; flex-direction: row; align-items: stretch; margin: 0 -12px`
- Cards bleed into gutter via negative margin — standard multi-column card bleed pattern
- Body copy: 15.6px / National2 / `rgb(23, 44, 64)`
- No card border-radius (0px on card element)
**Section Headings**
- H2: 42px, centred (`text-align: center`), `--xero-text-heading`
- H3: 21.96px, left-aligned, `--xero-text-heading`
### 5.3 Visual Hierarchy
1. **Hero H1** (72px, white, −1px tracking) — maximum visual weight
2. **Section H2** (42px, navy, centred) — section anchors
3. **Primary CTA** (navy `--xero-accent`) — highest button authority
4. **Secondary CTA** (teal `--xero-bg-app`) — trial/signup action
5. **Card H3** (21.96px, navy) — feature scanners
6. **Body** (15px / 15.6px, dark navy) — supporting copy
7. **XS/Legal** (12px) — lowest hierarchy
**Whitespace rhythm**: `--ot-footer-space: 160px` sets the macro rhythm. Section padding is generous (estimated 64–80px vertical) relative to the compact button size (32px line-height).
**CTA colour anchors**:
- Primary action → `rgb(33, 59, 85)` navy
- Trial/signup action → `rgb(80, 220, 170)` teal
- Inline text links → `rgb(0, 120, 200)` blue with underline animation
### 5.4 Content Patterns
**CTA Pair Pattern** (nav + hero)
- Navy button ("Buy now" / "Log in") +
[Error generating layout.md: terminated]
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (41) */
--brand-primary-cta: rgb(33, 59, 85); /* Primary CTA background, dominant on 1 button — e.g. "Buy now" /* mined from computed styles */ */
--brand-secondary-cta: rgb(80, 220, 170); /* Secondary CTA background, dominant on 1 button — e.g. "Try Xero for free" /* mined from computed styles */ */
--brand-surface-1: rgb(111, 239, 193); /* Brand surface, dominant on 2 elements — e.g. "Get 80% off your plan for your" /* mined from computed styles */ */
--brand-surface-2: rgb(0, 120, 200); /* Brand surface, dominant on 2 elements — e.g. "Get back to what you love with" /* mined from computed styles */ */
--brand-mark-1: rgb(19, 181, 234); /* Brand mark fill on 7 svg shapes — e.g. "path" /* mined from svg fill */ */
--xero-accent: rgb(33, 59, 85);
--xero-accent-dark: rgb(11, 24, 35);
--xero-bg-surface: rgb(111, 239, 193);
--xero-bg-app: rgb(80, 220, 170);
--xero-bg-app-hover: rgb(74, 196, 157);
--xero-accent-hover: rgb(0, 120, 200);
--xero-text-primary: rgb(19, 181, 234);
--xero-text-on-dark: rgb(255, 255, 255);
--xero-text-body: rgb(23, 44, 64);
--xero-text-muted: rgb(236, 242, 246);
--primitive-navy-900: rgb(11, 24, 35);
--primitive-navy-800: rgb(23, 44, 64);
--primitive-navy-700: rgb(33, 59, 85);
--primitive-teal-400: rgb(74, 196, 157);
--primitive-teal-300: rgb(80, 220, 170);
--primitive-mint-200: rgb(111, 239, 193);
--primitive-blue-500: rgb(0, 120, 200);
--primitive-blue-400: rgb(0, 137, 220);
--primitive-sky-400: rgb(19, 181, 234);
--primitive-white: rgb(255, 255, 255);
--primitive-black: rgb(0, 0, 0);
--primitive-grey-50: rgb(236, 242, 246);
--primitive-border: rgb(112, 112, 112);
--xero-bg-nav: var(--primitive-white);
--xero-border-input: var(--primitive-border);
--xero-border-cta: var(--primitive-navy-700);
--btn-primary-bg: var(--xero-accent);
--btn-primary-bg-hover: var(--xero-accent-dark);
--btn-primary-border: var(--xero-accent);
--btn-primary-border-hover: var(--xero-accent-dark);
--btn-secondary-bg: var(--xero-bg-app);
--btn-secondary-bg-hover: var(--xero-bg-app-hover);
--btn-secondary-border: var(--xero-bg-app);
--btn-secondary-border-hover: var(--xero-bg-app-hover);
--nav-bg: var(--xero-bg-nav);
--card-bg: transparent;
/* Typography (28) */
--font-size-xs: 12px; /* 9 elements — e.g. p "$0", span "Buy now", span "Dismiss" /* mined from computed styles */ */
--font-size-sm: 14px; /* 9 elements — e.g. span "Dismiss", span "Features", button "Dismiss" /* mined from computed styles */ */
--font-size-md: 15px; /* 18 elements — e.g. p "Usually $29", p "USD per month", p "Save $69.60 over 3 m" /* mined from computed styles */ */
--font-size-lg: 15.6px; /* 15 elements — e.g. p "Manage your finances", p "Send quotes and invo", p "View cash flow on th" /* mined from computed styles */ */
--font-size-xl: 18px; /* 15 elements — e.g. h3 "Accounting software", h3 "Xero for", h3 "Resources" /* mined from computed styles */ */
--font-size-2xl: 21.96px; /* 9 elements — e.g. h2 "30-day free trial", h3 "Starter", h3 "Standard" /* mined from computed styles */ */
--font-size-3xl: 42px; /* 5 elements — e.g. h2 "Join over 4.9 millio", h2 "Get more done with J", h2 "See how Xero works f" /* mined from computed styles */ */
--font-weight-regular: 400; /* 55 elements — e.g. p "Accounting software ", p "Awards and recogniti", p "While you are workin" /* mined from computed styles */ */
--font-weight-medium: 700; /* 37 elements — e.g. h1 "Get back to what you", h2 "Join over 4.9 millio", h2 "Get more done with J" /* mined from computed styles */ */
--line-height-normal: 19.5px; /* 6 elements — e.g. p "Manage your finances", p "Send quotes and invo", p "View cash flow on th" /* mined from computed styles */ */
--line-height-loose: 23.4px; /* 15 elements — e.g. h3 "Accounting software", h3 "Xero for", h3 "Resources" /* mined from computed styles */ */
--xero-font-family: 'National2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--xero-font-size-xs: 12px;
--xero-font-size-sm: 14px;
--xero-font-size-md: 15px;
--xero-font-size-lg: 15.6px;
--xero-font-size-xl: 18px;
--xero-font-size-2xl: 21.96px;
--xero-font-size-3xl: 42px;
--xero-font-size-h1: 72px;
--xero-font-weight-regular: 400;
--xero-font-weight-bold: 700;
--xero-text-heading: var(--primitive-navy-700);
--xero-text-link: var(--primitive-blue-500);
--btn-primary-text: var(--xero-text-on-dark);
--btn-secondary-text: var(--xero-text-body);
--nav-text: var(--primitive-black);
--card-text: var(--xero-text-body);
/* Spacing (19) */
--ot-footer-space: 160px;
--xero-space-1: 4px;
--xero-space-2: 8px;
--xero-space-3: 12px;
--xero-space-4: 14px;
--xero-space-5: 15px;
--xero-space-6: 24px;
--xero-space-7: 32px;
--xero-space-8: 40px;
--xero-space-10: 160px;
--bp-xs: 400px;
--bp-sm: 425px;
--bp-sm2: 426px;
--bp-md: 500px;
--bp-md2: 530px;
--bp-md3: 550px;
--bp-lg: 600px;
--bp-xl: 768px;
--bp-2xl: 896px;
/* Radius (8) */
--radius-sm: 2px; /* 10 elements — e.g. button .onetrust-close-btn-handler, button .ot-close-icon, button /* mined from computed styles */ */
--radius-md: 3px; /* 3 elements — e.g. a .Button__Element-sc-1p1w21k-2 "Buy now", a .Button__Element-sc-1p1w21k-2 "Try Xero for free", a .Button__Element-sc-1p1w21k-2 "Log in" /* mined from computed styles */ */
--radius-lg: 4px; /* 5 elements — e.g. button "Manage cookies", button "Reject all", button "Accept all cookies" /* mined from computed styles */ */
--radius-full: 50px; /* 1 element — e.g. input /* mined from computed styles */ */
--xero-radius-sm: 2px;
--xero-radius-md: 3px;
--xero-radius-lg: 4px;
--xero-radius-full: 50px;
/* Motion (4) */
--duration-fast: 0.05s; /* 3 elements — e.g. a, a, a /* mined from computed styles */ */
--duration-base: 0.1s; /* 24 elements — e.g. button, a, a /* mined from computed styles */ */
--duration-slow: 0.3s; /* 3 elements — e.g. a, a, a /* mined from computed styles */ */
--ease-default: ease; /* 75 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like

Cash App
MITBold, high-contrast fintech design system built on Cash App's signature neon green and black palette, optimised for mobile payment interfaces and developer implementation
00
fintechmobilebolddark

Klarna
MITClean, modern fintech interface with Klarna's signature pink accents and dark eggplant typography, designed for seamless payment and shopping experiences
00
lightboldfintechecomm

IBM
MITEnterprise-grade design system with IBM's iconic blue accent, sophisticated typography hierarchy, and fluid spacing built on Carbon principles—ideal for corporate products and SaaS platforms
00
saasdeveloper-tooldashboardlight