UI/UX Pro Max风格图鉴
Mobile补充默认深色

学院派(移动)Academia (Scholarly Mobile)

深胡桃木底、羊皮纸文字、黄铜与深红点缀,拱形图框与首字下沉,衬线字体贯穿。沉静、博学,加载与可读性需权衡。

典型场景阅读/研究应用 · 出版 · 高等教育

编号79 年代Timeless Scholarly 复杂度High 默认模式深色

效果示例

preview / academia-scholarly-mobile
Nova 产品方案定价 开始使用

Design System

同一套组件
不同的性格

色彩、字体、圆角与材质,决定了界面的气质。

主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50

同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。

风格描述

深胡桃木底、羊皮纸文字、黄铜与深红点缀,拱形图框与首字下沉,衬线字体贯穿。沉静、博学,加载与可读性需权衡。

关键词

academialibrarymahoganyparchmentbrasscrimsonserifdrop caparch-topvignetteleatherscholarlytactile

效果与动效

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

框架兼容

react-nativeexpo

能力矩阵

浅色模式支持
深色模式有条件支持
移动适配需额外处理
转化导向中Medium
渲染成本中animation / blur
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • 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.