比特币 DeFi（移动）Bitcoin DeFi (Mobile)
深空黑 + 比特币橙金渐变，等宽数字、发光胶囊按钮与账本时间线。强调精确与资产安全感。
典型场景加密钱包 · 交易应用 · Web3
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现（数据标注：浅色 不建议，深色 支持）。
风格描述
深空黑 + 比特币橙金渐变，等宽数字、发光胶囊按钮与账本时间线。强调精确与资产安全感。
关键词
效果与动效
Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography
设计系统变量
--bg-void#030304--bg-surface#0F1115--fg#FFFFFF--fg-muted#94A3B8--border-dimrgba(30,41,59,0.2)--accent-bitcoin#F7931A--accent-burnt#EA580C--accent-gold#FFD600--radius-card24px--radius-pill999px--blur-intensity20--font-headingSpace Grotesk--font-bodyInter--font-monoJetBrains Mono配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600
辅色 / Secondary
Void #030304, Dark Matter #0F1115, Pure Light #FFFFFF, Stardust #94A3B8, Border Dim rgba(30,41,59,0.2)
强调色在页面底色上的对比度约 9.0:1，可用于正文与图标。
适用场景
适合 / Best For
- DeFi dashboards
- wallets
- NFT marketplaces
- Web3 social
- metaverse utilities
- high-tech fintech brands
避开 / Do Not Use For
- Playful casual apps
- low-tech brands
- ultra-minimal editorial apps
框架兼容
能力矩阵
实现要点
落地清单
- Void/dark-matter palette applied,
- Bitcoin orange/gold gradient buttons,
- BlurView nav implemented,
- Monospace for numeric data,
- Hairline borders on blocks,
- Gradient text on balances,
- Pulsing network status indicators,
- Ledger vertical timeline,
- Haptics on money actions,
- SafeArea + FlashList for heavy lists
CSS / 技术关键词
backgroundColor: '#030304', cardBg: '#0F1115', textColor: '#FFFFFF', mutedText: '#94A3B8', borderColor: 'rgba(30,41,59,0.2)', accentBitcoin: '#F7931A', accentBurnt: '#EA580C', accentGold: '#FFD600', borderRadius: 24 for cards, radiusPill: 999 for buttons, BlurView intensity 20, LinearGradient on CTAs, shadowColor '#F7931A' shadowRadius up to 10, JetBrains Mono for numeric text
AI 提示词
Design a Bitcoin DeFi (Mobile) mobile interface using web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.