mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-15 06:59:48 +08:00
Jim Liu 宝玉
a596c653d3
Rename baoyu-xhs-images to baoyu-image-cards to decouple from Xiaohongshu platform. Deprecate baoyu-xhs-images with migration notice pointing to baoyu-image-cards.
97 lines
3.2 KiB
Markdown
97 lines
3.2 KiB
Markdown
# Typography System
|
|
|
|
Text styling elements for Xiaohongshu infographics.
|
|
|
|
## Decorated Text (花字)
|
|
|
|
Stylized text treatments for emphasis and visual appeal.
|
|
|
|
| Name | Description | Use Case |
|
|
|------|-------------|----------|
|
|
| gradient | Gradient color fill | Title emphasis, modern feel |
|
|
| stroke-text | Outlined text with stroke | Cover headlines, high visibility |
|
|
| shadow-3d | 3D shadow/extrusion effect | Key terms, depth |
|
|
| highlight | Highlighter marker effect | Critical information, key points |
|
|
| neon | Neon glow effect | Tech content, night aesthetic |
|
|
| handwritten | Authentic handwritten style | Personal touch, casual |
|
|
| bubble | Rounded, inflated letterforms | Cute, playful content |
|
|
| brush | Brush stroke texture | Artistic, dynamic |
|
|
|
|
## Tags & Labels (标签)
|
|
|
|
Structured text containers.
|
|
|
|
| Name | Description | Use Case |
|
|
|------|-------------|----------|
|
|
| black-white | Black background, white text | Brand names, prices, categories |
|
|
| white-black | White background, black text | Clean labels, minimal style |
|
|
| bubble | Speech bubble style | Dialogue, annotations, callouts |
|
|
| pointer | Arrow pointer with label | Product callouts, pointing to features |
|
|
| ribbon | Ribbon/banner shape | Special offers, highlights |
|
|
| stamp | Stamp/seal style | Authenticity, recommendations |
|
|
| pill | Rounded pill shape | Tags, categories, keywords |
|
|
|
|
## Text Hierarchy
|
|
|
|
Recommended text sizing for visual hierarchy.
|
|
|
|
| Level | Role | Relative Size | Style |
|
|
|-------|------|---------------|-------|
|
|
| H1 | Main title | 100% | Bold, decorated |
|
|
| H2 | Section header | 70-80% | Semi-bold |
|
|
| H3 | Subsection | 50-60% | Medium weight |
|
|
| Body | Content text | 40-50% | Regular |
|
|
| Caption | Small notes | 30-35% | Light |
|
|
|
|
## Text Direction
|
|
|
|
| Direction | Description | Use Case |
|
|
|-----------|-------------|----------|
|
|
| horizontal | Standard left-to-right | Default for most content |
|
|
| vertical | Top-to-bottom columns | Magazine style, traditional Chinese |
|
|
| curved | Text following a curve | Decorative, around shapes |
|
|
| diagonal | Angled text | Dynamic compositions |
|
|
|
|
## Text Effects
|
|
|
|
| Effect | Description | Use Case |
|
|
|--------|-------------|----------|
|
|
| shadow | Drop shadow behind text | Readability on busy backgrounds |
|
|
| outline | Outline around letterforms | High contrast visibility |
|
|
| glow | Soft glow around text | Dreamy, emphasis |
|
|
| underline-wavy | Wavy underline decoration | Playful emphasis |
|
|
| strikethrough | Crossed out text | Before/after, corrections |
|
|
|
|
## Language Considerations
|
|
|
|
### Chinese Text (中文)
|
|
- Punctuation: 「」（）、。！？
|
|
- Spacing: No spaces between characters
|
|
- Line height: 1.5-1.8x for readability
|
|
|
|
### Mixed Text
|
|
- English in Chinese context: Maintain consistent baseline
|
|
- Numbers: Use consistent number style (lining vs old-style)
|
|
|
|
## Style-Specific Typography
|
|
|
|
### Cute Style
|
|
- Rounded, bubbly hand lettering
|
|
- Soft shadows, playful decorations
|
|
- Pink/pastel color accents
|
|
|
|
### Notion Style
|
|
- Clean hand-drawn lettering
|
|
- Simple sans-serif labels
|
|
- Minimal decoration
|
|
|
|
### Bold Style
|
|
- Impactful hand lettering with shadows
|
|
- High contrast colors
|
|
- Strong outlines
|
|
|
|
### Chalkboard Style
|
|
- Chalk texture on all text
|
|
- Visible imperfections
|
|
- Multi-color chalk variety
|