跳到主要内容

品牌

一个书架,两本立着的书,一本斜靠着。请按原样使用标志、字标、色彩与字体。需要这里没有的素材,请先询问。

下载全部素材ZIP · 185 KB · 8 个文件
01

标志

以 32 单位网格构成的实心几何,缩小到 16px 依然清晰。倾斜是整个系统里唯一的斜线,让标志看起来出自人手,而不是生成器。

白底标志日常底色
深色底标志深色主题、视频卡片
纸色底标志阅读器主题、网站卡片
Toread 应用图标
应用图标圆角方块,iOS 与 Android
02

字标与组合标志

Literata SemiBold,大写 T,字距收紧至 −0.03em。名称从不使用 Inter:界面整体是灰阶的,品牌是其中唯一的衬线元素。

Toread
Toread横版 · 应用头部、文档、邮件
Toread竖版 · 首次启动界面、网站卡片
仅标志 · favicon、标签页、导航栏、提示消息
03

色彩

矿物色调:石灰岩、风化板岩、氧化铜。界面本身是灰阶的,铜绿色是唯一带有含义的颜色;它该用在哪里,请见第 06 节的第一条规则。选择色卡即可复制色值。

04

字体

界面用 Inter,正文用 Literata,数值用 JetBrains Mono。三种字重,英文一律采用句首大写(sentence case)。下面的数字就是完整的级差,没有别的。

标题Literata 400
第一年教会我的事56/60 · 36/40 · 30/36 · tracking −0.02em
正文Literata 400
书架是我们最古老的界面,用来摆放那些打算回头再看的东西;它之所以有用,是因为它让待读清单看得见,却不吵闹。18/30 · tracking 0 · measure 680px
界面Inter 400 / 500 / 600
粘贴链接或 PDF粘贴链接或 PDF粘贴链接或 PDF12/16 · 13/18 · 14/20 · 15/22 · 18/26 · tracking 0, −0.01em above 18
数值JetBrains Mono 400
example.com · Mar 3, 2026 · 4 min12/16 · 13/18 · 域名、日期、数量、色值、文件大小
05

链接预览

每个页面都会在边缘计算实时生成一张 1200×630 的预览卡片,使用同一套模板:这里是网站本身的卡片,每个已保存的项目也各有一张。

Toread 网站链接预览
网站卡片/og.png
保存内容后,卡片就会显示在这里。
06

标志使用规则

五条规则。每一条都配上图片,因为每一条谈的都是标志看起来如何,而不是如何描述它。

可以不要
标志保持单色白底用墨色、深底用白色、纸面用纸上墨色。整个标志绝不会是绿色的。
可以不要
留白为标志宽度的固定比例四周留白为标志宽度的三十二分之五,以书架横线为基准测量。
Toread
可以不要
小于 120px 时只用标志组合标志需要 120px 的宽度;低于这个宽度时,改用标志单独承载品牌名称。
已就绪
可以不要
每个界面只用一次绿色铜绿色只标示界面上最重要的那一个元素:主要操作、图标上倾斜的量体,或卡片上的语言标示行。绝不同时出现两个。
可以不要不要
绝不描边、拉伸或加色调不能加外框、不能非等比缩放、不能叠在绿色色块上。
07

语气

像图书管理员,不像教练。只陈述发生了什么、给出接下来该做的一件事,然后不打扰文字本身。

陈述事实,不要欢呼已保存到 Toread,约一分钟后就绪。太棒了!你的文章正在处理中 🎉
每个界面只用一个动词粘贴链接立即开始保存你的第一篇文章
说明语言,而不是模型已翻译为繁体中文 · 原文并排由 GPT 提供的 AI 翻译
失败时说明原因与下一步抓取失败:该网站返回 403。重试糟糕,出错了!抱歉!

素材从 Paper 文件导出,看板 06–09。此页面的数值来自 packages/design-token/src/brand.ts;在那里修改后,应用、卡片与这个页面都会随之更新。