neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
1.2 KiB
1.2 KiB
name, title, description
| name | title | description |
|---|---|---|
| typography-prompts | Typography Pattern LLM Prompts | Ready-to-use prompts for typography with wiki patterns. |
Typography Pattern Prompts
1. Gradient Text
Create gradient text effect:
- H1 with font-size: clamp(2.5rem, 6vw, 4rem)
- background: linear-gradient(135deg, #6366f1, #ec4899, #f43f5e)
- background-clip: text
- -webkit-text-fill-color: transparent
- text-shadow: none
- Letter-spacing: -0.02em
- Font weight: 800
- Line height: 1.1
2. Font Pairing
Create font pairing:
- Headings: Inter, font-weight: 700-900
- Body: Inter, font-weight: 400-500
- Mono: JetBrains Mono
- Scale ratio: 1.25
- Body text: 16px minimum
- Line height: 1.6 for body, 1.2 for headings
- Max-width: 65ch for body text
3. Kinetic Text
Create kinetic text animation:
- Each word wrapped in <span class="word">
- opacity: 0, translateY(30px) initially
- On scroll: opacity: 1, translateY(0)
- Duration: 0.6s ease-out
- Stagger: 0.1s between words
- Use IntersectionObserver
- Fallback: always visible text
Anti-Patterns
- Never use < 16px for body text
- Never use line-height < 1.4
- Never use more than 2 fonts
- Never use all-caps for paragraphs
- Never use decorative fonts for body