# Wiredenterprise.eu Design System

> Light-weight geometric sans-serif typography anchored by a singular terracotta-red accent on a stark white canvas.

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

## TL;DR
Wiredenterprise.eu utilizes a clean, monochrome foundation that relies heavily on the **Fira Sans** and **Roboto Flex** families at a signature weight of 300. The interface is primarily achromatic, using shades of gray (#666666, #393939) for text and structural elements against a pure white (#ffffff) background. A single high-contrast accent color, Terracotta Red (#ca5a5b), is reserved for primary calls to action and critical brand highlights. Layouts are spacious with a 4px base unit, utilizing sharp edges (0px radius) for most containers and a soft 5px radius for interactive elements.

## Signature DNA
1. **The 300-Weight Display** (Roboto Flex at weight 300 is used for primary headers, creating a light, airy, and professional technical aesthetic that avoids the "heavy" feel of traditional enterprise sites.)
2. **Terracotta Punctuation** (The use of #ca5a5b as the exclusive non-achromatic color for buttons and badges creates immediate visual hierarchy against the #666666 body text.)
3. **Sharp Geometry** (A strict adherence to 0px border radii for sections and images, contrasted only by 5px radii on buttons, signals a precise, engineering-focused identity.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and primary surface | 13 | 1.0 | Computed Style |
| `{color.text.body}` | `#666666` | Default running text and secondary labels | 61 | 0.8 | Computed Style |
| `{color.text.strong}` | `#393939` | Primary headings and emphasized text | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent}` | `#ca5a5b` | Primary CTA background, active borders, brand highlights | 3 | 1.0 | `--ac-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto Flex | 300 | Display / H1 | Roboto Flex | Google Fonts |
| Fira Sans | 300, 400, 500, 700 | Body / Headings / UI | Fira Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 46px | 78.2px | normal | 300 | Hero text | `span.sit.b` |
| `{type.display.md}` | 42px | 54.6px | normal | 300 | Page H1 | `h1` |
| `{type.heading.lg}` | 30px | 40.5px | normal | 300 | Section H2 | `h2:nth-of-type(1)` |
| `{type.heading.md}` | 26px | 39px | normal | 300 | Sub-section labels | `span.sit.b` |
| `{type.heading.sm}` | 24px | 36px | normal | 300 | Feature H3 | `h3` |
| `{type.ui.md}` | 20px | 32px | normal | 500 | Bold UI emphasis | `strong:nth-of-type(1)` |
| `{type.ui.button}` | 20px | 32px | normal | 400 | Button labels | `a.b-btn-l` |
| `{type.body.md}` | 18px | 28.8px | normal | 300 | Default body text | `div.b-img-w` |

### Principles
1. **Lightweight default.** Headings and body text default to weight 300 to maintain a modern, technical feel.
2. **Generous line heights.** Display sizes use line-heights up to 1.7x (78.2px for 46px text) to ensure readability in dense information environments.
3. **Achromatic hierarchy.** Contrast is managed through gray values (#393939 vs #666666) rather than color shifts.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 11 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 20px | 3 |
| `{space.xl}` | 40px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Images, section containers, layout blocks | 72 occurrences |
| `{radius.sm}` | 5px | Buttons, form inputs, interactive surfaces | 7 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces observed | Component analysis |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Contact us")
**Pages observed:** https://wiredenterprise.eu
**Spec:** 
- Background: `{color.accent}` (#ca5a5b)
- Text: `{color.canvas}` (#ffffff)
- Radius: `{radius.sm}` (5px)
- Typography: `{type.ui.button}` (20px / 400)
- Padding: Vertical spacing derived from 32px line-height.
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 3: Surface-specific

#### Content Surface
**Role:** Content grouping and image wrappers
**Pages observed:** https://wiredenterprise.eu
**Spec:** 
- Background: transparent / rgba(0, 0, 0, 0)
- Text: `{color.text.body}` (#666666)
- Border: 0px
- Radius: `{radius.sm}` (5px)
- Typography: 18px Fira Sans
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max content width | ~1200px |
| Section padding | 40px (`{space.xl}`) |
| Element gap | 20px (`{space.lg}`) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger menu; hero text stacks vertically. |
| Desktop | 1440px | Horizontal navigation visible; multi-column feature grids. |

## Imagery & decoration
- **Hexagonal Grid:** Backgrounds feature large-scale, thin-stroke hexagonal patterns in ochre/gold tones.
- **Illustration Style:** Flat, vector-based human characters with blue/teal accents used for storytelling.
- **Avoidance:** No drop shadows, no gradients on UI elements, no rounded corners on images.

## Do's
- Use **Roboto Flex 300** for all primary page titles.
- Reserve **#ca5a5b** strictly for primary actions and brand-level highlights.
- Maintain **0px radius** on all non-interactive containers.
- Use **#666666** for standard body copy to reduce harsh contrast on white backgrounds.
- Ensure section spacing follows the **40px (`{space.xl}`)** rhythm.

## Don'ts
- **Wrong:** Using #000000 for body text. **Right:** Use #666666. **Reason:** The brand relies on a softer achromatic scale for a professional feel.
- **Wrong:** Applying rounded corners to images. **Right:** Keep images at 0px radius. **Reason:** Sharp edges are a core brand geometry.
- **Wrong:** Using bold weights (700) for display headers. **Right:** Use weight 300. **Reason:** The "Signature DNA" is defined by light-weight typography.

## Similar brands
- IBM (Type-first, geometric)
- Siemens (Industrial, clean, technical)
- ABB (Enterprise monochrome with red accents)

## Quick start

### CSS Custom Properties
```css
:root {
  --ac-color: #ca5a5b;
  --ac-basic: #ffffff;
  --text-body: #666666;
  --text-strong: #393939;
  --font-display: 'Roboto Flex', sans-serif;
  --font-body: 'Fira Sans', sans-serif;
  --radius-interactive: 5px;
  --space-section: 40px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "accent": { "value": "#ca5a5b" },
    "canvas": { "value": "#ffffff" },
    "text": {
      "body": { "value": "#666666" },
      "strong": { "value": "#393939" }
    }
  },
  "font": {
    "family": {
      "display": { "value": "Roboto Flex" },
      "body": { "value": "Fira Sans" }
    },
    "weight": {
      "signature": { "value": "300" }
    }
  }
}
```

## Agent prompt examples
- "Create a primary CTA button using #ca5a5b background, white text, and a 5px border radius with Fira Sans weight 400."
- "Design a section header using Roboto Flex at 42px, weight 300, and color #393939."
- "Layout a content card with 0px border radius, no shadow, and 18px Fira Sans text in #666666."

## Known gaps
- Hover and active states for buttons were not captured in the initial crawl.
- Specific mobile breakpoint transitions for font sizes (fluid typography) were not fully mapped.
- Form validation states (Success/Error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://wiredenterprise.eu | 1440px | 2026-06-06 |
| Mobile Home | https://wiredenterprise.eu | 390px | 2026-06-06 |