Design Guide

设计指南

让 Hoshimado 本身，以及 Hoshimado 做的所有作品，在世界观、外观和措辞上保持一致的规则。

颜色和留白的样本，是直接读取本站实际使用的值（tokens.css）画出来的。改了指南，这个页面也会跟着变。

01Rules

世界的规则

Hoshimado 的一切表达，都建立在这四条规则之上。

  1. 01

    窗里亮着灯，就说明里面有人。

    看不见里面，灯光也会告诉你。Hoshimado 这扇窗里，总有创作者在。所以不隐藏创作者的名字。

  2. 02

    星的内里，谁也看不见。传过来的只有光。

    他人的内心无法触及。看得见的，只有言行这束光。即便如此，人还是会感觉到光的那一边有人。

  3. 03

    价值不在星上，而在连接星与星的线上。

    星座要画上线才会诞生。价值存在于关系之中，而线不花时间是画不出来的。

  4. 04

    熄灭的星，并没有消失。只是睡着了。

    每一个作品都是一颗星。停下来的作品也不是终结，而是沉睡。随时都能重新点亮。

品牌的话

窗里亮着灯。里面，有人在。

在 AI 什么都能做出来的夜里，Hoshimado 从创作者所在的那扇窗里，点亮星星。

不用的词最前沿革命性改变未来

02Principles

三个原则

把世界的规则落到日常的设计判断上。拿不准时，就对照这三条来决定。

透明

不隐瞒自己在做什么。能做的、做不到的，都用文字写出来给人看。

在画面显眼的位置，用一句话写“文件不会被发送到任何地方”（只限确实如此的作品）。

安静

像夜空一样沉稳，不催促人。强调在一个画面里只放一处。

主要按钮一个，glow 的光也只有一处。不用倒计时或闪烁来催促。

积累

比起一时的华丽，更看重让人每天都想打开的舒适。所有作品都放在同一片夜空下。

作品再多，页脚的“by Hoshimado”和措辞也保持一致。

03Structure

品牌的结构

人们从作品走到 Hoshimado，再从 Hoshimado 走到创作者。信任与关系最终汇集到创作者个人身上，Hoshimado 是通往那里的窗口。

  • 主干：创作者

    例子
    takumihiguchi.com、note、X
    作用
    写下创作的过程和思考
    名字与颜色
    创作者的名字，以及创作者网站的外观

  • 枝：Hoshimado

    例子
    这个网站
    作用
    展示作品与世界的窗口
    名字与颜色
    本指南的颜色和标志

  • 叶：作品

    例子
    papatto、YUNA
    作用
    使用者的入口
    名字与颜色
    每个作品各自的名字和颜色。署名写“by Hoshimado”
  • 不把作品重新涂成 Hoshimado 的颜色。新作品的颜色拿不准时，可以从本指南的颜色开始。
  • 无论哪个作品，措辞和无障碍都遵循本指南。

04Voice

措辞

  • 用“你”来称呼，语气平和。不过分客套，保持像跟朋友解释事情时那样的距离。
  • 只写事实，和能守住的事。不写没有依据的最高级，也不写无法保证的承诺。
  • UI 中不用感叹号和表情符号。只有角色说话的场景，优先使用角色自己的口吻。
  • 按钮用动词（“保存”“开始”）。错误提示用一句写“发生了什么”，再用一句写“该怎么做”。
  • 使用全角中文标点。中文与英文、数字之间留一个空格，数字用半角。日期写“2026年10月28日”，时间写“6:30”。

这个世界的说法

在网站上，统一使用下面的说法。在作品的界面里，优先使用该作品自己的说法。

  • Hoshimado（品牌、这个网站）

    Hoshimado 的说法
    窗

  • 作品、作品列表

    Hoshimado 的说法
    星
    英文标题
    Works

  • 理念、世界观

    Hoshimado 的说法
    关于这个世界
    英文标题
    Rules

  • 作者、运营者

    Hoshimado 的说法
    窗里的人
    英文标题
    Creator

  • 与使用者的关系、联系

    Hoshimado 的说法
    线

这样写，不这样写

隐私

这样写

文件不会被发送到任何地方。所有处理都在这个浏览器里完成。

不这样写

以顶级安全技术全方位守护你的数据！

错误

这样写

没能保存。可能是网络断开了。请再试一次。

不这样写

发生错误（代码 500）

作品暂停

这样写

papatto 暂停一段时间。恢复时会告诉你。

不这样写

服务已终止。

名字的写法

  • 正文中写 Hoshimado（只有首字母大写）。中文里也可以写作“星窗”。
  • 全部大写的，只有 caption 里的英文小标题。

06Endorsement

by Hoshimado

放在作品网站或应用里的 Hoshimado 署名。目标是不破坏作品的世界，同时让人看出出自同一位创作者。

papatto 浅色与深色的页脚。版权信息那一行的右端，用 papatto 低调的文字色放着 by Hoshimado
在 papatto 中的放法。颜色是 papatto 低调的文字色（muted）
  • 标志中，只有这个署名可以改颜色。用作品一侧的“低调的文字色”一种颜色来涂，不带入 Hoshimado 的深蓝或作品的强调色。
  • 放在页脚最下面一行（版权信息那一行）的右端。署名的文字高度与旁边的版权信息对齐（高度大约 16～20px），不大于正文。
  • 链接到 Hoshimado 的网站，在新标签页中打开。
  • 不放在页眉，不比作品的标志大，也不像联合标志那样并排摆放。

署名文件（SVG）

07Color

颜色

夜的深蓝和星光的白是品牌的底色，再少量加入窗的灯光、操作的蓝和星的金。Hoshimado 的网站只用夜的版面，令牌始终取 Dark 的值。Light 用于以白天为主的作品（如 papatto）。

夜

首屏的夜空、深色的整面背景、标志与浅色版面上的文字、大面积的色块。

  • brand-void#03050d
  • brand-deep#070c1f
  • brand-night#101a3a
  • brand-twilight#22346e

星光、灯光、星的光芒

starlight 用于深色版面上的标志和文字。lamp 只用于亮灯的窗的玻璃。glow 是一个画面里唯一一处强调。

  • brand-starlight#f6f1e4
  • lamp#f2c879
  • glow#e8c277
  • glow-inkLight#8a6417与背景 4.9:1Dark#e8c277与背景 11.1:1

背景

页面／卡片、对话框／色带、代码。

  • surfaceLight#f7f5efDark#0b1024
  • surface-raisedLight#ffffffDark#141c3a
  • surface-sunkenLight#efece3Dark#070c1f

文字

正文与标题／补充／注释。在 3 种背景上都达到 4.5:1 以上。

  • inkLight#101a3a与背景 15.6:1Dark#f6f1e4与背景 16.7:1
  • ink-secondaryLight#4a5578与背景 6.7:1Dark#b7bccf与背景 10:1
  • ink-mutedLight#5f6784与背景 5.1:1Dark#8a93ad与背景 6.2:1

线条与操作

线条用于装饰性的分隔，以及输入框、按钮的轮廓。accent 只用于链接、主要按钮、选中和焦点。

  • borderLight#d9d5caDark#262f57
  • border-controlLight#7e869eDark#66709b
  • accentLight#3d5bd9与背景 5.2:1Dark#8fa6ff与背景 8.1:1
  • on-accentLight#ffffffDark#0b1024

状态

完成／注意／错误。一定配上文字或图标。

  • successLight#1c7049与背景 5.6:1Dark#5cc593与背景 8.9:1
  • warningLight#8f5c0e与背景 5.2:1Dark#e8b04b与背景 9.6:1
  • dangerLight#b93a36与背景 5.2:1Dark#f07c76与背景 7:1

面积的参考

在夜的版面上，大约 80% 是 brand-void 和 brand-deep，不到 20% 是文字（ink 系），accent 在 10% 以下。lamp 和 glow 不作为面，而是作为点，一个画面里只用一处。

不用的东西

  • 把 accent 当装饰用

  • 把 lamp 或 glow 涂满大面积

  • 蓝紫色渐变、霓虹、花哨的星云插画

08Typography

文字

拉丁文字用 Manrope，日文页面用 Noto Sans JP，中文页面用 Noto Sans SC。字号和行距只用下面 12 种样式。

  • statement52 / 72px，600讲述世界的一句话。Rules 的开头

    窗里亮着灯。

  • display48 / 56px，600英文大标题

    Works

  • title-132 / 44px，600页面标题

    papatto

  • title-224 / 34px，600分区标题

    92 个工具，同一种手感

  • title-318 / 28px，600卡片或小组块的标题

    Information

  • body16 / 28px，400正文

    图片转换、文本整理，都在浏览器里完成。

  • body-sm14 / 24px，400补充、表格、元信息

    文件不会被发送到任何地方。

  • label14 / 20px，600按钮、标签页、表单的标签

    保存

  • caption12 / 18px，500注释、徽标、英文小标题

    准备中

  • code14 / 22px，400代码、文件名、ID

    src/styles/tokens.css

  • phrase22～32 / 1.9（随画面宽度伸缩），500讲述场景的一句话（网站的 Rules、Creator）

    把选中的星连起来，画出只属于你的星座

  • prose14 / 2.1，400阅读用的段落。为了让中文易读，加大行距

    自己挑选让你安心的星，再把它们连在一起。这样画出的星座，就是你日常里“方便”与“喜欢”的形状。

  • 拉丁文字用 Manrope，日文页面用 Noto Sans JP，中文页面用 Noto Sans SC。数字照样用 Manrope。
  • 要讲的话，用一句大字讲出来，说明简短附上即可。不必每次都把标题、说明和按钮配成一套。
  • 正文行距偏宽（body 为 1.75，阅读用的段落用 prose，为 2.1）。中文每行控制在 30～38 个字左右（measure）。
  • 字号和行距只用这 12 种样式来定。不在页面里单独覆盖。
  • 强调不靠大量加粗，而是靠字号和留白。

09Layout

布局、留白、圆角

留白以 4px 为单位，只用有限的几档。左右留白在手机上是 space-4，在宽屏上是 space-12。

留白的档位

部件内部用 space-2～4，部件之间用 space-4～6，分区之间用 space-16 以上。拿不准时，放宽一档。

  • space-14px
  • space-28px部件内部。标签与输入框之间
  • space-312px部件内部
  • space-416px部件内部、部件之间。手机的左右留白
  • space-624px部件之间。表单各项之间
  • space-832px表单最后一项与主要按钮之间
  • space-1248px宽屏的左右留白
  • space-1664px分区之间（至少这么多）

圆角

按钮和输入框用 radius-md。照片和影像的框不做圆角。

  • radius-sm6px小的标记
  • radius-md10px按钮、输入框
  • radius-lg16px大的部件
  • radius-xl24px对话框
  • radius-window22%图标形状的图块（与标志的窗框相同）
  • radius-pill999px只用于搜索框

排版方式

  • 作品列表用铺满作品影像、没有缝隙的图块来展示。名字叠在图块左下角，并把下方压暗以便阅读。不用卡片的边框或阴影包起来。
  • 作品详情页的照片和影像放在 16:10 的框里，开头的影像横向铺满。
  • 分区之间，只在上方画一条 border 的 1px 线。线之后空出 space-16 以上。
  • 正文宽度以 content-max（1120px）为上限，阅读用的文字按 measure 换行。
  • 照片和影像的框不做圆角。拿不准时，把留白放宽一档。

10Motion

光与动态

动态表现的是这个世界里时间流动的方式。缓慢，逐渐减速，不弹跳。

Hoshimado 的三种动态

灯亮起来约 3 秒，ease-out。每个页面只一次
线连起来从星到星，一条一条。线一到，下一颗星就亮起
星在闪烁以 6～8 秒为周期，各自错开

时间

  • duration-fast

    时长
    120ms
    用在哪里
    悬停与按下

  • duration-base

    时长
    220ms
    用在哪里
    展开收起与淡入淡出

  • duration-slow

    时长
    480ms
    用在哪里
    只用于品牌的动效

  • duration-lamp

    时长
    3200ms
    用在哪里
    灯亮起来（每个页面一次）

  • duration-line

    时长
    1400ms
    用在哪里
    画一条星座的线

  • duration-twinkle

    时长
    7000ms
    用在哪里
    星闪烁的周期

光

白天用 shadow-sm（卡片）和 shadow-lg（对话框、菜单）让元素浮起来。到了夜晚，同样的令牌会切换为淡淡的轮廓和光。

Light（白天的窗）

shadow-sm
shadow-lg
shadow-glow

Dark（夜晚的窗）

shadow-sm
shadow-lg
shadow-glow
  • 缓慢，逐渐减速，不弹跳。不用弹跳、摇晃、旋转的动态，也不用闪烁来吸引注意。
  • 唯一的例外，是首屏窥看作品影像的效果。用马赛克和横向划过的噪点色带，表现“隔着窗在看”。
  • 在减少动态效果的设置下，停止所有动效，一开始就显示灯已亮起、线已连好的状态。
  • shadow-glow 和 glow 一样，一个画面只用一处。shadow-lamp 只用于亮灯的窗。

11Forms

表单

所有输入框都按同一套外观约定来做。统一标签、输入框、错误提示的形状和间距。

Light（白天的窗）

这不是 URL 的格式。请以 https:// 开头输入。

Dark（夜晚的窗）

这不是 URL 的格式。请以 https:// 开头输入。

  • 标签一定放在输入框上方。占位文字不代替标签，用来写输入的例子。
  • 输入框和选择框高 44px，圆角 radius-md，背景 surface-raised，轮廓 border-control。文字 16px。
  • 必填项居多，所以只给“选填”的一项加标记。不用红色的“*”。
  • 错误在输入完成后，在输入框下方用带图标的一句话显示。写清缺了什么、怎么改。
  • 立即生效的设置用开关，2～4 个中选一个用单选按钮，5 个以上用选择框。

12Buttons

按钮

按钮由类型（主要、次要、低调）与尺寸档位组合而成。只用共用的部件，不在作品里单独写按钮的样式。

类型

  • 主要

    这个画面上最希望你按的操作。用 accent 填色，每个画面只放一个。

  • 次要

    与主要按钮并列的其他操作。只画轮廓。

  • 低调

    放在旁边的小操作，或撤销。只有文字，悬停时淡淡地显出底色。

Light（白天的窗）

Dark（夜晚的窗）

尺寸档位

以高度来定。拿不准时，用标准的 44px。

  • lg

    高度
    48px
    用处
    流程最后的主要按钮（保存、发送）

  • md

    高度
    44px
    用处
    标准。与输入框、选择框同高

  • sm

    高度
    36px
    用处
    放在旁边的小操作（复制、撤销、设为今天）。用次要（轮廓）或低调（只有文字）都可以，同一个作品里统一用其中一种

  • icon

    高度
    44px
    用处
    只有图标。手指经常按的地方（删除一行、关闭全屏）

  • icon-sm

    高度
    36px
    用处
    只有图标。比如结果旁边的复制

  • icon-xs

    高度
    32px
    用处
    只用于输入框里的 ×

工具类作品中，只有舞台上最重要的操作（转动、开始）可以加一个 56px 的档位。

排列方式

  • 同一组操作之间留 8px（space-2）。这是“部件之间用 space-4～6”这条规则唯一的例外。
  • 放不下时换到下一行。只有像一排标签那样能看出后面还有内容时，才允许横向滚动。
  • 主要按钮放在流程的最后，或最右边。次要和低调的按钮排在它前面。

切换按钮

每按一次就在开与关之间切换的按钮。开启时用 accent 的轮廓和淡淡的底色表示，状态通过 aria-pressed 传达。

Light（白天的窗）

Dark（夜晚的窗）

  • 文字不变（“粗体”按下后仍是“粗体”）。用形状和颜色表示状态。
  • 立即生效的设置用开关。切换按钮用于切换工具的显示方式（粗体、网格、静音等）。
  • 尺寸按按钮的档位来定（通常是 sm 或 icon-sm）。排列时留 8px。

选颜色的圆形选项

用来选一种颜色的部件。直径 32px 的圆，彼此间隔 8px 排开，按单选按钮来做。

Light（白天的窗）

卡片颜色

Dark（夜晚的窗）

卡片颜色
  • 看起来是 32px，相邻之间至少留 8px，避免误按。
  • 选中的颜色，用离开 2px 的 2px 圆环标出。每个圆都加一圈 1px 的轮廓（border-control），让接近底色的颜色（夜晚版面上的深蓝、白天版面上的白）也能看出形状。
  • 让读屏能读出颜色的名称。不能只靠颜色来区分。
  • 键盘上可以用方向键选择（单选按钮的行为）。

13Imagery

照片、影像、图标

checkxalertsearchdownloadlockmooncopy操作用 accent
  • 作品用录下真实画面或直播的影像来展示。比起精心制作的广告影像，更要展示实际使用的样子。
  • 照片用真实的夜空、窗户、房间的灯光等安静而真实存在的东西。避免大幅出现人物面孔的素材照片。
  • 插画只用圆角方形和圆弧、作为点的星、1px 的线（星座）来画。星只用四芒星或小圆点。
  • 图标线宽 1.75px，端点和转角做圆，画在 24px 的框里（与 Lucide 的形状一致）。不用表情符号代替图标。

14Accessibility

无障碍

状态要在标记旁配上文字

已上线准备中暂停中

焦点框用 2px 实线，与元素相隔 2px

保存
  • 文字 4.5:1 以上；24px 以上的大字、图标、操作部件的轮廓 3:1 以上。
  • 键盘焦点用 focus-ring 的 2px 实线，离开元素 2px 绘制。
  • 状态不只靠颜色传达。“已上线”等标记也一定配上文字。
  • 图片加上能说明内容的替代文本。标志写“Hoshimado”。装饰用的星和线不让读屏软件读出。
  • 能按的部件以 44px 以上为基本。必须做小时也不小于 24px（WCAG 2.2 的 2.5.8），并和相邻的部件留出不会误按的间距。
  • 即使看起来很小，也可以用留白把可按的范围扩大。句子里的链接不受此限。

15Checklist

上线前的检查

在作品或页面上线之前，逐项确认。

  1. 是否与世界的规则相矛盾（创作者的名字有没有被藏起来，有没有写无法保证的承诺）
  2. 作品的状态是否写作“已上线／准备中／暂停中”
  3. 主要按钮、glow、亮灯的窗，是否在一个画面里各只有一个
  4. 文字颜色是否都从令牌中选取，并在 Light 和 Dark 两边都满足对比度
  5. 所有输入框是否都有标签，错误是否不只靠颜色、还用一句话说明
  6. 如果是作品，页脚是否用作品低调的文字色放了“by Hoshimado”
  7. 是否确认过在减少动态效果的设置下，动效会停止