# Tentwentyfour.lu Design System

> High-contrast technical utility anchored by a monochrome foundation and systematic blue accents.

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

## TL;DR
Tentwentyfour.lu utilizes a high-contrast monochrome system that prioritizes legibility and technical clarity. The interface is built on a near-white canvas (#fefefe) with deep black (#000000) and dark gray (#555555) typography. A specific blue accent (#0275d8) is reserved for interactive text and links, providing the only consistent chromatic signal across the core experience. The layout is structured through sharp-edged containers and a rigorous typographic hierarchy using system sans-serif fonts, reflecting a "geeks at heart" engineering-first aesthetic.

## Signature DNA
1. **Achromatic Rigor** (The primary interface is strictly monochrome, using #000000 and #fefefe to establish a high-contrast, professional environment.)
2. **Systemic Blue Interactivity** (The use of #0275d8 as the exclusive color for links and interactive elements creates a predictable, utility-driven navigation pattern.)
3. **Sharp Geometry** (A preference for 0px border radii on major containers and surfaces, signaling a precise, technical architectural style.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#fefefe` | Page background, primary surface, button text | 48 | 0.8 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary text, borders, dark surface backgrounds | 21 | 0.8 | computed_style |
| `{color.ink.secondary}` | `#555555` | Body text, descriptive labels | 66 | 0.8 | computed_style |
| `{color.surface.subtle}` | `#f8f8f8` | Alternating section backgrounds | 6 | 0.6 | computed_style |
| `{color.ink.muted}` | `#aaaaaa` | Deemphasized text, secondary labels | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.link}` | `#0275d8` | Primary interactive text, link color | 46 | 0.8 | computed_style |
| `{color.accent.alt}` | `#0088cc` | Secondary link state (decorative_only) | 8 | 0.6 | computed_style |
| `{color.accent.border}` | `#21b6c8` | Specialized borders or icons (decorative_only) | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| -apple-system | 100, 400, 500, 700 | Heading, Display, UI | Inter | System |
| Roboto | 400, 500 | Body, Captions | Roboto | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 44px | normal | 700 | Hero display text | `strong:nth-of-type(1)` |
| `{type.h1}` | 36px | 39.6px | normal | 400 | Section headers | `h3.header` |
| `{type.h2}` | 24px | 26.4px | normal | 500 | Sub-section headers | `h4` |
| `{type.h3}` | 23px | 24.75px | normal | 400 | Address headers | `h3.address` |
| `{type.body.ui}` | 16px | 20px | normal | 400 | Form inputs | `input#contact-name` |
| `{type.body.md}` | 15px | 22.5px | normal | 400 | Default body text | `div#body-wrapper` |
| `{type.body.bold}` | 15px | 22.5px | normal | 700 | Emphasized body | `strong` |
| `{type.caption}` | 11px | 14px | normal | 400 | Small annotations | `div:nth-of-type(2)` |

### Principles
1. **System Font Priority:** Uses `-apple-system` for all structural headings to ensure native performance and familiarity.
2. **High Contrast Ratios:** Black text on #fefefe white ensures maximum accessibility for technical documentation.
3. **Tight Heading Leading:** Display and H1 sizes use a tight 1.1x line-height ratio for a compact, impactful look.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 4 |
| `{space.sm}` | 8px | 29 |
| `{space.md}` | 12px | 25 |
| `{space.lg}` | 16px | 23 |
| `{space.xl}` | 20px | 20 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for sections, surfaces, and large cards | 156 occurrences |
| `{radius.sm}` | 4px | Form inputs and specific interactive cards | 37 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px` | Floating UI elements or map controls | 2 occurrences |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** User data entry in contact forms.
**Pages observed:** https://tentwentyfour.lu
**Spec:** Background: `#222222` / Text: `#dddddd` / Border: `#dddddd` / Radius: `4px` / Padding: `8px 12px` / Typography: `16px`
**States observed:** Default: captured | Hover/Focus: not captured

#### Surface
**Role:** Background containers for footer or metadata sections.
**Pages observed:** https://tentwentyfour.lu
**Spec:** Background: `#f5f5f5` / Text: `#555555` / Border: `#555555` / Radius: `0px` / Padding: `0px` / Typography: `11px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Card (Standard)
**Role:** Content grouping for services and portfolio items.
**Pages observed:** https://tentwentyfour.lu
**Spec:** Background: `#ffffff` / Text: `#0275d8` / Border: `rgba(0, 0, 0, 0.125)` / Radius: `4px` / Padding: `0px` / Typography: `15px`
**States observed:** Default: captured

#### Card (Overlay)
**Role:** High-emphasis content blocks with dark backgrounds.
**Pages observed:** https://tentwentyfour.lu
**Spec:** Background: `rgba(0, 0, 0, 0.65)` / Text: `#0275d8` / Border: `#0275d8` / Radius: `3.75px` / Padding: `20px` / Typography: `15px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (standard container) |
| Section Padding | 45px (vertical) |
| Grid Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Navigation collapses to hamburger; grid columns stack vertically. |
| Desktop | 1440px | Multi-column grid (3-up for services, 4-up for portfolio). |

## Imagery & decoration
The brand uses high-quality photography of infrastructure (train stations, servers) as hero backgrounds, often overlaid with dark semi-transparent masks. Iconography is functional and monochrome, using standard web-font icons for services.

## Do's
- Use `#0275d8` for all primary text links to maintain navigational consistency.
- Maintain a `#fefefe` background for primary content areas to ensure high contrast.
- Apply `0px` border radius to section-level containers.
- Use `-apple-system` for headings to maintain a technical, clean aesthetic.
- Ensure `40px` bold headings are used for primary hero statements.

## Don'ts
- **Wrong:** Using `#0275d8` as a background color for large sections. **Right:** Use it only for text links or small accents. **Reason:** The brand relies on a monochrome canvas; saturating large areas breaks the utility-first aesthetic.
- **Wrong:** Applying rounded corners to main page sections. **Right:** Keep section edges at `0px`. **Reason:** Sharp edges are a core part of the technical "Signature DNA."
- **Wrong:** Introducing non-monochrome colors for body text. **Right:** Stick to `#555555` for readability.

## Similar brands
- DigitalOcean
- GitHub (Marketing pages)
- Linode

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #fefefe;
  --color-ink-primary: #000000;
  --color-ink-secondary: #555555;
  --color-accent-link: #0275d8;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-sharp: 0px;
  --radius-input: 4px;
}
```

## Agent prompt examples
- "Generate a service card component using a #ffffff background, a 4px border radius, and #0275d8 for the title link text."
- "Create a hero section with a dark image background, #fefefe text, and a 40px bold heading using system fonts."
- "Design a contact form with #222222 background inputs and 4px rounded corners."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale for display sizes was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://tentwentyfour.lu | 1440x900 | 2026-06-06T05:22:22Z |