电子墨水 / 纸张E-Ink / Paper
纸白底、墨黑字、衬线正文、近乎为零的动效,配轻微纸张噪点。为长时间阅读与低干扰而生。
典型场景阅读应用 · 笔记工具 · 慢科技产品
编号56
年代2020s Digital Well-being
复杂度Low
默认模式自动
效果示例
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
同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现(数据标注:浅色 支持,深色 不建议)。
风格描述
纸白底、墨黑字、衬线正文、近乎为零的动效,配轻微纸张噪点。为长时间阅读与低干扰而生。
关键词
Paper-likemattehigh contrasttexturereadingcalmslow techmonochrome
别名
E-Ink PaperE-Ink/Paper
效果与动效
No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)
设计系统变量
--paper-bg#FDFBF7--ink-color#1A1A1A--pencil-grey#4A4A4A--border-color#E0E0E0--font-readingGeorgia--transitionnone配色方案
色值取自风格数据,不足时补充主题令牌主色 / Primary
Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A
辅色 / Secondary
Pencil Grey #4A4A4A, Highlighter Yellow #FFFF00 (accent)
强调色在页面底色上的对比度约 16.8:1,可用于正文与图标。
适用场景
适合 / Best For
- Reading apps
- digital newspapers
- minimal journals
- distraction-free writing
- slow-living brands
避开 / Do Not Use For
- Gaming
- video platforms
- high-energy marketing
- dark mode dependent apps
框架兼容
tailwindcss
能力矩阵
浅色模式支持
深色模式不建议
移动适配可适配
转化导向中Medium
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Paper background color,
- High contrast text,
- No animations,
- Reading optimized,
- Distraction-free,
- Print-friendly
CSS / 技术关键词
background: #FDFBF7 (paper white), color: #1A1A1A, transition: none, font-family: serif for reading, no gradients, border: 1px solid #E0E0E0, texture overlay (noise)
AI 提示词
Design an e-ink/paper style interface. Use: high contrast black on off-white, paper texture, no animations (instant transitions), reading-focused, minimal UI chrome, distraction-free, calm aesthetic, monochrome.