Augen Pro Design System

Overview

Augen Pro presents itself as a visionary force in pro-human AI-driven invisible computing, and its visual language reflects this ambition through a strikingly restrained, almost monastic minimalism. The design operates on a near-black canvas ({colors.canvas}) punctuated by ethereal light-gray typography ({colors.body}), creating the sensation of looking at illuminated text in a contemplative darkness. This is not the aggressive contrast of a typical SaaS landing page—it is something closer to editorial luxury or high-end fashion branding, where whitespace (or rather, darkspace) carries as much semantic weight as the content itself.

The brand's voltage concentrates in a single electric blue ({colors.primary}) reserved exclusively for interactive moments: navigation active states, tag pills, and CTAs. This disciplined use of accent color means that when blue appears, it signals action or selection with unmistakable clarity. The overall mood is simultaneously futuristic and intimate—technology that recedes into the background of human experience, exactly as the "invisible computing" promise suggests.

The defining typographic move is the deployment of PP Neue Montreal at weight 350 (Book) across virtually all text, from massive 27px headlines down to 14px labels. The system refuses boldness; hierarchy is achieved through scale alone, reinforced by tight negative letter-spacing that gives the type a bespoke, tightened quality. Headlines breathe with generous line-height while maintaining optical density through character compression.

Shape language leans aggressively into the pill form—{rounded.lg} (54px) dominates navigation containers, tags, and buttons, creating a visual vocabulary that feels organic and approachable despite the technological subject matter. This soft geometry counterbalances the sharp precision of the type and the depth of the dark canvas.

The site architecture reveals at least two dialects: the editorial hero dialect (dark or light band with massive type and photographic imagery) and the navigation/system dialect (light header with pill-shaped interactive elements). A potential third product showcase dialect may exist below the fold based on the "Wearable," "Neural," and "Programs" navigation items suggesting distinct product categories.

Key Characteristics:

• Near-black canvas ({colors.canvas} — #0f1012) with light-gray body text ({colors.body} — #f2f2f4) for a luminous-in-darkness effect
• Single accent color {colors.primary} (#0071e3) reserved strictly for interactivity and selection states
• Ultra-light typeface (weight 350) at large scales (27px+ for headlines) with negative letter-spacing (-0.54px at display size)
• Pill-dominated shape language with {rounded.lg} (54px) on nav items, tags, and primary buttons
• Two-surface system: light {colors.surface} (#fdfdfd) for structural elements, dark {colors.canvas} for atmospheric bands
• Glass/surface-glass containers ({colors.surface-glass}) at 10% opacity for subtle elevation without shadows
• Transition duration of 200-300ms on all interactive state changes
• 1440px max-width container with generous vertical rhythm (220px hero padding)
• Custom icon system (detected as non-library SVG implementations)

Colors

Brand & Accent

• Primary ({colors.primary} — #0071e3): Electric blue used exclusively for active navigation backgrounds, tag pill borders and text, primary CTA buttons, and focus rings. This is the sole source of chromatic voltage in the system.
• Primary Hover ({colors.primary-hover} — #0077ed): Slightly brightened blue for hover states on interactive elements.
• Primary Active ({colors.primary-active} — #0066cc): Darkened pressed state for tactile feedback on buttons and controls.
• Primary Disabled ({colors.primary-disabled} — #99c9f0): Desaturated, lightened blue indicating unavailable actions while maintaining brand recognition.

Surface

• Canvas ({colors.canvas} — #0f1012): Near-black foundational surface used for hero bands, footer regions, and any section requiring maximum atmospheric depth. This is the darkest surface in the system.
• Surface ({colors.surface} — #fdfdfd): Pure off-white used for the main header/navigation bar and elevated content cards.
• Surface Soft ({colors.surface-soft} — #efefef): Light gray used for hero section backgrounds when a subtle tonal shift from pure white is needed.
• Surface Warm ({colors.surface-warm} — #f2f2f4): Cool-light gray with slight warmth, used as text color on dark surfaces and as body text on light surfaces depending on context.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Absolute white reserved for floating cards, modals, and content that must sit visually above adjacent surfaces.
• Surface Overlay ({colors.surface-overlay} — rgba(29, 30, 32, 0.5)): Semi-transparent dark overlay for modal backdrops and dropdown dismissal layers.
• Surface Glass ({colors.surface-glass} — rgba(120, 120, 120, 0.1)): 10% opacity gray creating subtle container definition without hard borders or shadows—the preferred method for elevation in this flat-design system.
• Surface Glass Alt ({colors.surface-glass-alt} — rgba(117, 117, 117, 0.1)): Variant glass tone for alternate contextual layering needs.
• Surface Subtle ({colors.surface-subtle} — rgba(12, 13, 15, 0.05)): Extremely faint dark tint for the most minimal background differentiation.

Text

• Ink ({colors.ink} — #0f1012): Near-black for maximum readability on light surfaces; used for headings, navigation text, and primary UI copy.
• Body ({colors.body} — #f2f2f4): Light gray serving dual duty—as body text color on dark canvas surfaces and as a surface token in certain contexts.
• Body Inverse ({colors.body-inverse} — #0f1012): Explicit alias for ink when semantic clarity is needed in dark-mode-adjacent contexts.
• Muted ({colors.muted} — #5e5e5e): Medium gray for secondary text, labels, captions, and de-emphasized UI elements.
• Muted Dark ({colors.muted-dark} — #020001): Essentially black, used for footer text and extremely subtle annotations on dark surfaces.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed to pass WCAG AA against {colors.primary} backgrounds.
• On Dark ({colors.on-dark} — #f2f2f4): Light text for rendering on {colors.canvas} and other near-black surfaces.
• On Surface ({colors.on-surface} — #0f1012): Dark text for general-purpose rendering on light surfaces.
• Overlay Text ({colors.overlay-text} — rgba(0, 0, 0, 0.4)): 40% opacity black for text that must be visible but clearly secondary to underlying content.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(0, 0, 0, 0)): Fully transparent default border; this system largely eschews visible borders in favor of background-color differentiation and spacing.
• Border Soft ({colors.border-soft} — #e0e0e0): Light gray for instances where a visible divider is absolutely necessary (form field boundaries, card edges in dense layouts).
• Border Focus ({colors.border-focus} — #0071e3): Blue focus ring matching {colors.primary}, applied to focused form inputs and keyboard-navigable elements.

Semantic

• Link ({colors.link} — #0071e3): Inline links inherit the primary blue, maintaining brand consistency across all interactive text.
• Link Hover ({colors.link-hover} — #0077ed): Brightened state for link hover feedback.
• Error ({colors.error} — #dc2626): Red for validation errors, destructive actions, and system warnings.
• Success ({colors.success} — #16a34a): Green for confirmation states, successful operations, and positive indicators.
• Warning ({colors.warning} — #d97706): Amber/caution color for attention-requiring but non-critical states.
• Info ({colors.info} — #0071e3): Informational blue, aliased to primary for consistency.

Typography

Font Family

The entire system is typeset in PP Neue Montreal, a proprietary grotesque sans-serif from Pangram Palette. Only two weights are loaded: 300 (Light) and 350 (Book), with the latter doing the overwhelming majority of work across all scales. The font's characteristics—neutral, geometric yet slightly humanist in its apertures—support the brand's "pro-human technology" positioning by feeling precise without being cold. No serifs, no monospaced faces, no decorative alternatives appear in the current implementation. The fallback stack terminates at sans-serif, ensuring graceful degradation to system fonts if the WOFF2/WOFF files fail to load.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 300 | 1.2 | -0.96px | Section openers, manifesto statements (inferred for larger breakpoints) | | {typography.display-lg} | 27px | 350 | 1.2 | -0.54px | Hero headline ("Beyond Humanware"), major section titles | | {typography.display-md} | 20px | 350 | 1.25 | -0.4px | Subsection headers, feature titles (inferred) | | {typography.body-md} | 27px | 350 | 1.2 | -0.54px | Large-body editorial text, hero subcopy | | {typography.body-sm} | 16px | 350 | 1.5 | -0.32px | Standard body copy, descriptions, paragraphs | | {typography.title-md} | 14px | 350 | 1.2 | -0.28px | Labels, small headings, navigation items | | {typography.title-sm} | 13px | 400 | 1.38 | -0.26px | Fine print, metadata, back-navigation labels | | {typography.caption} | 13px | 350 | 1.38 | -0.26px | Tag pills, breadcrumbs, timestamps, helper text | | {typography.button} | 16px | 350 | 1.25 | 0 | Button labels, CTA text, interactive element labels | | {typography.label} | 14px | 350 | 1.4 | -0.28px | Form field labels, toggle labels | | {typography.nav-item} | 16px | 350 | 1.5 | 0 | Top-level navigation links |

Principles

The typography system's most distinctive characteristic is its refusal of weight-based hierarchy. At no point does the design employ weights above 350 (Book)—there are no bold headlines, no semibold subheadings, no 600-weight buttons. Instead, hierarchy is communicated through dramatic size jumps (27px headlines vs. 14px labels), negative letter-spacing that optically tightens larger text, and color contrast (ink vs. muted). This creates a hushed, confident voice that whispers rather than shouts—a deliberate choice for a brand positioning itself as "invisible computing."

Letter-spacing follows a proportional negative scale: approximately -0.02em at every size level. This tightening prevents the light weight from feeling too airy or insubstantial, giving the type a custom-set, premium feel reminiscent of high-end magazine typography. The system trusts the reader's eye to parse hierarchy through scale and position rather than through typographic aggression.

Color plays a supporting role in typographic hierarchy: {colors.ink} for primary text, {colors.muted} for secondary, and {colors.primary} for actionable text (links, selected states). There is no use of all-caps for labels (the system prefers sentence case or title case at small sizes), no underlining except on actual links, and no italics detected in the current implementation.

Note on Font Substitutes

PP Neue Montreal is a commercial font requiring licensing. For prototyping, development environments, or open-source projects needing a free alternative, the closest Google Fonts equivalent is Inter (particularly its variable font with weight 300-350 approximated). Inter shares PP Neue Montreal's geometric skeleton, tall x-height, and neutral voice. Define CSS variables as follows:

:root {
  --font-family-sans: "PP Neue Montreal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

For the specific weight 350 (which falls between Inter's 300 and 400), use font-weight: 340 with Inter's variable font or accept a slight deviation to 300 or 400. The visual impact is minimal at the sizes this system employs.

Layout

Spacing System

• Base unit: 2px (derived from {spacing.xxs}), with major operational increments at 11px ({spacing.md}) and multiples thereof.
• Tokens: {spacing.xxs} (2px — micro-adjustments, letter-spacing refinements), {spacing.xs} (4px — icon gaps, internal padding), {spacing.sm} (10px — compact component padding), {spacing.md} (11px — standard gap between related elements), {spacing.lg} (30px — card internal padding, block spacing), {spacing.xl} (34px — section-internal margins), {spacing.section-lg} (69px — between distinct content blocks), {spacing.section-xl} (94px — major section breaks), {spacing.section-xxl} (130px — hero-to-content transitions).
• Section padding (vertical): {spacing.hero-vertical} (220px) — used exclusively in the hero band to create the expansive, breathing room around the headline and portrait imagery.
• Card internal padding: {spacing.lg} (30px) for standard {component.card-surface} components; {spacing.sm} (10px) to {spacing.md} (11px) for compact tag and button internals.
• Gutters: The system uses a 1440px max-width container ({spacing.container}) centered in the viewport, with internal content constrained further for text columns (inferred ~680-720px for optimal reading measure at 27px body size).

Grid & Container

The layout operates on a single-column editorial paradigm for the hero section: a left-aligned text column (approximately 500-600px wide per {spacing.hero-width}) paired with a right-aligned or center-weighted photographic element. The navigation system constrains itself to {spacing.nav-width} (530px) when rendered inline, suggesting a purposeful limitation of menu item count or a centered-within-container positioning strategy.

At desktop widths (1440px+), the hero band uses what appears to be an asymmetric grid: text anchored to the left third, imagery occupying the remaining space with substantial overlap or close proximity. This is not a rigid 12-column grid but rather a free-form compositional layout where elements position themselves through margin and padding rather than column constraints.

Whitespace Philosophy

This system practices aggressive vertical generosity combined with horizontal restraint. The 220px hero vertical padding ({spacing.hero-vertical}) represents nearly 15% of viewport height on a standard laptop screen, signaling that the brand values contemplation over information density. Horizontally, however, content hugs left alignments tightly, creating a ragged-right aesthetic that feels European-editorial in sensibility. The dark canvas amplifies the perception of space—black recedes visually, making the actual whitespace feel even more expansive.

Header Architecture

|--------------------------------------------------------------------------------|
|  [Logo]     [Wearable] [Neural] [Programs] [Updates] [Search]          [☰]    |
|             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^                |
|                         nav container (~530px centered)                       |
|--------------------------------------------------------------------------------|
       ^                                                                          ^
    surface:                                                                    surface:
    #fdfdfd                                                                     transparent
       ^                                                                          ^
  height: 64px                                                            page background begins

The header sits on {colors.surface} (off-white) with the logo flush-left, navigation centered within a constrained width, and utility icons (burger menu) flush-right. Active nav items receive the {colors.surface-glass} background with {rounded.lg} (54px) pill shaping.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|   augen                                                                        |
|   Beyond Humanware.                                                            |
|                                                                                |
|   Explore  [A¹ Sense] [B¹ Eye] [A¹ Neuro]                                     |
|                                                                                |
|                           [Portrait Photography —                              |
|                            soft focus, profile view,                           |
|                            fading into canvas]                                 |
|                                                                                |
|                                                                              ↓  |
|                                                                            [scroll]
|--------------------------------------------------------------------------------|
  background: {colors.surface-soft} (#efefef)
  padding: 220px vertical

The hero places the brand wordmark ("augen") in small caps or lowercase at the top of the text column, followed by the {typography.display-lg} headline, then an "Explore" label leading into {component.tag-pill-bordered} elements. The photography occupies the right portion of the composition, rendered with soft focus and a fade-to-canvas effect that blends seamlessly into the {colors.surface-soft} or {colors.canvas} background.

Tag/Filter Group Layout

Explore  [(A¹ Sense)] [(B¹ Eye)] [(A¹ Neuro)]
         ^^^^^^^^^^  ^^^^^^^^^  ^^^^^^^^^^
         tag-pill    tag-pill   tag-pill
         bordered    bordered   bordered

Horizontal inline arrangement with {spacing.sm} (10-11px) gaps between pills. Each pill uses {rounded.lg} (54px) and inherits {colors.primary} for border and text, with transparent background unless in active/selected state.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.hairline} (transparent) border | Base surfaces: canvas, surface-elevated, header background | | 1 — Glass | {colors.surface-glass} (10% gray) background | Active nav items, highlighted cards, subtle containers | | 2 — Overlay | {colors.surface-overlay} (50% black) | Modal backdrops, dropdown dismissal layers | | 3 — Focus | {colors.border-focus} (blue) outline/border | Form inputs, keyboard-focused buttons, interactive ring |

The system explicitly rejects drop shadows as an elevation mechanism. In the extracted CSS data, boxShadow: "none" appears universally across components. Instead, depth is achieved through opacity-layering (the glass surfaces), value contrast (light-on-dark stacking), and color blocking (alternating between {colors.canvas}, {colors.surface-soft}, and {colors.surface}). This creates a flat-design aesthetic with sophisticated layering that feels contemporary and print-inspired rather than skeuomorphic.

When elevation must be communicated (a dropdown appearing above content, a modal dismissing the background), the system reaches first for semi-transparent dark overlays rather than cast shadows. This choice maintains the clean, shadowless visual language while still providing clear z-axis hierarchy.

Decorative Depth

The hero photograph introduces photographic depth through soft-focus portraiture that fades gradually into the background color. This is not a gradient overlay in the traditional sense but rather an imaging treatment—likely achieved via a masked image with a feathered edge or a backdrop-filter blur at the image boundary. The effect creates a ghostly, ethereal presence that aligns with the "beyond humanware" conceptual framing.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.micro} | 1.8px | Barely perceptible rounding—detected in specialized contexts | | {rounded.xs} | 2px | Input fields, minimal UI chrome, technical indicators | | {rounded.sm} | 4px | Tooltips, small badges, notification dots | | {rounded.DEFAULT} | 10px | Standard content cards, panel corners | | {rounded.md} | 26px | Ghost buttons, secondary containers | | {rounded.lg} | 54px | Primary shape language: navigation items, tag pills, primary buttons, CTA containers | | {rounded.xl} | 63px | Maximal pill variant for oversized containers | | {rounded.pill} | 9999px | Infinite radius for perfectly hemispherical ends | | {rounded.circle} | 50% | Avatar placeholders, circular indicators |

The dominant radius value is unequivocally {rounded.lg} (54px), which appears on the majority of interactive elements. This extreme roundness transforms rectangular UI primitives into organic, approachable shapes that feel touch-friendly and human-scaled. The system reserves sharper corners ({rounded.xs}, {rounded.sm}) only for functional elements like form inputs where geometric precision aids usability.

Photography Geometry

The hero portrait is presented in a vertical aspect ratio (approximately 3:4 or 4:5) with no visible corner rounding—photography retains its natural rectangular frame. The image treatment emphasizes softness through Gaussian-style blur or diffusion at the edges, allowing the photograph to dissolve into the surrounding surface color rather than ending at a hard crop line. This "bleed-and-fade" technique eliminates the need for rounded photo corners while maintaining visual continuity with the pill-shaped UI elements.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.nav-link-active}); add hover styling at implementation time per your stack's conventions.

Buttons & Interactive Elements

{component.top-nav} — The fixed or sticky header container spanning full viewport width at 64px height. Background {colors.surface} (#fdfdfd), housing the logo, navigation, and utilities. No visible border or shadow—separation from content occurs through background-color change alone.

{component.nav-link} — Default navigation item (e.g., "Wearable," "Neural," "Programs"). Transparent background with {colors.ink} text at {typography.nav-item} scale. Zero border-radius in resting state, transforming to {component.nav-link-active} on selection or hover. Padding of 8px 16px provides comfortable click targets.

{component.nav-link-active} — Selected or hovered navigation state. Receives {colors.surface-glass} background (10% gray) creating a subtle pill shape with {rounded.lg} (54px). Text remains {colors.ink}. This is the primary indicator of current section or hover intent in the navigation system.

{component.logo-mark} — The "augen" wordmark or symbol positioned at the far left of {component.top-nav}. 40×40px hit area (inferred), transparent background, rendering in {colors.ink}. The logo appears to be typographic (the word "augen" in the brand typeface) rather than iconic.

{component.tag-pill} — Inline filter or category selector as seen in the hero's "Explore" row ("A¹ Sense," "B¹ Eye," "A¹ Neuro"). Transparent background with {colors.primary} text/color, {typography.caption} sizing, and {rounded.lg} (54px) creating the signature pill shape. Padding 6px 16px. These function as navigational chips or category filters.

{component.tag-pill-bordered} — Variant of {component.tag-pill} with a visible {colors.primary} border (1px solid inferred) in addition to the colored text. Used interchangeably with unbordered pills depending on context and state.

{component.button-primary} — Primary call-to-action button with {colors.primary} background and {colors.on-primary} (white) text. Uses {typography.button} (16px/350), {rounded.lg} (54px), and generous padding 12px 28px. This is the highest-voltage interactive element in the system—use sparingly for one primary action per section.

{component.button-primary-hover} — Hover state lightening to {colors.primary-hover} (#0077ed). Maintains all other properties of {component.button-primary}.

{component.button-primary-active} — Pressed/clicked state darkening to {colors.primary-active} (#0066cc). Provides tactile feedback on touch or click.

{component.button-secondary} — Secondary action button with transparent background, {colors.ink} text, and a visible border (inferred {colors.border-soft}). Same dimensions and radius as {component.button-primary}. Used for subordinate actions alongside a primary CTA.

{component.button-ghost} — Minimal button style with transparent background and {colors.muted} text. {rounded.md} (26px) provides moderate rounding—less aggressive than primary buttons. Used for dismissive actions, "Learn more" links styled as buttons, or tertiary interactions.

Cards & Containers

{component.hero-band} — Full-viewport-width section container with {colors.surface-soft} (#efefef) background and 220px vertical padding ({spacing.hero-vertical}). Houses the headline, subheadline, tag group, and hero imagery. Typography defaults to {typography.display-lg} for the headline.

{component.hero-headline} — The "Beyond Humanware." text block. Inherits {colors.ink} and {typography.display-lg} (27px/350/-0.54px tracking). Left-aligned within the text column. No background—relies on parent {component.hero-band} for surface.

{component.hero-subheadline} — Supporting text beneath the headline (if present). Renders in {colors.muted} at {typography.title-md} scale, providing contextual information without competing with the headline.

{component.hero-tag-group} — Container for the "Explore" label and associated {component.tag-pill} elements. Uses {typography.caption} for the "Explore" prefix and {colors.muted} for de-emphasis.

{component.card-surface} — Standard content card with {colors.surface-elevated} (white) background. {typography.body-sm} for internal text, {rounded.DEFAULT} (10px) corner radius, {spacing.lg} (30px) internal padding. Used for feature descriptions, product highlights, or informational panels.

{component.card-glass} — Elevated variant using {colors.surface-glass} (10% gray) background instead of solid white. Same dimensions as {component.card-surface} but with {rounded.lg} (54px) for a more pronounced pill shape. Creates visual separation from the base surface without introducing shadows.

{component.cta-band} — Full-width call-to-action section with {colors.canvas} (near-black) background and {colors.body} (light gray) text. Inverted color scheme creates strong visual break from lighter sections. {typography.display-lg} or larger for headline impact.

{component.cta-banner-headline} — Headline within {component.cta-band}, rendering in {colors.body} against the dark background. Large scale (27px+) ensures readability despite lower contrast ratio.

Inputs & Forms

{component.input-field} — Text input with transparent background and {colors.ink} text. {typography.body-sm} scale, {rounded.xs} (2px) for minimal corner treatment, and tight padding 2px 4px. No visible border in default state—relies on underline or bottom-border convention (inferred) or purely on focus state for visibility.

{component.input-field-focus} — Focused input state retaining transparent background but gaining {colors.border-focus} (blue) outline or border. This is the primary indication that the field is active for typing.

{component.search-trigger} — Button or link triggering search functionality. Transparent background, {colors.ink} text at nav scale, minimal padding. Positioned in the top-nav utility area.

Navigation & Wayfinding

{component.breadcrumb} — Hierarchical navigation trail (if present below fold). {colors.muted} text at {typography.caption} scale, providing location context without visual prominence.

{component.scroll-indicator} — Down-arrow or similar icon in the hero's lower area prompting vertical scroll. {colors.muted} color, 24px size, subtly indicating additional content below.

{component.footer} — Page footer with {colors.canvas} background and {colors.muted-dark} (near-black on near-black, or very dark gray) text. {typography.caption} for legal links, copyright, and secondary navigation. {spacing.section-lg} (69px) vertical padding.

Overlays & Feedback

{component.overlay-backdrop} — Semi-transparent dark layer ({colors.surface-overlay} at 50% opacity) covering content beneath modals or dropdowns. Dismisses on click/tap outside the target element.

{component.tooltip} — Small informational popup with {colors.ink} background and {colors.on-dark} (white) text. {rounded.sm} (4px) corners, {typography.caption} sizing, 8px 12px padding. Appears on hover or focus of annotated elements.

{component.badge-notification} — Status indicator or count bubble with {colors.primary} background and white text. {rounded.pill} (infinite radius) creates perfect capsule shape. 2px 8px padding keeps it compact. Used for cart counts, notification dots, or status labels.

{component.divider} — Horizontal rule with {colors.hairline} (transparent) or {colors.border-soft} background. 1px height, spanning full container width. Used sparingly—this system prefers whitespace over rules for visual separation.

Do's and Don'ts

Do

• Do use {colors.primary} (#0071e3) sparingly and intentionally—reserve it for active states, primary CTAs, and selected filters to preserve its voltage.
• Do maintain weight 350 (Book) or lighter across all typographic elements; never exceed this weight even for headlines, as the system relies on scale rather than boldness for hierarchy.
• Do apply {rounded.lg} (54px) to all primary interactive elements (buttons, nav items, tags) to maintain the signature pill shape language.
• Do use {colors.surface-glass} (10% opacity gray) for elevation needs instead of drop shadows—this system is explicitly flat and shadowless.
• Do ensure hero sections have at least {spacing.hero-vertical} (220px) of vertical padding to create the expansive, contemplative atmosphere.
• Do set letter-spacing to approximately -0.02em (e.g., -0.54px at 27px) on all display and body text larger than 14px to maintain the tightened, premium feel.
• Do place photography with soft-edge fading (feathered masks or backdrop-filter blur) to blend images into the canvas color rather than hard-cropping.
• Do constrain content width to ~720px for text columns within the 1440px container to preserve optimal reading measure at 27px body size.
• Do use {colors.canvas} (#0f1012) for footer and atmospheric band backgrounds to create visual rest and section differentiation.
• Do implement focus states using {colors.border-focus} (blue) outlines rather than shadows or background changes, ensuring keyboard accessibility.

Don't

• Don't introduce drop shadows or box-shadows into any component—the extracted data shows universal boxShadow: "none" and the aesthetic depends on flat layering.
• Don't use font weights above 350 (Book); don't reach for bold (700) or even semibold (600) under any circumstances, as this violates the system's hushed typographic voice.
• Don't substitute {colors.link} (#0071e3) with {colors.primary} in prose—even though they share the same hex value, maintain semantic distinction in your token usage for future flexibility.
• Don't apply {rounded.lg} (54px) to content cards or panels—reserve maximal rounding for interactive elements; use {rounded.DEFAULT} (10px) or {rounded.md} (26px) for containers.
• Don't place light {colors.body} text (#f2f2f4) directly on {colors.surface} (#fdfddd)—this combination fails accessibility; reserve light text for {colors.canvas} backgrounds only.
• Don't add gradient overlays to hero photographs—the design achieves depth through soft-focus edge treatment and color blending, not through CSS gradients.
• Don't expand the color palette beyond the documented tokens; the brand's power comes from radical constraint to near-monochrome plus one accent.
• Don't reduce vertical spacing below {spacing.section-lg} (69px) between major sections—the generous whitespace is intentional and brand-defining.
• Don't use monospace fonts or code-style formatting unless specifically documenting technical content; the system has no monospace role defined.
• Don't implement hover states without also providing active/pressed states ({component.button-primary-active}) for touch device users who don't benefit from hover.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.3s ease;
--transition-opacity-visibility: opacity 0.3s ease, visibility 0.3s ease;
--transition-colors-fast: background-color 0.2s ease, color 0.2s ease;
--transition-colors-slow: background-color 0.6s ease;
--transition-colors-standard: background-color 0.3s ease, color 0.3s ease;
--transition-opacity-fast: opacity 0.2s ease;
--transition-all: all ease;

Keyframe Animations

No explicit @keyframes declarations were detected in the extracted CSS. Any motion beyond simple property transitions (fade-ins, color shifts, opacity toggles) is likely handled via JavaScript animation libraries (GSAP, Framer Motion) or CSS transitions triggered by class toggling on scroll/interaction.

Interaction Patterns

• Nav item activation: Background-color transition from transparent to {colors.surface-glass} over 200-300ms ({--transition-colors-fast} or {--transition-colors-standard}) on hover/select.
• Modal/dropdown reveal: Opacity fade from 0 to 1 over 300ms (--transition-opacity) coupled with visibility toggling for proper accessibility.
• Scroll-triggered fades: Hero elements or below-fold content likely fade in on scroll-into-view using opacity transitions (200-300ms duration).
• Button state shifts: Background-color transitions on primary/secondary buttons over 200-300ms; color-only transitions for ghost buttons.
• Focus ring animation: Focus outlines appear instantly or with minimal transition (0-150ms) to avoid disorienting keyboard users.
• Page/section transitions: Background-color changes on sectional bands (canvas to surface-soft) may animate over longer durations (600ms per --transition-colors-slow) for smooth visual continuity.
• Image loading: Photographs likely fade in (opacity 0→1 over 300ms) once loaded to prevent jarring pop-in.

If implementing motion from scratch, recommended timing: 200-250ms for micro-interactions (button hover, tag select), 300-350ms for structural reveals (modals, dropdowns), 400-600ms for sectional transitions (hero-to-content background shifts). Easing should remain ease or ease-out (the extracted data shows ease exclusively); avoid bouncy or elastic curves that would conflict with the sober brand voice.

Imagery Style

• Photographic style: Soft-focus portraiture with shallow depth of field; the hero image shows a profile-view human face rendered in desaturated, warm tones with significant blur/diffusion at the edges.
• Subject matter: Human-centric imagery—faces, profiles, figures—emphasizing the "pro-human" brand positioning over hardware or interface shots.
• Color treatment: Images appear slightly desaturated or filtered toward warm grays, harmonizing with the {colors.canvas} and {colors.surface-soft} palette rather than introducing new hues.
• Edge treatment: Feathered, faded, or masked edges allowing seamless blending into background colors; no hard frames, borders, or drop shadows on images.
• Aspect ratios: Vertical/portrait orientation (3:4 to 4:5) for hero imagery, creating a sculptural, figure-like presence that contrasts with horizontal layout flow.
• Role in layout: Imagery supports rather than dominates—the text column (headline, tags) holds primary positional importance, with photography occupying the remaining space as atmospheric context.
• Lighting direction: Side-lit or rim-lit subjects creating subtle modeling without harsh contrast; avoids high-contrast chiaroscuro that would fight the low-contrast UI.
• Absence of: Product shots, interface screenshots, illustrations, 3D renders, patterns, textures, or graphic ornaments—pure photography is the sole imagery modality detected.

Icon System

• Library: Custom SVG implementations (no external icon library detected in the extracted CSS/HTML; iconLibs array is empty).
• Specific icons observed:
  • Star/burst-like mark (logo or decorative element in top-left area)
  • Hamburger/menu icon (three horizontal lines, top-right utility area)
  • Scroll-down arrow (downward-pointing chevron or arrow in lower-left)
  • Pill/tag icons (implied "A¹ Sense," "B¹ Eye," "A¹ Neuro" may contain superscript notation)
  • Search icon (magnifying glass, implied by "Search" nav item)
• Treatment: Stroke-based rendering inferred (consistent with minimalist aesthetic); color set to currentColor for inheritance from parent text color.
• Size: Navigation and utility icons approximate 16–20px; logo mark approximately 40×40px; scroll indicator approximately 24px.
• Alignment: Icons center-align with adjacent text (nav items, buttons) using flexbox vertical centering; no offset or hanging baseline detected.

Recommended Frontend Stack

- Framework:      Nuxt 3 (Vue.js meta-framework detected via __NUXT__ window object and Nuxt-specific class conventions)
- Styling:        Vanilla CSS or CSS Modules (no Tailwind utility classes detected; custom CSS with BEM-ish naming: nav-list-item-link, home-hero, page-background white)
- Fonts:          Self-hosted WOFF2/WOFF (PP Neue Montreal loaded from /fonts/ directory with @font-face declarations displaying swap strategy)
- Animation:      CSS transitions (extracted) + likely GSAP or Framer Motion for scroll-triggered effects (not detected in static extraction)
- Icons:          Custom inline SVGs (no external library; recommend Lucide for any added icons due to stroke-weight consistency with brand)
- Component lib:  None detected (hand-rolled components; consider Headless UI or Radix Vue for accessible primitives if expanding)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hamburger menu replaces inline nav; hero text stacks above/below image; tag pills wrap to multiple lines | | Tablet | 640px – 1024px | Two-column hero begins (text + image side-by-side); navigation may collapse or abbreviate; container padding reduces | | Desktop | 1024px – 1440px | Full layout as captured: 1440px container, inline navigation, 220px hero padding, side-by-side hero composition | | Wide | > 1440px | Container maxes at 1440px and centers; hero padding may increase proportionally; photography scales up |

Touch Targets

• {component.button-primary}: ~52px height (12px padding × 2 + 16px text + inferred border) × ~140-160px width (28px padding × 2 + text) — exceeds WCAG AAA 44×44 minimum comfortably.
• {component.nav-link}: ~40px height (8px padding × 2 + 16px text) × variable width — approaches minimum; ensure tap area extends to 44px via padding increase on mobile.
• {component.tag-pill}: ~30px height (6px padding × 2 + 13px text) × variable width — below 44px minimum; increase vertical padding to 12-14px on touch devices or accept as tappable given generous horizontal padding.
• {component.input-field}: ~24px height (inferred from 16px font + 4px padding × 2) — below minimum; mobile inputs should expand to 44-48px height.
• {component.search-trigger}: ~40px height (8px padding × 2 + 16px text) — approaches minimum; acceptable for secondary utility.

Collapsing Strategy

• Navigation: Inline horizontal nav ({component.nav-link} items) collapses to hamburger menu (< 1024px inferred), revealing a fullscreen or sidebar drawer with vertical link list. Active state styling (pill background) persists in drawer.
• Hero columns: Side-by-side text/image layout stacks vertically on mobile, with text above image (brand → headline → tags → photograph) or image above text depending on narrative priority.
• Tag pills: Horizontal "Explore" row wraps to multiple lines on narrow viewports; maintain {spacing.md} (11px) gap between wrapped items.
• Container padding: {spacing.hero-vertical} (220px) reduces significantly on mobile (estimated 80-120px) to prevent excessive scrolling before content appears.
• Footer: Multi-column footer (if present below fold) stacks to single column; padding reduces from {spacing.section-lg} (69px) to {spacing.lg} (30-40px).

Image Behavior

• Hero portrait: Scales down proportionally on mobile, maintaining vertical aspect ratio; may switch from side-positioned to full-width or centered below text stack.
• Soft-edge treatment: Fade/feather effect must remain effective at smaller sizes—ensure mask or blur radius scales proportionally or remains fixed in pixels (not percentage-based) to prevent the image appearing fully blurred on small screens.
• Loading strategy: With large photographic assets, implement lazy loading or progressive JPEG/WebP with placeholder blur-up to maintain perceived performance.

Iteration Guide

1. Build the landing page using Nuxt 3 (or Next.js if preferring React) with vanilla CSS or CSS modules—avoid Tailwind initially to precisely match the extracted values, then consider a Tailwind config mapping if utility-class preference emerges later.
2. Extract every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths (e.g., {colors.primary}, {typography.display-lg}, {rounded.lg}, {spacing.hero-vertical}). Never hard-code a hex code, pixel value, or font-size that has a corresponding token—this ensures single-source-of-truth consistency.
3. Implement state variants (hover, active, disabled, focus) as separate CSS classes or component props referencing the -hover, -active, -disabled, -focus token entries in the frontmatter. The spec documents Default and Active/Pressed/Focus states explicitly; infer hover states from active states with 10-15% lightening of backgrounds.
4. When adding a new component, classify it into one of three sub-systems: Editorial/Dialect (hero bands, headline treatments, tag groups with large type), Navigation/System (header, nav items, footer, breadcrumbs with smaller type and pill shapes), or Product/Feature (cards, CTA bands, input fields for potential below-fold content). Each sub-system has distinct spacing and type scale preferences.
5. Variants of an existing component must live as separate frontmatter entries (e.g., button-primary-active never nested inside button-primary). This flat structure enables exhaustive documentation without complexity.
6. Run npx @google/design.md lint DESIGN.md after any edits—watch for broken-ref (token references that don't resolve), contrast-ratio (accessibility failures between foreground/background pairs), and orphaned-tokens (tokens defined but never referenced in components or prose).
7. When in doubt about visual emphasis: choose larger type before bolder type (the system maxes at weight 350), signature surface cards ({component.card-glass}) before solid accent blocks, and whitespace before decorative elements. The brand's power is in restraint.
8. For the PP Neue Montreal font, obtain licensed files from Pangram Palette or substitute with Inter (Google Fonts, variable font) setting font-weight: 340 to approximate the 350 weight. Define --font-family-sans: "PP Neue Montreal", "Inter", sans-serif; in :root.
9. Test the dark canvas sections (hero with {colors.surface-soft} or {colors.canvas}) against the light header ({colors.surface}) to ensure the transition feels intentional rather than jarring. Use the {component.cta-band} pattern (inverted colors) as the bridge between light and dark zones.
10. Validate that all interactive elements meet WCAG 2.1 AA contrast ratios: {colors.ink} on {colors.surface} passes easily; {colors.body} on {colors.canvas} requires verification (the pair #f2f2f4 on #0f1012 should exceed 4.5:1); {colors.on-primary} on {colors.primary} (white on #0071e3) passes at 4.58:1 (barely AA for normal text).

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background colors, transform offsets, and timing for nav items, buttons, and tags are inferred from active states but not empirically verified from the static screenshot.
• Loading skeletons / pending states: No skeleton screens, spinners, or shimmer effects were detectable in the extracted CSS; these will need to be designed following the system's opacity-transition patterns (--transition-opacity).
• Form validation states: Beyond {component.input-field-focus}, there is no documentation of error states ({colors.error} borders/text), success indicators, or disabled input styling.
• Below-fold sections: The screenshot captures only the hero region and header; pricing tables, product showcases, testimonial grids, team sections, or dashboard previews that may exist below the fold are completely undocumented.
• Mobile navigation drawer: The collapsed mobile menu (triggered by the burger icon) is not visible in the screenshot; its layout, animation, and styling must be extrapolated from the desktop nav tokens.
• Dark mode variant: Despite {colors.canvas} being near-black, the extensions.mode is assigned as "light", suggesting this is the only mode or that a true dark mode inversion (light canvas, dark text) may exist but wasn't captured. The current implementation appears to be a "light theme with dark atmospheric bands" rather than a traditional dark mode.
• Exact glass-surface opacity values: The rgba values for {colors.surface-glass} and {colors.surface-glass-alt} were extracted from computed styles but may represent browser-normalized values rather than author-defined token values (120/255 ≈ 47% but documented as 10%—discrepancy suggests possible CSS variable transformation).
• Photographic asset specifications: File format (WebP/JPEG/AVIF), compression quality, target file size, and responsive srcset behavior for the hero portrait are unknown and critical for performance.
• JavaScript-driven behaviors: Scroll-triggered animations, intersection-observer reveals, parallax on the hero image, and any GSAP/Framer Motion timelines are invisible to static CSS extraction and must be implemented based on the motion principles outlined herein.
• Accessibility markup: ARIA roles, focus management, keyboard navigation order, and screen-reader announcements for the navigation, tags, and interactive elements are not extractable from visual/CSS data and require separate accessibility audit.