---
version: alpha
name: Doodles
description: Cartoon-joyful Web3 branding — a candy pastel rainbow palette on a clean off-white canvas, fat rounded display type set on near-black ink, big squishy pill buttons, and oversized 24px+ rounded cards that feel hand-drawn and toy-like.
colors:
  # Canvas + ink
  background: "#fdf8f3"      # warm off-white paper canvas
  surface: "#ffffff"
  surface-soft: "#fbf3ea"
  ink: "#1a1a2e"             # near-black with a faint blue-violet warmth
  ink-pure: "#000000"

  # Pastel rainbow brand spectrum
  primary: "#ff6f91"        # Doodles pink — hero accent
  blossom-pink: "#ffb3c6"
  sky-blue: "#7ec8e3"
  cornflower: "#5b8def"
  mint: "#9be7c4"
  butter: "#ffe08a"
  tangerine: "#ff9f68"
  lilac: "#c9a7eb"
  grape: "#8a5cf6"

  # Secondary supports
  secondary: "#5b8def"      # cornflower CTA alt
  accent-yellow: "#ffd23f"

  # Neutral scale
  gray-700: "#3d3d52"
  gray-500: "#6b6b80"
  gray-400: "#9a9aae"
  gray-200: "#e4ddd4"
  gray-100: "#efe8df"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fdf8f3"
  on-butter: "#1a1a2e"      # dark ink reads on light butter/mint fills

  # Borders + overlays
  border: "#1a1a2e"         # signature hand-drawn thick dark outline
  border-soft: "#e4ddd4"
  overlay-backdrop: "#2a2438"  # was rgba(26,26,46,.55) — flattened over canvas

typography:
  display-hero:
    fontFamily: "Fredoka, Baloo 2, Arial Rounded MT Bold, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1px
  display:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.25px
  card-title:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  sub-heading:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.2px
  micro-badge:
    fontFamily: "Fredoka, Baloo 2, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  pill: 9999px

components:
  # Primary squishy pink CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.blossom-pink}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Secondary cornflower CTA
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Outlined ghost button — thick dark hand-drawn outline
  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Pastel pill badge
  badge:
    backgroundColor: "{colors.butter}"
    textColor: "{colors.on-butter}"
    typography: "{typography.micro-badge}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Toy-like rounded card with thick dark outline
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Soft pastel feature card
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"

  # Colorful highlight card (rainbow tile)
  card-color:
    backgroundColor: "{colors.mint}"
    textColor: "{colors.on-butter}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"
---

# Doodles Design System

## Overview

Doodles is one of Web3's most recognizable visual identities — a cartoon-joyful aesthetic built around hand-drawn characters rendered in a soft pastel rainbow. Where most crypto brands lean dark, neon, and aggressively futuristic, Doodles goes the opposite direction: a warm off-white paper canvas (`{colors.background}`), squishy rounded type, and a candy palette that feels like a children's storybook crossed with a sticker pack. The entire system communicates approachability and play — this is a brand that wants you to smile, not to feel intimidated by blockchain.

The signature design move is the **thick dark hand-drawn outline** (`{colors.border}`). Buttons, cards, and character art all carry a chunky near-black stroke that echoes the cel-shaded cartoon illustration style. Combined with generous corner radii (cards at `{rounded.lg}`–`{rounded.xl}`, buttons fully pilled), elements feel toy-like and tactile, as if you could pick them up. Nothing is sharp; everything is rounded, soft, and bouncy.

Color is the loudest voice. The pastel spectrum — pink (`{colors.primary}`), sky blue, mint, butter yellow, tangerine, lilac — is deployed liberally across tiles, badges, and illustration backdrops. No single accent dominates; the rainbow IS the brand. The off-white canvas keeps the saturation from overwhelming, and the near-black ink (`{colors.ink}`) provides the high-contrast anchor that keeps everything legible and grounded.

Typography reinforces the friendliness. Headlines use a fat, rounded geometric display face (mapped here to Fredoka) with low letter-spacing and tight line-height, giving big bouncy words. Body copy switches to a clean neutral grotesque (Inter) for readability. The pairing keeps the personality in the headings while keeping the reading experience calm.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) — never stark white, never dark
- Pastel rainbow spectrum (pink, sky, mint, butter, tangerine, lilac) used as the primary brand language
- Signature thick dark hand-drawn outline (`{colors.border}`) on buttons, cards, and art
- Fat rounded display type (Fredoka) for headlines, clean Inter for body
- Fully pilled buttons (`{rounded.pill}`) and oversized rounded cards (`{rounded.lg}`+)
- Near-black ink (`{colors.ink}`) for high-contrast grounding against the soft palette
- Toy-like, tactile, bouncy character — playful over polished

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): Warm off-white page canvas — the storybook backdrop.
- **Surface** (`{colors.surface}`): Pure white for cards that need to pop off the paper.
- **Ink** (`{colors.ink}`): Near-black with faint blue-violet warmth — all primary text and the hand-drawn outline.

### Pastel Rainbow Spectrum
- **Doodles Pink** (`{colors.primary}`): The hero accent, primary CTA fill.
- **Blossom Pink** (`{colors.blossom-pink}`): Soft pink for hover states and tints.
- **Sky Blue** (`{colors.sky-blue}`): Airy backdrop and tile color.
- **Cornflower** (`{colors.cornflower}`): Saturated blue, secondary CTA.
- **Mint** (`{colors.mint}`): Fresh green tile and badge.
- **Butter** (`{colors.butter}`): Warm yellow badge and highlight.
- **Tangerine** (`{colors.tangerine}`): Playful orange accent.
- **Lilac** (`{colors.lilac}`): Soft purple tint.
- **Grape** (`{colors.grape}`): Saturated purple for emphasis.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Secondary headings, strong labels.
- **Gray 500** (`{colors.gray-500}`): Body secondary text.
- **Gray 400** (`{colors.gray-400}`): Placeholders, disabled.
- **Gray 200 / 100** (`{colors.gray-200}` / `{colors.gray-100}`): Soft dividers and surface tints.

### Borders & On-Color
- **Border** (`{colors.border}`): The signature thick dark hand-drawn stroke.
- **Border Soft** (`{colors.border-soft}`): Lighter neutral divider.
- **On Primary** (`{colors.on-primary}`): White text on pink/blue fills.
- **On Butter** (`{colors.on-butter}`): Dark ink on light pastel fills (butter, mint) where white would fail contrast.

## Typography

### Font Family
- **Display / Headings**: `Fredoka` (fat rounded geometric), fallbacks `Baloo 2, Arial Rounded MT Bold, sans-serif`
- **Body**: `Inter`, fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — big bouncy headline |
| `display` | 48px major section opener |
| `section-heading` | 36px section titles |
| `card-title` | 24px card headings |
| `sub-heading` | 20px lead-in copy |
| `body-large` | 18px introductions |
| `body` | 16px standard reading |
| `body-medium` | 16px emphasized UI text |
| `button-ui` | 16px button labels (rounded display face) |
| `caption` | 13px metadata |
| `micro-badge` | 11px pill badge text |

### Principles
- **Rounded personality up top, neutral clarity below**: Fredoka carries the brand voice in headlines and buttons; Inter keeps body copy calm and readable.
- **Tight, bouncy headlines**: Display sizes use low line-height (1.00–1.10) and slight negative tracking so big words feel chunky and energetic.
- **Weight, not italics**: Emphasis comes from going 600/700 in the display face, never from italics.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with generous jumps to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for the airy, playful breathing room between sections.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: centered single column with oversized display headline and character art
- Feature sections: 2–3 column rainbow tile grids
- Generous gutters so each colorful card reads as its own toy

### Whitespace Philosophy
- **Paper breathing room**: The warm off-white canvas is left intentionally open so saturated pastel tiles never crowd.
- **Big rounded blocks**: Content sits in oversized rounded cards with the dark outline, floating on the paper with comfortable margins.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline tags |
| `md` | 16px | Inputs, small cards |
| `lg` | 24px | Standard cards — the toy-block default |
| `xl` | 32px | Feature cards |
| `2xl` | 48px | Hero panels, large surfaces |
| `pill` | 9999px | Buttons, badges, pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Doodles Pink fill, white text, fully pilled, with the dark hand-drawn outline. The default CTA.
- **`button-secondary`** — Cornflower blue alternate.
- **`button-ghost`** — White fill with thick dark outline for secondary actions.

### Badges
- **`badge`** — Pastel fill (butter/mint), dark ink text, pill shape, rounded display micro type.

### Cards
- **`card`** — White surface, `{rounded.lg}`, thick dark outline — the toy-block default.
- **`card-feature`** — Soft pastel surface, larger `{rounded.xl}` radius.
- **`card-color`** — Saturated rainbow tile (mint shown) with dark ink text and outline.

### Inputs
- **`input`** — White surface, `{rounded.md}`, soft border; focus switches the border to Doodles Pink.

### Navigation
- **`nav-bar`** — Off-white paper header, rounded display nav labels, soft bottom divider.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`), never stark white or dark
- Use the pastel rainbow liberally — the whole spectrum is the brand
- Apply the thick dark outline (`{colors.border}`) on buttons and cards for the hand-drawn feel
- Fully pill all buttons and use large radii (24px+) on cards
- Use Fredoka for headlines and buttons, Inter for body
- Pair dark ink text on light pastel fills (butter, mint) for contrast

### Don't
- Don't go dark-mode or neon — Doodles is bright and soft, not cyberpunk
- Don't use sharp corners — everything is rounded and bouncy
- Don't put white text on light pastel fills (butter/mint) — use dark ink
- Don't let one accent dominate — the rainbow should feel balanced
- Don't use thin hairline borders where the signature thick outline belongs
- Don't set body copy in the rounded display face — keep Inter for reading

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero display scales to ~40px, stacked tiles |
| Tablet | 600–1024px | 2-column rainbow grids |
| Desktop | 1024–1200px | Full 3-column tile layout |
| Large | >1200px | Centered, generous paper margins |

### Touch Targets
- Pilled buttons use comfortable 14px vertical padding
- Badges and pills have 14px horizontal padding for tap area
- Nav labels at 16px rounded display

### Collapsing Strategy
- Hero: 64px display → ~40px on mobile, character art stacks below
- Feature tiles: 3-column → 2-column → single column
- Section spacing: 96px → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Doodles Pink `{colors.primary}` with dark outline `{colors.border}`
- Background: warm paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 500 `{colors.gray-500}`
- Rainbow tiles: pink/sky/mint/butter/tangerine/lilac
- Border: thick dark `{colors.border}`

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Headline at 64px Fredoka weight 700, line-height 1.00, color `{colors.ink}`. Pilled pink CTA (`{colors.primary}` fill, white text, thick dark `{colors.border}` outline, 14px 28px padding) plus a white ghost button with the same dark outline."
- "Design a rainbow feature tile: mint `{colors.mint}` fill, dark ink `{colors.on-butter}` text, `{rounded.lg}` radius, thick dark outline, 24px padding. Title 24px Fredoka weight 600."
- "Build a pastel pill badge: butter `{colors.butter}` background, dark ink text, full pill, 11px Fredoka weight 600, 6px 14px padding."

### Iteration Guide
1. Start from the warm off-white paper canvas — never white, never dark
2. Reach for the rainbow spectrum first; let color carry the personality
3. Always add the thick dark `{colors.border}` outline on buttons and cards
4. Pill the buttons, round the cards (24px+)
5. Fredoka in headlines and buttons, Inter for everything you read
6. On light pastel fills, switch text to dark ink for contrast

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Doodles. Brand names and trademarks belong to their respective owners.