Augen Pro

Overview

Augen Pro is a pro-human AI platform that reimagines invisible computing through a design philosophy called 'Minimalist Clarity'—where complexity dissolves into seamless, intuitive interaction. The brand serves users who demand both technological sophistication and effortless usability, evoking a sense of calm agency rather than overwhelming capability. The aesthetic combines a light, neutral canvas (#efefef background, #0f1012 text) with precise accent colors: a vivid electric blue (#0071e3) for primary actions, vibrant green (#00b982) for positive states, and energetic orange (#ff5102) for highlights. This palette creates visual hierarchy without noise, allowing the interface to recede and let human intention lead.

Augen Pro's voice is precise, confident, and unhurried. The brand speaks in active, direct language—never breathless or hyperbolic. Vocabulary favors clarity over jargon: 'Invisible Computing' not 'ambient intelligence,' 'Sense' not 'sensor array.' The tone is aspirational yet grounded, treating AI as a tool that amplifies human capability rather than replaces it. Example sentence in brand voice: 'Your neural interface learns what you need before you ask—because the best technology disappears.'

Colors

The color system is built on a light, minimalist foundation with three strategic accent colors that drive interaction and emotion. The surface stack uses warm grays (#efefef for primary surface, #f8f8f8 for bright, #e9ecef for dim) to create subtle depth without visual fatigue. Text is rendered in near-black (#0f1012) for maximum legibility and a human-centered feel. Primary (#0071e3) is the electric blue used exclusively for CTAs, links, focus states, and brand-critical interactions—it commands attention without aggression. Secondary (#00b982) signals success, positive feedback, and affirmative states; tertiary (#ff5102) is reserved for highlights, warnings, and moments requiring immediate notice. The glass-morphism layer uses rgba(255, 255, 255, 0.1) with backdrop-filter: blur(20px) for

Typography

The type system uses PP Neue Montreal at a single weight (350 / Book) across all scales, creating visual unity and emphasizing hierarchy through size and spacing rather than weight variation. Display (60px, -0.02em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px) and headline-md (28px) structure content sections with clear rhythm. Body text (16–18px) maintains 350 weight for warmth and approachability, while labels (12–14px) preserve legibility in dense UI. The consistent -0.01em to -0.02em letter-spacing across headlines creates a tight, intentional feel that reinforces the 'invisible computing' philosophy—nothing wasted, every pixel purposeful. Apply text rendering with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to ensure

Layout

The layout uses a 5-column grid system on mobile (--grid-columnCount: 5) with fluid gutters (2.5641025641vw on mobile, 2.3980815348vw on desktop ≥834px) that scale responsively without breakpoint jumps. Container max-width is fixed at 833px, creating a narrow, focused reading experience that prioritizes content over sprawl. Outer gutters (5.1282051282vw) provide breathing room at the edges. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for hero spacing. The 8px unit grid ensures all measurements align to a consistent rhythm. White space is treated as a design material—generous margins around hero imagery, breathing room between navigation items, and clea

Elevation & Depth

Depth is conveyed through subtle shadows and glass-morphism layers rather than dramatic z-index stacking. Level 1 (Base) is the light gray background (#efefef) with no shadow. Level 2 (Standard Cards & Overlays) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1.5px border at rgba(255, 255, 255, 0.2) and backdrop-filter: blur(20px), creating a frosted-glass effect that feels integrated rather than floating. Level 3 (Elevated Modals & Dropdowns) intensifies the blur to 40px and increases the background opacity to rgba(255, 255, 255, 0.15), with a 0.5px border at rgba(255, 255, 255, 0.3). T

Shapes

The shape philosophy is called 'Precision Softness'—rounded corners are used strategically to humanize the interface without sacrificing clarity. Buttons and badges use full border-radius (9999px) to signal interactivity and approachability; cards and containers use lg (1rem / 16px) for a balanced, modern feel; inputs use DEFAULT (0.5rem / 8px) for subtle definition; and the logo container uses full radius (50%) to create a perfect circle that anchors the navigation. The 1.5px border width on interactive elements (buttons, badges) reinforces precision and intentionality—thick enough to be visi

Components

Action Elements Buttons use a unified design language: 36px height, 8px vertical / 16px horizontal padding, full border-radius (9999px), and 1.5px borders. Primary buttons (#0071e3 background, white text) are the dominant CTA; secondary buttons (transparent background, #0071e3 border and text) provide alternative actions. Both use label-md typography (14px, 350 weight) and transition all properties over 0.2s on hover. Focus states apply outline: 1px dashed #0071e3 with 3px offset. Badges (#d4e4ff background, #001a4d text) use the same border treatment and full radius for visual consistency.

Containers & Surfaces Cards use surface-container (#efefef) background with lg radius (1rem), md padding (24px), and md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, background tr

Do's and Don'ts

**Do**

• Do use the electric blue (#0071e3) exclusively for primary CTAs, links, and focus states—it's the brand's signature accent and must remain reserved for moments requiring user action.
• Do maintain the light, neutral background (#efefef) as the default canvas; it creates visual calm and allows accent colors to command attention without competition.
• Do apply glass-morphism (backdrop-filter: blur(20px), rgba(255, 255, 255, 0.1)) to navigation and overlays to create depth while maintaining the minimalist aesthetic.
• Do use full border-radius (9999px) on buttons and badges to signal interactivity; reserve smaller radius (0.5rem–1rem) for structural elements like inputs and cards.
• Do preserve the 350 weight of PP Neue Montreal across all scales; hierarchy comes from size and spacing, not weight variation, reinforcing the 'invisible computing' philosophy.

**Don't**

• Don't use secondary (#00b982) or tertiary (#ff5102) as primary CTAs—they're supporting accents and will dilute the brand's visual clarity if overused.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); the design system prioritizes subtlety and glass-morphism over dramatic depth.
• Don't mix border-radius values randomly; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency and predictability.
• Don't add font-weight variations to PP Neue Montreal; the typeface is designed to work at 350 weight, and adding bold or light weights breaks the visual system.
• Don't use the primary blue (#0071e3) for non-interactive elements like backgrounds or text blocks—it must remain reserved for actions and focus states to maintain clarity and hierarchy.