海报式大字Bold Typography (Mobile Poster)
48–72px 标题、-1.5px 字距、贴边排版与大量纵向留白，强调色只用于下划线 CTA。像一张会滚动的海报。
典型场景时尚品牌 · 展览 · 内容型应用
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
48–72px 标题、-1.5px 字距、贴边排版与大量纵向留白，强调色只用于下划线 CTA。像一张会滚动的海报。
关键词
效果与动效
Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation
设计系统变量
--bg#0A0A0A--fg#FAFAFA--muted#1A1A1A--muted-fg#737373--accent#FF3D00--accent-fg#0A0A0A--border#262626--font-primaryInter Tight--font-displayPlayfair Display Italic--font-monoJetBrains Mono配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Near Black #0A0A0A, Warm White #FAFAFA
辅色 / Secondary
Muted #1A1A1A, Secondary Text #737373, Accent Vermillion #FF3D00, Border #262626
强调色在页面底色上的对比度约 5.6:1，可用于正文与图标。
适用场景
适合 / Best For
- Creative brand heroes
- reading-focused apps
- event/exhibition pages
- editorial mobile experiences
- landing hero sections
避开 / Do Not Use For
- Utility dashboards
- kids apps
- playful consumer products
- contexts needing many icons or heavy imagery
框架兼容
能力矩阵
实现要点
落地清单
- H1 at least 4–5× body size,
- All containers 0 radius,
- Underline CTA pattern used,
- Large vertical gaps between sections,
- No shadows or soft corners,
- Accent used only for interaction,
- Text bleeds to/over screen edges,
- Animation timings 200ms,
- Accessible contrast ≥ 18:1,
- Body text never below 16px
CSS / 技术关键词
backgroundColor: '#0A0A0A', color: '#FAFAFA', accent: '#FF3D00', borderColor: '#262626', borderRadius: 0, paddingHorizontal: 24, headline style: fontSize:56–72, fontWeight:'700/800', letterSpacing:-1.5, lineHeight:1.1*fontSize, body: fontSize:16–18, lineHeight:1.6*fontSize, underline CTA: 2–3px height View under text, transition: 200ms cubic-bezier(0.25,0,0,1)
AI 提示词
Design a Bold Typography (Mobile Poster) mobile interface using bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.