JimLiu-baoyu-skills/skills/baoyu-article-illustrator/references/styles/macaron.md

3.0 KiB

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