# Design Reference - Augen Pro
> Architectural Blueprint on White Marble. Every element is immaculately placed against a pristine, bright background, creating a sense of technical elegance.

## Source
- Original site: https://augen.pro
- Captured: 2026-04-11T16:43:52.253Z

## Tags
- minimalist
- high-contrast
- scifi
- precision
- futuristic
- monochromatic
- spacious
- architectural

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Ink | `#0f1012` | neutral | Primary text, darkest UI elements, default borders. Provides sharp contrast against lighter backgrounds. |
| Ghost White | `#f2f2f4` | neutral | Dominant page and card backgrounds. Creates a luminous, expansive stage for content. |
| Canvas | `#fdfdfd` | neutral | Secondary background surfaces, slightly brighter than Ghost White, offering subtle layering. |
| Skyline Gray | `#868788` | neutral | Subtle background tones, offering a soft visual break without introducing strong chromaticism. |
| Slate Comment | `#8f8f8f` | neutral | Secondary text, button labels, and subtle UI strokes. Provides visual hierarchy without being muted. |
| Deep Graphite | `#020201` | neutral | Accented text elements, button states, and fine strokes. Offers the highest contrast. |
| Future Blue | `#0071e3` | accent | Interactive elements like links, buttons, and active states. Commands attention as the sole chromatic accent. |

## Typography
- role: Display and Large Headlines: Creates a delicate yet impactful presence, hinting at sophisticated technology.; sizes: 10px, 12px, 13px, 14px, 16px, 18px, 27px; family: PP Neue Montreal; weight: 350, 400; lineHeight: 1.20; substitute: Inter, Arial; letterSpacing: -0.02
- role: Body, Subheadings, Buttons, Links: Ensures consistent readability across all functional text. The tight letter-spacing maintains a modern, compact feel.; sizes: 10px, 12px, 13px, 14px, 16px, 18px, 27px; family: PP Neue Montreal; weight: 350, 400; lineHeight: 1.20; substitute: Inter, Arial; letterSpacing: -0.02

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "misc": "54px",
      "buttons": "10px",
      "pillButtons": "26px"
    },
    "elementGap": "6px",
    "sectionGap": "94px",
    "cardPadding": ""
  },
  "radius": {
    "misc": "54px",
    "buttons": "10px",
    "pillButtons": "26px"
  }
}
```

## Component Patterns
- name: Explore Tag Pills
- name: Announcement Banner
- name: Progress Section Card
- name: Ghost Button; role: Call to action with minimal visual emphasis
- name: Pill Tag Button; role: Top navigation and filtering options
- name: Search Input Button; role: Primary search trigger in header
- name: Nav Link; role: Primary navigation links

## Do
- Use Ghost White (#f2f2f4) as the primary background for most sections to maintain a bright, expansive canvas.
- Reserve Future Blue (#0071e3) strictly for interactive states, links, and primary call-to-action elements.
- Apply PP Neue Montreal weight 350 for headlines and larger text where a lighter, more refined feel is desired.
- Implement a default letter-spacing of -0.0200em for all PP Neue Montreal text to ensure a tight, modern aesthetic.
- Utilize 10px border radius for contained interactive elements like navigation tags, providing a soft touch consistent with the Pill Tag Button.
- Employ a base spacing of 6px for element gaps to maintain visual separation without clutter.
- Ensure section padding consistently uses the larger `sectionGap` of 94px to create generous vertical breathing room.

## Don't
- Avoid using chromatic colors other than Future Blue (#0071e3) to maintain the minimalist and precise aesthetic.
- Do not introduce strong drop shadows; the design relies on stark contrast and subtle background shifts for hierarchy.
- Do not vary body text weights or families; all continuous text should adhere to PP Neue Montreal weight 400 for consistency.
- Refrain from using excessively large or bold typography; the system prioritizes restraint and clarity over visual shouting.
- Avoid cluttering layouts; adhere to spacious element gaps and section padding to preserve an uncluttered, architectural feel.
- Do not use heavily saturated imagery or illustrations; imagery should align with the sparse, sophisticated visual tone.