# Kippo · Design system migration spec

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

> A strong example of niche-targeted app UI, effectively using gamer-aesthetic cues like monospace fonts and neon accents.

## 1. Identity DNA

Kippo's design system is built for a specific audience: gamers seeking connection. Its visual language draws from the familiar glow of arcade cabinets and the clean interface of a social hub, creating a space that feels both playful and purposeful.

**One-liner:** A bold, dark-themed dating app landing page specifically designed for gamers, featuring high-contrast neon accents.
**Keywords:** Dating · Gamers · Social · App
**Analogy:** A neon-lit arcade meets a modern social hub.

## 2. Color

The color system is stark and deliberate, built on a foundation of absolute black. A single, vibrant neon pink accent cuts through the monochrome hierarchy, serving as the primary signal for action and interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#29292A` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#CFCFCF` | placeholder |
| `--accent` | `#EE1F66` | single accent |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** High-contrast dark mode with a singular neon pink accent and monochrome text hierarchy.

The palette operates on a principle of maximum contrast, ensuring every element is legible and every accent is unmistakable.

## 3. Typography

Typography is set entirely in uppercase, using a monospace typeface for both headlines and body text. This choice merges the technical feel of code with the boldness of display type, unified by wide letter-spacing that gives headings a commanding presence.

- **Display:** monospace
- **Body:** monospace
- **Mono:** Source Code Pro

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.2 | 700 | 4px | Main Headlines |
| body | 12px | 1.6 | 400 | 1px | Body Text |

**Type rules:**
- All text is uppercase
- Heavy use of monospace for body and display
- Wide letter-spacing on headings and navigation

## 4. Spacing

Spacing follows a strict 4px grid, creating a consistent rhythmic foundation for all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with ample padding for breathing room.

## 5. Surfaces

Surfaces are defined by subtle depth and sharp delineation. Dark panels are lifted from the background with diffuse shadows, while thin, translucent white borders provide structure without visual weight.

- **Radius:** sm 10px · md 15px · lg 28px · pill 999px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.5)
- **Borders:** 1px solid rgba(255, 255, 255, 0.15)

## 6. Layout

The core layout is anchored by an asymmetric two-column hero, placing bold text beside a device mockup to create immediate visual interest. Subsequent content sections stack vertically, maintaining the system's strong left alignment and generous padding.

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

**Skeleton:** Asymmetric two-column hero with text on the left and a device mockup on the right.

## 7. Motion & Interaction

Motion is functional and restrained, focused on providing immediate feedback for user interaction. Transitions are limited to smooth opacity changes, ensuring responses feel instant and predictable without decorative flourish.

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

- **Hover:** Opacity change on interactive elements.
- **Click:** Immediate visual response.
- **Transition:** Smooth opacity and color transitions on hover.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The voice is confident and direct, speaking in short, uppercase commands. It avoids formal or corporate language in favor of a tone that resonates with gaming culture.

- **Tone:** Confident, energetic, and gamer-centric.
- **Headline style:** Bold, uppercase, wide-tracked monospace.
- **CTA style:** Direct, uppercase monospace commands.
- **Avoid:** Serif fonts / Pastel color palettes / Formal business language

### Don'ts
- ❌ Don't use serif fonts — screenshot shows exclusively monospace/sans-serif.
- ❌ Don't use a white background — screenshot shows a predominantly black background.
- ❌ Don't use low-contrast colors — screenshot shows high-contrast white and neon pink on black.
- ❌ Don't use lowercase for headlines — screenshot shows all uppercase text with wide tracking.
- ❌ Don't use muted or subtle accent colors — screenshot shows a vibrant neon pink (#EE1F66).
- ❌ Don't use thin borders — screenshot shows 1px borders or no borders.

The system deliberately excludes serif typography, light backgrounds, and muted palettes, reinforcing its commitment to a bold, dark, gamer-centric identity.

## System Prompt (paste into AI tool)

```
Kippo is a dating app landing page with a bold, dark aesthetic tailored for gamers. The design uses a solid black background (#000000) contrasted with crisp white text and a vibrant neon pink accent (#EE1F66). The typography is dominated by monospace fonts (Source Code Pro) used for both display and body text, featuring wide letter-spacing and uppercase transformation. Critical donts include: do not use serif fonts, do not use a light background, and do not avoid the use of the vibrant pink accent. The layout features asymmetric hero sections with device mockups and gradient accents.
```