学院派(移动)Academia (Scholarly Mobile)
深胡桃木底、羊皮纸文字、黄铜与深红点缀,拱形图框与首字下沉,衬线字体贯穿。沉静、博学,加载与可读性需权衡。
典型场景阅读/研究应用 · 出版 · 高等教育
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质,决定了界面的气质。
同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
深胡桃木底、羊皮纸文字、黄铜与深红点缀,拱形图框与首字下沉,衬线字体贯穿。沉静、博学,加载与可读性需权衡。
关键词
效果与动效
Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues
设计系统变量
--bg#1C1714--bg-alt#251E19--fg#E8DFD4--muted#3D332B--muted-fg#9C8B7A--border#4A3F35--accent-brass#C9A962--accent-crimson#8B2635--radius4px--arch-radius100px--shadow-card0 4px 6px rgba(0,0,0,0.4)--font-headingCormorant Garamond--font-bodyCrimson Pro--font-labelCinzel配色方案
色值取自风格数据,不足时补充主题令牌主色 / Primary
Mahogany #1C1714, Oak #251E19
辅色 / Secondary
Parchment #E8DFD4, Worn Leather #3D332B, Faded Ink #9C8B7A, Brass #C9A962, Library Crimson #8B2635
强调色在页面底色上的对比度约 7.9:1,可用于正文与图标。
适用场景
适合 / Best For
- Knowledge management apps
- deep reading tools
- ritual-heavy personal brands
- lore-heavy RPG/roleplay apps
- culture-specific community platforms
避开 / Do Not Use For
- Hyper-modern tech dashboards
- neon/glassmorphism
- playful Gen Z branding
框架兼容
能力矩阵
实现要点
落地清单
- Mahogany/oak/parchment palette applied,
- Brass used on all tappable items,
- Arch-top imagery used in hero/cards,
- Drop caps & Roman numerals used,
- Vignette overlay present,
- No sans-serif body fonts,
- No neon/bright modern colors,
- Animations use non-spring timing,
- Inputs use worn-leather style,
- Wax seal badges implemented
CSS / 技术关键词
backgroundColor: '#1C1714', altSurface: '#251E19', textColor: '#E8DFD4', mutedBg: '#3D332B', borderColor: '#4A3F35', brass: '#C9A962', crimson: '#8B2635', borderRadius: 4 (default), archTopRadius: 100 for hero, shadowOpacity:0.4 shadowRadius:6 elevation:8 for cards, textShadow on headings, vignette overlay via LinearGradient
AI 提示词
Design a Academia (Scholarly Mobile) mobile interface using academia, library, mahogany, parchment, brass, crimson, serif, drop cap. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.