name: aerie-design
version: alpha
description: >
  The Aerie is an ultra-quiet, full-bleed real-estate microsite for a fictional
  $42M clifftop residence. It rests on a warm bone surface (`#F6F3EC`) and ink
  text (`#23262B`), with a single brass voltage (`#9C7C4A`) carrying every
  accent — links, dots, the focus underline, section labels. The signature move
  is a procession of full-viewport photographic frames captioned in tracked mono
  numerals, broken by centered statement paragraphs. Type pairs an optical
  Fraunces display serif against Hanken Grotesk body and JetBrains Mono labels,
  with wide letter-spacing and light weights throughout. Geometry is effectively
  flat: no card fills, no radii, no shadows — only hairline rules, a brass
  underline, and a slide-in inquiry drawer.
colors:
  # Brand / Voltage
  brass: '#9C7C4A'              # the single accent: links, dots, focus underline, labels
  # Surface
  bone: '#F6F3EC'              # page background; drawer background; text-on-image
  scrim: 'rgba(35,38,43,0.40)' # hero image darkening overlay
  scrim-strong: 'rgba(35,38,43,0.55)' # drawer overlay; bottom-of-frame gradient base
  # Text
  ink: '#23262B'              # headings, primary body, mono brand mark
  slate: '#4A4E55'            # muted body, labels, footer text
  # Hairlines
  rule-ink: 'rgba(35,38,43,0.10)'   # header/footer borders
  rule-spec: 'rgba(169,188,196,0.4)' # specification row dividers (cool grey-blue)
  rule-input: 'rgba(74,78,85,0.35)'  # input underline (resting)
  placeholder: 'rgba(74,78,85,0.5)'  # input placeholder text
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.6rem,7vw,7rem)
    fontWeight: 300
    lineHeight: 1.04
    letterSpacing: -0.02em
  display-sub:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2rem,4.5vw,3.6rem)
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.01em
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 17px
    fontWeight: 300
    lineHeight: 1.6
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.32em
    textTransform: uppercase
  caption:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.30em
rounded:                      # effectively none — flat, hairline-driven system
  sm: 0px
  md: 0px
  lg: 0px
spacing:                      # base unit 4px (Tailwind scale); large vertical rhythm
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  section: 160px              # py-40 (10rem) statement-section padding
components:
  header:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '1px solid {colors.rule-ink}'
    padding: '24px 32px'
  brass-link:
    textColor: '{colors.brass}'
    typography: '{typography.caption}'
    rounded: '{rounded.sm}'
    underline: '1px brass underline, animates 0→100% width on hover (0.5s)'
  frame-caption:
    textColor: '{colors.bone}'
    typography: '{typography.caption}'
    placement: 'absolute bottom-8 left-8/14 over a bottom-up scrim gradient'
  spec-row:
    textColor: '{colors.ink}'
    labelColor: '{colors.slate}'
    typography: '{typography.body}'
    valueTypography: '{typography.caption}'
    border: 'bottom 1px solid {colors.rule-spec}'
    padding: '20px 0 (8px on the price row)'
  aerie-input:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: 'bottom 1px solid {colors.rule-input}; focus {colors.brass}'
    padding: '0.65rem 0'
  drawer:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.ink}'
    width: '100% up to max-width 440px'
    padding: '48px 36px/48px'
    motion: 'slides in from right, transform 0.7s cubic-bezier(0.16,1,0.3,1)'
motion:
  drawer: 'translateX(100%)→0 over 0.7s cubic-bezier(0.16,1,0.3,1); overlay fades 0.6s'
  brass-underline: 'width 0→100% over 0.5s ease on link hover'
  frame-reveal: 'anime.js on scroll — opacity 0→1, scale 1.06→1, 1200ms ease out(3)'
  caption-reveal: 'anime.js on scroll — opacity 0→1, 900ms delay 500ms ease out(2)'
  head-reveal: 'anime.js on scroll — opacity 0→1, translateY 24→0, 1000ms ease out(3)'
  smooth-scroll: 'Lenis smooth scroll, lerp 0.08, autoRaf'
icons:
  library: none (no icon font / SVG set)
  style: 'glyph-only — a 5px brass square dot and a mono ✕ close glyph'
  sizes: { dot: 5px, close: 18px }
  color: '{colors.brass}'

The Aerie

aerie-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

The Aerie is a luxury clifftop-residence microsite that trades almost entirely on restraint and full-bleed photography. The whole page sits on a warm bone surface #F6F3EC with near-black ink text #23262B, and a single brass voltage #9C7C4A does all the accent work — the wordmark dot, every link, section labels, the input focus line. The structure is a slow procession: a darkened full-screen hero ("A residence at the edge of the world."), centered statement paragraphs, then a run of full-viewport image "frames" each captioned with a tracked mono numeral (02 — THE GLASS, 05 — THE WATER) sitting over a bottom-up scrim gradient. A specifications block lists price and stats as hairline-divided rows, and a slide-in inquiry drawer handles the "Private Viewing" request. Type is the second voice: an optical Fraunces serif at light weight for displays, Hanken Grotesk light for body, and JetBrains Mono with wide 0.30–0.34em tracking for every label. There are no card fills, no radii, and no shadows — depth comes only from photography, hairlines, and motion.

Colors

Brand / Voltage. One accent only: brass #9C7C4A. It paints the 5px square dot beside the wordmark, the "PRIVATE VIEWING" links, the section label "SPECIFICATIONS", the small rules above statement copy, and the input focus underline + animated link underline.

Surface. bone #F6F3EC is the page background, the drawer background, and the text color over dark photography. Two scrims darken imagery: scrim rgba(35,38,43,0.40) over the hero, and scrim-strong rgba(35,38,43,0.55) for the drawer overlay and as the base of each frame's bottom gradient.

Text. ink #23262B for headings, primary body, and the mono wordmark. slate #4A4E55 for muted body copy, spec labels, form labels, and footer text.

Hairlines. Three rule colors carry all the structure: rule-ink rgba(35,38,43,0.10) for the header and footer borders; rule-spec rgba(169,188,196,0.4), a cool grey-blue, for the specification row dividers; and rule-input rgba(74,78,85,0.35) for the resting input underline (with placeholder rgba(74,78,85,0.5)).

Typography

Three Google Fonts: Fraunces (a high-contrast optical serif, opsz forced to 144 via font-optical-sizing) for displays; Hanken Grotesk for body; and JetBrains Mono (tabular-nums) for every label, caption, and stat value. All are open-source, so no substitutes are needed. The dominant texture is light weights (300) and wide letter-spacing on the mono.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.6rem,7vw,7rem)	300	1.04	-0.02em	Hero H1
display-sub	clamp(2rem,4.5vw,3.6rem)	300	1.1	-0.01em	"Arranged privately…" H2; price value
body	17–19px	300	1.6	—	Statement paragraphs, drawer copy
label	10–12px	400	—	0.26–0.34em	Section labels, links, form labels (uppercase)
caption	11–15px	400	—	0.18–0.34em	Frame captions, spec values, footer, coordinates

Layout

Base unit is the Tailwind 4px scale, but the page reads as generous vertical rhythm — statement sections use py-40 md:py-56 (160–224px). The page is a single scrolling column: a fixed transparent header; a full-screen hero with a darkened background photo and centered display + mono coordinates; centered statement sections capped at ~620px/760px/18ch; and four h-screen image frames with bottom-left mono captions. The specifications block is centered at max-width:760px with full-width hairline rows (label left, value right). A footer with three mono items closes it. The inquiry drawer is fixed right, full-height, max-width:440px.

Elevation & Depth

Flat by design. There are no box-shadows anywhere. Depth is created by (1) full-bleed photography, (2) two dark scrims and bottom-up linear gradients (linear-gradient(to top, rgba(35,38,43,0.55), transparent)) that seat the white captions, and (3) hairline rules in three weights. The drawer floats over a semi-opaque overlay rather than casting a shadow.

Shapes

Sharp throughout — there is no rounded-* usage and no border-radius, so the radius scale is effectively 0. The recurring geometric motifs are a 5px brass square dot (wordmark + footer), short brass hairline rules, and full-bleed rectangles of photography. Nothing is a pill or a soft card.

Components

• Header — fixed, transparent, 1px bottom border in rule-ink; left wordmark "THE AERIE" + brass square; right brass link "PRIVATE VIEWING". Mono, 0.32em tracking, padding 24px 32px.
• Brass link — mono, brass text, with a ::after underline that animates from 0 to 100% width over 0.5s ease on hover. Used for all CTAs.
• Frame caption — absolute bottom-8 left-8/14, bone text, mono 0.30em, e.g. "03 — THE EDGE", over a bottom gradient.
• Spec row — flex space-between, label (Hanken light, uppercase, 0.18em, slate) vs. value (mono, ink); 1px bottom divider in rule-spec; rows py-5, the price row larger (py-8, value in display serif).
• Input (aerie-input) — transparent, no box, 1px bottom border that turns brass on focus; padding 0.65rem 0; mono label above each field.
• Drawer — bone panel, full-height, max-width:440px, padding 48px 36–48px; slides in from the right; contains a mono kicker, Fraunces "Request access." head, body copy, four underline fields, and a brass "REQUEST VIEWING" link.
• Footer — three mono items (THE AERIE © 2026, brass dot, PRIVATE OFFERING · UHNW) with a 1px top border in rule-ink.

Motion

Motion is scroll-driven via anime.js with Lenis smooth scroll (lerp 0.08). Frame images fade and settle (opacity 0→1, scale 1.06→1, 1200ms ease out(3)) as they enter; captions fade in 900ms with a 500ms delay; statement heads rise and fade (translateY 24→0, 1000ms). The drawer slides via CSS transform 0.7s cubic-bezier(0.16,1,0.3,1) with its overlay fading 0.6s. Brass links draw their underline 0→100% over 0.5s.

Iconography

There is no icon library. The only glyphs are a 5px brass square used as a decorative dot (wordmark and footer) and a mono ✕ (18px) as the drawer close button. All other "icons" are tracked mono numerals and em-dashes used typographically.

Do's and Don'ts

• Do keep brass #9C7C4A as the only accent — one voltage carries the system.
• Do use wide mono tracking (0.26–0.34em, uppercase) for every label and caption.
• Do let photography and hairlines do the structural work; keep weights light.
• Don't add box-shadows, card fills, or rounded corners — the system is flat and sharp.
• Don't introduce a second accent color or heavy font weights; it would break the restrained, UHNW tone.
• Don't crowd sections — the generous py-40/56 rhythm is part of the design.

Known Gaps

• Spacing tokens (xs–xl) are the standard Tailwind 4px scale the markup uses; the named section: 160px is read from py-40. These are inferred groupings, not a declared scale in the HTML.
• Font sizes vary per instance (e.g. body 17/19px, captions 10–15px); the table lists representative values.
• Reveal timings/easings are read from the anime.js animate() calls; exact on-screen appearance depends on scroll position and Lenis lerp.