# Rationale Template Drop the following into a `design-rationale.md` alongside the code at handoff. Brief, specific, honest. Future iterations of the interface start by reading this. --- ```markdown # Design Rationale — **Date:** YYYY-MM-DD **Author:** **Invoked from:** ## 1. Purpose ## 2. Archetype **Chosen:** **Why:** **Trading away:** ## 3. Locked decisions - **Font pairing:** for headings, for text. - **Palette:** with . - **Motion philosophy:** - **Layout approach:** ## 4. Deliberately absent ## 5. Accessibility notes - Contrast verified at against - Keyboard navigation:

- `prefers-reduced-motion`: - Known concerns: ## 6. Responsive notes - Primary viewport: - Translation approach: - Unsupported viewports (if any): ## 7. Implementation notes - Framework: - Dependencies added: - Integration assumptions: - Known tradeoffs: ## 8. Open questions / follow-ups - [ ] - [ ] ## 9. References - Brand guide: - Moodboard: - Similar designs consulted: ``` --- ## Filled example (abbreviated) ```markdown # Design Rationale — SOCOM demo landing **Date:** 2026-04-19 **Author:** AI-assisted via /frontend-design **Invoked from:** "Build a landing page for the SOCOM demo; feels technical without being sterile." ## 1. Purpose Public-facing landing for the SOCOM ATAC demo. Audience: procurement officers + technical evaluators. Must feel precise, credible, and operationally-serious without reading as generic defense-contractor-beige. ## 2. Archetype **Chosen:** industrial/utilitarian with restrained editorial accents. **Why:** Audience is operational; aesthetic distinctiveness comes from precision, not decoration. **Trading away:** Decorative delight; warmth. In exchange, seriousness and signal density. ## 3. Locked decisions - **Font pairing:** IBM Plex Mono for headings; IBM Plex Sans for body. (Mono carries the operational signal; sans keeps body readable.) - **Palette:** Near-black (#0a0e0f) dominant, cool slate (#3a4851) secondary, single desaturated amber accent (#c88c3a) used only for ATAC callouts. - **Motion philosophy:** No motion on page load; hover states are snap-fast (80ms). Stillness = precision. - **Layout approach:** Grid visible as 1px cool-slate rules; content sits inside named cells. Hero aligns to a single numbered row, not centered. ## 4. Deliberately absent - No hero video, no animated gradient - No card shadows; cells share the grid rules instead - No purple, no consumer-fintech palette cues - No "book a demo" urgency; CTA is "Contact procurement" ## 5. Accessibility notes - AA verified on all text/button states - Focus rings: 2px amber outline + offset, `:focus-visible` only - `prefers-reduced-motion`: applies; hover transitions drop to 0ms ## 6. Responsive notes - Primary: desktop 1440px - Mobile: single column, grid rules preserved; named cells stack vertically in document order - Below 360px: layout is acceptable but not designed for ## 7. Implementation notes - Framework: Next.js 14 (App Router) + Tailwind + IBM Plex (self-hosted) - No additional deps - Uses existing design tokens from ./lib/tokens.ts - Integration: expects `@/components/grid` and `@/components/cell` primitives ## 8. Open questions - [ ] Is the amber accent readable in direct sunlight on outdoor demos? - [ ] Legal has approved the "ATAC" wordmark treatment ## 9. References - Brand guide: internal/DeepSat-brand-2026-03.pdf - Moodboard: Monokuma.com, Field Notes, NASA technical manuals ```