Warm and approachable with a high-contrast, friendly color palette.
03
Typography
humanist-sans
display56px · 700
h136px · 700
body18px · 400
nav13px · 500
Navigation links use uppercase and wide tracking. · Hero text uses a tight negative letter spacing. · Emoji are used inline with body text for playful tone.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical padding between major content blocks.
05
Surfaces
sm · 4px
md · 8px
lg · 24px
pill · 999px
Solid primary blue borders with hard offset drop shadows.
4px 4px 0px 0px rgba(21, 76, 126, 1)
06
Layout
1200container
12columns
24pxgutter
768 / 1024breakpoints
Centered single-column layout with max-width container and a prominent floating mascot.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth transitions on interactive elements.
Cursor changes to pointer on interactive elements. · Standard button press behavior.
08
Components
buttonSolid borders with a hard offset drop shadow; playful, rounded corners.
cardNot clearly defined; characters are presented in a simple floating row.
chipNot clearly defined.
inputNot clearly defined.
heroCentered text hero with a large decorative wave divider.
09
Voice & Don'ts
ToneFriendly, inviting, and slightly whimsical.
HeadlinesDirect and conversational, using emojis.
CTAsAction-oriented and encouraging.
Don't use a sterile white background — screenshot shows a warm, creamy beige (#F9F2EA).
Don't use sharp, mechanical drop shadows — screenshot shows a playful, hard offset shadow.
Don't use a high-tech, dark UI — screenshot uses a light, pastel-friendly, and approachable palette.
Don't use complex, multi-column grids — screenshot shows a simple, centered, single-column layout.
Don't use aggressive, neon accent colors — screenshot uses a soft, warm coral/salmon accent (#F16849).
Don't use a strictly professional, serif-heavy typography — screenshot uses rounded, humanist sans-serif fonts.
Captured from the live site · real computed styles
11
System prompt
Minymon is a playful, consumer-facing service that provides cute, interactive digital mascots ('minymons') for websites. The design is warm and approachable, utilizing a creamy beige (#F9F2EA) background, deep navy blue (#154C7E) text, and soft coral (#F16849) accents. The typography is a rounded, humanist-sans-serif that feels friendly and informal. Key visual elements include playful emoji, hard offset drop shadows, and decorative wave dividers. Critical donts: Never use a sterile white background; never use mechanical, soft drop shadows; never use a dark or high-tech color scheme. Always maintain a whimsical, inviting tone.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
