---
name: Dialitdown Co Nz
description: "This site is a great example of using custom character illustrations and warm colors to make a potentially dry topic like 'netiquette' feel engaging, approachable, and highly memorable."
version: alpha

colors:
  background: "#A3F7F7"
  primary: "#222222"
  bg-soft: "#F6F4EA"
  line: "rgba(34,34,34,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 68px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A whimsical, character-driven editorial site that uses playful illustrations and warm colors to promote positive online behavior.

*A friendly, illustrated guidebook on digital etiquette with a distinct retro-playful character.*

## Colors

Warm, friendly, and illustrative, avoiding harsh contrasts or aggressive neon tones.

- **Background (`#A3F7F7`)** — uses `bg` token
- **Primary text (`#222222`)** — uses `ink` token
- **Borders (`rgba(34,34,34,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Display text uses a transitional serif with high contrast.
- Body text uses a clean system-ui or humanist sans-serif.
- Keep typography clean and readable with generous line heights.

## Layout

Single column centered content, transitioning to a grid for media or posters.

*Rhythm:* Generous vertical spacing between sections and within content blocks.

## Elevation & Depth

- Borders: Thin, solid borders in the primary ink color.

## Shapes

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

## Components

- **button:** Pill-shaped buttons with high-contrast text.
- **card:** Poster-style cards with solid background colors, bold typography, and central illustrations.
- **chip:** Oval tags for hashtags or keywords.
- **input:** Minimal text fields with thin bottom borders.
- **hero:** Large, centered headline with a prominent character illustration above or below.

## Do's and Don'ts

**Don't:**
- Don't use dark mode — the site relies on bright, colorful backgrounds.
- Don't use harsh neon colors — the palette is soft, warm, and friendly.
- Don't use heavy sans-serifs for headlines — display text is a transitional serif.
- Don't use complex multi-column grids — the layout is mostly centered and single-column.
- Don't use realistic photography — the site uses custom character illustrations.
- Don't use tight line spacing — generous white space and line heights are key.

---

## System Prompt (paste into AI agent)

```
Design a friendly, playful editorial site that promotes positive digital behavior. Use bright, soft background colors like #A3F7F7 and #F6F4EA paired with dark ink (#222222). The primary display font should be a transitional serif, while body text uses a clean humanist sans-serif. Incorporate custom, whimsical character illustrations as the central visual motif. Avoid dark modes, harsh neon colors, or overly complex grids; instead, focus on generous white space and a centered, single-column layout that highlights the playful typography and illustrations. The tone should be warm and encouraging, avoiding aggressive language or dense text blocks. Ensure all interactive elements have smooth transitions and clear hover states.
```