# Enter Support De · Design system migration spec

> Source: https://enter-support.de  ·  Curated by OpenDesign  ·  en

> This site is a strong example of restrained, professional corporate design that uses geometric abstraction to convey reliability without being cold.

## 1. Identity DNA

Enter Support De operates like a calm corporate lobby where every element has its place. The system embodies the reliability of a well-organized workshop, where technical precision meets unhurried composure through a muted palette and geometric clarity.

**One-liner:** A restrained corporate identity for an IT support firm using geometric illustrations and a muted, calming palette.
**Keywords:** Technical · Reliable · Calm · Support · B2B
**Analogy:** A clean, organized workshop or a calm corporate lobby.

## 2. Color

A muted teal background serves as the visual anchor, providing a steady foundation for darker UI elements and white content areas. Sharp orange accents punctuate the calm, offering functional highlights without disrupting the overall restraint.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#c4dbd8` | main background |
| `--bg-soft` | `#f9f8ea` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#282828` | secondary text |
| `--muted` | `#282828` | placeholder |
| `--accent` | `#ff5000` | single accent |
| `--line` | `rgba(0,0,0,0)` | divider |

**Color principle:** Muted primary background with sharp high-chroma accents and dark UI elements.

The principle is deliberate contrast: calm backgrounds for context, dark elements for interaction, and a single vibrant accent for critical callouts.

## 3. Typography

Typography maintains a clean, unhurried rhythm with grotesque-sans for display and body text, establishing a professional yet approachable voice. Monospace is reserved for technical callouts, reinforcing the system's technical credibility.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.3 | 400 | -0.5px | Headlines and subheaders |
| body | 16px | 1.5 | 400 | 0px | Primary body text and UI labels |

**Type rules:**
- Use monospace for technical callouts or specific UI elements.
- Maintain a clean, unhurried typographic rhythm.

## 4. Spacing

Generous padding within content blocks establishes a deliberate rhythm, allowing information to breathe and reinforcing the system's unhurried character.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous padding in content blocks (e.g., 130px 100px 180px)

## 5. Surfaces

Surfaces are completely flat, with no drop shadows or decorative borders to create artificial depth. The visual hierarchy emerges solely from color blocks and generous spacing.

- **Radius:** sm 4px · md 8px · lg 15px · pill 999px
- **Borders:** None observed.

## 6. Layout

The layout skeleton uses full-width color blocks that transition into white content areas, creating distinct zones without visual clutter. This structure supports the generous padding while maintaining clear section separation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width color blocks transitioning into white content areas.

## 7. Motion & Interaction

Motion is restrained, with elastic transforms applied only to geometric elements for subtle emphasis. Longer structural shifts use linear durations to maintain the system's calm, unhurried character.

- **Durations:** micro 100ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.1, 2.5, 0.5, 1)`
- **Patterns:**
  - Elastic transform animations for geometric elements.
  - Linear duration for longer structural shifts.

- **Hover:** Color transitions on UI elements.
- **Click:** Elastic transform on interactive elements.
- **Transition:** All 0.1s ease-in-out for standard interactions.
- **Keyboard:** Default browser focus.

## 8. Voice & Don'ts

The voice is professional, calm, and reassuring, using simple declarative sentences in German for headlines and direct, functional calls-to-action. This tone deliberately avoids marketing hype and aggressive language.

- **Tone:** Professional, calm, and reassuring.
- **Headline style:** Simple, declarative sentences in German.
- **CTA style:** Direct and functional.
- **Avoid:** Marketing hype / Aggressive language / Complex jargon without context

### Don'ts
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use complex gradients — screenshot shows solid color blocks.
- ❌ Don't use decorative serif fonts — screenshot shows purely sans-serif and monospace typography.
- ❌ Don't use aggressive, high-saturation background colors — screenshot uses a muted teal.

The system deliberately omits decorative gradients, drop shadows, and aggressive saturation to preserve its restrained, professional clarity.

## System Prompt (paste into AI tool)

```
Design a calm, reliable interface for a B2B IT support firm. Use a muted teal (#c4dbd8) primary background, white content areas (#f9f8ea), and dark UI elements (#282828). Accent with a sharp orange (#ff5000). Typography should be clean grotesque-sans for display/body and monospace for specific technical elements. Avoid drop shadows, gradients, and aggressive marketing language. Use generous spacing and simple geometric illustrations to convey reliability.
```