# Sprocketsecurity Design System

> High-contrast technical industrialism defined by heavy-weight sans-serifs, sharp geometric corners, and a signature crimson accent against deep navy foundations.

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

## TL;DR
Sprocketsecurity utilizes a "monochrome-plus-one" system where a high-voltage red (#b5231d) punctuates a foundation of deep navy (#111827) and stark white (#ffffff). The typography is dominated by **Subito**, used at extreme weights (800) for headlines to create a sense of industrial durability. Layouts are strictly geometric with a total rejection of rounded corners (0px radius) for primary UI elements, favoring sharp, technical borders. Monospaced type (**Geist Mono**) is used for eyebrows and technical metadata, reinforcing the platform's offensive security positioning.

## Signature DNA
1. **The 800-Weight Anchor** (Subito at weight 800 is used for all primary headings and even small button text, creating a "heavy" and authoritative visual footprint across all pages.)
2. **Sharp-Edge Geometry** (A global radius of 0px is applied to buttons, cards, and input fields, signaling a precise, technical environment.)
3. **Navy/Red Polarity** (The brand avoids standard grays in favor of Navy-500 (#111827) for dark surfaces and Red-500 (#b5231d) for all primary actions and brand accents.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary background, button text | 92 | 1 | `--color-white` |
| `{colors.navy-700}` | `#212529` | Primary body text | 32 | 1 | `--navy-700` |
| `{colors.text-black}` | `#111216` | Heading text | 25 | 1 | `--color-text-primary` |
| `{colors.dark-gray}` | `#383838` | Secondary body text | 66 | 1 | `--text-dark-gray` |
| `{colors.gray-10}` | `#d6d7d9` | Borders, subtle surfaces | 10 | 1 | `--color-gray-10` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.red-500}` | `#b5231d` | Primary CTA, brand accents | 44 | 1 | `--red-500` |
| `{colors.navy-500}` | `#111827` | Dark mode surfaces, footer | 3 | 1 | `--navy-500` |
| `{colors.navy-mid}` | `#28395c` | Secondary surfaces (About page) | 10 | 1 | `--navy-mid` |
| `{colors.cyan}` | `#32c4e9` | Decorative only (1 element) | 1 | 1 | `--color-cyan` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| **Subito** | 400, 500, 600, 700, 800 | Primary Brand / UI | Archivo Black (for 800) | Custom/Licensed |
| **Geist Mono** | 400, 800 | Technical / Eyebrows | JetBrains Mono | Open Source |
| **Roboto** | 900 | Testimonial emphasis | Roboto Black | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display-mega}` | 58px | 60px | normal | 800 | Page Hero | `h1.page-title` |
| `{type.heading-lg}` | 32px | 38.4px | normal | 800 | Section Headers | `h3.platform-callouts__callout-heading` |
| `{type.heading-md}` | 24px | 28.8px | normal | 800 | Card Headers | `h3` |
| `{type.eyebrow}` | 20px | 20px | 2px | 400 | Section Labels | `div.platform-callouts__eyebrow-text.font-mono` |
| `{type.body-lg}` | 18px | 32px | normal | 800 | Pricing Titles | `h3.pricing-card__title` |
| `{type.body-md}` | 16px | 24px | normal | 400 | General Body | `section.home-hero` |
| `{type.button}` | 16px | 16px | normal | 800 | Primary CTA | `a.btn` |
| `{type.mono-sm}` | 14px | 21px | 2px | 400 | Metadata / Tags | `span.font-mono` |

### Principles
1. **Heavyweight Priority:** Use weight 800 for any text that needs to command attention, including buttons.
2. **Technical Eyebrows:** Always use Geist Mono with 2px letter spacing for labels sitting above headings.
3. **High Contrast:** Text must maintain at least 6.5:1 contrast (Red-500 on White) or higher.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 39 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 42 |
| `{space.lg}` | 24px | 31 |
| `{space.xl}` | 48px | 17 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Buttons, Cards, Inputs | Global (293 occurrences) |
| `{radius.panel}` | 40px | Testimonial Cards | Pricing page cards |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All primary UI | Global |
| `{elev.none}` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px` | Default button state | Button component |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call-to-action
**Pages observed:** Home, Pricing, About
**Spec:** Background: `transparent` / Text: `#f8f9fa` / Border: `1px solid #f8f9fa` / Radius: `0px` / Padding: `12px 24px` / Typography: `Subito 800`
**States observed:** Default: Captured | Hover: Not captured

#### Platform Badge
**Role:** Technical categorization
**Pages observed:** Home, Pricing
**Spec:** Background: `transparent` / Text: `#111216` / Border: `1px solid #d6d7d9` / Radius: `0px` / Padding: `4px 8px` / Typography: `Geist Mono 400`

### Tier 2: Patterns

#### Pricing Card
**Role:** Tiered service display
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Text: `#212529` / Border: `2px solid #d6d7d9` / Radius: `0px` / Padding: `48px`

#### Testimonial Slider
**Role:** Social proof
**Pages observed:** Home, Pricing
**Spec:** Background: `#e1e5f2` / Text: `#111216` / Radius: `40px` / Padding: `46px`

### Tier 3: Surface-specific

#### Global Footer
**Role:** Navigation and compliance
**Pages observed:** All
**Spec:** Background: `#111827` / Text: `#ffffff` / Typography: `Subito 400` / Padding: `64px 0px`

#### Hero Section
**Role:** Primary entry point
**Pages observed:** Home, About
**Spec:** Background: `#111827` (Navy-500) / Text: `#ffffff` / Typography: `Subito 800` (Display)

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 48px to 96px |
| Grid Gap | 24px |

## Do's
- Use weight 800 for all primary and secondary headings.
- Maintain 0px border radius on all interactive elements.
- Use Geist Mono for technical labels and "eyebrow" text.
- Apply Red-500 (#b5231d) for primary action highlights only.
- Ensure all borders use at least 1px width in Gray-10 (#d6d7d9).

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px sharp corners. **Reason:** Brand identity is industrial and technical.
- **Wrong:** Using Red-500 for large background surfaces. **Right:** Use Navy-500 or White. **Reason:** Red is reserved for high-signal accents.
- **Wrong:** Using standard sans-serif for technical tags. **Right:** Use Geist Mono. **Reason:** Monospace signals the "security/code" nature of the product.
- Do not use gradients on buttons or cards.
- Do not use drop shadows on primary UI components.

## Similar brands
- CrowdStrike
- Snyk
- HashiCorp
- Palantir

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-red-500: #b5231d;
  --color-navy-500: #111827;
  --color-white: #ffffff;
  --color-text-primary: #111216;
  --font-main: 'Subito', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Subito weight 800, 16px size, with a 1px border of #b5231d and 0px border radius."
- "Create a technical card component with a #ffffff background, 2px border of #d6d7d9, and 0px corners."
- "Design a section header with a Geist Mono eyebrow (2px spacing) and a Subito 800 main title in #111216."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoint transitions for the 1200px container were not detailed in the source.

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