现代暗色影院（移动）Modern Dark (Cinema Mobile)
近黑分层（#020203→#0a0a0c）+ 微弱环境光斑，标题用 Inter 紧字距，主色 #5E6AD2。像影院一样把内容推到前景。
典型场景流媒体 · 高端移动应用 · 内容社区
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
近黑分层（#020203→#0a0a0c）+ 微弱环境光斑，标题用 Inter 紧字距，主色 #5E6AD2。像影院一样把内容推到前景。
关键词
效果与动效
Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)
设计系统变量
--bg-deep#020203--bg-base#050506--bg-elevated#0a0a0c--surfacergba(255 255 255/0.05)--foreground#EDEDEF--foreground-muted#8A8F98--accent#5E6AD2--accent-glowrgba(94 106 210/0.2)--borderrgba(255 255 255/0.08)--radius16px--easingcubic-bezier(0.16 1 0.3 1)--fontInter配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2
辅色 / Secondary
Foreground #EDEDEF, Muted #8A8F98, Accent Glow rgba(94 106 210/0.2), Border rgba(255 255 255/0.08), Surface rgba(255 255 255/0.05)
强调色在页面底色上的对比度约 4.3:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Developer tools
- pro productivity apps
- fintech/trading dashboards
- media/streaming platforms
- AI tool interfaces
- high-end gaming companion apps
避开 / Do Not Use For
- Consumer apps needing warmth
- children's apps
- health/medical contexts where dark feels harsh
- high-accessibility contexts needing maximum contrast
框架兼容
能力矩阵
实现要点
落地清单
- No pure #000000 backgrounds,
- LinearGradient base screen,
- Animated ambient blobs (Reanimated, native driver),
- BlurView on tab bar and headers,
- borderRadius 16 on all cards,
- Haptic feedback on every Pressable,
- Bezier(0.16,1,0.3,1) easing used,
- Accent glow behind primary button,
- No solid grey borders (rgba only),
- Bottom sheets replace all modals
CSS / 技术关键词
borderRadius: 16 (cards/buttons), background: LinearGradient #0a0a0f→#020203, border: StyleSheet.hairlineWidth rgba(255,255,255,0.08), BlurView intensity={20} tint='dark', useAnimatedStyle + withRepeat (blob oscillation), Easing.bezier(0.16,1,0.3,1), withSpring damping:20 stiffness:90, Haptics.impactAsync(ImpactFeedbackStyle.Light), scale: 0.97 press
AI 提示词
Design a Modern Dark (Cinema Mobile) mobile interface using dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.