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

# Augen Pro · Design System

> Quiet human-centered technology, framed with editorial restraint

**Theme:** light · **Industry:** ai · **Source:** https://augen.pro/ · **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._

Augen Pro pairs a restrained, spacious interface with cinematic human and wearable imagery to introduce AI-driven invisible computing. Soft neutral canvases, near-black interludes, and precise blue accents give the page a calm, premium character.

## North star

Let spacious neutral fields and human-centered imagery lead; use near-black transitions and blue only for purposeful emphasis.

## Overview

The visual system is built around quiet contrast rather than decorative effects. Pale off-white and near-white fields carry the opening hero and product presentation, while long near-black bands create deliberate pauses and a dramatic footer. A vivid blue is reserved for fine outlines, small links, and selected calls to action; it stays distinct from the warm browns and skin tones found in the hero imagery. PP Neue Montreal is used in a light, modern weight with subtly tight tracking, keeping labels, navigation, and headlines understated. The composition favors broad, open space, centered product imagery, and small blocks of copy placed away from the visual focal point. Rounded navigation and outline pills soften the otherwise crisp, flat interface. The overall impression is premium and human, with imagery carrying much of the emotion while interface details remain quiet and precise.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#0f1012` | `--color-soft-ink` | brand | Primary dark text, dark navigation details, and the dominant footer background. |
| Quiet Mist | `#f2f2f4` | `--color-quiet-mist` | surface | Main pale canvas and light section background, including the opening page field. |
| Signal Blue | `#0071e3` | `--color-signal-blue` | accent | Fine link and pill outlines, selected link text, and small interface accents. |
| Gallery White | `#fdfdfd` | `--color-gallery-white` | surface | Near-white surface used in navigation and bright content areas. |
| Deep Charcoal | `#171719` | `--color-deep-charcoal` | neutral | Secondary dark section surface, supporting the near-black interludes. |
| Muted Graphite | `#909090` | `--color-muted-graphite` | semantic | Muted navigation and secondary text where contrast should stay subdued. |

### Semantic aliases

`--color-canvas` → `#f2f2f4` (Quiet Mist) · `--color-surface` → `#0f1012` (Soft Ink) · `--color-surface-2` → `#fdfdfd` (Gallery White) · `--color-surface-3` → `#171719` (Deep Charcoal) · `--color-text` → `#0f1012` (Soft Ink) · `--color-text-muted` → `#f2f2f4` (Quiet Mist) · `--color-text-subtle` → `#909090` (Muted Graphite) · `--color-border` → `#0071e3` (Signal Blue) · `--color-accent` → `#0071e3` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f1012` | `#f2f2f4` | 17.03:1 | AAA |
| `#0f1012` | `#fdfdfd` | 18.71:1 | AAA |
| `#0f1012` | `#171719` | 1.06:1 | fail |
| `#f2f2f4` | `#0f1012` | 17.03:1 | AAA |
| `#f2f2f4` | `#fdfdfd` | 1.1:1 | fail |
| `#f2f2f4` | `#171719` | 16.01:1 | AAA |
| `#909090` | `#f2f2f4` | 2.86:1 | fail |
| `#909090` | `#0f1012` | 5.96:1 | AA |
| `#909090` | `#fdfdfd` | 3.14:1 | AA-large |
| `#909090` | `#171719` | 5.61:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 350 | Navigation, headings, body copy, captions, and button or link labels. | Inter |

- **PP Neue Montreal:** Light 350 weight, subtly tight negative tracking, sentence case, and restrained typographic emphasis.

### Type scale — Custom (ratio ≈ 1.688, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 27px | 350 | 1.2 | -0.02em | — | PP Neue Montreal | Hero brand statement and primary page headline. |
| body | 16px | 350 | 1.2 | -0.02em | — | PP Neue Montreal | Supporting descriptions and explanatory section copy. |
| caption | 12px | 350 | 1.2 | -0.02em | — | PP Neue Montreal | Small product labels, eyebrow text, and compact metadata. |
| button | 16px | 350 | 1.2 | -0.02em | — | PP Neue Montreal | Short CTA labels and pill-style action links. |
| nav | 16px | 350 | 1.2 | -0.02em | — | PP Neue Montreal | Primary navigation items and compact footer navigation. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 10, 11, 21, 22, 30, 34, 35, 36, 38, 50, 69, 113, 130 px.
- Section rhythm 144px · element gap 35px · card padding — · max content width 1302px.

The page uses a spacious, single-column flow with a measured maximum content width of 1302px. The hero is a broad pale field: a large human portrait anchors the center-right while a compact brand statement and links sit low on the left. Long light and dark bands alternate to create a deliberate vertical rhythm, with generous separation between content moments. Product imagery is centered and isolated rather than surrounded by dense cards. Footer information shifts into a compact two-column arrangement. Overall density is low, alignment is intentionally varied, and whitespace is a defining structural element.

## Shape & elevation

- Radius: button `9999px` · nav `10px` · link `50%` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat, with no measured shadow system. Separation comes from broad shifts between pale and dark section backgrounds rather than raised cards. Borders are sparse and functional: blue outlines define selected pill links, while the navigation uses a softly rounded, light surface. Keep layering restrained and avoid adding card-like elevation.

## Imagery

Large, cinematic human imagery leads the hero, with a softly lit profile emerging from a bright background. Product sections use isolated wearable-device imagery against pale neutral fields, keeping the object visually distinct without busy scenery. Warm skin and brown tones belong to the photography rather than the interface palette. Media is framed with substantial surrounding whitespace so imagery can function as the main expressive element.

## Components

### Floating navigation

Compact centered navigation on a light rounded surface, with understated dark labels and a separate circular brand mark.

### Hero link pills

Small outlined blue links sit beside the muted Explore label beneath the hero statement.

### Product showcase

Wearable product imagery is isolated on a pale field, with compact labels and blue-accented links nearby.

### Dark footer

Near-black footer groups page and social links into clear columns, with quiet muted metadata.

### Editorial text block

Short descriptions and contact prompts use light-weight type, restrained scale, and generous surrounding whitespace.

### Measured component styles

- **Primary button**: background #f1f1f1 · text #020201 · radius 26px · padding 0px · 400 13.3333px PP Neue Montreal
- **Link** (“A¹ Sense”): transparent background · text #0f1012 · radius 0px · padding 0px · 350 10px PP Neue Montreal
- **Navigation item** (“Wearable Neural Programs Updates Search”): transparent background · text #0f1012 · radius 0px · padding 0px · 350 10px PP Neue Montreal

## Do

- Keep the overall composition spacious and low-density.
- Use Quiet Mist and Gallery White for broad light fields.
- Reserve Signal Blue for small, intentional accents.
- Use large human or product imagery as the primary visual focus.
- Create section rhythm with broad light and dark background bands.
- Keep typography light, understated, and consistently tracked.

## Don't

- Do not turn the page into a dense card grid.
- Do not use blue as a dominant background or large text treatment.
- Do not add heavy shadows or decorative gradients.
- Do not crowd product imagery with surrounding copy.
- Do not use bold, oversized navigation labels.
- Do not treat photographic browns as brand interface colours.

## Agent prompt

Build a new page in the Augen Pro visual style: spacious, human-centered, and editorial rather than dashboard-like. Use Quiet Mist (#f2f2f4) and Gallery White (#fdfdfd) as broad calm fields, with Soft Ink (#0f1012) and Deep Charcoal (#171719) for deliberate dark section transitions. Keep Signal Blue (#0071e3) to fine link outlines and small emphasis; use Muted Graphite (#909090) for secondary labels. Set all text in PP Neue Montreal, or a close light-weight sans-serif substitute, with subtly tight tracking and restrained case. Let one large human or wearable image dominate each major showcase, surrounded by open space. Use flat surfaces, sparse borders, softly rounded navigation, and compact pill links. Avoid dense cards, strong shadows, decorative gradients, and oversized bright accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale full-width hero with centered human imagery, compact statement low on the left, and centered navigation above. | Primary section links, Scroll cue | Floating rounded navigation, Blue outline pills, Large cinematic portrait |
| 2 | product-showcase | Long sequence of open light and dark bands, with isolated product imagery centered in a pale showcase area. | Explore product links, Sequential scrolling | Broad monochrome section bands, Isolated wearable imagery, Compact blue link accents |
| 3 | footer | Contact content sits in two columns above a dark footer with brand mark and grouped navigation links. | Contact links, Social links, Policy navigation | Blue transition band, Two-column contact block, Near-black link footer |

## Source CSS custom properties (selected)

```css
--color-black: #000;
--color-blue: #0071e3;
--color-green: #00b982;
--color-greyDark: #1d1e20;
--color-greyLight: #efefef;
--color-greyLighter: #f8f8f8;
--color-offBlack: #0f1012;
--color-offWhite: #f2f2f4;
--color-orange: #ff5102;
--color-yellow: #fca311;
--color-white: #fff;
--font-base: "PP Neue Montreal";
```

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