Reference Patterns

---
name: reference-patterns
description: "Curated design patterns from high-quality reference sites (Linear, Vercel, Lovable, and others): hero layouts, feature sections, navigation styles, motion timing, card treatments, typography hierarchy, and color usage. Use when the user wants inspiration for a section, asks 'how does Linear/Vercel do X', is building a marketing page and needs proven layouts, or wants to match the visual quality of best-in-class SaaS sites. Triggers: linear style, vercel style, reference site, inspiration, how does X do this, like linear, like vercel, marketing page patterns, hero layout."
---

# Reference Site Patterns

Design patterns from high-quality reference sites. Use these as guidance for layout, interaction, and visual quality.

## Linear (linear.app)

### What makes it good
- Monochromatic dark theme with precise accent colors
- Extremely tight spacing consistency
- Subtle gradient glows behind key elements
- Animations are fast (150-300ms), never decorative
- Typography is clean with clear hierarchy — minimal font sizes
- Cards have subtle borders, not heavy shadows

### Patterns to reference
- Hero: large headline + short subhead + single CTA + subtle background glow
- Feature sections: alternating left/right layouts with small preview images
- Navigation: minimal, fixed, blurs on scroll
- Motion: fade-up on scroll (200ms), staggered children (50ms delay between items)

## Vercel (vercel.com)

### What makes it good
- Black/white with surgical precision
- Code-like aesthetic — monospace accents, terminal references
- Extremely fast page loads (practices what it preaches)
- Interactive demos embedded in marketing pages
- Grid-based layouts with mathematical spacing

### Patterns to reference
- Hero: bold statement + interactive demo or code snippet
- Trust bar: logos in grayscale, subtle separator
- Feature grid: icon + title + short description, 3-column
- Pricing: clean cards, feature comparison table, FAQ below
- Motion: smooth page transitions, parallax on scroll (subtle)

## Lovable (lovable.dev)

### What makes it good
- Warm gradient backgrounds (pink/purple) create emotional tone
- Embedded product experience in the hero (visitors interact immediately)
- Community/social proof feels real, not staged
- Blog feels like a publication, not a corporate afterthought
- Pricing is transparent and respects user agency ("start free, upgrade as needed")

### Patterns to reference
- Hero: headline + embedded product input/demo
- Social proof: real usage examples, community section
- Blog: editorial layout, category nav, visual thumbnails with gradient overlays
- Pricing: practical headline, tier cards, FAQ accordion, credibility closer
- Trust center: security commitment, certifications, subprocessor directory, FAQs

## General Rules Across All References

- Animations serve function (directing attention, confirming interaction, revealing content) — never decorative
- Dark themes use subtle borders and glows instead of heavy shadows
- Section transitions use spacing and subtle background color shifts, not divider lines
- CTAs are visually distinct but not aggressive — confident, not desperate
- Navigation is minimal and fixed with blur/transparency on scroll
- Footer is information-dense but well-organized