
Preview image. Unlock full-res
Child's Animated Sketchbook. This system feels like looking into a favorite, well-loved school notebook where every element has personality.
Superr opts for a youthful, playful aesthetic, resembling a child's notebook brought to life. A warm, off-white canvas sets a friendly, approachable tone, punctuated by vibrant, primary-school-inspired colors for text highlights and playful borders. Typography leans into a handwritten, slightly uneven feel for headings, offset by a clean sans-serif for body copy. Components are light, favoring subtle shadows and rounded corners to maintain a soft, tactile presence, echoing the physical world of a notebook. Use Canvas Parchment (#fdfbf9) as the dominant background color for all page sections and elevated surfaces. Apply the gelica font for all headings and prominent UI text (e.g., call to action buttons), embracing its playful, handwritten character. Employ rounded corners with a 12px radius for cards and containers, and a 20px radius for interactive elements like buttons. Introduce color selectively for emphasis, using Playful Red (#ce500a), Sky Blue (#3b82f6), Bubblegum Pink (#ff66cf), or Grass Green (#22c55e) for highlight text or decorative borders, never as primary backgrounds. Maintain comfortable spacing: 12px for small element gaps, 32px for card padding, and 64px for vertical section separation. Use a subtle soft shadow (rgba(0,0,0,0.06) 0px 2px 20px 0px) to give cards a gentle lift, avoiding heavy or stark elevation. For primary calls to action, use the Pill Ghost Button style with a Deep Graphite (#171717) stroke and text on the Canvas Parchment background. Avoid using highly saturated brand colors as large background fills; they are intended for accents and highlights. Do not use sharp 0px corners on any UI elements; all corners should have some degree of rounding (minimum 2px). Refrain from heavy, multi-layered shadows; the design embraces a light, gentle elevation with a single, soft shadow. Do not use generic system fonts; always prioritize gelica for display and Geist for functional text. Avoid dense, information-heavy layouts; maintain ample white space and comfortable element spacing. Do not introduce strong, solid border colors unless they are part of a deliberate accent or interactive state (e.g. outline buttons).









