# Minymon · Design system migration spec

> Source: https://www.minymon.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Minymon constructs its identity on the premise of a digital pet shop for your website. Its core is a playful, conversational warmth, embodied by a brand mascot that transforms engagement from a transaction into a friendly visit. The system prioritizes approachability and character over complex utility, much like a well-designed toy.

**One-liner:** A playful service that provides cute, interactive mascot characters to enhance website engagement.
**Keywords:** playful · friendly · digital pet · brand mascot · conversational
**Analogy:** A digital pet shop for your website

## 2. Color

The color system establishes a warm, high-contrast environment anchored by a creamy beige background and deep navy blue. A soft coral accent provides friendly punctuation, ensuring the palette feels inviting and approachable rather than sterile or corporate.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F2EA` | main background |
| `--ink` | `#154C7E` | body text |
| `--muted` | `#474747` | placeholder |
| `--accent` | `#F16849` | single accent |
| `--line` | `rgba(21, 76, 126, 1)` | divider |

**Color principle:** Warm and approachable with a high-contrast, friendly color palette.

The guiding principle is warmth over sterility, using a pastel-friendly palette to create a consistently approachable atmosphere.

## 3. Typography

Typography employs a rounded, humanist sans-serif to reinforce the informal, friendly voice. The scale is clearly tiered, using distinct styles for navigation, hero headlines, and body copy, with playful emoji integrated inline to soften the tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 700 | -1px | Hero headline |
| h1 | 36px | 1.2 | 700 | 0 | Section headlines |
| body | 18px | 1.5 | 400 | 0 | Main body text |
| nav | 13px | 1.2 | 500 | 2px | Navigation links |

**Type rules:**
- 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.

## 4. Spacing

The system establishes rhythm through generous vertical padding between major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding between major content blocks.

## 5. Surfaces

Depth is communicated through playful, hard-offset drop shadows and solid borders. This approach avoids photorealistic effects, instead creating a tactile, illustrative quality that feels more like a pop-up book than a flat interface.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - 4px 4px 0px 0px rgba(21, 76, 126, 1)
- **Borders:** Solid primary blue borders with hard offset drop shadows.

## 6. Layout

The skeleton is a centered, single-column layout housed within a max-width container, ensuring content remains focused and accessible. A prominent floating mascot acts as a visual anchor, breaking the columnar flow with a large, character-driven illustration.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy favors subtlety and delight, using smooth transitions to guide focus without demanding attention. Interactive elements respond with simple state changes, and content sections can fade in gently upon entering the viewport.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on interactive elements.

- **Hover:** Cursor changes to pointer on interactive elements.
- **Click:** Standard button press behavior.
- **Transition:** Smooth fade-in animations for content sections.
- **Keyboard:** Standard focus states (not fully visible but expected).

## 8. Voice & Don'ts

The editorial voice is friendly, inviting, and slightly whimsical, using direct, conversational headlines and encouraging calls to action. The tone deliberately avoids corporate jargon, complex technical terms, and aggressive sales language.

- **Tone:** Friendly, inviting, and slightly whimsical.
- **Headline style:** Direct and conversational, using emojis.
- **CTA style:** Action-oriented and encouraging.
- **Avoid:** Corporate jargon / Complex technical terms / Aggressive sales language / Formal or stiff tone

### Don'ts
- ❌ 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.

The system explicitly rejects a sterile, high-tech, or overly professional aesthetic in favor of consistent, character-driven warmth.

## System Prompt (paste into AI tool)

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