Maricopa Silence

maricopa-design · alpha

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

Overview

Maricopa Silence is a long-form, scroll-cinematic page for a fictional high-desert silent retreat, and it reads like a printed monograph more than a website. The surface is a warm bone parchment (--bone #F0E8D8) printed with near-black plum ink (--dark #1C1018); a single voltage of terracotta (--terracotta #C4562A) draws every rule, price, active dot, and the coordinate chip that bleeds off the hero's right edge. Plum (--plum #5E3063) and forest green (--green #3D6B4F) play supporting roles — green owns the mono eyebrows and schedule labels, plum backs the portrait wraps and tints alternating panels. The type story is the spine of the design: Spectral, always italic for display, carries every headline, pull-quote, price, and ghosted numeral; Nunito Sans at weight 300 keeps body copy quiet; DM Mono with 0.22–0.32em tracking handles eyebrows, coordinates, schedules, and footer meta. The geometry is deliberately austere — zero border-radius anywhere except a handful of 6px dots, zero box-shadows, depth conveyed only by hairlines, a masked-parallax hero, a scroll-driven bone-to-dark theme inversion, and 260px ghost numerals floating at 5–7% opacity behind the content.

Colors

Brand / Voltage. terracotta #C4562A is the only saturated accent and it is used sparingly and consistently: the prologue/land accent rules, rate prices, calendar availability underlines, active nav dots, the bleeding coordinate chip, the policies CTA underline, the focus-visible ring, and the giant ghost numerals in the guides section. plum #5E3063 is the secondary accent — it backs the retreats and guide image wraps and tints the bring-note text. green #3D6B4F is tertiary, reserved for mono eyebrows, schedule/spec labels, list-bullet interpuncts, and the 60px footer center rule. dusk #A87DAB appears only as the italic emphasis inside the dark dates heading.

Surface. bone #F0E8D8 is the dominant page surface (prologue, retreats, land start, guides, bring, policies) and doubles as light text on dark. dark #1C1018 is the inverse surface for the dates section and footer, and the floor of the hero gradient. A pair of pale lilacs (#E8DFF0, #EDE4EA, and plum-tint rgba(94,48,99,0.10)) softly differentiate alternating guide panels.

Text. Primary ink is text-p #1C1018 on bone; text-l #F0E8D8 is light text on dark. Body copy is dialed back with rgba(28,16,24,0.70) on bone and bone-60 rgba(240,232,216,0.60) on dark.

Hairlines. Two 1px rules carry all structural separation: rgba(28,16,24,0.20) on bone and rgba(240,232,216,0.25) on dark; rate/spec rows use slightly fainter 0.15/0.12 variants.

Gradient. The hero base is a vertical #8B5A7A → #6B3D5E → #3D2833 plum-to-charcoal gradient sitting behind masked photo layers. The dates section floats a two-stop radial nebula of plum (0.35) and terracotta (0.15) over the dark ground.

Typography

Three Google Fonts, loaded via one css2 request (Spectral, Nunito Sans, DM Mono). Spectral (a literary transitional serif) is the display and pull-quote face, used almost exclusively in italic at weights 300/400/700 — it is the brand's voice. Nunito Sans at weight 300 is the humanist body face, kept light and unobtrusive. DM Mono is the structural/label face, always uppercase with wide tracking, for eyebrows, coordinates, schedules, calendar, and footer meta. Fallbacks: Georgia for the serif, system-ui for the sans, Courier New for the mono — all reasonable open substitutes if the webfonts fail.

Layout

Base unit is 4px; section vertical padding runs on a coarse rhythm of 120–160px with 40px horizontal gutters. The page is a vertical sequence of full-viewport acts. The hero is a 100vh stage with absolutely-positioned corner meta and a lower-left headline. Editorial content sections (prologue, bring, policies, footer) center on a 1100–1200px max-width with asymmetric two-column grids (e.g. 200px 1fr label/body). The scroll-cinematic sections allocate tall outer wrappers (250–400vh) with a position:sticky 100vh inner stage: retreats splits 45% / 55% image/text and swaps four panels; the land splits 1fr 1fr and inverts its theme on scroll; guides stack four sticky panels that alternate 40/60 ↔ 60/40 and order. Whitespace is generous and the rhythm unhurried; giant 180–260px ghost numerals anchor sections visually. Below 768px every sticky section un-sticks and stacks single-column.

Elevation & Depth

There are no box-shadows anywhere. Depth is built from (1) a three-layer masked parallax hero — background photo, mid and foreground layers with mix-blend-mode: multiply and linear-gradient mask-image fades, plus a loop video — moving at different --depth rates; (2) hairline rules (1px at 0.12–0.25 alpha) doing all separation; (3) the scroll-driven bone↔dark theme inversion in the land section; (4) radial-gradient glows on the dark dates section; and (5) ghosted oversized italic numerals at 5–7% opacity behind content. Flat, paper-like, atmospheric rather than dimensional.

Shapes

Aggressively flat. border-radius is 0 for every panel, image, chip, rule, and CTA — the coordinate chip is a hard rectangle, headings reveal via rectangular clip-path inset, rules and accent bars are crisp lines. The only curves are the border-radius:50% 6px dots in the calendar legend and retreats nav. The result is an editorial, print-grid feel with no softening.

Components

• Eyebrow — DM Mono 11px, 0.30em tracking, uppercase, color green; numbered (i. Prologue, v. Guides).
• Hero coordinate chip — terracotta fill, bone mono text, 6px 20px 6px 12px padding, bleeds off the right edge; reads 34°N · 106°W · 7,200 ft.
• Retreat panel — absolute stacked panels in the right column; mono № 01 · Seven nights num in terracotta, Spectral italic heading revealed by clip-path, muted body, and a two-column schedule/guide grid.
• Rate row — baseline flex row, name in bone-60 sans, price in terracotta italic Spectral 40px, 1px hairline-light divider, 14px 0 padding.
• Calendar day — mono 12px; available days get a 2px terracotta underline bar that scales to 1.4x on hover; dimmed days at 0.25 opacity.
• Retreats nav dots — 6px round dots, hairline-dark default, terracotta when active.
• Policies CTA — Spectral italic 20px terracotta with a 1px terracotta underline; hover recolors to plum (Acknowledge & apply →).
• Guide bio — eyebrow, Spectral italic name, green mono lineage, muted desc, plus a 260px terracotta ghost numeral (data-num) at 7% opacity.
• Footer — dark surface, italic Spectral brand, terracotta mono "Est. 2014", mono link column, scaleX hairline reveal, 60px green center rule.

Motion

A custom RAF scroll engine drives all parallax; IntersectionObserver drives reveals. Hero text/meta fade + de-blur + un-skew (translateY 36px → 0, skewY 4° → 0, blur 10px → 0) over 1.0s on a cubic-bezier(.2,.8,.2,1) ease used throughout. The loop video fades in over the poster (1.1s). The prologue sentence splits into words that de-blur and rise with a 35ms stagger. The retreats section swaps panels on a 400vh pin, headings revealing via clip-path inset. The land section interpolates its background bone→dark and text dark→bone over 250vh. Guides stack four sticky panels, scaling the previous down ~4% and rising names on lock. Authored-but-currently-disabled: the dates section (calendar stagger + price count-up) and policies section (tumble-lines) are commented out in the markup, so their motion never runs. A reduceMotion flag exists but is hardcoded false; only @media (scripting:none) disables animation.

Iconography

No icon library. The visual marks are entirely typographic and geometric: the · interpunct as a separator and list bullet, mono numerals (№ 01, i.–vii.), 1px hairlines, 2px terracotta accent bars, 6px dots, and → arrows in CTAs. All accent marks are terracotta or green; structural rules use the hairline alphas.

Do's and Don'ts

• Do keep terracotta as the lone saturated voltage — rules, prices, active states, focus ring — and let green/plum stay subordinate.
• Do set every headline and pull-quote in Spectral italic; it is the brand voice.
• Do keep geometry flat: no radii (beyond the 6px dots), no shadows, hairlines only.
• Do preserve the wide-tracked uppercase DM Mono for all labels and meta.
• Don't introduce rounded cards, drop shadows, or glassmorphism.
• Don't set Spectral upright for display, or use a second saturated accent.
• Don't crowd the layout — the generous 120–160px section rhythm and ghost numerals are load-bearing.
• Don't rely on the dates/policies sections; they are commented out in the current markup.

Known Gaps

• The dates & rates section (Section IV, numeric-stat-wall) and the policies section (Section VII, manifesto-tumble-lines) are present in CSS/JS but their markup is commented out — values for calendar, rate rows ($ prices, count-up targets), and tumble lines are read from the styles, not from rendered content.
• Hero mid/foreground parallax layers reference local ./assets/hero-mid.png and ./assets/hero-fg.png (not in repo); their masked multiply effect is described from CSS.
• Spacing tokens are inferred from observed values (4px base; 40/60/140px section rhythm), not an explicit scale.
• Pale guide-panel tints #E8DFF0 / #EDE4EA are one-off backgrounds, grouped with plum-tint rather than tokenized individually.