精選 · 開放 · 免費

Kippo

一款專為玩家設計、採用大膽暗色主題的約會應用程式登陸頁,具有高對比霓虹強調色。

App UIMobile UIDark ModeBold TypographyConsumer
Kippo 網站截圖
↓ 下載設計系統包 (7 MB)在 OpenDesign 中開啟

原站: https://kippo.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

約會玩家社群應用程式

霓虹閃爍的街機廳與現代社交中心的結合。

02

色彩

#EE1F66Accent
#FFFFFFInk
#000000BG
#29292ABG soft
#CFCFCFMuted
rgba(255, 255, 255, 0.15)Line

採用高對比暗色模式,搭配單一霓虹粉紅強調色與單色階文字層次。

03

字型

monospace · Source Code Pro

所有文字採用大寫形式 · 正文與展示文字大量使用單字型字體 · 標題與導覽文字採用寬鬆字距

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

基於 4px 基礎網格,搭配充足內距以創造呼吸空間。

05

表面 (圓角 / 陰影 / 邊線)

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)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

不對稱雙欄首頁佈局,左側為文字區,右側為裝置示意圖。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

懸停時的透明度轉場(0.2 秒) · 互動元素的平滑懸停狀態

互動元素的透明度變化。 · 即時視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

Kippo 是一款專為玩家設計、採用大膽暗色美學的約會應用程式登陸頁。設計使用純黑背景(#000000),搭配純白文字與鮮明的霓虹粉紅強調色(#EE1F66)。字型以單字型字體(Source Code Pro)為主,用於展示與內文,採用寬鬆字距與大寫轉換。重要禁忌包括:勿使用襯線字體、勿使用淺色背景,且勿避用鮮明的粉紅強調色。佈局採用不對稱首頁區塊,搭配裝置示意圖與漸層強調色。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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