# Ironnet Design System

> High-contrast cybersecurity interface defined by deep navy canvases, vibrant red action signals, and technical Roboto typography at light weights.

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

## TL;DR
Ironnet utilizes a "Cyber-Industrial" aesthetic, leaning heavily on a high-contrast palette of deep navy (#113983, #0d213d) and pure white (#ffffff), punctuated by urgent red (#ff0000) primary actions. The typography is exclusively Roboto, utilizing a signature light weight (300) for large display headings to maintain a technical, sophisticated feel despite the aggressive color contrast. Geometry is characterized by a mix of sharp 0px containers and high-radius 25px "pill" buttons and cards. Hexagonal motifs and blue-to-navy gradients provide the primary decorative layer.

## Signature DNA
1. **The Red Signal** (Pure #ff0000 is used for high-priority CTAs and "Urgent" UI markers like labels, creating a high-alert signal against the navy backgrounds. Observed on Home and About pages.)
2. **Technical Display Light** (Roboto is run at weight 300 for display sizes up to 80px, providing a precise, architectural contrast to the heavy background colors. Observed across all analyzed pages.)
3. **Hexagonal Framing** (UI elements and imagery are frequently contained within or decorated by hexagonal strokes and masks, reinforcing the "Collective Defense" network metaphor.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, text on dark, button backgrounds | 132 | 0.8 | computed_style |
| `{color.black}` | `#000000` | Primary text, footer text | 221 | 0.8 | computed_style |
| `{color.gray.dark}` | `#363636` | Secondary text | 44 | 0.8 | computed_style |
| `{color.gray.light}` | `#d3d3d3` | Borders, dividers | 15 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.navy.primary}` | `#113983` | Hero backgrounds, surface backgrounds | 59 | 0.8 | computed_style |
| `{color.navy.deep}` | `#0d213d` | Dark mode text, deep backgrounds | 54 | 0.8 | computed_style |
| `{color.red.alert}` | `#ff0000` | Primary CTA background, badges, accent text | 32 | 0.8 | computed_style |
| `{color.blue.action}` | `#1e88e5` | Secondary CTA background, link text | 36 | 0.8 | computed_style |
| `{color.blue.tint}` | `#c3e0f7` | Card backgrounds, decorative surfaces | 18 | 0.8 | computed_style |
| `{color.blue.pure}` | `#0000ee` | Legacy link text (decorative_only) | 89 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto | 300, 400, 500, 700 | All roles (Display, Heading, Body) | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 80px | 106px | normal | 300 | Hero stats | `span.punch-single-number` |
| `{type.display.lg}` | 50px | 58px | normal | 300 | Main section heads | `h2.punch-heading-tag` |
| `{type.display.lg.bold}` | 50px | 58px | normal | 700 | Hero emphasis | `strong` |
| `{type.heading.md}` | 36px | 41.76px | normal | 300 | Section sub-heads | `h2.punch-heading-tag` |
| `{type.heading.sm}` | 28px | 37.8px | normal | 300 | Card titles | `h3.hexagon-box-title` |
| `{type.body.lg}` | 16px | 25.92px | normal | 400 | Primary body | `header#header` |
| `{type.body.lg.bold}` | 16px | 25.92px | 2.1px | 700 | Navigation items | `span.menu-item-level-0-inner` |
| `{type.body.sm}` | 14px | 22.68px | normal | 400 | Sub-navigation | `span.menu-item-level-0-inner` |
| `{type.caption}` | 12px | 24px | 1.8px | 700 | Over-labels | `div.menu-level-2-pre-label` |

### Principles
1. **Light Display Weight:** Headlines above 24px should default to weight 300 unless extreme emphasis is required.
2. **Wide Navigation Tracking:** Top-level navigation and labels use aggressive letter spacing (1.8px to 2.1px) for a "stamped" technical feel.
3. **High Contrast Pairing:** White text is used on all Navy and Red surfaces; Black or Dark Gray is reserved for White or Light Blue surfaces.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 103 |
| `{space.sm}` | 15px | 27 |
| `{space.md}` | 20px | 24 |
| `{space.lg}` | 30px | 36 |
| `{space.xl}` | 40px | 36 |
| `{space.xxl}` | 65px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | 570 occurrences |
| `{radius.sm}` | 6px | Input fields, pricing cards | Pricing page |
| `{radius.md}` | 9px | Feature cards | Home page |
| `{radius.pill}` | 25px | Buttons, primary cards | All pages |
| `{radius.full}` | 100% | Icon backgrounds | Home page |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.button}` | `rgba(0, 0, 0, 0.16) 0px -10px 13px 0px` | Primary Red/Blue buttons | 19 occurrences |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 0px 40px 0px` | Floating feature cards | 9 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Home, About, Pricing
**Spec:** Background `{color.red.alert}` (#ff0000) or `{color.blue.action}` (#1e88e5) | Text `{color.white}` (#ffffff) | Radius 25px | Padding 12.5px 65px | Typography `{type.body.lg.bold}` (16px/700) | Shadow `{shadow.button}`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Surface Section
**Role:** Full-width content banding
**Pages observed:** Home, About, Pricing
**Spec:** Background `{color.navy.primary}` (#113983) | Text `{color.white}` (#ffffff) | Radius 0px | Padding 40px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card (Pill)
**Role:** Highlighting specific products or services
**Pages observed:** Home, About
**Spec:** Background `{color.blue.tint}` (#c3e0f7) | Text `{color.navy.primary}` (#113983) | Border 1px `{color.navy.primary}` | Radius 25px | Padding 16px
**States observed:** Default: Captured

#### Alert Badge
**Role:** Categorization labels (e.g., "EBOOK", "CASE STUDY")
**Pages observed:** Home, About
**Spec:** Background `{color.red.alert}` (#ff0000) | Text `{color.white}` (#ffffff) | Radius 23px | Padding 10px 20px | Typography `{type.body.sm.bold}` (14px/700)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Pricing tier display
**Pages observed:** Pricing
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.gray.dark}` (#363636) | Radius 9px | Padding 50px | Shadow `{shadow.card}`
**States observed:** Default: Captured

#### Hexagon Box
**Role:** Branded content container
**Pages observed:** Home
**Spec:** Background Gradient (Navy to Blue) | Text `{color.white}` (#ffffff) | Radius 0px (Masked) | Typography `{type.heading.sm}` (28px/300)
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 65px - 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text reduces to 36px; Buttons stack vertically. |
| Desktop | 1440px | 12-column grid; Horizontal navigation; 3-up card layouts. |

## Imagery & decoration
Ironnet uses technical, abstract imagery including hexagonal network grids, data visualization nodes, and blue-toned photographic overlays. It avoids organic shapes, rounded corners on large containers, and pastel colors.

## Do's
- Use Roboto 300 for all headlines larger than 24px.
- Use #ff0000 for the primary "Request Demo" or "Explore" actions.
- Apply 25px border radius to all interactive buttons.
- Use #113983 for hero section backgrounds.
- Maintain high letter spacing (2.1px) on all caps navigation items.

## Don'ts
- **Wrong:** Using #0000ee for primary buttons. **Right:** Use #ff0000. **Reason:** #0000ee is a legacy text link color and lacks the "alert" signal required for CTAs.
- Do not use bold weights (700) for display headings unless it is a specific emphasized word within a light-weight sentence.
- Do not use soft shadows on buttons; use the directional `{shadow.button}`.
- Do not use rounded corners on section-level containers; keep them sharp (0px).

## Similar brands
- CrowdStrike
- Palo Alto Networks
- Darktrace
- Cloudflare

## Quick start

### CSS Custom Properties
```css
:root {
  --ironnet-navy: #113983;
  --ironnet-navy-deep: #0d213d;
  --ironnet-red: #ff0000;
  --ironnet-blue-action: #1e88e5;
  --ironnet-white: #ffffff;
  --ironnet-font-main: 'Roboto', sans-serif;
  --ironnet-radius-pill: 25px;
  --ironnet-shadow-button: 0px -10px 13px 0px rgba(0, 0, 0, 0.16);
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #113983;
  --color-navy-deep: #0d213d;
  --color-red-alert: #ff0000;
  --color-blue-action: #1e88e5;
  --font-roboto: "Roboto";
  --radius-pill: 25px;
  --shadow-button: 0 -10px 13px 0 rgba(0, 0, 0, 0.16);
}
```

## Agent prompt examples
- "Generate a hero section with a background of #113983, a heading in Roboto 300 at 50px, and a pill-shaped button with background #ff0000."
- "Create a feature card using background #c3e0f7, text color #113983, and a 25px border radius."
- "Design a navigation bar with Roboto 700 text at 16px and letter spacing of 2.1px."

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific spacing tokens (e.g., gutter widths) were not fully quantified.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://ironnet.com | 1440px | 2026-06-06 |
| Pricing | https://ironnet.com/pricing | 1440px | 2026-06-06 |
| About | https://ironnet.com/about | 1440px | 2026-06-06 |