# 18points.de Design System

> High-contrast utility monochrome anchored by electric blue accents and system-default typography.

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

## TL;DR
18points.de utilizes a utilitarian, developer-centric aesthetic that prioritizes legibility and functional density. The system is built on a foundation of achromatic grays (#000000, #333333) and a light gray background (#dddddd), punctuated by a singular high-voltage primary blue (#0070f3). Typography relies entirely on system stacks—SF Pro for standard interface elements and Menlo for technical or code-based content. Components are characterized by sharp or minimal radii (0px to 5px) and a lack of complex elevation, favoring 1px borders to define containment.

## Signature DNA
1. **The Vercel Blue Anchor** (#0070f3 used for primary actions and borders across all pages to signal interactivity against the gray canvas).
2. **Monospace Technicality** (Menlo at 15px is used for code and deployment IDs, reinforcing a "dev-info" aesthetic).
3. **Achromatic Layering** (The use of #dddddd for backgrounds and borders creates a low-saturation environment where black text and blue accents pop).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| N/A | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `color-text-primary` | `#000000` | Primary headlines and labels | 12 | 0.8 | computed_style |
| `color-text-secondary` | `#333333` | Body copy and descriptions | 9 | 0.6 | computed_style |
| `color-bg-canvas` | `#dddddd` | Page background and dividers | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `color-primary` | `#0070f3` | Links, primary borders, and CTAs | 9 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| sf pro text | 400, 700 | UI & Body | Inter | System Default |
| Menlo | 400 | Code & Technical | JetBrains Mono | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `text-body-bold` | 16px | 26.4px | normal | 700 | Emphasis | `strong` |
| `text-body` | 16px | 26.4px | normal | 400 | Standard prose | `p.devinfo-container` |
| `text-code` | 15px | 24.288px | normal | 400 | Technical strings | `code` |
| `text-note` | 14px | 25.2px | normal | 400 | Small annotations | `div.note` |
| `text-ui-sm` | 14px | 25.2px | normal | 400 | Component labels | `Surface` component |
| `text-h1` | 32px | 1.2 | normal | 700 | Page titles | (Observed in screenshot) |
| `text-h2` | 24px | 1.2 | normal | 700 | Section heads | (Observed in screenshot) |
| `text-caption` | 12px | 1.4 | normal | 400 | Metadata | (Observed in screenshot) |

### Principles
1. **System-First Rendering:** No web fonts are loaded; the system relies on local OS stacks for maximum performance and a "native" feel.
2. **Functional Monospace:** Menlo is used specifically for data that requires character-level precision (IDs, error codes).
3. **High Line-Height for Body:** 16px text uses a generous 26.4px line height (1.65x) to maintain readability on gray backgrounds.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 8px | 3 |
| `space-sm` | 12px | 3 |
| `space-md` | 16px | 6 |
| `space-lg` | 20px | 3 |
| `space-xl` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Default container corners | 21 occurrences |
| `radius-sm` | 4px | Input fields | 3 occurrences |
| `radius-md` | 5px | Primary buttons / Action cards | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Standard layout | Default state |
| `border-only` | 1px solid #dddddd | Card containment | pricing/about pages |

## Components
### Tier 1: Foundational
#### Action Link
**Role:** Primary navigation and external documentation links.
**Pages observed:** https://18points.de, https://18points.de/pricing
**Spec:** Background: transparent / Text: #0070f3 / Border: 1px solid #0070f3 / Radius: 5px / Padding: 10.6px 21.3px / Typography: 14px sf pro text
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Dev Info Container
**Role:** Displaying technical deployment metadata.
**Pages observed:** https://18points.de, https://18points.de/about
**Spec:** Background: #ffffff / Text: #000000 / Border: 1px solid #dddddd / Radius: 0px / Padding: 16px / Typography: 16px sf pro text
**States observed:** Default: captured

#### Code Block
**Role:** Inline technical identifiers.
**Pages observed:** https://18points.de, https://18points.de/pricing
**Spec:** Background: transparent / Text: #000000 / Typography: 15px Menlo
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Status Note
**Role:** Contextual troubleshooting or informational notes.
**Pages observed:** https://18points.de, https://18points.de/about
**Spec:** Background: transparent / Text: #0070f3 / Typography: 14px sf pro text
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 32px |
| Container Padding | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked containers, text-align: center for status notes |
| Desktop | 1440px | Centered fixed-width containers |

## Imagery & decoration
The brand avoids photography and illustrative icons. Visual interest is generated through:
- **Code Strings:** Raw text strings as visual texture.
- **Borders:** 1px solid lines in #0070f3 or #dddddd to define hierarchy.
- **Achromatic Contrast:** Pure white cards on #dddddd gray backgrounds.

## Do's
- Use `#0070f3` for all interactive elements.
- Use `Menlo` for any string that looks like an ID or system output.
- Maintain a `1.65x` line-height for body paragraphs.
- Use `0px` border radius for large containers.
- Set backgrounds to `#dddddd` for page-level canvas.

## Don'ts
- Do not use rounded corners exceeding `5px`.
- Do not use drop shadows; use 1px borders for depth.
- Do not introduce secondary accent colors; the system is strictly monochrome + blue.
- **Wrong:** Using a generic blue like `#0000FF`. **Right:** Use `#0070f3`. **Reason:** Brand consistency with the Vercel-inspired palette.
- Do not use serif fonts.

## Similar brands
- Vercel (Platform UI)
- Linear (Technical density)
- GitHub (Utility-first documentation)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #0070f3;
  --color-bg: #dddddd;
  --color-text: #000000;
  --color-text-muted: #333333;
  --font-sans: "sf pro text", -apple-system, sans-serif;
  --font-mono: "Menlo", monospace;
  --radius-md: 5px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0070f3;
  --color-canvas: #dddddd;
  --font-sans: "sf pro text";
  --font-mono: "Menlo";
  --radius-action: 5px;
}
```

## Agent prompt examples
- "Create a card component with a 1px #dddddd border, 0px radius, and a 16px padding using #000000 text."
- "Generate a primary button using #0070f3 for the text and border, with a 5px radius and 14px SF Pro Text."
- "Design a technical info row using Menlo at 15px for the ID string and SF Pro Text at 16px for the label."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Error/Success semantic colors were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://18points.de | 1440px | 2026-06-06 |
| Pricing | https://18points.de/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://18points.de | 390px | 2026-06-06 |