Preview image. Unlock full-res
Earthy radiance with vibrant pops
Fable & Mane evokes a spirited, naturalistic brand with a gentle, earthy canvas and flashes of energetic color. The visual system prioritizes warmth and comfort, achieved through rounded forms, soft background tones, and legible but characterful typography. Components feel approachable, often outlined or ghosted, reserving vibrant reds for clear calls to action that pop against muted surroundings. The overall effect is a clean, product-focused presentation softened by organic accents.
Prioritize Paper Bark (#fff5ec) as the default page background to establish warmth and softness.
Use Maharaja Red (#f9423a) exclusively for primary action buttons and critical alerts to ensure maximum impact.
Apply a 24px border-radius to all buttons, cards, and badges to maintain a consistent friendly aesthetic.
Pair Quincy CF (ExtraBold) for headlines with Sofia Pro for body text to create clear typographic hierarchy and brand identity.
Ensure ample spacing, using a consistent 22px elementGap for horizontal and vertical separation of inline elements, and a 30px sectionGap between major content blocks.
Elevate critical UI elements like modals and pop-ups with box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 20px 0px for clear visual focus.
Reinforce the natural aesthetic with botanical SVG icons using Ocean Deep Blue (#002e5d) and Sunburst Yellow (#ffd100) as fill colors.
Do not introduce severe dark backgrounds or stark white elements except for highly elevated surfaces, to avoid disrupting the warm, natural theme.
Avoid using multiple colors for primary calls to action; Maharaja Red (#f9423a) is the singular choice for this function.
Do not apply sharp, angular corners to interactive components, as this contradicts the established soft, rounded aesthetic.
Refrain from dense, compact layouts; maintain the comfortable spacing values (22px elementGap, 30px sectionGap) to give content breathing room.
Do not use generic system fonts when Sofia Pro and Quincy CF are available, as they are crucial for brand recognition.
Avoid excessive use of shadows; reserve box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 20px 0px for truly elevated or focused content only.
Do not dilute the brand's chromatic elements (Maharaja Red, Tiger Orange, Sunburst Yellow, Ocean Deep Blue) with overly desaturated variants or competing hues.
