Design overview

DeepSpace scaffolds working apps fast — and the scaffold's UI is deliberately a placeholder, not a house style. This section is the design system for replacing it: an opinionated workflow that produces pages a person would recognize as designed for this product, plus a mechanical gate that catches the most common tells of template output.

Two surfaces, two guides#

Every app has two front-of-house surfaces, and they need different treatment:

Use the landing workflow below for a marketing, splash, or landing page (or when giving design feedback on one). Use Product polish for the dynamic home, theme, primitives, and interaction feedback. The two share a palette and body font but are designed by different procedures.

The landing workflow — five steps, in order#

The workflow is Direction → Style Tile → one inspiration archetype → composition → grep gate. Skipping ahead — reaching for patterns before committing to a direction — is how generic pages happen.

Hide the global navigation on the landing route#

Required if the landing lives under (app)/. Static landings inherit no app chrome, but a landing under (app)/ renders below the app's global <Navigation /> — hide it on that route so it does not stack with landing chrome (two stacked navs are the clearest telltale of a bolted-on landing):

import { useLocation } from 'react-router-dom'

export default function AppLayout() {
  const { pathname } = useLocation()
  const isLanding = pathname === '/landing'

  return (
    <div className="flex h-screen flex-col">
      {!isLanding && <Navigation />}
      <main className="min-h-0 flex-1 overflow-y-auto"><Outlet /></main>
    </div>
  )
}

Keep the layout's existing providers and suspense boundary around this conditional.

The Direction block lives in source#

Put the Direction in a multi-line comment at the top of the landing page file (src/pages/index.tsx, or src/pages/(app)/landing.tsx on the feature-install path). It stays in source as documentation:

/**
 * Design Direction
 *
 * Product: <one sentence — who it's for, what it does>
 * Emotion: <one specific feeling — not "trust" or "excitement">
 * Metaphor: <a concrete real-world image>
 * References: <three from OUTSIDE this product's category>
 * Signature: <the ONE memorable visual this page has>
 * Hero: <what animates on screen in the first 5 seconds>
 *
 * Style Tile
 * - Color: <dominant + accent + saturation>
 * - Type: <heading font + body font + why>
 * - Theme: <light | dark + why>
 * - Art direction: <one archetype from the style tile>
 * - Motion: <one personality from the style tile>
 * - Voice: <three behaviors, semicolon-separated>
 */

The composition budget#

A landing page is a fixed number of sections, not a buffet:

A typical page uses 4–5 section types. A calm or quiet direction skips scroll choreography entirely.

The sentence test#

Ask of everything you wrote in the Direction block: could this describe any other product? If yes, rewrite.

• Fails: "A modern SaaS tool. Clean and trustworthy. Like Stripe and Linear. A floating mockup."
• Passes: "A post-run journal asks runners one question. It feels like a handwritten postcard on a scratched table; a new cursive question fades in on each visit."

Hard rules (non-negotiable)#

These are grep-checkable. Shipped violations mean a broken landing page.

See Anti-AI gate for the complete grep gate commands and the eyeball checklist. Run the gate before declaring the page done.

Next steps#

• Design direction — write the six-prompt brief.
• Style tile — commit to the six visual tokens.
• Patterns — compose the page from proven section structures.
• Worked examples — see five complete Direction-to-code translations.
• Product polish — design the authenticated app surface.