Fable

Fable embraces a playful, illustrative aesthetic with strong, inviting typography and a limited but impactful color palette. Bold, contrasting backgrounds in rich greens and blues create distinct sections, often paired with white or near-black text for high readability. Imagery is organic and character-driven, feeling integrated rather than overlaid. Components feature generous padding and distinct, rounded shapes, projecting a friendly and approachable digital experience. Use Forest Canopy (#064c37) or Ocean Deep (#43a1d7) for full-width section backgrounds to establish clear visual breaks. Apply Heldane Display for all headings, using sizes 48px, 72px, or 80px with weight 500 for maximum impact. Default to Inter weight 400 for body text with line-height of 1.42 or 1.43, and letter-spacing adjusted per size for comfortable reading. Employ a 60px border-radius for all primary and secondary buttons to maintain a pill-like, friendly aesthetic. Pad card elements generously with 40px top, 24px right, 34px bottom, 24px left for primary content cards, and 12px for smaller, tighter content. Use Slate Shadow (#292229) for primary button backgrounds with Pearl White (#ffffff) text. Incorporate subtle shadows rgba(0, 0, 0, 0.6) 0px 4px 20px 0px for elevated cards, ensuring visual hierarchy without heavy bordering. Avoid using multiple chromatic colors in close proximity; the palette is designed for distinct section separation. Do not use generic sans-serif fonts for headlines; Heldane Display is essential for brand personality. Refrain from using hard-edged rectangles for interactive elements; all buttons and many cards require significant border-radius. Do not clutter pages with excessive imagery; allow illustrations to breathe and serve as focal points. Avoid thin borders for cards and buttons; rely on solid background colors or shadows for definition. Do not use letter-spacing: normal for text larger than 16px; Inter requires specific negative tracking for optimal appearance at varied sizes. Do not use pure black body text on white backgrounds, opt for Midnight Ink (#161015) or Deep Space (#070607) for softer contrast.