--- title: "品牌" description: "Tanrei 这个名称、它的两个标志及其用法，以及决定系统外观的性格。" url: "https://tanrei.chnotchy.com/zh-cn/foundations/brand/" last_updated: 2026-10-17T15:47:59.000Z --- # 品牌 > Tanrei 这个名称、它的两个标志及其用法，以及决定系统外观的性格。 Tanrei（端麗）的意思是端正而清朗。这个名字本身就是对系统的要求：在产品所面向的每一个平台上，界面都安静、精确、易读。Tanrei 是一个独立的项目。 ## 标志 Tanrei 有两个标志，一次只使用其中一个。 - **符号**是 Shippori Mincho 的 T，四角经过柔化。它只用在要求方形或圆形的地方：favicon、应用图标、素材上的水印（例如设计文件角落的装饰），或者用于低调的宣传和装饰。 - **文字标**是符号的 T 后接用 Outfit SemiBold 排出的 “anrei”，绘制为一个整体。凡是会读出名称的地方，它就是 Tanrei 的标志：本站的页眉（任何宽度下）、封面、页面标题、分享链接的图片。 一次只使用一个标志，从不把符号和文字标组合成组合标志：这是 Tanrei 针对自己标志的规则。[应用栏](https://tanrei.chnotchy.com/zh-cn/components/app-bar/)本身则允许产品以其标志所需的任何方式显示自己的标志，包括组合标志。 符号位于其方形画框中心稍下方的位置。这是一种视觉校正：T 的重量在上方，放低一点看起来才居中。 ## 颜色 两个标志都只用一种颜色 `sys.color.on-surface`，绘制在其所在的表面上。由于颜色是令牌而不是图形的一部分，标志会跟随浅色和深色配色方案以及每一级对比度。每处使用都采用 on-surface：本站页眉用 `comp.app-bar.brand.color` 为文字标上色，它就是 on-surface。 ## 留白 在符号四周各留出其高度的四分之一。从墨迹量起，而不是从画框量起。在文字标周围留出其 x 字高的一半。这片空间里不放任何其他东西：没有文字，没有其他标志，也没有屏幕的边缘。 ## 最小尺寸 不要把符号画得小于 24 px 的画框，也不要让文字标的大写字母低于 24 px。 唯一的例外是 favicon，因为浏览器以 16 px 绘制它。它是一个 SVG。旁边的 ICO 和 PNG 文件是同一图像按浏览器所需尺寸绘制的结果，而不是第二种设计。在 16 px 下它的边缘会变柔，这是可以接受的。 ## 推荐与避免 ### 推荐 - 一次只使用一个标志：会读出名称的地方用文字标，只有在要求方形或圆形的地方才用符号。 - 用 on-surface 绘制标志，放在其所在配色方案的表面上。 - 在平台需要不透明图标的地方，例如主屏幕或位图 favicon，把符号放在浅色配色方案的表面上。那个方块属于平台，而不属于标志。 - 保持符号在画框中的位置，不要把它移到画框中心。 ### 避免 - 不要改变标志的颜色，也不要添加渐变、轮廓线、阴影或背景形状。 - 不要拉伸、旋转或裁切标志。 - 不要把符号和文字标组合成组合标志，也不要在符号旁边用文字排出名称。 - 不要用其他字体重新排出文字标。使用它的图形。 - 不要把「端麗」二字当作标志使用。它们是设计文件封面的装饰，不属于标识的一部分。 ## 系统的性格 品牌也是系统的外观。 ### 内容在先，界面框架在后 表面接近单色，边框是一像素的细线，因此屏幕上色彩最丰富的就是产品的内容。主要操作是白底黑字，或黑底白字。蓝色的强调色只有一个，专门留给必须一眼就能找到的那一样东西：键盘焦点环。链接靠下划线来辨认，选中的项靠主色来辨认，所以屏幕上再没有别的东西是蓝色的。 ### 看得见的结构 层次来自对齐、间距和细线，而不是厚重的阴影或染了色的面板。层级是一圈圆环加上极柔和的阴影。 ### 以叠加的方式表达 默认是克制的。更强的强调级差、更大更平滑的圆角、更有弹性的动效，这些富于表现力的选择都是叠加在同一结构之上的额外令牌，而不是它的分叉。 ## 他人对标志的使用 Tanrei 的代码和文档采用 Apache License 2.0 授权。该许可证第 6 条不授予使用许可方名称、商标或产品名称的许可，但描述作品来源和复制 NOTICE 文件所需的除外。 - 你可以在文字中说明你的作品使用了 Tanrei，或是用 Tanrei 构建的。 - 符号和文字标属于 Tanrei Authors，不向他人授权。不要在你的产品、你的包的名称或图标中使用它们，也不要以任何暗示你的作品就是 Tanrei 或获得 Tanrei 认可的方式使用它们。