Xero

# 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 */ */
```