# Reference Patterns

> 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 o…

- **Type:** Skill
- **Install:** `agentstack add skill-tommylower-cortex-reference-patterns`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tommylower](https://agentstack.voostack.com/s/tommylower)
- **Installs:** 0
- **Category:** [Productivity](https://agentstack.voostack.com/c/productivity)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tommylower](https://github.com/tommylower)
- **Source:** https://github.com/tommylower/cortex/tree/main/design/foundations/reference-patterns

## Install

```sh
agentstack add skill-tommylower-cortex-reference-patterns
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [tommylower](https://github.com/tommylower)
- **Source:** [tommylower/cortex](https://github.com/tommylower/cortex)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tommylower-cortex-reference-patterns
- Seller: https://agentstack.voostack.com/s/tommylower
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.