---
title: "Enter GmbH design system"
variant: extended
source: https://enter-support.de/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/enter-support-de)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Enter GmbH · Design System

> Calm geometry for practical IT support

**Theme:** light · **Industry:** other · **Source:** https://enter-support.de/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Enter GmbH presents its IT services through a spacious, typography-led homepage with restrained geometric illustrations. Muted aqua and warm off-white section bands are punctuated by vivid orange, while practical service and client information stays direct and readable.

## North star

Pair broad, quiet color fields and spacious content blocks with precise monospace typography and simple flat geometric illustrations.

## Overview

The page uses a calm palette of aqua, white, warm off-white, charcoal, and a concentrated signal orange. White is the main reading canvas; broad, full-width color bands divide the homepage and carry oversized geometric illustrations. Orange is strongest in the server-like hero motif and the partner section, so it functions as an expressive accent rather than a routine button color. Body copy and links use Maax Mono, giving even ordinary service descriptions a technical, measured character; Sofia-Regular softens the prominent hero text. The layout alternates a centered visual statement with left-aligned informational content, service columns, client stories, partner marks, and a compact dark footer. Generous vertical pauses separate these blocks, while thin rules and small text details keep the content practical. Illustrations are flat, schematic, and built from simple shapes, not photographic imagery or layered effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Main headings, body text, and understated link text on white or pale surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas for text sections, partner logos, and the white pill-shaped announcement. |
| Rule Gray | `#6a6a6a` | `--color-rule-gray` | semantic | Fine borders and hairlines; use sparingly to separate compact text details. |
| Soft Aqua | `#a5d3d4` | `--color-soft-aqua` | brand | Large hero and illustration bands, providing the page’s signature cool color field. |
| Charcoal | `#282828` | `--color-charcoal` | neutral | Dark footer background, muted dark text, and dark shapes inside the geometric illustrations. |
| Warm Porcelain | `#f9f8ea` | `--color-warm-porcelain` | surface | Pale warm band behind the stacked server illustration. |
| Signal Orange | `#ff5000` | `--color-signal-orange` | accent | Full-width partner illustration band and small orange details inside the page’s geometric artwork. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#a5d3d4` (Soft Aqua) · `--color-surface-2` → `#f9f8ea` (Warm Porcelain) · `--color-surface-3` → `#282828` (Charcoal) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#282828` (Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#6a6a6a` (Rule Gray) · `--color-accent` → `#ff5000` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#a5d3d4` | 12.87:1 | AAA |
| `#000000` | `#f9f8ea` | 19.64:1 | AAA |
| `#000000` | `#282828` | 1.42:1 | fail |
| `#282828` | `#ffffff` | 14.74:1 | AAA |
| `#282828` | `#a5d3d4` | 9.03:1 | AAA |
| `#282828` | `#f9f8ea` | 13.79:1 | AAA |
| `#ffffff` | `#a5d3d4` | 1.63:1 | fail |
| `#ffffff` | `#f9f8ea` | 1.07:1 | fail |
| `#ffffff` | `#282828` | 14.74:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Maax Mono | `--font-mono` | webfont | 400 | Main body copy, links, navigation and compact details throughout the page. | Space Mono |
| Sofia-Regular | `--font-display` | webfont | 400 | Prominent hero heading or brand statement. | DM Sans |

- **Maax Mono:** Regular weight and unembellished case; retain the measured 16px body and link sizing.
- **Sofia-Regular:** Regular weight with natural casing; the softer sans-serif contrasts with the technical monospace body.

### Type scale — Perfect Fourth (ratio ≈ 1.323, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 400 | 1.36 | 0 | — | Sofia-Regular | Prominent hero statement and primary page introduction. |
| h2 | 20px | 700 | 1.15 | 0 | — | Helvetica | Service and content-block headings. |
| body | 16px | 400 | 1.6 | 0 | — | Maax Mono | Service descriptions, client stories, and footer information. |
| link | 16px | 400 | 1.6 | 0 | — | Maax Mono | Inline actions, navigation, and client-story links. |
| code | 16px | 400 | 1.6 | 0 | — | Maax Mono | Monospace utility text where a code-like role is needed. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 6, 12, 13, 16, 20, 24, 28, 30, 48, 60, 80, 100, 120, 180 px.
- Section rhythm 100px · element gap 13px · card padding — · max content width 785px.

Use broad, full-width horizontal bands and a measured content area capped at 785px. The first screen is a tall, centered hero, followed by a white introduction with text and a compact link list. Continue with illustration bands, a three-column service grid, then editorial client content and partner marks. Keep text left-aligned within content blocks, leaving generous vertical gaps between sections. Finish with a three-column charcoal footer. The overall density is spacious, with small typographic details balanced by substantial empty canvas.

## Shape & elevation

- Radius: link `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Keep the interface essentially flat: measurements report no shadows, gradients, or card treatments. Distinguish content through white space, full-width background bands, and occasional fine gray hairlines. The white announcement pill and links are simple exceptions, not cues for a layered card system.

## Imagery

Use flat geometric vector-style illustrations rather than product photography. The hero uses three simple upright forms against aqua; later bands contain a stacked server motif, a signal/radio motif, and a repeated-dot composition. Keep shapes crisp, sparse, and centered within their colored fields. Small line icons support the six service entries, while client and partner areas use supplied-style logos and compact editorial details.

## Components

### Hero and announcement

Full-width aqua opening with brand text at upper left, a compact white rounded announcement near the top, and centered geometric artwork.

### Intro and link list

White reading section pairing a descriptive copy block with a short list of black monospace links.

### Illustration bands

Full-width aqua, warm off-white, and orange fields, each carrying one centered, flat geometric motif.

### Service grid

Six service descriptions in three columns, each led by a small outlined icon and followed by a concise heading and text.

### Client stories

White editorial feed with client names, short descriptions, small linked actions, dates, and fine separators.

### Partner marks

White section displaying partner logos in a loose three-column arrangement with ample breathing room.

### Footer

Charcoal full-width footer split into three columns for navigation, contact details, and certification information.

### Measured component styles

- **Link** (“Jobangebote”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Maax Mono

## Do

- Use #a5d3d4 for the defining hero and illustration fields.
- Reserve #ff5000 for a few strong visual accents or illustrated bands.
- Set body copy and links in a restrained monospace style.
- Separate content with generous vertical space and broad color bands.
- Keep illustrations geometric, flat, and centered.
- Use thin rules only where editorial content needs separation.

## Don't

- Do not add gradients, heavy shadows, or floating card stacks.
- Do not turn every link or content heading orange.
- Do not crowd the service grid or reduce the spacious section rhythm.
- Do not substitute glossy photography for the schematic illustration style.
- Do not overdecorate the typography with bold or uppercase styling.
- Do not use charcoal as the dominant page canvas outside the footer.

## Agent prompt

Build a new Enter GmbH page with a spacious, editorial IT-services feel. Use #a5d3d4 Soft Aqua for the hero and selected full-width visual bands, #ffffff Gallery White as the main reading canvas, and #f9f8ea Warm Porcelain for a quiet illustration section. Keep #ff5000 Signal Orange concentrated in artwork or a single emphatic band; use #000000 Pure Ink for text and #282828 Charcoal for dark details and the footer. Set body copy and links in Maax Mono or a close monospace substitute, with a softer regular sans for the lead statement. Organize content into wide horizontal sections, left-aligned reading blocks, and simple columns. Favor crisp flat geometric vector art, restrained hairlines, and generous vertical pauses. Avoid shadows, gradients, dense cards, and decorative UI chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width aqua field with corner-aligned brand and announcement above centered geometric artwork. | brand introduction, announcement link | aqua canvas, flat geometric illustration, white pill |
| 2 | other | White content block pairing a broad descriptive text column with a compact link list. | service overview, quick links | black monospace copy, sparse link list |
| 3 | other | Full-width warm off-white band with a centered stacked server illustration. | visual pause | warm pale background, flat orange shapes |
| 4 | feature-grid | White section with six service entries arranged in three columns across two rows. | service discovery, scannable descriptions | small outline icons, monospace text, three-column grid |
| 5 | other | Full-width aqua band with a centered signal motif. | visual pause | aqua canvas, concentric line artwork |
| 6 | content-feed | White editorial area with client stories in two columns and fine horizontal separators. | case-study browsing, read-more links | compact headings, monospace body, hairlines |
| 7 | other | Full-width orange field with a centered three-row repeated-dot motif. | visual pause | solid orange canvas, charcoal and pale circles |
| 8 | logo-cloud | White logo area with partner marks placed across a loose three-column arrangement. | partner recognition | monochrome logos, open spacing |
| 9 | footer | Charcoal footer with three columns for site navigation, contact information, and certifications. | site navigation, contact details | dark background, small light text, three-column layout |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/enter-support-de