设计规范
颜色 / Color
我们在不断尝试和调整的过程中总结出了一套适合 FURINA 的颜色体系，分为亮色和暗色两套色卡。你可以使用右上角的主题切换开关切换亮暗模式以对比两套色卡的差异。
TIP
点击色号或色板可以复制当前色号的值到剪贴板；点击 token 可以复制当前色号 token 到剪贴板。
主色 / Primary Color
中性色 / Neutral Color
功能色 / Functional Color
元素色 / Element Color
稀有度色 / Rarity Color
字体 / Typography
字体是体系化界面中最基本的构成之一。 用户通过文本来理解内容和完成工作，科学的字体系统能提升用户的阅读体验及工作效率。
FURINA 的视觉设计中对中文和英文字体进行了分别处理。中文段落使用 HarmonyOS Sans SC Regular，标题使用 HarmonyOS Sans SC Bold。英文段落使用 Wix Madefor Text Regular，标题使用 Wix Madefor Display SemiBold。所有字体均为免费商用字体。
你可以参考下面的示例来了解 FURINA 的字体规范。
中文段落 / CJK Paragraph
中文段落使用的字体为 HarmonyOS Sans SC，字重为 Regular。相较于 OPPOSans，HarmonyOS Sans SC 的字形更加传统，留下了更多出脚；但是 OPPOSans Bold 作为标题使用时太粗，在 Regular 和 Bold 之中没有合适的过渡字重。因此本次设计使用了略细一些的 HarmonyOS Sans SC。
| 字体展示 | 字体规格 | 语义化 |
|---|---|---|
| 众水、众方、众民与众律法的女王 | 14/CN-Regular | 正文-小 |
| 众水、众方、众民与众律法的女王 | 16/CN-Regular | 正文-中 |
| 众水、众方、众民与众律法的女王 | 18/CN-Regular | 正文-大 |
| 众水、众方、众民与众律法的女王 | 20/CN-Regular | 标题-小 |
| 众水、众方、众民与众律法的女王 | 24/CN-Regular | 标题-中 |
| 众水、众方、众民与众律法的女王 | 28/CN-Regular | 标题-大 |
中文标题 / CJK Title
中文标题使用的字体为 HarmonyOS Sans SC，字重为 Bold。
| 字体展示 | 字体规格 | 语义化 |
|---|---|---|
| 众水、众方、众民与众律法的女王 | 14/CN-SemiBold | 正文-小 |
| 众水、众方、众民与众律法的女王 | 16/CN-SemiBold | 正文-中 |
| 众水、众方、众民与众律法的女王 | 18/CN-SemiBold | 正文-大 |
| 众水、众方、众民与众律法的女王 | 20/CN-SemiBold | 标题-小 |
| 众水、众方、众民与众律法的女王 | 24/CN-SemiBold | 标题-中 |
| 众水、众方、众民与众律法的女王 | 28/CN-SemiBold | 标题-大 |
| 众水、众方、众民与众律法的女王 | 32/CN-SemiBold | 运营标题-小 |
| 众水、众方、众民与众律法的女王 | 48/CN-SemiBold | 运营标题-中 |
| 众水、众方、众民与众律法的女王 | 64/CN-SemiBold | 运营标题-大 |
英文段落 / English Paragraph
英文段落使用的字体为 Wix Madefor Text，字重为 Regular。Wix Madefor 是一款可变字体，可以根据设计需求调整字重。此外，与常见的 San Francisco 和 Roboto 不同，Wix Madefor 的字形更加圆润，更适合用于标题和大段文字。
FURINA 的界面语言以中文为主，因此在设计中适当放弃了英文的易读性，选择了更加适合标题和小段文字的 Wix Madefor。
| 字体展示 | 字体规格 | 语义化 |
|---|---|---|
| Reine des eaux, des gens, des peuples et des lois | 14/EN-Regular | 正文-小 |
| Reine des eaux, des gens, des peuples et des lois | 16/EN-Regular | 正文-中 |
| Reine des eaux, des gens, des peuples et des lois | 18/EN-Regular | 正文-大 |
| Reine des eaux, des gens, des peuples et des lois | 20/EN-Regular | 标题-小 |
| Reine des eaux, des gens, des peuples et des lois | 24/EN-Regular | 标题-中 |
| Reine des eaux, des gens, des peuples et des lois | 28/EN-Regular | 标题-大 |
英文标题 / English Title
英文标题使用的字体为 Wix Madefor Display，字重为 Bold。
| 字体展示 | 字体规格 | 语义化 |
|---|---|---|
| Reine des eaux, des gens, des peuples et des lois | 14/EN-Bold | 正文-小 |
| Reine des eaux, des gens, des peuples et des lois | 16/EN-Bold | 正文-中 |
| Reine des eaux, des gens, des peuples et des lois | 18/EN-Bold | 正文-大 |
| Reine des eaux, des gens, des peuples et des lois | 20/EN-Bold | 标题-小 |
| Reine des eaux, des gens, des peuples et des lois | 24/EN-Bold | 标题-中 |
| Reine des eaux, des gens, des peuples et des lois | 28/EN-Bold | 标题-大 |
| Reine des eaux, des gens, des peuples et des lois | 32/EN-Bold | 运营标题-小 |
| Reine des eaux, des gens, des peuples et des lois | 48/EN-Bold | 运营标题-中 |
| Reine des eaux, des gens, des peuples et des lois | 64/EN-Bold | 运营标题-大 |