# Breachrx Design System

> High-contrast industrial utility defined by sharp-edged geometry, condensed display typography, and a strict monochrome foundation punctuated by high-visibility safety orange.

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

## TL;DR
Breachrx employs a "monochrome-plus-accent" system that mirrors the urgency of cyber incident response. The interface is built on a stark white canvas (`#ffffff`) with deep charcoal (`#212121`) providing the structural weight through navigation bars and primary text. The brand's "voltage" is concentrated in a single high-visibility orange (`#ff5532`), used exclusively for critical calls to action and "See How It Works" triggers. Typography pairs the technical, condensed rhythm of **Saira Semi Condensed** for headings with the neutral, modern clarity of **Geist** for body copy. Geometry is strictly industrial: 0px border radii are used across all primary UI components, creating a precise, "no-frills" aesthetic.

## Signature DNA
1. **Zero-Radius Industrialism** (All primary buttons and containers utilize `{radii.sharp}` (0px), rejecting the rounded SaaS aesthetic for a more rigorous, technical feel. Observed on homepage and about page.)
2. **Safety-Orange Punctuation** (The use of `#ff5532` is strictly reserved for primary conversion points, creating a high-contrast "emergency" signal against the `#212121` and `#ffffff` base. Observed on primary CTAs.)
3. **Condensed Technical Display** (Saira Semi Condensed at weight 600 creates a tight, authoritative typographic texture for all headings, signaling efficiency and precision. Observed across all section headers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#212121` | Text, Nav Background, Header Items | 9 | 1 | `--colorP1` |
| `{colors.canvas}` | `#ffffff` | Page Background, Button Text | 4 | 1 | `--colorWhite` |
| `{colors.surface-soft}` | `#f5f5f5` | Sub-menu Backgrounds | 1 | 1 | `--colorT1` |
| `{colors.border-light}` | `#e7e7e7` | Hover states, dividers | 1 | 1 | `--colorE8` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.accent-orange}` | `#ff5532` | Primary CTA Background | 1 | 1 | `--colorP2` |
| `{colors.accent-blue}` | `#003885` | Decorative Text / Brand Elements | 1 | 1 | `--colorP3` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Saira Semi Condensed | 400, 600 | Heading, UI Labels | Saira Semi Condensed (Google) | OFL |
| Geist | 400 | Body, Paragraphs | Geist (Vercel) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 1.1 | normal | 600 | Hero Headlines | `h1` |
| `{typography.heading-lg}` | 48px | 1.2 | normal | 600 | Section Headers | `h2` |
| `{typography.heading-md}` | 32px | 1.2 | normal | 600 | Sub-section Headers | `h3` |
| `{typography.body-lg}` | 18px | 1.6 | normal | 400 | Intro Paragraphs | `.intro-text` |
| `{typography.body-md}` | 16px | 25.6px | normal | 400 | Default Body | `p` |
| `{typography.button}` | 14px | 18.2px | normal | 600 | CTA Labels | `a.avia-button` |
| `{typography.nav}` | 14px | 1.0 | normal | 600 | Top Navigation | `--headerItemColor` |
| `{typography.caption}` | 12px | 1.4 | normal | 400 | Small labels | `.caption` |

### Principles
1. **Condensed for Authority:** Display type always uses Saira Semi Condensed to maximize horizontal information density.
2. **Achromatic Hierarchy:** Text hierarchy is primarily driven by scale and weight within the `#212121` to `#646464` range, never color.
3. **Generous Body Leading:** Body copy uses a 1.6x line-height (25.6px on 16px base) to ensure legibility in technical contexts.

## Spacing
**Base unit:** 4px (Inferred from common 16px/24px/32px patterns)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{spacing.sm}` | 12px | Button padding-inline |
| `{spacing.md}` | 24px | Element spacing |
| `{spacing.lg}` | 48px | Section padding |
| `{spacing.xl}` | 96px | Hero padding |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radii.sharp}` | 0px | Buttons, Header, Cards | 11 occurrences (Default) |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | 0px | All UI elements | No shadows observed in primary components |

## Components
### Tier 1: Foundational

#### Primary CTA Button
**Role:** Main conversion trigger (Book a Demo, See How It Works)
**Pages observed:** Homepage, About
**Spec:** Background: `#ff5532` | Text: `#ffffff` | Radius: `0px` | Typography: `Saira Semi Condensed 600 14px`
**States observed:** Default | Hover: Captured (Darker orange shift) | Active: Not captured

#### Secondary Button
**Role:** Low-priority actions (Contact Us)
**Pages observed:** About
**Spec:** Background: `#212121` | Text: `#ffffff` | Radius: `0px` | Typography: `Saira Semi Condensed 600 14px`
**States observed:** Default | Hover: Captured | Active: Not captured

### Tier 2: Patterns

#### Top Navigation Bar
**Role:** Global site navigation
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Top Bar: `#212121` | Text: `#212121` | Height: 90px (approx)
**States observed:** Default | Hover: `#2872b9` (Blue accent) | Active: `#e7e7e7` (Background)

#### Hero Section
**Role:** Primary entry point
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` or Light Gradient | Text: `#212121` | Padding: 80px-120px vertical

### Tier 3: Surface-specific

#### Announcement Bar
**Role:** High-priority site-wide updates
**Pages observed:** Homepage, About
**Spec:** Background: `#ff5532` | Text: `#ffffff` | Typography: `Saira Semi Condensed 600 14px`

#### Footer
**Role:** Global site map
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Border-top: 1px solid `#e7e7e7` | Text: `#212121`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1310px |
| Column Grid | 12-column |
| Section Gaps | 100px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Nav collapses to hamburger (Background: `#212121`) |
| Desktop | 1024px+ | Full horizontal menu visible |

## Imagery & decoration
- **Technical Textures:** Uses dot-grid patterns and "data-swarm" background imagery to reinforce the cybersecurity theme.
- **Shield Iconography:** The brand mark is a stylized, geometric shield with horizontal segments.
- **Avoidance:** No soft shadows, rounded corners, or organic/playful illustrations.

## Do's
- Use `#ff5532` only for primary conversion buttons.
- Maintain `0px` border radius on all interactive elements.
- Set all headlines in **Saira Semi Condensed** weight 600.
- Use `#212121` for heavy structural elements like the top-most nav bar.
- Ensure body copy uses **Geist** with at least 1.5x line-height.

## Don'ts
- **Wrong:** Using `#ff5532` for body text. **Right:** Use `#212121`. **Reason:** Orange is reserved for high-priority actions/alerts only.
- **Wrong:** Applying a 4px or 8px radius to buttons. **Right:** Keep at 0px. **Reason:** The brand identity is strictly industrial and sharp-edged.
- **Wrong:** Mislabeling sub-brand colors (like blue `#003885`) as the primary brand color. **Right:** Use `#212121` as the primary foundation. **Reason:** Breachrx is a monochrome-first parent brand.

## Similar brands
- CrowdStrike (Industrial, high-contrast, technical)
- Palantir (Achromatic, data-heavy, rigorous)
- Snyk (Technical, developer-focused, structured)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-p1: #212121;
  --color-p2: #ff5532;
  --color-white: #ffffff;
  --color-t1: #f5f5f5;
  --font-heading: 'Saira Semi Condensed', sans-serif;
  --font-body: 'Geist', sans-serif;
  --radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #212121;
  --color-accent: #ff5532;
  --font-heading: "Saira Semi Condensed";
  --font-body: "Geist";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Breachrx system: sharp corners, safety orange background #ff5532, white text, and Saira Semi Condensed 600."
- "Create a section header for 'Incident Response' using Saira Semi Condensed at 48px, color #212121, with a 24px bottom margin."
- "Design a technical card component with a 1px border #e7e7e7, 0px border radius, and Geist 400 body text."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the token data.
- Success/Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific spacing tokens were not fully defined in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://breachrx.com | 1440px | 2026-06-06 |
| About Page | https://breachrx.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://breachrx.com | 390px | 2026-06-06 |