---
title: "Kippo design system"
variant: extended
source: https://www.kippo.com/
captured_at: 2026-10-12
theme: dark
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/kippo-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Kippo · Design System

> A dark canvas for playful gamer connections

**Theme:** dark · **Industry:** gaming · **Source:** https://www.kippo.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Kippo pairs a near-black canvas with crisp, widely tracked monospace type and vivid pink accents. App screens and floating profile cards bring the gamer dating product to life, while restrained borders keep the long page cohesive.

## North star

Keep the interface nearly black and let tracked monospace type, pink calls to action, and product imagery carry the personality.

## Overview

The page builds its identity around a #000000 canvas, allowing white uppercase headlines and pink emphasis to read sharply without competing with the product imagery. #262626 appears in navigation and as a fine outline around large content panels; it separates sections without introducing bright bands. Source Code Pro carries the system: headlines are bold, uppercase, and widely tracked, while compact labels and explanatory copy retain a technical, arcade-like cadence. The layout stays within a centered content frame, alternating product visuals and copy inside broad, outlined panels. App-store badges, phone mockups, profile cards, and review notes provide colorful detail, but their colors belong to the imagery rather than the core interface palette. Repeated pink download buttons create a clear action cue. Generous vertical gaps preserve breathing room across the long page, and rounded navigation and cards soften the otherwise sharp, dark presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Void Black | `#000000` | `--color-void-black` | brand | Dominant page canvas and section background; also appears as a measured text color in noisy component samples. |
| Arcade White | `#ffffff` | `--color-arcade-white` | neutral | Primary headlines, navigation, links, and readable text against the black canvas. |
| Graphite Edge | `#262626` | `--color-graphite-edge` | surface | Navigation surface and thin outlines around large content panels; defines cards without strong elevation. |
| Kippo Pink | `#ee1f66` | `--color-kippo-pink` | brand | Primary download button and selective headline emphasis. |
| Arcade Gold | `#ffc400` | `--color-arcade-gold` | accent | Illustration-only gradient endpoint; not a defining interface color. |
| Neon Fuchsia | `#ff33e0` | `--color-neon-fuchsia` | accent | Illustration-only gradient endpoint; appears in colorful artwork rather than core surfaces. |
| Pixel Cyan | `#33beff` | `--color-pixel-cyan` | accent | Illustration and mockup gradient color; not a primary page control color. |
| Mint Glow | `#33ffb8` | `--color-mint-glow` | accent | Illustration and mockup gradient color; visible in product artwork and messaging examples. |
| Soft Silver | `#cfcfcf` | `--color-soft-silver` | accent | Endpoint of a pale decorative gradient; not a core page surface or text color. |

### Semantic aliases

`--color-canvas` → `#000000` (Void Black) · `--color-surface` → `#262626` (Graphite Edge) · `--color-text` → `#ffffff` (Arcade White) · `--color-text-muted` → `#000000` (Void Black) · `--color-border` → `#262626` (Graphite Edge) · `--color-accent` → `#ee1f66` (Kippo Pink) · `--color-accent-2` → `#ffc400` (Arcade Gold) · `--color-accent-3` → `#ff33e0` (Neon Fuchsia) · `--color-on-accent` → `#ffffff` (Arcade White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#262626` | 15.13:1 | AAA |
| `#000000` | `#262626` | 1.39:1 | fail |
| `#ee1f66` | `#000000` | 5.02:1 | AA |
| `#ee1f66` | `#262626` | 3.62:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgb(255, 196, 0), rgb(255, 51, 224))`
- `linear-gradient(to right, rgb(51, 190, 255), rgb(51, 255, 184))`
- `linear-gradient(to right, rgb(207, 207, 207), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Source Code Pro | `--font-mono` | webfont | 400, 700, 600 | Site-wide display, navigation, body, eyebrow, caption, and code-like microcopy. | IBM Plex Mono |

- **Source Code Pro:** Bold uppercase, generously tracked headlines and body copy; compact uppercase navigation and labels, with lighter sentence-case captions.

### Type scale — Custom (ratio ≈ 2.625, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 700 | 1.19 | 0.119em | uppercase | Source Code Pro | Hero headline and major section titles. |
| body | 16px | 700 | 1.88 | 0.313em | uppercase | Source Code Pro | Uppercase promotional copy and feature descriptions. |
| caption | 10px | 400 | 2 | 0.1em | — | Source Code Pro | Compact supporting notes and small secondary labels. |
| nav | 10px | 600 | 2 | 0.5em | uppercase | Source Code Pro | Small, widely tracked uppercase navigation links. |
| eyebrow | 10px | 400 | 2 | 0.4em | uppercase | Source Code Pro | Section labels and short uppercase introductions. |
| code | 10px | 400 | 2 | 0.1em | — | Source Code Pro | Tiny technical-style labels and pro-tip copy. |

OpenType features in use: `"zero"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 10, 15, 20, 25, 30, 35, 50, 100, 150 px.
- Section rhythm 150px · element gap 10px · card padding 15px · max content width 1108px.

A centered content frame reaches the measured 1108px maximum width, with navigation above a large hero panel. The hero aligns copy to the left and a phone mockup to the right. Below it, a logo cloud leads into repeated, broad outlined feature panels, alternating image and copy placement; one connection panel uses two columns. Sections share a spacious vertical rhythm, with the measured 150px section gap and compact 10px element gap. The overall composition is intentionally sparse rather than grid-dense.

## Shape & elevation

- Radius: button `10px` · card `15px` · media `50%` · nav `15px` · xs `10px` · sm `15px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The visual system is mostly flat: no measured shadows, with dark panels and thin #262626 outlines providing structure. Rounded navigation and card corners soften the frames. Create depth through overlapping phones, profile cards, and collage imagery rather than drop shadows or stacked interface surfaces.

## Imagery

Use product-first visuals: angled phone mockups, collages of profile cards, app UI, messaging snippets, and testimonial notes. Images are vivid and varied against the black page, with cutout-like floating layers and occasional overlap beyond panel edges. Keep imagery in its own framed zone; colorful cyan, green, and multicolor gradients belong to the screenshots or artwork, not the base interface.

## Components

### Top navigation

A rounded charcoal bar with the Kippo mark at left and small, widely tracked uppercase links at right.

### Hero panel

A large, subtly outlined black panel pairing a bold two-line headline and app-store badges with a phone mockup.

### Feature panel

A broad dark section framed by a fine #262626 border, with product imagery and uppercase copy arranged in alternating sides.

### Pro-tip card

Compact charcoal card with tiny, spaced monospace copy and a numbered tip, used as supporting feature detail.

### Download CTA

Bright #ee1f66 rounded button with white uppercase monospace label; repeated after feature descriptions.

### Press logo cloud

A small uppercase introduction followed by a dense, multi-column row of publication marks.

### Footer panel

Rounded charcoal block combining social and site links, app badges, copyright text, and a small brand mark.

### Measured component styles

- **Primary button** (“DOWNLOAD FOR FREE”): background #ee1f66 · text #ffffff · radius 10px · padding 10px 15px · 600 12px Source Code Pro
- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 600 12px Source Code Pro
- **Card** (“> > PROTIP 004 > MATCH WITH PEOPLE BASED”): background #29292a · text #000000 · radius 10px · padding 15px · 400 12px Source Code Pro
- **Navigation item** (“HOME COMICS SUPPORT”): background #29292a · text #000000 · radius 15px · padding 0px 0px 10px 20px · 400 12px Source Code Pro

## Do

- Use #000000 as the dominant canvas.
- Set prominent headings in bold, tracked uppercase monospace.
- Reserve #ee1f66 for clear actions and selective emphasis.
- Use thin #262626 outlines to frame large content panels.
- Alternate product imagery and copy across feature sections.
- Let app mockups and profile cards provide the vivid color.

## Don't

- Do not turn illustration gradient colors into broad UI backgrounds.
- Do not add prominent shadows or glossy interface effects.
- Do not crowd the page with dense grids or tight section spacing.
- Do not use a conventional sans-serif for the main typographic voice.
- Do not replace the dark canvas with alternating bright section bands.
- Do not make every heading pink; keep white as the primary text color.

## Agent prompt

Build a new Kippo page using a near-black #000000 canvas, with #ffffff text and the measured Source Code Pro style (IBM Plex Mono is a suitable free substitute). Use widely tracked uppercase display headings, restrained small labels, and a centered content frame. Frame major feature panels with fine #262626 outlines and alternate copy with colorful phone, profile, or app-screen imagery. Use #ee1f66 for primary download actions and occasional headline emphasis; keep #ffc400, #ff33e0, #33beff, #33ffb8, and #cfcfcf confined to illustrative artwork or gradients. Maintain broad vertical breathing room, minimal elevation, and rounded navigation and cards. Favor overlapping product cutouts over shadows, and keep each section clear, sparse, and focused on one product benefit.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered outlined hero panel; copy and download badges on the left, phone mockup on the right. | App-store download links, QR code for quick install | Tracked uppercase headline, Pink word emphasis, Outlined panel |
| 2 | logo-cloud | Compact heading above a dense, multi-column spread of publication logos. | Third-party credibility | Small uppercase label, Press logo rows |
| 3 | feature-split | Outlined panel with a collage of game and profile imagery on one side and copy on the other. | Benefit-led product explanation, Repeated download action | Pro-tip card, Pink CTA, Layered collage |
| 4 | feature-split | Alternating outlined panel with copy on the left and floating profile cards on the right. | Profile customization showcase, Repeated download action | Selective pink headline text, Overlapping app cards, Dark tip card |
| 5 | feature-split | Two-column feature panel pairing a phone conversation mockup with copy and supporting tip. | Connection benefit, Repeated download action | Phone mockup, Pink headline emphasis, Outlined frame |
| 6 | feature-split | Wide outlined panel with text on the left and chat snippets and app imagery on the right. | Messaging feature explanation, Repeated download action | Bright chat bubbles, Compact pro-tip card, Product screenshot |
| 7 | testimonials | Large outlined panel with testimonial cards on the left and download claim and copy on the right. | Social proof, Repeated download action | Floating review notes, Pink numerical emphasis, Dark tip card |
| 8 | footer | Rounded charcoal footer divided into social links, site navigation, and press or policy links. | Social discovery, App-store download links, Policy navigation | Three link columns, Small brand mark, Charcoal surface |

## Source CSS custom properties (selected)

```css
--fa-primary-color: #FFFFFF;
--fa-secondary-opacity: 1.0;
--fa-secondary-color: #009AFF;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/kippo-com