# Securden Design System

> High-contrast enterprise security architecture defined by heavy Roboto headers, deep indigo voids, and sharp-edged functionalism.

**Source:** https://securden.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Securden employs a high-density enterprise aesthetic that balances a pure white foundation `#ffffff` with deep monochromatic surfaces `#000000`. The typography is dominated by **Roboto**, utilizing an extreme Black weight (900) for primary display headlines to project industrial-grade authority. While the system is classified as monochrome, it strategically deploys high-saturation functional accents—specifically an orange primary CTA `#fd7e14` and green success indicators `#28a745`—to pierce through the high-contrast layout. Geometry is predominantly sharp (`0px` radius), with rare 25px "pill" exceptions for high-level interactive elements.

## Signature DNA
1. **The Roboto 900 Anchor** (Heavyweight 64px display type with 1px tracking used for all primary hero statements to establish immediate technical dominance).
2. **Achromatic High-Contrast Voids** (Large sections of pure `#000000` or deep indigo backgrounds used to frame white text, creating a "dark mode" enterprise feel within a light-mode site).
3. **Functional Sharpness** (A strict `0px` border-radius policy for almost all containers and secondary buttons, reserving rounded corners strictly for primary "Book a Demo" actions).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 22 | 1.0 | `--white` |
| `{color.ink}` | `#000000` | Primary text and dark-section backgrounds | 6 | 0.6 | Computed |
| `{color.slate}` | `#5d6077` | Secondary body text and UI labels | 4 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.action}` | `#fd7e14` | Primary CTA background (Orange) | 1 | 0.8 | `--orange` |
| `{color.success}` | `#28a745` | Secondary CTAs and success states | 1 | 0.8 | `--green` |
| `{color.brand-blue}` | `#007bff` | Links and primary brand signal | 1 | 0.8 | `--primary` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.error}` | `#dc3545` | Validation and destructive actions |
| `{color.warning}` | `#ffc107` | Warning states and alerts |
| `{color.info}` | `#17a2b8` | Informational badges |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 400, 500, 900 | Display, Headings, UI | N/A (Google Font) | Apache 2.0 |
| Open Sans | 700 | Button labels, specific headers | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 64px | 76.8px | 1px | 900 | Hero H1 | `h1.main-content__title` |
| `{type.h2}` | 24px | 43.2px | normal | 700 | Button labels | `a.btn.btn--green` |
| `{type.lead}` | 22px | 38.08px | normal | 400 | Hero sub-text | `p.main-content__lead.lead` |
| `{type.nav}` | 16px | 25.6px | normal | 500 | Top navigation | `li.pnavitem.dropdownmenu` |
| `{type.body}` | 16px | 25.6px | normal | 400 | General content | `div.event-update` |
| `{type.small}` | 14px | 25.6px | normal | 400 | Utility links | `span.nav-super-item.home-link` |

### Principles
1. **Extreme Weight Contrast:** Use Roboto 900 for headlines and 400 for body; avoid middle-weights (600/700) in display contexts.
2. **Generous Leading:** Body text maintains a 1.6x line-height (25.6px on 16px base) for readability in technical documentation.
3. **Uppercase Utility:** Small labels and badges frequently use uppercase with increased tracking (observed in "Designed for the AI Era" badge).

## Spacing
**Base unit:** 5px (derived from 10/15/20/45 scale)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 10px | 5 |
| `{space.md}` | 15px | 11 |
| `{space.lg}` | 20px | 4 |
| `{space.xl}` | 45px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default for buttons, inputs, and cards | 27 occurrences |
| `{radius.pill}` | 25px | Primary "Book a Demo" and "Download" CTAs | 3 occurrences |

## Elevation
Not captured in source. The system appears visually flat, relying on color blocking rather than shadows for depth.

## Components
### Tier 1: Foundational

#### Button Primary
**Role:** Main conversion action (Book a Demo)
**Pages observed:** https://securden.com
**Spec:** Background: `#fd7e14` / Text: `#ffffff` / Radius: `25px` / Typography: `{type.h2}`
**States observed:** Default | Hover: Captured (darker shade)

#### Button Secondary
**Role:** Secondary actions (Download Trial)
**Pages observed:** https://securden.com
**Spec:** Background: `#28a745` / Text: `#ffffff` / Radius: `0px` / Typography: `{type.h2}`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Top Navigation
**Role:** Global site header
**Pages observed:** https://securden.com
**Spec:** Background: `#ffffff` / Text: `#5d6077` / Height: 80px / Typography: `{type.nav}`
**States observed:** Default | Hover: Captured

#### Feature Badge
**Role:** Small context labels (e.g., "Designed for the AI Era")
**Pages observed:** https://securden.com
**Spec:** Background: `#000000` (semi-transparent) / Border: `1px solid #fd7e14` / Radius: `25px` / Typography: 12px Roboto 500

### Tier 3: Surface-specific

#### Hero Section
**Role:** Primary entry point
**Pages observed:** https://securden.com
**Spec:** Background: `#000000` / Text: `#ffffff` / Padding: `{space.xl}`
**States observed:** Default

#### Footer
**Role:** Global site map
**Pages observed:** https://securden.com
**Spec:** Background: `#000000` / Text: `#ffffff` / Link Text: `#5d6077` / Typography: `{type.small}`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 80px - 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales to 32px |
| Desktop | 1440px | Standard 12-column grid |

## Imagery & decoration
- **Technical Grids:** Uses blue/indigo dot-matrix or grid patterns in background voids to signal "Security/Network" context.
- **Brand Motifs:** Small orange diamond icons used as bullet points in feature lists.
- **Avoidance:** Avoids soft shadows, rounded corners on containers, and pastel colors.

## Do's
- Use **Roboto 900** for all primary headlines.
- Set primary conversion buttons to **25px border-radius**.
- Use **#fd7e14 (Orange)** exclusively for the highest-priority site actions.
- Maintain a **0px radius** for secondary buttons and form fields.
- Use **#5d6077** for secondary body text to reduce visual vibration against white.

## Don'ts
- **Wrong:** Using `#007bff` (Blue) for a primary CTA button. **Right:** Use `#fd7e14`. **Reason:** Blue is reserved for text links and brand signals; orange is the conversion driver.
- **Wrong:** Applying rounded corners to feature cards. **Right:** Keep corners at `0px`. **Reason:** The brand identity is built on sharp, industrial precision.
- **Wrong:** Using Roboto Light or Thin for headlines. **Right:** Use Roboto 900. **Reason:** The system relies on heavy typographic weight for authority.

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

## Quick start
```css
/* CSS Custom Properties */
:root {
  --color-primary: #fd7e14;
  --color-success: #28a745;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --font-display: 'Roboto', sans-serif;
  --weight-display: 900;
  --radius-pill: 25px;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a #000000 background, a 64px Roboto 900 headline in white, and a centered orange pill button (#fd7e14)."
- "Create a feature grid using 0px border-radius cards, #ffffff background, and 16px Roboto 400 body text in #5d6077."
- "Design a navigation bar with a white background, 16px Roboto 500 links in #5d6077, and a sharp-edged green 'Download' button."

## Known gaps
- Hover and Active states for tertiary buttons were not captured.
- Specific mobile breakpoint transitions for padding were not fully documented.
- Shadow tokens are missing as the analyzed pages utilize flat design.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://securden.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://securden.com | 390x844 | 2026-06-06 |