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
56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
---
|
|
name: typography-prompts
|
|
title: Typography Pattern LLM Prompts
|
|
description: 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
|
|
|
|
1. Never use < 16px for body text
|
|
2. Never use line-height < 1.4
|
|
3. Never use more than 2 fonts
|
|
4. Never use all-caps for paragraphs
|
|
5. Never use decorative fonts for body
|