design.md template

# design.md

## Brand mood
Precise, editorial, quietly technical. Premium without looking expensive for its own sake.

## Audience
High-agency builders who want clear information, strong hierarchy and low visual noise.

## Visual references
- Editorial product pages
- Design-system documentation
- Clean startup landing pages
- Institutional research notes

## Palette
- Background: warm off-white or deep graphite
- Text: near-black or warm white
- Accent: muted teal
- Secondary accent: brass, clay or electric cyan, used sparingly

## Typography
- Headlines: refined serif or confident grotesk
- Body: clean sans-serif
- Mono: only for metadata, labels or technical notes

## Layout rules
- Use strong hierarchy before decoration
- Prefer fewer, larger sections
- Use negative space as structure
- Align cards and text to a visible grid
- Avoid cramped hero sections

## Components
- Hero with one clear visual idea
- Cards with real information, not filler
- Tables for comparison
- CTA rows with one primary action
- Footer with useful links and trust notes

## Imagery
- Original, product-specific visuals
- No generic SaaS dashboard unless the product is actually a dashboard
- No stock-photo handshake imagery
- No meaningless AI blobs

## Motion
- Subtle hover and entry transitions only
- No scroll hijacking
- Respect prefers-reduced-motion

## Responsiveness
- Mobile layout must feel designed, not merely stacked
- Keep CTA visible
- Avoid tiny metadata on mobile

## Accessibility
- High contrast
- Semantic HTML
- Keyboard-accessible controls
- Meaningful alt text

## Do not do
- No fake logos
- No fake testimonials
- No generic gradients
- No ungrounded claims
- No decorative dashboards with impossible data

## QA checklist
- Does the hero say one thing clearly?
- Is the visual system consistent?
- Are spacing and typography deliberate?
- Does mobile feel premium?
- Are all claims grounded?
- Is the CTA obvious?
- Would an adversarial design reviewer call this generic?