# Form & Phase — Site and system decisions 17 September 2026 · Working version 0.5. These are implemented proposals for review, not final brand approval. ## Composition - The homepage opens with one broad promise, then connects strategy, experience, and engineering. Technical specifics appear deeper in the page and in the expertise destination. - Artwork is atmospheric, with quiet space behind live text. No project or device screenshot leads the studio identity. - A dark material chapter explains the underlying quality. A warm accent close gives the page a distinct ending before a full footer. - Proof remains compact. The first implementation uses real capability detail links; client work, testimonials, and outcome metrics are not invented. - The expertise page demonstrates structure and depth through readable sections, quality tabs, and engagement questions. It supports visitors arriving with either a new idea or an existing product. - The contact page keeps the invitation broad and requests only name, email, and context; organization and timing are optional. ## Space and content - The wide composition expands to 90 rem; reading and form measures stay 42 and 36 rem. Gutters use `clamp(1.5rem, 4vw, 6rem)`. - General section rhythm uses 4–10 rem. Dark feature, studio statement, and footer use deliberate page-specific spacing. - Navigation collapses at 800 px. Contact and major editorial splits become one column at 800 px. Service summaries stack before their three columns become too narrow. - Hero content has natural height. Artwork can crop, but text never truncates. Decorative mobile crops shift to the lower area. - Typical content limits: hero headline 3–8 words; opening paragraph 15–30 words; service heading 3–7 words; service summary 20–45 words; compact insight title 6–12 words. These are editing targets, not clipping rules. - Long button labels wrap and increase the control height. The lab provides a narrow-width and extended-copy specimen. ## Controls and behavior - Button variants: primary, secondary, outline, ghost, text/link. Sizes have 40, 48, and 56 px minimum heights. - Disabled variants retain their visual identity. Loading remains focusable, reserves indicator space, blocks repeated activation, and leaves a stable label. - Focus is a 3 px outline with 3 px offset. Validation links errors to fields and provides a focusable summary. - Contact success requires a successful response with `{accepted:true}` from the configured same-origin endpoint. Without accepted delivery, entries remain available with an error and copy fallback. - Radix handles compound controls, menu focus, tab selection, and dialog containment. Native text inputs keep normal browser behavior. - Motion uses 120 ms small feedback, 180 ms transitions, and 400 ms disclosure. OS reduced motion wins; the lab also provides a local override. ## Theming and contrast - Root theme supports system, light, and dark and persists only the preference. Prerender and hydration start from the same React state; a tiny prepaint script applies the saved appearance. - Nested material and logo variants resolve from the nearest theme. - The accent chapter uses dark ink for copy. Primary uses ink with white text; secondary uses pale fill with ink. Ink hover values are intentionally dark enough to work for text links too. - `component-contrast-report.json` records 78 checked solid token pairs across light, dark, and accent. It does not certify glass composites, all states, or the complete site. ## Remaining production decisions Actual inquiry destination and delivery handling; production privacy arrangements; final studio copy and contact details; approved project evidence; broader assistive-technology and browser validation. The local build is complete enough to review composition and behavior while these remain open. ## Optical material and navigation — v0.4 - The hero is at least one dynamic viewport high. Natural content height takes priority on short screens and at larger text sizes. The down-arrow is a glass control with section focus transfer. - One paired still composition belongs to the hero. Deeper sections use scalable CSS geometry, and selected proof surfaces use layered glass. The native generated sources are 1672 × 941 px despite the requested 4K format; responsive delivery preserves this honest limit. - Glass has a tint, backdrop softness, a directional 1 px rim, a soft halo, and sharp content. Primary action labels retain a stable colored center; secondary and outline controls carry clearer glass. - A shared mouse light changes nearby edge direction and intensity. Touch, reduced motion, and fixed-light selection retain the resting appearance. This simulates optical depth without distorting live page geometry. - Header overlays the background across all studio pages. Inner height changes 104 → 72 px on desktop and 88 → 68 px on mobile, with 48/16 px scroll hysteresis. The header remains fixed, so content does not shift. Expanded navigation has a themed gradient fading into the hero; compact navigation gains a theme-specific glass veil. - Material tokens join the shared JSON source. Transparent composites require visual review in addition to the existing solid-pair calculations. - Refinement: button inset shadows and pointer-driven face/scene overlays were removed. Controls within 96 px gain a 1 px rim and a soft halo, entering over 160 ms and fading over 650 ms after moving away. Stationary nearby pointers hold the effect. - Every optical control and panel shares the halo. Dark neutral rims face the pointer; light/accent rims shade the opposite side. A configurable color lights the near side in every theme. Primary uses deep vermilion with white text and coral light; the lab includes a blue example. ## Clothoid easing refinement The canonical Compass Web utility and Builder copy share SHA-256 `52e43b9f3370dcca38214c308c2ec0c22c9505f589fdb3a16f478ac01669de55`. This is the corrected forward/reverse implementation documented on 17 August 2026. The studio uses a portable unchanged copy during the build. Existing light/dark rim direction, stationary edge, glow decay, flat button centers, and reduced-motion behavior are preserved. Gradient treatment remains a reviewable visual proposal. - Light-mode refinement: neutral rim alpha reduced from 0.64 to 0.28, softening both the line and its shared halo. - Primary-button refinement: a pale 1 px line sits just inside the button edge. Its outward halo retains the original coral/custom edge color; both layers share the same direction and proximity fade. ## Complete content structure — v0.5 - Every main navigation link opens its own page. Expertise is now a true overview; application engineering has its own route alongside four other service pages. Design Systems remains a canonical main destination. - Sixteen studio pages cover the full planned first-release story, including Approach, Quality & Care, Work, the studio project, Studio, Contact, and production-facing utility pages. The original strategic outline is supplemented by `CONTENT-MAP.md`. - Architecture decisions, stack selection, data strategies, web/mobile strategy, responsive behavior, e-commerce, APIs, integrations, cloud, SDLC, deployment, and operations each have substantive sections with decisions and outputs. - The approved Work starting point is Form & Phase’s own system. It is labeled studio-initiated. No client credentials or commercial outcomes are implied. - Homepage work stays contained. New depth lives in dedicated pages with open editorial layouts and contextual links. The component lab remains inspectable evidence. - The local preview stays under `/studio/`; its Studio destination is `/studio/about/`. Domain and production URL mapping are separate deployment decisions. ## Production voice and utility layout Public pages omit local-preview and launch-setup language. Development notes belong in project documentation. Privacy and Accessibility now use a sticky contents rail beside a 44 rem reading column, with numbered sections and a short summary. On mobile, the contents precede the article. The contact form no longer simulates successful delivery. ## Icon-only controls All icon-only buttons are circles. Shared sizes use equal width and height at 40, 48, and 56 px; guide utility controls use 40 px. Hover, pressed, focus, loading, and disabled states preserve that geometry. A loading indicator replaces the icon rather than adding a second slot. Optical rims and halos inherit the circular boundary. ## Control size scale Small buttons, single-line inputs, and selects use 40 px; default is 48 px and large is 56 px. These derive from the shared control-height tokens. Compact selects and guide icon controls use the small token. Error borders compensate through padding to preserve the selected height. ## Guide cover reading width The cover’s outer padding positions the composition; its heading carries a 680 px maximum width and supporting copy a 608 px reading width. Do not cap the padded wrapper at 800 px: wide-screen centering padding would consume the text space. Reference tables use the existing table-scroll wrapper on narrow screens. ## Heading tracking Heading spacing now uses shared typography tokens: display/hero −0.02em, standard headings −0.015em, and smaller titles −0.01em. The guide cover allows 680 px for the looser headline while retaining a narrower deck. At the smallest studio breakpoint, the homepage heading uses 42 px type to preserve its intended two-line composition.