# Dialitdown Co Nz · Design system migration spec

> Source: https://www.dialitdown.co.nz  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Think of Dialitdown as a well-illustrated field guide for navigating digital spaces with kindness. Its design DNA is built around a whimsical, character-driven narrative that uses playful visuals and warm tones to make the topic of netiquette feel approachable and engaging.

**One-liner:** A whimsical, character-driven editorial site that uses playful illustrations and warm colors to promote positive online behavior.
**Keywords:** friendly · illustrated · editorial · netiquette · whimsical
**Analogy:** A friendly, illustrated guidebook on digital etiquette with a distinct retro-playful character.

## 2. Color

The color system is deliberately warm and inviting, built on a foundation of bright aqua and warm cream to create a friendly, non-confrontational atmosphere. A single dark ink provides necessary contrast without harshness, grounding the playful palette.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#A3F7F7` | main background |
| `--bg-soft` | `#F6F4EA` | card background |
| `--ink` | `#222222` | body text |
| `--line` | `rgba(34,34,34,1.0)` | divider |

**Color principle:** Warm, friendly, and illustrative, avoiding harsh contrasts or aggressive neon tones.

Every color choice prioritizes warmth and approachability, deliberately avoiding aggressive contrasts or neon tones that might feel hostile.

## 3. Typography

Typography plays two distinct roles: a high-contrast transitional serif makes bold, illustrative statements for headlines, while a clean humanist sans-serif ensures readable, comfortable body text. This pairing creates a clear hierarchy that feels both editorial and friendly.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 68px | 1.1 | 400 | 0px | Hero headlines and primary calls to action |
| body | 16px | 1.5 | 400 | 0px | Main body text and UI elements |

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

## 4. Spacing

Generous vertical rhythm is the silent structure that allows the playful content to breathe, with ample spacing between sections and within content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections and within content blocks.

## 5. Surfaces

Surfaces are defined by simplicity and clarity, using thin, solid borders in the primary ink color to delineate space without visual weight. There are no drop shadows; depth is communicated through color and form alone.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin, solid borders in the primary ink color.

## 6. Layout

The layout skeleton is primarily a single, centered column that prioritizes readability and focuses attention on the large headlines and illustrations. This focused structure transitions to a grid only when displaying media or poster-style cards, maintaining a clean visual path.

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

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

## 7. Motion & Interaction

Motion is used sparingly and purposefully, serving to guide attention and confirm interactions rather than to decorate. The philosophy is one of subtle fluidity—fade-ins on scroll and smooth hover transitions that enhance the friendly, approachable feel without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Fade-in on scroll
  - Hover state transitions
  - Simple character animations

- **Hover:** Color inversion or subtle scale changes on buttons and interactive elements.
- **Click:** Active state with slight downward movement or color shift.
- **Transition:** Smooth transitions on all interactive elements.
- **Keyboard:** Visible focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is consistently warm, encouraging, and direct, using bold statements and inviting calls to action that align with the playful visual character. It consistently avoids aggressive language, complex jargon, and dense blocks of text.

- **Tone:** Friendly, warm, and encouraging.
- **Headline style:** Bold, illustrative statements that combine words with playful visuals.
- **CTA style:** Direct and inviting, often using hashtags or short phrases.
- **Avoid:** Aggressive language / Complex jargon / Dense text blocks

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

The system explicitly rejects dark mode, harsh neons, realistic photography, and complex multi-column grids—choices that would undermine its core mission of friendly, illustrative curation.

## System Prompt (paste into AI tool)

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