设计规范

排版

用字号、字重和留白建立层次，让中西文在同一套节奏中阅读。

字体与层次

正文的西文使用 Noto Sans，中文使用 Noto Sans SC，中文页面的西文也使用 Noto Sans SC；等宽内容使用 JetBrains Mono；字体由应用加载，变量中包含系统字体回退。配置方法见安装。

优先通过字号和留白区分层级，再使用字重强调。正文保持 normal，控件标签可用 medium，标题可用 semibold。避免把所有文字都加粗，也不要把弱化颜色用于必读内容。

清晰、有序的界面 Hina UI

--hn-text-2xl

清晰、有序的界面 Hina UI

--hn-text-xl

清晰、有序的界面 Hina UI

--hn-text-lg

清晰、有序的界面 Hina UI

--hn-text-md

清晰、有序的界面 Hina UI

--hn-text-base

清晰、有序的界面 Hina UI

--hn-text-sm

清晰、有序的界面 Hina UI

--hn-text-xs

normal Aa

medium Aa

semibold Aa

字号与行高成对定义。下表的像素值按根字号 16px 换算，实际使用 rem，会跟随根字号变化。

使用 --hn-text-* 和 --hn-leading-*，或对应的 text-* 工具类。组件文字使用 Text，标题使用 Heading。Heading 的 level 表示文档结构，size 表示外观，不应为了字号跳过语义层级。

Hina 提供 normal（400）、medium（500）、semibold（600）三档字重。需要修改字体时覆盖 --hn-font-sans 与 --hn-font-mono，并加载实际使用的字重，避免依赖浏览器合成。

行内代码使用 Code，多行代码使用 CodeBlock。数字列可添加 tabular-nums 保持数位对齐，不需要将整列正文改成等宽字体。

正文优先允许换行，避免固定高度裁掉内容。标签必须截断时，应保留获取全文的方式，例如 Tooltip，同时保留可访问名称。不要依赖仅有鼠标悬停才能读到的关键信息。

在弹性布局中为文字所在列设置 min-w-0；固定操作区域保持 shrink-0。多语言切换后重新检查长标签与换行，不按中文字符数固定宽度。