Preview image. Unlock full-res
Art-filled creative canvas
Moderne uses a vibrant, playful light-mode aesthetic characterized by deep, saturated violets and teals meeting warm, vivid reds and oranges. The visual system balances a clean, structured layout with expressive, hand-drawn illustrations. Typography is a confident mix of clear sans-serifs and a distinctive display font with generous letter-spacing for headlines. Components feel plush and inviting, featuring rounded corners and subtle background tints rather than harsh borders or deep shadows.
Use Hero Violet (#0e1889) for primary hero sections and major section headers to establish a strong brand presence.
Apply Canvas Almond (#f3eae5) as the default page background for most light-mode sections.
Ensure all primary call-to-action buttons use Creative Peach (#ff7e85) for the background with Surface Snow (#ffffff) text to guide user flow.
Implement Mabry Pro for headlines, strictly adhering to its characteristic wide letter-spacing of 0.2000em.
Utilize a 4px radius for most interactive elements and cards, with an occasional 15px radius for more expressive cards.
Maintain maximum content width at 1200px, centering all content for a structured, polished feel.
Emphasize content blocks with a 20px cardPadding and a default 4px uniform corner radius for cards.
Avoid using deep drop shadows; rely on background color differences or subtle fills for element separation.
Do not deviate from the specified letter-spacing for Mabry Pro; its expansive tracking is a core visual identifier.
Do not introduce new primary action colors; Creative Peach (#ff7e85) is the singular choice.
Avoid overly complex gradient backgrounds; stick to solid color backgrounds or expressive illustrations.
Do not use dark backgrounds for general body text areas outside of designated hero sections to maintain a clear light theme.
Do not make cards or buttons fully square; always apply at least a 4px border radius for a consistent, softer feel.
Avoid placing important interactive elements directly on busy illustrative backgrounds, as contrast may be compromised.
