tommylower 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