Unread
04
INFORMATION / SPACE / PAPER
Make every line worth reading.
An unhurried interface built from warm paper, ink and a clear data hierarchy. All readings below are design fixtures, not live device data.
01
Five grays on warm paper
Roles carry more weight than decoration; each gray has a stated job.
Ink
#20211e
Graphite
#555750
Rule
#bab9b0
Panel
#e6e4da
Paper
#f5f3ea
Rules divide groups without carrying body copy; primary meaning stays in ink and words.
02
A readable type scale
Use familiar interface type instead of pretending to ship a device pixel font.
DISPLAY / 36 / 600
Read at ease.
Body copy stays at regular weight, comfortable leading and a controlled line length.
DATA / TABULAR / 600
PAGES08 / 12
READ TIME06:24
UPDATED09:42
03
Hierarchy by shape and spacing
Type and placement establish priority; texture stays a supporting cue.
A / PRIMARY
Primary entry
One sentence for why this belongs first.
B / SECONDARY
Supporting entry
A label and a rule separate this row without color coding.
TEXT STAYS SOLID
PATTERN STAYS LOCAL
04
Panels and reading rows
Square panels hold just enough information; selection gets an ink rule and a word label.
05
Actions and keyboard focus
Interaction changes only a few grays; focus stays visible and disabled state remains explicit.
06
Forms and filters
Focus, visible labels and distinct options provide the interaction cues.
07
Tabs and filter states
A label and a heavier rule mark the active choice instead of a colored dot.
SHOW2 ITEMS
- Keep values legibleReady08 min
- Align numbers and unitsNew06 min
08
Status without color
Every state has a textual and geometric cue; none depends on color perception.
COMPLETEDFILLED SQUARE
WAITINGHOLLOW SQUARE
GROUPEDHALFTONE SAMPLE
09
Room summary (sample data)
Align values, units and states in columns. These are static fixtures, not live device readings.
ROOM 04 / SAMPLE ONLY
Last update · 09:42
| MEASURE | VALUE | UNIT | STATE |
|---|---|---|---|
| Room temperature | 21.4 | °C | Within range |
| Relative humidity | 47 | % | Within range |
| Battery estimate | 82 | % | Sample value |
10
Progress and counts
Bar shape, text value and label carry progress together, never a color fill alone.
TODAY67%
8 / 12 PAGES
BATTERY SAMPLE82%
82 %
SYNC QUEUE33%
1 / 3 ITEMS
11
Alerts and errors
Shape and heading supplement every grayscale state.
The sample was added to your reading queue.
Reading place saved in this sample page.
Sync state is unknown. Check the connection, then retry.
This content is unavailable; source data was not changed.
12
Charts: lines, notes and halftone
Halftone decorates a gray area; it does not replace labels, gridlines or descriptions.
- HIGH
- 22.8 °C
- LOW
- 20.9 °C
The halftone switch changes only the chart fill. Labels, values and the series line remain solid.
13
Grayscale panels and counts
Surface shade groups the panels; every value and unit remains explicit.
Finished
08
Items
12
14
Rules, alignment and halftone
Structure shows relationships; texture and content have distinct areas.
RULE / 01
TITLE36 / 600
BODY16 / 400
DATA16 / 600
LOCAL PATTERN ONLY
This text stays on solid paper so the pattern cannot interfere.
15
Reading note
Line length and a quiet rule give prose rhythm without a large decorative image.
The screen belongs to the content. A line earns its place before it joins the reading queue.
DESIGN PRINCIPLE / E-INK SPECIMEN
16
Build rules
These rules describe the visual reference, not compatibility with a real device.
DO
- 使用墨色与暖纸作为主文字对比
- 对齐数值、单位和状态标签
- 窄屏折叠网格并维持阅读顺序
- 减少动态效果并保留键盘焦点
DON'T
- 不要把传感器示例说成实时数据
- 不要只凭灰度表示错误或选择
- 不要把纹理压到正文或小图标上
- 不要假定真的接入了低刷新屏幕