stitch-design-taste

# Stitch Design Taste — Semantic Design System Skill <!-- BEGIN: Tier-1 Reference Canon + claude.ai/design Taste Engine (OmegaOS design doctrine) --> ## 0. NORTH STAR — Tier-1 Reference Canon & the claude.ai/design Taste Engine Default output must read as a **Linear/Vercel-tier clone, not a generic Tailwind template**. The bar is `linear.app` and the 19-site canon; anything that reads "default shadcn / bootstrap / stock SaaS" has FAILED and must be raised, not shipped. - Pass test: one accent + hairline structure + tight negative display tracking + dark-first (or fully-themed) depth + motion restraint — a designer should not be able to tell it apart from a Tier-1 reference at a glance. - Pick ONE coherent dialect (a temperature + one or two signature deviations) and commit; never blend three sites' accents into a soup. - Steal verified discipline, not hex blindly — never invent false precision (a curve/token a site does not actually ship). - When unsure, return to the canon and measure against the Anchor before calling it done. ### Default taste engine — distilled from claude.ai/design + the Linear-tier canon Apply these unless the user overrides — a contrary brief wins, but absence of one does not; fall back to these defaults: 1. **Restraint is the feature.** Default to LESS — one accent, one type family, few elements per section. Suppress motion on high-frequency surfaces (nav hover, keyboard actions) entirely. If a flourish doesn't earn its place, cut it. The most-copied trait of every canon site is what they left out. 2. **Single-accent color discipline.** Exactly ONE accent hue carries brand + CTAs + focus; everything else is a neutral ramp. Reserve any second/third color for *state* (success/error) or *data*, never decoration. A near-black or near-white never goes pure `#000`/`#FFF`. 3. **Warmth or cool — pick a temperature and commit.** Choose ONE: cool (Linear indigo, Vercel blue, neutral-blue-black) OR warm (claude.ai cream + terracotta, Railway violet, PlanetScale/orange). Build the *entire* neutral ramp to match it (claude.ai runs warm ivory + warm-charcoal, never blue-black). Never mix warm and cool grays in one project. 4. **Typographic confidence via weight + size + tracking, not theatrics.** Display ≤600 weight (whisper, never 800-black). Apply size-proportional NEGATIVE tracking on large display (~-.02 to -.05em), neutral on body; the only positive tracking is a small uppercase eyebrow. Body never below ~14px. A neutral grotesk is the floor; a serif body (claude.ai) or a mono-as-second-voice (Vercel/PlanetScale/Oxide) is the anti-generic signature — never default to bare Inter for premium. 5. **Hairline structure over heavy chrome.** Build with 1px (or .5px) borders — solid neutral, or translucent white/black over a dark canvas so edges *glow* rather than cut. Snap everything to a 4px spacing ladder with a generous fixed section beat (~96px), cap content width (~1200–1280px), and keep a consistent small radius ladder (4/8/12px; pills only for chips/toggles). 6. **Depth from surface + light, not drop-shadow glow.** Prefer a near-black surface ladder + hairlines (Linear), a single colored glow/ring (Neon's 1px green ring, Clerk's halo), or a soft tinted shadow (claude.ai composer) — never a generic gray box-shadow or the "AI purple" neon glow. Ban shadow-glow as the default depth cue. 7. **Motion discipline — short, eased, purposeful.** Animate only `transform`/`opacity`. Keep interactive transitions snappy (treat ~150–200ms as a target, verify on the real site — don't assert a curve a site never ships). One easing family per project; differentiate reveals by staggered DELAY, not by switching curves. Reserve longer/ambient motion for one hero centerpiece. No bounce on chrome, no parallax-by-default, no scroll-jacking. 8. **Dark-first depth as a first-class mode (and a real light mode).** Default to a dark or dark-capable canvas with the surface-ladder/glow depth language; if light-first (Clerk/cal.com/WorkOS/claude.ai light), ship BOTH modes via a token swap — never leave a half-built theme. 9. **Craft in the details — keyboard-first, honest content.** Real `:focus-visible` rings (token-tinted, with offset), tactile press states (`active:scale`/`translate-y`), branded `::selection`, IDE-tokenized inline code. Show real artifacts (actual config, real metrics) over stock imagery; no emojis, no filler chrome ("scroll to explore"), no fake round numbers. 10. **The clone test as the bar.** Output should be indistinguishable from a Tier-1 site (Linear/Vercel-tier): one accent, hairline structure, tight tracking, dark-first depth, motion restraint. "Generic Tailwind template" is a failure state — raise it until it reads canon. ### The canonical reference set — anchor = linear.app Build to this bar by default; the output should sit beside these. **Anchor** - **linear.app** — steal: near-black `#08090A` canvas, ONE desaturated indigo `#5e6ad2`, Inter at weight ≤600 with size-proportional NEGATIVE tracking, depth from a surface-ladder + 1px hairlines (NEVER shadow-glow), 96px section beat on a 4px grid, motion that suppresses itself on high-frequency surfaces. **Tier 1 — Quasi-identical to Linear** - **vercel.com** — steal: Geist Sans + Geist Mono, pure `#000` / `#EDEDED` mono palette, ONE blue `#0070F3` as punctuation, hairline `rgba(255,255,255,.08)` cards, and the morphing shared-layout nav (sliding pill + resizing panel). - **planetscale.com** — steal: ZERO custom fonts (body in system MONO, sans is the exception), WARM orange `#f35815`, sharp 0-radius boxes via the dashed-box border + ASCII diagrams, and hover color-swaps that are 0ms instant. - **railway.app** — steal: IBM Plex Serif display (weight 500) over Inter body, VIOLET-tinted neutrals (hue 246), magenta→violet accent (`ring-pink-700`, CTA `#aa0aaa→#381dbd`), glow-grows-not-box CTA, blueprint-grid hairlines, and the live split-flap board. - **resend.com** — steal: Domaine + ABC Favorit display, achromatic Radix-gray on `#000` with NO solid accent — color exists only as a traveling glow on a 1px divider; IDE-token inline code. - **cal.com** — steal: Cal Sans display (POSITIVE tracking on small subheads) + Inter body, grayscale-as-brand (theme-flipping near-black `#111827` ↔ white CTA), 4px radius, graded per-state button shadows, branded `::selection`. **Tier 2 — Same energy** - **clerk.com** — steal: Suisse Int'l, body floor 15px, LIGHT-first with a warm violet primary `#6c47ff` + cyan `#5de3ff` demoted to a four-stop glow halo, .5px+1px hairlines with inset-rim shadows. - **trigger.dev** — steal: Satoshi titles + Geist UI + Geist Mono, ONE acid-lime `#a8ff53` (with a real lavender `#7655fd` second accent) on bespoke cool-charcoal, ONE easing only, and the `moving-lines` diagonal card-hover. - **turso.tech** — steal: Inter display at `-.03em`, Bunker-black `#0D1318` + mint Turso Aqua `#4FF8D2`, aqua-FILL/BLACK-text CTA, fuchsia second accent, hairline-flip-to-aqua hovers, near-invisible 5%-opacity light dot-grid. - **outstatic.com** — steal: a giant `leading-[0.9]` SERIF hero + one achromatic gradient-clipped word, light-first monochrome zinc, full-bleed SVG line-bg layers, and the neo-brutalist hard-offset-shadow push button. - **supabase.com** — steal: Circular Std at weight 500 (default tracking, NOT tight), 0°-saturation grayscale lit by ONE emerald `#3ECF8E` (green = success), neutral-gradient hairline cards, framer/anime/gsap motion at 400ms. - **neon.tech** — steal: one-weight custom display ("esbuild") + Inter + GeistMono, pure-black + mint `#00e599` shipped as a full alpha ladder, a 1px green RING instead of a drop-shadow on hover, 10%-green bloom gradients. **Tier 3 — A cut above on craft** - **liveblocks.io** — steal: Suisse Intl with JetBrains-Mono eyebrows, translucent-white hairlines (`#fdfcfc21`) that GLOW over `#000`, a multi-channel per-product semantic accent system locked to one lightness band, and CSS mask-sweep reveals. - **basehub.com** — steal: Geist + Geist Mono (by Geist's makers), pure-gray near-black `#040404` + warm orange `#FF6C02`, a five-layer rgba-orange ember glow as a scroll-progress pin, per-character 3D sin()-staggered list tumble. - **basement.studio** — steal: Geist Sans + flauta display on TRUE-black brutalism, loud per-case-study accents (`#ff4d00`/`#00FF9B`), translucent `white/.2` + `#2E2E2E` hairlines, and the `steps()` frame-stepped sprite mask reveal. - **rauno.me** — steal: a private bespoke face at tiny 14px, PURE-achromatic `hsl(0 0% N%)` neutrals, matte soft `0.12`-alpha shadows (no glow), a bounded OS-desktop canvas, and the hand-built right-edge minimap navigator. **Tier 4 — Style-defining** - **oxide.computer** — steal: SuisseIntl + a custom GT America Mono that DRAWS live ASCII diagrams, color authored in OKLCH (cool-black `oklch(0.162 0.01 260)` + oxide-green `≈#00D889`, green=success), one unified stroke token for all 1px edges, low-bounce Framer springs. - **workos.com** — steal: Untitled Sans with `-.05em→-.07em` display tracking, light↔dark-navy sandwich, indigo `#6363f1` primary + a saturated spectrum reserved for the signature stacked-RGBA chromatic glow; pill buttons, 1px hairlines. - **claude.ai** — steal: warm-cream ivory canvas (`#faf9f5`, never cold gray), a single terracotta `#d97757` accent, longform body in a SERIF (anti-AI-slop), soft drop-shadow depth over hairlines, token-streaming text as the signature motion. Full per-site breakdown (all five dimensions, signatures, and how each relates to linear.app) lives in `skills/design/references/tier1-inspiration.md` — read it for the canonical detail behind this taste layer. <!-- END: Tier-1 Reference Canon + claude.ai/design Taste Engine --> ## Overview This skill generates `DESIGN.md` files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces. The generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through **"Visual Descriptions"** supported by specific color values, typography specs, and component behaviors. ## Single-voice craft (do NOT parallelize) A design system is **one coherent aesthetic voice**, not a survey of opinions. Author the entire `DESIGN.md` yourself in one pass — **never fan out to sub-agents, never merge multiple "design takes"**. Parallel authors produce token drift (warm vs cool grays, two type scales, conflicting motion intensities) — the exact incoherence this skill exists to prevent. One taste, one palette, one scale, end to end. Three craft anchors when authoring: 1. **Resolve the atmosphere first, then derive every token from it.** Pin Density / Variance / Motion on the 1–10 spectrums (default Variance 8, Motion 6, Density 4) before writing a single hex. Every later choice — palette saturation, type scale, shadow depth, easing — must trace back to those three numbers. If a token can't be justified by the atmosphere, it doesn't belong. 2. **Worked mini-example (the inline-image Hero):** for a portfolio landing at Variance 8, the Hero headline reads `"We build [▢] things that [▢] move"` where each `[▢]` is a rounded, type-height inline photo acting as visual punctuation — never a centered headline, never a scroll-arrow chevron beneath it. That single decision encodes asymmetry + the signature inline-image technique + the no-filler-text ban in one stroke. Show choices at this resolution, not as abstract adjectives. 3. **Self-edit for coherence before output.** Re-read the draft once: every color named by purpose, one accent only (saturation < 80%, no purple/neon), one type scale, no banned font/serif, no `#000000`, no AI-cliché copy in examples. Inconsistency is the failure mode — hunt it. ### Output contract & verify - **Produces:** exactly one `DESIGN.md` following the "Output Format" structure below — all 7 sections populated (Atmosphere, Color, Typography, Components, Layout, Motion, Anti-Patterns), every color with a descriptive name + hex + functional role. - **Verify before declaring done:** (1) every section present and non-empty; (2) exactly ≤1 accent color, saturation < 80%, no purple/neon, no `#000000`; (3) no banned fonts (`Inter`, generic serifs in dashboards); (4) anti-pattern list present and concrete; (5) no value invented to fill a gap — if the user gave no brand input, state the atmosphere assumption explicitly rather than fabricating a brand story or fake metrics. - **No-hallucination guardrail:** invent no client name, no real-sounding metrics, no brand history. Placeholder names/images follow the anti-pattern rules (no "John Doe"/"Acme", `picsum.photos` over broken Unsplash). When a design choice is an inference (not user-stated), label it as a default so it can be overridden. ## Prerequisites - Access to Google Stitch via [labs.google.com/stitch](https://labs.google.com/stitch) - Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI ## The Goal Generate a `DESIGN.md` file that encodes: 1. **Visual atmosphere** — the mood, density, and design philosophy 2. **Color calibration** — neutrals, accents, and banned patterns with hex codes 3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns 4. **Component behaviors** — buttons, cards, inputs with interaction states 5. **Layout principles** — grid systems, spacing philosophy, responsive strategy 6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions 7. **Anti-patterns** — explicit list of banned AI design clichés ## Analysis & Synthesis Instructions ### 1. Define the Atmosphere Evaluate the target project's intent. Use evocative adjectives from the taste spectrum: - **Density:** "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10) - **Variance:** "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10) - **Motion:** "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10) Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description. ### 2. Map the Color Palette For each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**. **Mandatory constraints:** - Maximum 1 accent color. Saturation below 80% - The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients - Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents - Stick to one palette for the entire output — no warm/cool gray fluctuation - Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal ### 3. Establish Typography Rules - **Display/Headlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size - **Body:** Relaxed leading, max 65 characters per line - **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi` - **Serif Ban:** Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs: `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Serif is always BANNED in dashboards or software UIs - **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`) - **High-Density Override:** When density exceeds 7, all numbers must use Monospace ### 4. Define the Hero Section The Hero is the first impression and must be creative, striking, and never generic: - **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique - **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone - **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally - **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4 - **CTA Restraint:** Maximum one primary CTA. No secondary "Learn more" links ### 5. Describe Component Stylings For each component type, describe shape, color, shadow depth, and interaction behavior: - **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors - **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space - **Inputs/Forms:** Label above input, helper text optional, error text below. Standard gap spacing - **Loading States:** Skeletal loaders matching layout dimensions — no generic circular spinners - **Empty States:** Composed compositions indicating how to populate data - **Error States:** Clear, inline error reporting ### 6. Define Layout Principles - No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking - Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace - The generic "3 equal cards horizontally" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll - CSS Grid over Flexbox math — never use `calc()` percentage hacks - Contain layouts using max-width constraints (e.g., 1400px centered) - Full-height sections must use `min-h-[100dvh]` — never `h-screen` (iOS Safari catastrophic jump) ### 7. Define Responsive Rules Every design must work across all viewports: - **Mobile-First Collapse (< 768px):** All multi-column layouts collapse to single column. No exceptions - **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure - **Typography Scaling:** Headlines scale via `clamp()`. Body text minimum `1rem`/`14px` - **Touch Targets:** All interactive elements minimum `44px` tap target - **Image Behavior:** Inline typography images (photos between words) stack below headline on mobile - **Navigation:** Desktop horizontal nav collapses to clean mobile menu - **Spacing:** Vertical section gaps reduce proportionally (`clamp(3rem, 8vw, 6rem)`) ### 8. Encode Motion Philosophy - **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing - **Perpetual Micro-Interactions:** Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer) - **Staggered Orchestration:** Never mount lists instantly — use cascade delays for waterfall reveals - **Performance:** Animate exclusively via `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`. Grain/noise filters on fixed pseudo-elements only ### 9. List Anti-Patterns (AI Tells) Encode these as explicit "NEVER DO" rules in the DESIGN.md: - No emojis anywhere - No `Inter` font - No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — distinctive modern serifs only if needed