@litfamily/litopencode 1.0.0

package/skills/frontend-ui-ux/references/design/apple.md

@@ -0,0 +1,250 @@
+# Design System Inspired by Apple
+
+> Category: Media & Consumer
+> Consumer electronics. Premium white space, SF Pro, cinematic imagery.
+
+## 1. Visual Theme & Atmosphere
+
+Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.
+
+Across the five analyzed pages, the rhythm is consistent but not monolithic. Marketing surfaces (homepage and Environment) use cinematic black-and-light chaptering, while commerce surfaces (Store and Shop flows) introduce tighter spacing, more utility controls, and denser card stacks without breaking the core brand grammar. The result is one system with two gears: showcase mode and transaction mode.
+
+Typography is the stabilizer. SF Pro Display carries hero and merchandising hierarchy with compact line heights and controlled tracking, while SF Pro Text handles product metadata, navigation, filters, and dense selection UI. The typography stays understated, but the scale range is wide enough to support both billboard hero messaging and micro utility labels.
+
+**Key Characteristics:**
+- Binary section rhythm: deep black scenes (`#000000`) alternating with pale neutral fields (`#f5f5f7`)
+- Single blue accent family for action and link semantics (`#0071e3`, `#0066cc`, `#2997ff`)
+- Dual operating modes in one system: cinematic showcase modules and dense commerce configurators
+- Heavy reliance on imagery and material finishes; UI chrome remains visually thin
+- Tight headline metrics (SF Pro Display, semibold) paired with compact body/link typography (SF Pro Text)
+- Pill and capsule geometry as signature action language (`18px` to `980px` and circular controls)
+- Depth used sparingly; contrast and surface separation do most of the layering work
+- Multi-page color-block rhythm: black hero chapters -> pale neutral merchandising fields -> utility white retail surfaces -> dark micro-surfaces for controls
+
+## 2. Color Palette & Roles
+
+> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`
+
+### Primary
+- **Absolute Black** (`#000000`): Immersive hero canvases, high-drama product chapters, deep UI anchors.
+- **Pale Apple Gray** (`#f5f5f7`): Main light surface for feature bands, comparison blocks, and editorial transitions.
+- **Near-Black Ink** (`#1d1d1f`): Primary text and dark-fill control color on light canvases.
+
+### Secondary & Accent
+- **Apple Action Blue** (`#0071e3`): Primary action fill and focus-signaling brand accent.
+- **Body Link Blue** (`#0066cc`): Inline link color optimized for long-form readability.
+- **High-Luminance Link Blue** (`#2997ff`): Bright link treatment on darker scenes where stronger contrast is required.
+
+### Surface & Background
+- **Pure White Canvas** (`#ffffff`): Retail/product-list backgrounds and dense transactional sections.
+- **Graphite Surface A** (`#272729`): Dark card and media-control context layer.
+- **Graphite Surface B** (`#262629`): Slightly deeper dark utility layer for control groupings.
+- **Graphite Surface C** (`#28282b`): Elevated dark supporting surfaces.
+- **Graphite Surface D** (`#2a2a2c`): Darkest elevated step used for separation in richer dark scenes.
+
+### Neutrals & Text
+- **Secondary Neutral Gray** (`#6e6e73`): Body secondary copy, helper descriptions, tertiary metadata.
+- **Soft Border Gray** (`#d2d2d7`): Dividers, subtle outlines, and muted utility containment.
+- **Mid Border Gray** (`#86868b`): Stronger field outlines in product-configuration and filter contexts.
+- **Utility Dark Gray** (`#424245`): Dark-neutral text/surface crossover in store contexts.
+
+### Semantic & Accent
+- **Selection/Focus Signal** (`#0071e3`): Shared focus and selected-state signal across marketing and commerce contexts.
+- **Error/Warning/Success**: No distinct semantic palette was consistently visible in the extracted surface set.
+
+### Gradient System
+- The extracted pages are overwhelmingly solid-surface driven. Visual richness comes from photography and finish rendering rather than persistent UI gradients.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display Family:** `SF Pro Display`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Text Family:** `SF Pro Text`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Usage Split:** Display family handles hero/product headlines and merchandising headings; Text family handles navigation, controls, labels, and dense commerce copy.
+
+### Hierarchy
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Environment/store hero scale |
+| Hero Display L | 56px | 600 | 1.07 | -0.28px | Homepage hero moments |
+| Section Display | 48px | 500-600 | 1.08 | -0.144px | Major chapter headings |
+| Product Heading | 40px | 600 | 1.10 | normal | Product and campaign section titles |
+| Feature Display | 38px | 600 | 1.21 | 0.152px | Device and merchandising callouts |
+| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | Module-level sub-heroes |
+| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Tile-level naming and key copy |
+| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Configurator and grouped content headers |
+| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Larger promotional links |
+| Subhead | 19px | 600 | 1.21 | 0.228px | Compact section intros |
+| Body Primary | 17px | 400 | 1.47 | -0.374px | Standard body and retail descriptions |
+| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Emphasized labels and key values |
+| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Buttons, helper labels, compact nav text |
+| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Fine print, micro labels |
+| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Dense metadata and legal support text |
+
+### Principles
+- **Continuity across page types:** The same typographic DNA spans cinematic launches and product-purchase flows, preventing a brand split between marketing and commerce.
+- **Compression at scale:** Display tiers use tight leading and controlled tracking to feel machined and product-first.
+- **Readable density at retail depth:** SF Pro Text balances compactness with enough vertical rhythm for long product lists and option matrices.
+- **Measured weight ladder:** 600 is the dominant emphasis weight; 700 appears selectively; 300 is used sparingly for contrast in larger lines.
+
+### Note on Font Substitutes
+- Closest freely available substitutes: `Inter` for text-heavy implementation and `SF Pro Display-like` metrics approximated with `Inter Tight` for headings.
+- When substituting, increase line-height slightly (+0.02 to +0.06) on body sizes and reduce negative tracking intensity to preserve readability.
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Fill Action:** `#0071e3` background, `#ffffff` text, 8px radius, compact horizontal padding (commonly 8px 15px). Used for decisive purchase/progression actions.
+- **Dark Fill Action:** `#1d1d1f` background, `#ffffff` text, 8px radius. Used when light surfaces need a restrained high-contrast primary.
+- **Pill/Capsule Action Family:** large capsule actions at `18px`-`56px` radii and extreme pill links at `980px`. Establishes Apple’s soft but precise call-to-action silhouette.
+- **Utility Filter/Button Shells:** light shells (`#fafafc` or translucent white) with subtle gray borders (`#d2d2d7` / `#86868b`) for dense configuration contexts.
+- **Pressed Behavior:** active controls commonly reduce scale or shift fill slightly to indicate physical press confirmation.
+
+### Cards & Containers
+- **Editorial/Product Cards:** light cards on `#f5f5f7` or white fields with minimal framing and image-first composition.
+- **Dark Utility Cards:** graphite steps (`#272729` to `#2a2a2c`) used for overlays, media controls, and dark-context modules.
+- **Configurator Panels:** rounded containers (often 12px-18px) with clear but restrained border definition.
+- **Carousel/Spotlight Modules:** larger rounded shells (`28px`-`36px`) for featured content lanes.
+
+### Inputs & Forms
+- **Retail Input Fields:** translucent or white backgrounds, dark text (`#1d1d1f`), border-led containment (`#86868b`).
+- **Selection Controls:** circular/toggle-like control geometry appears frequently in product selection interfaces.
+- **Density Strategy:** form fields remain visually quiet to keep device imagery and pricing hierarchy dominant.
+
+### Navigation
+- **Global Marketing Nav:** compact dark translucent bar with small-type links and restrained iconography.
+- **Store/Sub-shop Nav Layers:** additional utility bars, chips, and segmented controls for category and product narrowing.
+- **Link Hierarchy:** link blues remain the primary interactive signal while neutral text supports dense navigation sets.
+
+### Image Treatment
+- **Object-First Photography:** hardware and accessories are foregrounded on controlled solid surfaces.
+- **High-fidelity finish rendering:** reflective/material details are central to visual persuasion.
+- **Mixed framing:** full-bleed hero scenes coexist with rounded retail cards and tightly cropped merchandising thumbnails.
+
+### Other Distinctive Components
+- **Product Configurator Matrix:** option stacks and selectors combining chips, radio-style controls, and contextual pricing/summary blocks.
+- **Carousel Control Dots/Arrows:** circular control vocabulary in muted overlays for gallery progression.
+- **Environment Story Panels:** narrative chapters that blend editorial typography with cinematic product/environment visuals.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit is effectively `8px`, but the system supports dense micro-steps for precision alignment.
+- Frequently reused spacing values across pages: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
+- Universal rhythm constants visible across both marketing and retail flows: `8px` unit scaffolding with `14-20px` utility intervals for component padding and list spacing.
+
+### Grid & Container
+- **Showcase pages:** large central columns with broad horizontal breathing room and full-width color chapters.
+- **Commerce pages:** tighter multi-column product and control grids with frequent modular stacking.
+- **Container behavior:** constrained readable core with generous outer margins at desktop widths.
+
+### Whitespace Philosophy
+- **Scene pacing:** major visual chapters use broad top/bottom breathing room.
+- **Information compaction where needed:** retail pages deliberately compress spacing to expose more actionable information per viewport.
+- **Contrast-led separation:** section transitions rely more on surface changes than decorative separators.
+
+### Border Radius Scale
+- **5px:** tiny utility links/tags and minor small shells.
+- **8px-12px:** standard controls and compact fields.
+- **16px-18px:** cards, module frames, and commerce panels.
+- **28px-36px:** larger module and spotlight containers.
+- **56px / 100px / 980px:** capsules, large pills, and signature elongated CTA forms.
+- **50%:** circular media and selection controls.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|------|-----------|-----|
+| Level 0 | Flat neutral surfaces (`#ffffff`, `#f5f5f7`, `#000000`) | Main narrative and product stages |
+| Level 1 | Subtle border containment (`#d2d2d7`, `#86868b`) | Filters, input fields, utility cards |
+| Level 2 | Soft shadow (`rgba(0,0,0,0.08)` to `rgba(0,0,0,0.22)` where present) | Highlighted cards and elevated merchandise modules |
+| Level 3 | Dark-surface stepping (`#272729` -> `#2a2a2c`) | Overlays, media controls, dark utility clusters |
+| Accessibility | Blue focus signal (`#0071e3`) | Keyboard and selection emphasis |
+
+Depth is intentionally restrained. Apple favors tonal contrast, surface stepping, and compositional hierarchy over heavy shadow stacks.
+
+### Decorative Depth
+- Decorative depth is primarily created by photographic realism and material rendering, not synthetic UI effects.
+- Translucent overlays and glass-like utility bars provide mild atmospheric layering in navigation and controls.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the neutral triad (`#000000`, `#f5f5f7`, `#ffffff`) as the structural foundation.
+- Reserve blue accents for genuine action and navigation semantics.
+- Keep typography tight and deliberate, especially at display scales.
+- Maintain the capsule/circle geometry language for controls and key actions.
+- Let product imagery carry visual drama; keep chrome understated.
+- Use border-led containment in dense retail contexts instead of heavy card ornamentation.
+- Preserve clear separation between showcase modules and transactional modules while keeping core tokens shared.
+
+### Don't
+- Don’t introduce broad secondary accent palettes that compete with Apple blue.
+- Don’t overuse shadows, glow effects, or decorative gradients in core UI chrome.
+- Don’t mix unrelated font families or loosen tracking indiscriminately.
+- Don’t flatten all corners to a single radius; Apple uses purposeful radius tiers.
+- Don’t overload commerce modules with thick borders or loud visual effects.
+- Don’t remove neutral contrast cadence between dark and light chapters.
+- Don’t treat marketing and purchase flows as separate design systems.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | 374px and below | Tightened retail controls, single-column product stacks |
+| Mobile | 375px-640px | One-column modules, compact action rows, condensed selectors |
+| Tablet | 641px-833px | Expanded cards and mixed 1-2 column transitions |
+| Tablet Wide | 834px-1023px | More stable multi-column merchandising, larger text blocks |
+| Desktop | 1024px-1240px | Full retail layouts and product comparison structures |
+| Desktop Wide | 1241px-1440px | Marketing hero expansion and broader section spacing |
+| Large Desktop | 1441px+ | Maximum chapter breathing room and wide editorial composition |
+
+### Touch Targets
+- Primary and secondary actions are generally presented in tap-friendly pill/button geometries.
+- Circular media and selection controls align with minimum touchable intent in mobile contexts.
+- Dense commerce UI uses compact labels but maintains clear hit regions via surrounding shape padding.
+
+### Collapsing Strategy
+- Marketing hero typography scales down in discrete tiers while preserving hierarchy contrast.
+- Product and commerce grids collapse from multi-column to stacked cards with persistent selector visibility.
+- Utility navigation compresses into simpler link/control groupings while preserving key actions.
+- Option/configuration clusters become vertically sequenced to keep purchase flow linear on small screens.
+
+### Image Behavior
+- Product imagery preserves aspect and centrality through breakpoints.
+- Hero visuals remain dominant on mobile, with text repositioned around media priority.
+- Retail thumbnails stay legible via tighter crop logic and denser card stacking.
+- Image-led modules continue to anchor the rhythm as layout density increases.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary action blue: **Apple Action Blue** (`#0071e3`)
+- Inline link blue: **Body Link Blue** (`#0066cc`)
+- Dark chapter canvas: **Absolute Black** (`#000000`)
+- Light chapter canvas: **Pale Apple Gray** (`#f5f5f7`)
+- Primary text on light: **Near-Black Ink** (`#1d1d1f`)
+- Secondary text: **Secondary Neutral Gray** (`#6e6e73`)
+- Retail border soft: **Soft Border Gray** (`#d2d2d7`)
+- Retail border strong: **Mid Border Gray** (`#86868b`)
+
+### Example Component Prompts
+- "Design an Apple-style product hero on a black canvas (`#000000`) with SF Pro Display semibold headline (48-56px), concise supporting copy, and two capsule CTAs using `#0071e3` and `#1d1d1f`."
+- "Create a commerce configuration panel on white (`#ffffff`) with 18px rounded cards, `#86868b` border fields, SF Pro Text 17px body copy, and compact option selectors."
+- "Build a merchandising card grid alternating `#f5f5f7` and white surfaces, with image-first cards, restrained shadows, and 14-17px SF Pro Text metadata."
+- "Generate a carousel control cluster using circular buttons (50% radius), muted gray overlays, and clear active feedback for gallery navigation."
+- "Compose a mixed marketing + retail page rhythm: dark showcase chapter -> light feature chapter -> dense product list module while keeping blue accents only for actions and links."
+
+### Iteration Guide
+1. Lock the neutral foundation first (`#000000`, `#f5f5f7`, `#ffffff`) before tuning accents.
+2. Keep blue accents scarce and purposeful; if everything is blue, hierarchy collapses.
+3. Tune typography in this order: display scale, body readability, then micro labels.
+4. Match radius by component class (field, card, capsule, circle) rather than one-size-fits-all rounding.
+5. Increase density gradually when moving from showcase sections to commerce sections.
+6. Validate that product imagery remains the strongest visual layer after each revision.
+
+### Known Gaps
+- Distinct semantic status colors (error/warning/success) were not consistently visible in the extracted page set.
+- Some interaction micro-states vary by module and are not represented as universal system tokens.
+- A few retail modules expose context-specific typography overrides that do not appear across all five pages.

package/skills/frontend-ui-ux/references/design/aside.md

@@ -0,0 +1,209 @@
+# Design System Inspired by Aside
+
+> Category: Developer Tools & IDEs
+> AI browser agent. Bright product-app marketing, custom display type, soft squircle controls, agent-browser product framing.
+
+## Provenance
+
+This reference is derived from a live capture of `https://aside.com/` on 2026-06-30, plus a reconnaissance pass following `JCodesMore/ai-website-cloner-template` at commit `8dd9cb47dde0d49fec06ee1d69bedd04840f3c95`.
+
+Reviewer-run evidence artifacts for the source capture were written under `.omo/evidence/20260630-aside-frontend-reference/`:
+
+- `aside-live-extraction.json`
+- `aside-home.png`
+- `cloner-output-summary.md`
+- `cloner-desktop-1440.png`
+- `cloner-tablet-768.png`
+- `cloner-mobile-390.png`
+
+Those `.omo/evidence` files are local review artifacts, not shipped package assets. Downstream agents should recapture the live site when fidelity to the current Aside page matters. This file carries the stable, reviewer-visible digest from that capture.
+
+### Reviewer-Visible Capture Digest
+
+- **Source page:** `https://aside.com/`
+- **Source metadata:** title indicated a browser built to do real work; description framed it as a browser that completes complex work across sites, accounts, and history.
+- **Template source:** `JCodesMore/ai-website-cloner-template` at commit `8dd9cb47dde0d49fec06ee1d69bedd04840f3c95`; the template was used as a local reconnaissance workflow, not copied into this repo.
+- **Screenshots captured:** live page at 1440px wide; reconstructed reconnaissance screenshots at 1440px, 768px, and 390px widths.
+- **Page topology:** compact nav, centered hero, sky/cloud hero wash, large browser-product frame, explanatory intro band, capability sections, benchmark tabs, password/security sections, blue closing CTA band, dense footer.
+- **Extracted type signals:** `displayFont` for hero and section display; Geist for body/UI; Geist Mono available for technical specimens.
+- **Extracted scale signals:** H1 around 48px / 52px with slight negative tracking; body 16px / 24px; UI labels around 14px / 20px.
+- **Extracted surface signals:** white page canvas, ink text around `#090b0c`, soft gray controls around `#f5f5f5`, black-opacity dividers, pill trust badge, rounded/squircle CTA buttons, product-frame shadows.
+- **Responsive observations:** desktop preserves full nav and large browser frame; tablet narrows the product frame; mobile crops/stacks the frame while keeping the hero and CTA visible.
+
+Do not treat this file as a license to copy Aside's logo, product screenshots, copy, or proprietary assets. Use it as a token and layout reference for original AI-browser, agent-workflow, and product-app surfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Aside's current site reads as a bright, high-confidence product application rather than a dark developer landing page. The canvas is mostly white with hairline black dividers, dense product UI, large custom display headlines, and pale sky-blue atmospheric bands in the hero and final CTA. It feels closer to a native app launch page than a SaaS template: crisp, controlled, and built around the promise that the browser itself can do real work.
+
+The signature move is the contrast between calm white space, a gentle cloud-like blue wash, and dense browser-product framing. The page opens with a centered hero, a small Y Combinator trust pill, and a large browser/app visual. Below that, sections use full-width bands, thin separators, and app-like capability cards instead of decorative feature-card grids. The tone is practical and confident: precise controls, product screenshots, benchmark pills, password/memory/security stories, and compact navigation.
+
+Rounded elements should feel like soft squircles, not generic `rounded-2xl` blobs. Live capture shows very large pill radii for trust badges and hero CTAs, medium squircle radii around compact action buttons, and square rhythm for structural section boundaries. Depth is created by product frames, soft shadows, white/black opacity borders, and layered screenshot surfaces, not by colorful background decoration.
+
+## 2. Color Palette & Roles
+
+### Core Canvas
+
+- **White** (`#ffffff`): primary page background. Use for the main canvas and broad content bands.
+- **Ink Black** (`lab(2.93655 -0.435196 -0.608262)`, approximate `#090b0c`): primary text. Use this instead of pure black when possible.
+- **Soft Gray Surface** (`lab(96.52 -0.0000298023 0.0000119209)`, approximate `#f5f5f5`): rounded control and panel surface.
+- **Hairline Divider** (`rgba(0,0,0,0.06)`): section borders and subtle containment.
+- **Muted Text** (`#737373` to `#a1a1a1` range): captions, footer links, secondary product explanations.
+
+### Action Surfaces
+
+- **Primary Button Surface**: light gray or ink-inverted depending on context. Use compact contrast instead of saturated brand color.
+- **Primary Button Text**: ink black on light controls; white on dark controls.
+- **Hover Surface**: slightly darker neutral fill with 150ms color/background/border transition.
+- **Focus Ring**: neutral gray ring. Keep it visible against white and soft gray.
+
+### Accent Use
+
+Aside's live capture does not rely on one dominant neon accent. Accents come from product imagery, benchmark pills, subtle icon color, and carefully placed dark controls. If a project needs a brand color, keep it secondary to the black/white/gray product-app system and apply it only to small signals.
+
+The current page does use pale cyan/sky-blue atmosphere in large image-backed bands. Treat that as an optional Aside signature for AI-browser launches: soft, airy, and product-framing, not a generic blue gradient background.
+
+## 3. Typography Rules
+
+### Font Family
+
+- **Display**: Aside custom display font exposed in capture as `displayFont`, fallback display sans.
+- **Body / UI**: Geist, fallback sans.
+- **Mono**: Geist Mono for code, benchmark labels, and technical specimens.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---:|---:|---:|---:|---|
+| Hero Display | displayFont | 48px | 400 | 52px | -0.48px | Primary H1 |
+| Section Display | displayFont | 36px-48px | 400-500 | 1.08-1.15 | tight | Major section claims |
+| Card Title | displayFont or Geist | 24px-30px | 500 | 1.2 | normal/tight | Product capability cards |
+| Body | Geist | 16px | 400 | 24px | normal | General explanation |
+| UI Label | Geist | 14px | 500 | 20px | normal | Nav, buttons, menu labels |
+| Pill/Caption | Geist | 12px-14px | 500-550 | 1.3 | slight | Badges, metadata, benchmarks |
+
+### Principles
+
+- Use the display font for the claim, not for every word on the page.
+- Keep body copy plain, readable, and product-focused.
+- Favor medium weights over bold weights; the brand voice is confident but not shouty.
+- Avoid negative letter-spacing outside display text. The router's global rule against viewport-scaled font sizing still applies.
+
+## 4. Component Stylings
+
+### Navigation
+
+- Top navigation is compact and product-app-like.
+- Logo at left, grouped menu buttons/links in the center, download CTA at right.
+- Nav labels use Geist 14px/500 with short 150ms color/background transitions.
+- Dropdown triggers can be text buttons with no visible border until hover.
+- Mobile should collapse to icon/hamburger controls with the same neutral/squircle treatment.
+
+### Hero Trust Pill
+
+- Pill radius: full pill, visually continuous.
+- Border/fill: very subtle neutral contrast against white.
+- Text: 12px-14px Geist, medium weight.
+- Content: use as a trust or provenance signal, not a decorative chip pile.
+
+### Primary CTA
+
+- Shape: pill for hero CTA, medium squircle for standard nav/action buttons.
+- Height: 36px compact nav, 44px hero/mobile.
+- Padding: generous horizontal padding for hero; compact in nav.
+- Motion: 150ms background/color/border transition; pressed state can scale to 0.97.
+- Icon: use SVG icon from the app's icon library; do not use emoji.
+
+### Product Browser Frame
+
+This is the key Aside-inspired primitive.
+
+- Large product/browser mockup below or near the hero claim.
+- Use a real screenshot, generated bitmap, or carefully built UI surface. Do not substitute flat rectangles.
+- Contain with soft border, rounded/squircle corners, and restrained shadow.
+- Internal chrome should show real browser/app affordances: sidebar, tabs, compact controls, content panels.
+- The frame can overflow and crop at mobile widths, but the focal content must remain legible.
+
+### Capability Sections
+
+- Full-width horizontal bands separated by `border-b border-black/6` style dividers.
+- Section structure: one major claim, one explanatory block, one app-like visual or metric module.
+- Avoid three generic feature cards unless the product genuinely has three peer capabilities.
+- Link rows and "Learn more" controls stay quiet and text-forward.
+
+### Benchmark Pills / Tabs
+
+- Medium squircle radius around compact tabs.
+- Neutral backgrounds with dark text.
+- Hover/active states should be visible through fill, border, or text contrast.
+- Useful for agent benchmarks, model comparisons, task modes, and product states.
+
+## 5. Layout Principles
+
+### Structure
+
+- Full page uses stacked bands rather than isolated floating cards.
+- Hero centers the brand claim and then gives the product visual real space.
+- Sections often span full width with internal max-width constraints.
+- Footer is link-dense and calm, with grouped columns.
+
+### Spacing
+
+- Outer page padding: 8px mobile, 16px desktop.
+- Hero vertical rhythm: generous, but not editorially sparse; the product visual arrives quickly.
+- Section padding: 56px-96px depending on density.
+- Dense UI inside product frames can use 8px-16px rhythm.
+
+### Responsive Behavior
+
+- Desktop: full nav, large browser/product visual, multi-column footer.
+- Tablet: preserve product framing but reduce visual width and section padding.
+- Mobile: collapse nav, make hero text more compact, crop or stack the product frame deliberately.
+- Avoid horizontal overflow; if a browser mockup is wider than the viewport, scale or crop from a stable container.
+
+## 6. Depth, Motion & Interaction
+
+### Depth
+
+- Use hairline borders and product-frame shadows as the primary elevation language.
+- Prefer subtle neutral shadow over colored glows.
+- Layer product screenshots or UI panels to create depth.
+- Keep broad backgrounds flat white unless a product visual, hero, or closing CTA needs the current Aside-like pale sky-blue atmospheric wash.
+
+### Motion
+
+- Use short transitions for controls: color, background-color, border-color, opacity, transform.
+- Keep motion in the 150ms-200ms range with standard cubic-bezier easing.
+- Product demos may use scroll or time-based state changes, but document the interaction model in `DESIGN.md` before building.
+- Animate transform/opacity/filter only.
+
+### Interaction States
+
+Every primitive must define default, hover, active, focus-visible, disabled, loading, empty, and error states before implementation. Aside-like surfaces are quiet, so missing states are obvious.
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Do use a bright canvas with crisp ink typography for the current Aside-inspired look.
+- Do use a custom display face or distinctive display substitute for hero and section claims.
+- Do preserve the product-browser frame as the memorable focal object.
+- Do use soft squircle or pill corners intentionally by component role.
+- Do build dense, useful product UI inside the hero visual.
+- Do use thin black-opacity dividers to make sections feel engineered.
+- Do keep CTA colors neutral and high contrast.
+- Do cite live screenshots or extracted design tokens when claiming Aside fidelity.
+
+### Don't
+
+- Don't resurrect the older dark-only Aside reference without checking the live site.
+- Don't copy Aside's logo, text, screenshots, or proprietary product assets.
+- Don't replace the product-browser focal object with flat geometric decoration.
+- Don't make the page a purple-blue gradient SaaS layout.
+- Don't use saturated sky blue as a giant primary CTA color; if using Aside's current atmosphere, keep it pale, cloud-like, and subordinate to the product frame.
+- Don't over-round every component equally; distinguish pills, squircles, and structural edges.
+- Don't hide visual QA behind tests. Aside-like work needs screenshots at mobile, tablet, and desktop widths.
+
+## Agent Prompt
+
+When building an Aside-inspired surface, first create or update `DESIGN.md` with: bright white product-app atmosphere, display/body/mono font roles, ink/neutral token ramp, squircle/pill component rules, a product-browser focal primitive, dense capability bands, and responsive crop/scale behavior for the product frame. Use original content and assets. Verify with screenshots at 375px, 768px, and 1280px or wider, and compare against the live-reference evidence before declaring visual fidelity.