CURATED · OPEN · FREE

Kippo

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

App UIMobile UIDark ModeBold TypographyConsumer

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://kippo.com

📦 Browse pack contents →

Identity DNA

DatingGamersSocialApp

A neon-lit arcade meets a modern social hub.

Color

#EE1F66Accent

#FFFFFFInk

#000000BG

#29292ABG soft

#CFCFCFMuted

rgba(255, 255, 255, 0.15)Line

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

Typography

monospace · Source Code Pro

display42px · 700
body12px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 10px

md · 15px

lg · 28px

pill · 999px

1px solid rgba(255, 255, 255, 0.15)

0 4px 24px rgba(0, 0, 0, 0.5)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Opacity transitions on hover (0.2s) · Smooth hover states on interactive elements

Opacity change on interactive elements. · Immediate visual response.

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.

Voice & Don'ts

Tone Confident, energetic, and gamer-centric.
Headlines Bold, uppercase, wide-tracked monospace.
CTAs Direct, uppercase monospace commands.

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.
Avoid: Serif fonts
Avoid: Pastel color palettes
Avoid: Formal business language

Inside the pack — real screenshots

Kippo — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko