Skip to content

PUBLIC REFERENCE

Startupblowup

Playful Outlined Illustrations. A hand-drawn aesthetic dominates, using simple shapes and bold lines.

Startupblowup captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Canvas Parchment #f4eddc

Page backgrounds, large hero sections — a soft, warm cream providing a friendly base

Midnight Ink #000000

All text elements, thick borders, UI outlines

Charcoal Fill #1f1f1f

Illustrative fills, secondary background shapes

Bubblegum Pink #fad3b6

Predominantly used for accent fills within illustrations, adding warmth

Avatar Blue #7399f8

Illustrative accents, like hair color in the main graphic

Do

  • Always use 'Canvas Parchment' (#f4eddc) as the base background color for new pages and sections.
  • Render all text and primary UI outlines in 'Midnight Ink' (#000000) for high contrast and visual consistency.
  • Utilize 'sans-serif' at 16px weight 400 with 1.2 line height for body text to maintain clarity.
  • Apply 'Bubblegum Pink' (#fad3b6) as a decorative fill color within new illustrations for a consistent brand accent.
  • Maintain high contrast ratios for all text against backgrounds, ensuring AAA accessibility (e.g., Midnight Ink on Canvas Parchment).

Don't

  • Do not introduce new saturated colors beyond 'Bubblegum Pink' or 'Avatar Blue' without explicit approval, to preserve the muted palette.
  • Avoid using multiple font families; stick to the system's sans-serif font for all textual content.
  • Do not add shadows or complex gradients to UI elements, as the system relies on flat colors and outlines.
  • Refrain from using thin strokes or borders; maintain the thick, illustrative outline style everywhere.
  • Do not vary line heights or letter spacing from the established typography baseline for body text.