---
name: Kippo
description: "A strong example of niche-targeted app UI, effectively using gamer-aesthetic cues like monospace fonts and neon accents."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  tertiary: "#EE1F66"
  neutral: "#CFCFCF"
  bg-soft: "#29292A"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: monospace
    fontSize: 42px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "4px"
  body:
    fontFamily: monospace
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "1px"

rounded:
  sm: 10px
  md: 15px
  lg: 28px
  pill: 999px

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

---

## Overview

A bold, dark-themed dating app landing page specifically designed for gamers, featuring high-contrast neon accents.

*A neon-lit arcade meets a modern social hub.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#EE1F66`)** — uses `accent` token
- **Muted (`#CFCFCF`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px base grid with ample padding for breathing room.

## Elevation & Depth

- 0 4px 24px rgba(0, 0, 0, 0.5)
- Borders: 1px solid rgba(255, 255, 255, 0.15)

## Shapes

- `sm`: 10px
- `md`: 15px
- `lg`: 28px
- `pill`: 999px

## Components

- **button:** Solid neon pink buttons with bold monospace text.
- **card:** Dark gray panels with subtle 1px borders.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Large uppercase text with a device mockup featuring colorful shadow accents.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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