# Aptly.de Design System

> High-contrast monochrome architecture punctuated by technical DIN typography and topographic line-art.

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

## TL;DR
Aptly.de utilizes a strict monochrome foundation where #000000 and #ffffff carry the entire structural weight. The system is defined by a "brutalist-corporate" aesthetic, using sharp 0px borders and heavy horizontal dividers to segment content. Typography relies on the DIN family, specifically DIN Medium for high-impact 76px display headers and DIN Regular for 20px body copy. While a broad palette of "vivid" tokens exists in the CSS variables, the rendered interface suppresses these in favor of pure black and white, reserving color only for specific functional moments like the "Vivid Green Cyan" (#00d084) cookie consent action.

## Signature DNA
1. **Topographic Wireframes** (White vector line-art on black backgrounds, used as a hero-section floor to signal "digital transformation" and technical depth.)
2. **DIN Display Hierarchy** (Massive 76px DIN Medium headlines that use weight and scale rather than color to establish dominance.)
3. **Sharp Segmentation** (Heavy 1px black horizontal rules and 0px border radii create a rigid, architectural grid system.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, hero backgrounds, dividers | 6 | 1 | Computed Style |
| `{color.white}` | `#ffffff` | Page canvas, button text, hero typography | 17 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.vivid-green-cyan}` | `#00d084` | Primary action (Cookie Accept) | 2 | 0.9 | `--wp--preset--color--vivid-green-cyan` |
| `{color.vivid-cyan-blue}` | `#0693e3` | Decorative/Secondary (Decorative only) | <5 | 0.7 | `--wp--preset--color--vivid-cyan-blue` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| `dinmedium` | 700 | Display, primary headers | Roboto Medium | Proprietary |
| `dinregular` | 400 | Body, subheaders | Roboto Regular | Proprietary |
| `dinlight` | 200 | Small headings, intro text | Roboto Light | Proprietary |
| `Helvetica` | 700 | Fallback display, page titles | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 76px | normal | normal | 700 | Hero H1 | `h1.dinblack.black-trans-bg` |
| `{type.display-lg}` | 76px | normal | normal | 700 | Page Titles | `h1.page-title` |
| `{type.heading-md}` | 31px | 46.8px | normal | 700 | Link Headers | `a:nth-of-type(1)` |
| `{type.heading-sm}` | 25px | 37.5px | normal | 200 | Intro Text | `div.black-trans-bg` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Article Body | `article#post-8` |
| `{type.body-link}` | 20px | 30px | normal | 400 | Contact Links | `a.contact-link.dinregular` |
| `{type.label}` | 14px | normal | normal | 400 | Navigation | `nav a` |
| `{type.caption}` | 12px | normal | normal | 200 | Footer/Legal | `footer span` |

### Principles
1. **Vertical Rhythm via Line-Height:** Body text maintains a consistent 1.5x ratio (20px size / 30px height).
2. **Achromatic Hierarchy:** Importance is signaled by font-weight (DIN Medium vs DIN Light) rather than color shifts.
3. **Tight Display Tracking:** Display sizes at 76px use "normal" spacing, relying on the condensed nature of DIN for impact.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 2px | 4 |
| `{space.sm}` | 5px | 3 |
| `{space.md}` | 30px | 3 |
| `{space.xl}` | 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and containers | 19 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All surfaces are flat | `shadow: none` observed on all pages |

## Components
### Tier 1: Foundational

#### Primary Action (Cookie)
**Role:** High-visibility consent action.
**Pages observed:** All
**Spec:** Background `#00d084` / Text `#000000` / Radius `0px` / Padding `5px 30px` / Typography `20px`
**States observed:** Default | Hover: not captured

#### Horizontal Divider
**Role:** Section separation.
**Pages observed:** aptly.de, aptly.de/pricing
**Spec:** Border-top `1px solid #000000` / Width `100%` / Margin-bottom `30px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Content Card
**Role:** Customer stories and partner features.
**Pages observed:** aptly.de, aptly.de/about
**Spec:** Background `#ffffff` / Text `#000000` / Radius `0px` / Padding `30px` / Border-top `1px solid #000000`
**States observed:** Default: captured

#### Hero Section
**Role:** Main entrance messaging.
**Pages observed:** aptly.de, aptly.de/about
**Spec:** Background `#000000` / Text `#ffffff` / Typography `76px DIN Medium` / Graphic `Topographic Line-art`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Tier
**Role:** Service package display.
**Pages observed:** aptly.de/pricing
**Spec:** Background `#ffffff` / Border `1px solid #000000` / Radius `0px` / Padding `30px`
**States observed:** Default: captured

#### Partner Logo Grid
**Role:** Social proof.
**Pages observed:** aptly.de
**Spec:** Filter `grayscale(100%)` / Max-height `60px` / Gap `80px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Display type scales to 42px; 1-column stack; Navigation becomes hamburger menu. |
| Desktop | 1440px | 12-column grid; 76px display type. |

## Imagery & decoration
Aptly uses abstract, white-on-black topographic line-art to represent complexity and data flow. Photography is strictly professional headshots or partner logos, often treated with grayscale filters to maintain the monochrome system.

## Do's
- Use `#000000` for all primary structural dividers.
- Set all border-radii to `0px` for a sharp, architectural feel.
- Use `DIN Medium` at `76px` for primary page headers.
- Maintain `80px` vertical spacing between major content sections.
- Ensure all partner logos are rendered in grayscale.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for a primary button. **Right:** Use `#000000` or `#ffffff`. **Reason:** Saturated tokens are for sub-brand/decorative use only; the parent brand is monochrome.
- Do not use rounded corners on any UI element.
- Do not use drop shadows; the brand relies on flat hairlines for depth.
- Do not use serif fonts for body or display copy.

## Similar brands
- IBM (Type-first, monochrome foundation)
- Pentagram (Architectural grids, high-contrast)
- Huge Inc (Bold typography, minimal color)

## Quick start

```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-action: #00d084;
  --font-display: "dinmedium", "Helvetica", sans-serif;
  --font-body: "dinregular", sans-serif;
  --radius-sharp: 0px;
  --space-section: 80px;
}
```

## Agent prompt examples
- "Generate a hero section for Aptly.de using a black background, white 76px DIN Medium text, and a topographic line-art overlay at the bottom."
- "Create a content card with a 1px black top border, 0px border radius, and 30px internal padding using DIN Regular for the body text."
- "Design a primary button for the cookie banner using #00d084 background and black text with no rounded corners."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- The specific usage of "Vivid Purple" and "Vivid Red" tokens was not observed on the analyzed pages, suggesting they are reserved for error states or sub-brands not yet mapped.
- Mobile navigation transition details (animation) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://aptly.de | 1440px | 2026-06-06 |
| Pricing | https://aptly.de/pricing | 1440px | 2026-06-06 |
| About | https://aptly.de/about | 390px | 2026-06-06 |