AltEdges

Overview

AltEdges is a minimalist coming-soon landing page that embodies the aesthetic of 'Refined Anticipation'—a design philosophy that uses generous whitespace, classical typography, and a single hero image to create a sense of sophisticated expectation. The brand serves design-conscious audiences and early adopters who appreciate restraint and intentionality. The emotional response is one of calm confidence: the site does not shout, but rather invites the visitor into a quiet moment of discovery. The color palette is deliberately neutral (whites, grays, and a teal accent at #00a4a6) to let the hero photograph and typography dominate. Voice: measured, professional, and slightly poetic. The brand speaks in complete sentences, avoids hype, and treats the visitor as an intelligent peer. Example: 'We're preparing something thoughtful. Join us when it's ready.'

Colors

The color system is built on a light-first foundation with a neutral gray spine and a single teal secondary accent. Primary (#ffffff) is the dominant surface and CTA button color, paired with on-primary (#000000) for maximum contrast and readability at 12px font sizes. The surface stack progresses from surface-bright (#ffffff) through surface-container (#eeeeee) to surface-container-highest (#dadada), providing subtle visual separation for layered UI elements without introducing visual noise. Tertiary (#6f6f6f) serves as the brand's neutral accent, used for borders, dividers, and secondary text at 16px body size. Secondary (#00a4a6) is reserved for accent moments—the teal banner at the top of the page and potential interactive highlights. Error states use #d32f2f for critical warnings. All

Typography

The type system pairs Playfair Display (serif, classical, 400 weight) for all headings with Source Sans Pro (sans-serif, humanist, 400/700 weights) for body and UI text. This pairing creates a visual hierarchy that feels both editorial and contemporary: Playfair's high contrast and elegant letterforms command attention at large sizes (62px for display, 36px for section headings), while Source Sans Pro's open counters and generous spacing ensure legibility at small sizes (12px for labels, 16px for body). Display text (62px, 400 weight, -0.02em letter-spacing) is used exclusively for the hero 'Launching Soon' message and creates a focal point through scale rather than color. Headline-md (36px, 400 weight) is used for section titles like 'Contact Us'. Body text (16px, 400 weight, 24px line-he

Layout

The page uses a 12-column fluid grid with a maximum container width of 1280px, centered on the viewport. The hero section spans full width with a background image and overlay, containing the centered 'Launching Soon' heading and logo. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections (hero, contact form, footer), while md spacing (24px) is used within sections for card groupings and form field separation. The gutter width is 24px on desktop, collapsing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. The 'Contact Us' section below the hero uses a centered single-column layout with max-width 600px to focus attention on the form. Whitespace is treated as a design element: the page intentionally avoids filling every pixel, allowing breathing

Elevation & Depth

Depth in this system is achieved through subtle shadow and layering rather than dramatic effects. The base layer is the white background (#ffffff) with no shadow. Cards and form containers use elevation-sm (0 1px 3px rgba(0, 0, 0, 0.06)) to create a barely perceptible lift from the surface, suggesting interactivity without visual heaviness. The cookie consent banner at the bottom uses elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)) combined with a semi-transparent dark background (rgba(111, 111, 111, 0.85)) and backdrop-filter: blur(8px) to create a frosted-glass effect that sits above the page

Shapes

The design philosophy is 'Architectural Clarity'—shapes are kept minimal and functional, with no decorative curves or organic forms. Buttons use a 4px border-radius (0.25rem) for a subtle, modern feel that avoids both sharp corners and excessive roundness. Input fields and form containers use 8px border-radius (0.5rem) for a slightly softer appearance that remains professional. Cards use 12px border-radius (0.75rem) to create a gentle visual boundary without appearing playful. The cookie banner uses 12px border-radius (0.75rem) to match card styling. Dividers and accent lines are straight and

Components

Action Elements Buttons are minimal and text-driven. The primary button uses a white background (#ffffff) with a 1px black border (#000000) and 12px bold Source Sans Pro text, padding 4px 16px, height 36px, border-radius 4px. On hover, the background transitions to #f0f0f0 with a 150ms ease-out timing. The secondary button is transparent with a 1px gray border (#6f6f6f), same padding and height, and transitions to #e9ecef background on hover. Both buttons use uppercase letter-spacing (0.05em) to create visual distinction from body text.

Containers & Surfaces Cards use a light gray background (#eeeeee), 24px padding, 12px border-radius, and elevation-sm shadow (0 1px 3px rgba(0, 0, 0, 0.06)). On hover, the background shifts to #e9ecef and shadow increases to elevation-md (0 4px 12p

Do's and Don'ts

**Do**

• Do use Playfair Display at 62px+ for hero headlines to create immediate visual hierarchy and elegance.
• Do maintain 40px (lg spacing) between major sections to create breathing room and guide the eye through the page.
• Do apply 1px borders in #d0d0d0 to input fields and cards instead of shadows to preserve the flat, minimalist aesthetic.
• Do use the teal secondary color (#00a4a6) sparingly—only for the top banner and critical accent moments to maintain visual restraint.
• Do ensure all text on white backgrounds uses on-surface (#161616) or on-surface-variant (#6c757d) to maintain 4.5:1 contrast at 16px body size.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on display text overlaid on photographs to ensure legibility.

**Don't**

• Don't use multiple colors or gradients in the background—the hero image and typography should dominate visual attention.
• Don't apply shadows larger than elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)) as this contradicts the minimalist aesthetic.
• Don't use border-radius larger than 12px on cards and containers; excessive rounding appears playful rather than professional.
• Don't mix Playfair Display and Source Sans Pro weights carelessly—use Playfair at 400 weight for headings and Source Sans Pro at 700 weight only for button labels and emphasis.
• Don't reduce the gutter width below 12px on mobile or the layout will feel cramped and unreadable.
• Don't use color to convey information alone—always pair color changes with text, icons, or other visual cues for accessibility.