UI/UX Pro Max风格图鉴
General推荐

电子墨水 / 纸张E-Ink / Paper

纸白底、墨黑字、衬线正文、近乎为零的动效,配轻微纸张噪点。为长时间阅读与低干扰而生。

典型场景阅读应用 · 笔记工具 · 慢科技产品

编号56 年代2020s Digital Well-being 复杂度Low 默认模式自动

效果示例

preview / e-ink-paper
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.