# Augen Pro · Design system migration spec

> Source: https://augen.pro  ·  Curated by OpenDesign  ·  en

> A great example of a premium tech brand using minimalist design to convey sophistication and innovation.

## 1. Identity DNA

The design system for Augen Pro operates like a minimalist laboratory for human augmentation, where every element is a precise instrument in a sterile environment. Its purpose is to create a sense of focused innovation, stripping away all visual noise to let the core technology speak for itself.

**One-liner:** Beyond Humanware.
**Keywords:** augen · Humanware · neural · wearable · innovation
**Analogy:** A minimalist laboratory for human augmentation.

## 2. Color

The palette is built on a foundation of high-contrast minimalism, using a clean white ground and a deep ink tone as structural elements. A single, vibrant blue accent is introduced sparingly, functioning as a focused signal for interactivity and emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F4` | card background |
| `--bg-quiet` | `#EFEFEF` | quiet area |
| `--ink` | `#0F1012` | body text |
| `--ink-soft` | `#5E5E5E` | secondary text |
| `--muted` | `#F2F2F4` | placeholder |
| `--accent` | `#0071E3` | single accent |
| `--line` | `rgba(0, 113, 227, 0.5)` | divider |

**Color principle:** High-contrast minimalism with a single vibrant blue accent.

The governing principle is restraint; color is a functional tool for hierarchy and interaction, never a decorative layer.

## 3. Typography

Typography is handled with geometric sans-serif forms at light weights, creating a refined and technical character. The voice is quiet yet authoritative, favoring clarity and precision over expressive flair, with negative spacing tightening display text for a sharper impression.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 350 | -1px | Headlines and main titles |
| body | 16px | 1.2 | 350 | -0.32px | Body text and navigation |

**Type rules:**
- Use geometric sans for all text.
- Maintain light weight for a refined, technical look.
- Use negative letter spacing for display text.

## 4. Spacing

Generous whitespace is the primary rhythmic device, creating a deliberate pace and a strong sense of focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to create a sense of focus and luxury.

## 5. Surfaces

Depth is communicated through subtlety, using soft, low-opacity shadows to gently lift elements from the background. Borders are rendered as thin, almost imperceptible lines, providing just enough definition without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 2px 10px rgba(0, 0, 0, 0.05)
- **Borders:** Thin, subtle borders for containers and chips.

## 6. Layout

The layout skeleton is a single, centered column, prioritizing a linear and focused reading path. This structure is anchored by a large hero section, where a high-fidelity 3D render becomes the primary visual statement.

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

**Skeleton:** A single-column centered layout with a large hero section.

## 7. Motion & Interaction

Motion philosophy prioritizes polish and subtlety, with smooth transitions guiding user flow. Micro-interactions, like fades and slight slides, are applied to confirm actions and maintain a seamless, responsive feel without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle fades and slides for transitions.
  - Smooth hover effects on buttons.

- **Hover:** Background color change or subtle text color shift.
- **Click:** Subtle scale or color change.
- **Transition:** Smooth transitions for all interactive elements.
- **Keyboard:** Focus indicators on interactive elements.

## 8. Voice & Don'ts

The editorial voice is technical, visionary, and sophisticated, conveyed through short, impactful statements. It communicates innovation with clarity and purpose, avoiding any colloquial or playful language.

- **Tone:** Technical, visionary, and sophisticated.
- **Headline style:** Short, impactful statements.
- **CTA style:** Clear, action-oriented labels.
- **Avoid:** Cluttered layouts / Bright, multi-colored accents / Rounded, playful shapes

### Don'ts
- ❌ Don't use heavy borders — screenshot shows thin, subtle lines.
- ❌ Don't use bold typography — screenshot shows light, refined weights.
- ❌ Don't use multiple accent colors — screenshot shows a single blue accent.
- ❌ Don't use dark backgrounds for the main hero — screenshot shows a white background.
- ❌ Don't use playful or rounded shapes — screenshot shows sharp, geometric forms.
- ❌ Don't use complex gradients — screenshot shows solid colors and subtle shadows.

The system deliberately excludes complex gradients, bold typography, and vibrant multi-color accents to preserve its core identity of calm, focused sophistication.

## System Prompt (paste into AI tool)

```
This is a premium hardware and neural technology site for 'augen' (Augen Pro), positioned as 'Beyond Humanware'. The design is minimalist and refined, using a clean white background (#FFFFFF) with a dark ink (#0F1012) and a single vibrant blue accent (#0071E3). Typography is a geometric sans-serif (PP Neue Montreal) at light weights, creating a technical and sophisticated feel. Key critical donts: do not use bold typography, do not introduce multiple accent colors, and do not clutter the layout with unnecessary elements. The site emphasizes 3D imagery and generous whitespace to create a sense of future-forward innovation.
```