68 lines
3.0 KiB
Markdown
68 lines
3.0 KiB
Markdown
# macaron
|
|
|
|
Soft macaron pastel color blocks on warm cream, clean and readable educational layouts
|
|
|
|
## Design Aesthetic
|
|
|
|
Clean, approachable infographic style built around soft macaron pastel color blocks as information containers. Each content zone sits on a distinct pastel fill — blue, mint, lavender, or peach — against a warm cream paper background. Emphasis on clarity, information hierarchy, and moderate density. Pairs well with hand-drawn line treatment (optional) or clean flat vector rendering.
|
|
|
|
## Background
|
|
|
|
- Color: Warm Cream (#F5F0E8)
|
|
- Texture: Subtle warm paper grain
|
|
|
|
## Color Palette
|
|
|
|
| Role | Color | Hex | Usage |
|
|
|------|-------|-----|-------|
|
|
| Background | Warm Cream | #F5F0E8 | Primary background |
|
|
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
|
|
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
|
|
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
|
|
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
|
|
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
|
|
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis highlights |
|
|
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
|
|
|
|
## Visual Elements
|
|
|
|
- Rounded-corner cards, speech bubbles, and dashed-box frames as content containers
|
|
- Each container filled with a distinct macaron pastel color
|
|
- Clear typography hierarchy: bold large title → bold keywords → smaller muted annotations
|
|
- Bold summary quote at the bottom of the image capturing the core insight
|
|
- Auto-selected visual structure based on content: flow → arrow chains, compare → split columns, cycle → ring layout, composition → parallel cards, hierarchy → nested containers
|
|
- Generous whitespace between zones, moderate information density
|
|
|
|
## Optional Hand-Drawn Mode
|
|
|
|
Can be combined with hand-drawn rendering for a warmer feel:
|
|
- Slight wobble on lines and shape edges (not perfectly straight)
|
|
- Simple stick-figure cartoon characters or hand-drawn icons
|
|
- Color fills that don't completely fill outlines (hand-painted feel)
|
|
- Doodle decorations: small stars, underlines, arrows
|
|
|
|
When not using hand-drawn mode, renders as clean flat shapes with smooth edges.
|
|
|
|
## Style Rules
|
|
|
|
### Do
|
|
|
|
- Use pastel color blocks to visually separate information zones
|
|
- Maintain clear information hierarchy through typography weight and size
|
|
- Include a bold summary quote at the bottom
|
|
- Choose the best visual structure for the content (don't force one layout)
|
|
- Keep generous whitespace and moderate density
|
|
- Use Coral Red sparingly for emphasis on key data or warnings
|
|
|
|
### Don't
|
|
|
|
- Use pure white backgrounds
|
|
- Overcrowd with too many elements or decorations
|
|
- Mix too many accent colors beyond the macaron palette
|
|
- Create dark or moody compositions
|
|
- Use tiny text that's hard to read
|
|
|
|
## Best For
|
|
|
|
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials, visual study notes
|