---
name: Minymon
description: "This site is worth including as a prime example of a playful, character-driven consumer UI that prioritizes friendliness and brand personality over complex functionality."
version: alpha

colors:
  background: "#F9F2EA"
  primary: "#154C7E"
  tertiary: "#F16849"
  neutral: "#474747"
  line: "rgba(21, 76, 126, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  nav:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "2px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A playful service that provides cute, interactive mascot characters to enhance website engagement.

*A digital pet shop for your website*

## Colors

Warm and approachable with a high-contrast, friendly color palette.

- **Background (`#F9F2EA`)** — uses `bg` token
- **Primary text (`#154C7E`)** — uses `ink` token
- **Accent (`#F16849`)** — uses `accent` token
- **Muted (`#474747`)** — uses `muted` token
- **Borders (`rgba(21, 76, 126, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- 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.

## Layout

Centered single-column layout with max-width container and a prominent floating mascot.

*Rhythm:* Generous vertical padding between major content blocks.

## Elevation & Depth

- 4px 4px 0px 0px rgba(21, 76, 126, 1)
- Borders: Solid primary blue borders with hard offset drop shadows.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Solid borders with a hard offset drop shadow; playful, rounded corners.
- **card:** Not clearly defined; characters are presented in a simple floating row.
- **chip:** Not clearly defined.
- **input:** Not clearly defined.
- **hero:** Centered text hero with a large decorative wave divider.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```