Aether Architecture

Overview

Aether Architecture is a luxury portfolio system designed for high-end architectural studios and design practices. It serves creative professionals who need to present complex spatial narratives with cinematic precision and refined restraint. The aesthetic movement is **Architectural Minimalism with Cinematic Depth**—a fusion of modernist reduction (clean typography, generous whitespace, restrained color) with cinematic visual storytelling (scroll-driven hero sequences, layered imagery, dramatic lighting). The emotional response is one of quiet confidence: the interface recedes, allowing the architecture itself to command attention. Users feel they are engaging with a studio of serious craft, not marketing theater.

The brand voice is precise, measured, and deeply respectful of space. Vocabulary favors concrete nouns (material, light, form, sequence) over abstract marketing language. Tone is never breathless or hyperbolic; instead, it is contemplative and grounded. Example sentence in brand voice: "This residence emerges from the forest through a dialogue between concrete and timber, where the interior light responds to the daily arc of the sun."

Colors

The color system is anchored in architectural authenticity: a pure white canvas (surface: #ffffff) evokes the gallery wall, while a deep charcoal (on-surface: #171717) provides the weight of concrete and shadow. The primary accent is a refined blue (#2563eb)—not a corporate blue, but a color that recalls both the sky and the precision of technical drawing. This blue appears on interactive elements (CTAs, focus states, active links) and commands attention without aggression. Secondary grays (on-surface-variant: #737373, secondary: #404040) create a sophisticated neutral hierarchy for supporting text and disabled states. A warm tertiary accent (#d97706, warm amber) is reserved for highlights, success states, and moments of warmth (e.g., interior lighting in photography). The error state (#dc

Typography

The type system is built on Inter, a geometric sans-serif that balances warmth with precision—essential for a brand that must feel both human and technical. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section headings; its tight tracking creates visual tension that draws the eye. Headline-lg (40px, 600 weight) anchors project titles and key narratives. Body-md (16px, 400 weight, 24px line-height) is the workhorse for project descriptions and studio text; the 1.5 line-height ratio ensures readability over imagery and complex layouts. Label-md (14px, 600 weight, 0.01em tracking) is used for navigation, metadata, and UI labels—its slight letter-spacing reinforces precision. On small labels over busy architectural photography, apply text-shadow:

Layout

The page rhythm follows a 12-column grid with a max-width of 1400px, allowing flexibility for both fixed and fluid layouts. The gutter is 24px, creating breathing room between columns without excessive fragmentation. Section separation uses lg spacing (40px) for major transitions between portfolio projects, md spacing (24px) for subsections within a project, and sm spacing (12px) for related content clusters. The hero section occupies the full viewport with a cinematic scroll-scrubbed sequence; subsequent sections use a container-max approach to prevent text from stretching beyond 1000px for optimal readability. Whitespace is treated as a material: generous margins around imagery (40px minimum) allow the eye to rest and the architecture to breathe. The container-max-width of 1400px accommo

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering, never through darkness or blur. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders (outline-variant: #d0d0d0) for definition. Level 2 (Cards, inputs, standard UI): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft shadow that suggests a thin lift from the surface. Level 3 (Modals, elevated cards, hover states): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread that creates clear spatial separation. Interactive elements (buttons, inputs) transition between levels on hover/focus: a button at r

Shapes

The shape philosophy is **Architectural Precision with Soft Edges**—a balance between the sharp lines of modernist design and the approachability of contemporary UI. Buttons and primary interactive elements use rounded: lg (1rem / 16px), creating a subtle softness that feels refined rather than playful. Cards and containers use rounded: xl (1.5rem / 24px), a more generous radius that suggests depth and craftsmanship. Input fields and smaller UI components use rounded: DEFAULT (0.5rem / 8px), maintaining crispness for form-heavy interfaces. The full radius (9999px) is reserved for badges, avata

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary uses background: {colors.primary} (#2563eb), padding: 12px 24px, height: 48px, and rounded: lg (16px). On hover, the background shifts to #1e40af (a darker blue from the primary family) and the shadow elevates to 0 16px 40px rgba(0, 0, 0, 0.12). All button transitions use cubic-bezier(0.2, 0, 0.38, 0.9) over 200ms, creating a snappy but not jarring response. The button-secondary is identical in layout but uses a transparent background with a 1px border (outline-variant: #d0d0d0); on hover, it gains a light background (surface-container-high: #e5e5e5) and the border darkens to on-surface (#171717). Button-ghost is used for tertiary actions (e.g., "Learn more") and has no border or background at rest; on

Do's and Don'ts

**Do**

• Do use primary (#2563eb) exclusively for interactive elements (buttons, links, focus states) and never for decorative backgrounds.
• Do maintain generous whitespace (40px+ margins) around imagery and between sections to allow the architecture to breathe.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) to small labels overlaid on photography to ensure legibility without compromising the image.
• Do use the full 12-column grid with 24px gutters; avoid single-column layouts on desktop unless the content is explicitly narrow (e.g., a testimonial).
• Do transition all interactive elements over 200ms using cubic-bezier(0.2, 0, 0.38, 0.9) for a snappy, professional feel.
• Do reserve the tertiary accent (#d97706) for moments of warmth (interior lighting, success states) and never use it for primary actions.

**Don't**

• Don't use rounded corners larger than 24px (rounded: xl) on any component; excessive rounding undermines the architectural precision of the brand.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12); deeper shadows create visual clutter and distract from content.
• Don't use the secondary gray (#404040) for body text; reserve it for UI labels and metadata. Body text must be on-surface (#171717) for optimal contrast and readability.
• Don't animate transitions faster than 150ms or slower than 300ms; the brand requires snappy, confident interactions, not sluggish or frenetic ones.
• Don't mix rounded and sharp corners in the same component; choose a radius tier (sm, DEFAULT, md, lg, xl) and commit to it.
• Don't use color to convey information alone; always pair color with text labels, icons, or other visual indicators for accessibility.