# Tyro Design System

> High-contrast utility meets financial blue, anchored by heavy condensed headlines and sharp, functional geometry.

**Source:** https://tyro.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tyro utilizes a high-contrast monochrome foundation of pure black (#000000) and white (#ffffff), punctuated by a singular vibrant primary blue (#1c8dff) for interactive elements. The typographic system is built on the **National** family, characterized by heavy, all-caps condensed headlines that create a sense of industrial reliability. Layouts are structured with generous 60px vertical rhythms and 8px-10px rounded corners on primary UI controls, while background surfaces remain strictly sharp-edged. The visual language balances the "fintech" blue with a "banking" black-and-white sobriety.

## Signature DNA
1. **Condensed Impact** (National-Condensed-Extrabold set at 700 weight for all primary headers, creating a vertical, high-density information hierarchy).
2. **The Tyro Blue Anchor** (#1c8dff used exclusively for primary CTAs and key links, providing a high-visibility path through monochromatic content).
3. **Hybrid Radii** (A strict 0px radius for section containers and cards, contrasted with 8px-10px radii for buttons and interactive surfaces).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, footer background, borders | 132 | 1.0 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 43 | 1.0 | Computed Style |
| `{color.off-white}` | `#f9f9f9` | Secondary section backgrounds, card fills | 8 | 0.6 | Computed Style |
| `{color.gray}` | `#cccccc` | Decorative borders, disabled button states | 6 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#1c8dff` | Primary CTAs, active links, icon accents | 65 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| national-condensed-extrabold | 400, 700 | Display & Headings | Archivo Narrow (Bold) | Proprietary |
| national-regular | 400, 700 | Body copy, secondary links | Inter | Proprietary |
| national-medium | 400 | UI Labels, buttons | Inter (Medium) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 50px | 40px | normal | 700 | Hero headers | `h2.header-2` |
| `{type.display-lg}` | 40px | 40px | normal | 700 | Section titles | `h3.title-cell` |
| `{type.heading-md}` | 32px | 32px | normal | 700 | Standard headings | `h4` |
| `{type.heading-sm}` | 26px | 26px | normal | 700 | Sub-headings | `h5` |
| `{type.body-lg}` | 18px | 22.5px | normal | 400 | Lead paragraphs | `p.p1` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Default body | `section#hero-banner` |
| `{type.ui-label}` | 16px | 16px | normal | 400 | Buttons, modal triggers | `a.btn.modal-trigger` |
| `{type.body-sm}` | 14px | 17.5px | normal | 400 | Small body, secondary links | `p.p3` |
| `{type.caption}` | 10px | 12.5px | normal | 400 | Legal, footnotes | `p:nth-of-type(3)` |

### Principles
1. **Condensed for Authority:** All major headings must use the Condensed-Extrabold variant to maximize horizontal space and impact.
2. **Tight Line Heights:** Display type uses a 0.8x to 1.0x line-height ratio relative to font size for a "stacked" look.
3. **Achromatic Body:** Running text is strictly #000000 on #ffffff; color is never used for long-form reading.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 17 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 16px | 52 |
| `{space.lg}` | 20px | 16 |
| `{space.xl}` | 48px | 9 |
| `{space.section}` | 60px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | 148 occurrences |
| `{radius.md}` | 8px | Primary buttons, feature cards | 30 occurrences |
| `{radius.lg}` | 10px | Secondary surfaces, help cards | 12 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://tyro.com
**Spec:** Background: `#1c8dff` / Text: `#ffffff` / Border: `2px solid #1c8dff` / Radius: `8px` / Padding: `0px 16px` / Typography: `16px national-medium`
**States observed:** Default | Hover: captured | Active: captured

#### Outline Button
**Role:** Secondary actions (e.g., "Tyro Pro Touch")
**Pages observed:** https://tyro.com
**Spec:** Background: `transparent` / Text: `#000000` / Border: `2px solid #000000` / Radius: `8px` / Padding: `0px 16px` / Typography: `16px national-medium`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Product and service highlights
**Pages observed:** https://tyro.com
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: `none` / Radius: `8px` / Padding: `0px` / Typography: `16px national-regular`
**States observed:** Default | Hover: captured

#### Help Surface
**Role:** Support and FAQ navigation
**Pages observed:** https://tyro.com
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #cccccc` / Radius: `10px` / Padding: `0px` / Typography: `16px national-regular`

### Tier 3: Surface-specific

#### Alternating Section
**Role:** Visual break between content blocks
**Pages observed:** https://tyro.com
**Spec:** Background: `#f9f9f9` / Text: `#000000` / Border: `none` / Radius: `0px` / Padding: `60px 48px`

#### Footer
**Role:** Global navigation and legal
**Pages observed:** https://tyro.com
**Spec:** Background: `#000000` / Text: `#ffffff` / Border: `none` / Radius: `0px` / Padding: `60px 48px` / Typography: `14px national-regular`

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 60px |
| Grid Gutter | 20px |

## Do's
- Use `#1c8dff` for all primary conversion points.
- Set all `h2` through `h5` tags in `national-condensed-extrabold`.
- Maintain a strict `0px` radius on full-width section backgrounds.
- Use `#f9f9f9` to distinguish secondary content from the primary white canvas.
- Ensure buttons have a minimum height of 40px for touch targets.

## Don'ts
- **Wrong:** Using `#1c8dff` for body text. **Right:** Use `#000000`. **Reason:** Brand blue is reserved for interaction, not information.
- **Wrong:** Applying rounded corners to the main footer. **Right:** Keep footer at `0px` radius. **Reason:** Foundational surfaces are sharp.
- **Wrong:** Using `national-regular` for display headers. **Right:** Use `national-condensed-extrabold`. **Reason:** The condensed weight is the primary brand identifier.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --tyro-blue: #1c8dff;
  --tyro-black: #000000;
  --tyro-white: #ffffff;
  --tyro-gray-light: #f9f9f9;
  --tyro-border: #cccccc;
  
  --font-heading: "national-condensed-extrabold", sans-serif;
  --font-body: "national-regular", sans-serif;
  
  --radius-control: 8px;
  --radius-surface: 10px;
}
```

## Known gaps
- Hover and Active state hex values for the primary blue were not explicitly captured in the token list.
- Mobile-specific breakpoint transitions for the 50px display type were not analyzed.
- Shadow tokens were not present in the CSS variable evidence, suggesting a flat design system.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|------|-------------|
| Tyro Homepage | https://tyro.com | 1440px | 2026-06-06 |