设计规范

Color 色彩

色彩层级参考游戏中的道具稀有度，并同时导出为 --ak-color-* CSS variables。

PREVIEW / FOUNDATION/COLORSColor tokens

LINKING…

SOURCE / HTML

<div class="ak-color-grid">
  <div class="ak-color-swatch bg-low"><strong>LOW</strong><code>#9c9c9c</code></div>
  <div class="ak-color-swatch bg-basic"><strong>BASIC</strong><code>#d8dd5a</code></div>
  <div class="ak-color-swatch bg-primary"><strong>PRIMARY</strong><code>#4aabea</code></div>
  <div class="ak-color-swatch bg-secondary"><strong>SECONDARY</strong><code>#cfc2d1</code></div>
  <div class="ak-color-swatch bg-advanced"><strong>ADVANCED</strong><code>#f1c644</code></div>
</div>

<style>
  .ak-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    width: min(720px, 100%);
  }

  .ak-color-swatch {
    display: flex;
    min-height: 150px;
    padding: 16px;
    color: #111315;
    flex-direction: column;
    justify-content: space-between;
  }

  .ak-color-swatch strong { letter-spacing: 0.12em; }
  .ak-color-swatch code { color: inherit; }

  @media (max-width: 620px) {
    .ak-color-grid { grid-template-columns: 1fr; }
    .ak-color-swatch { min-height: 72px; }
  }
</style>

Variable	Value
--ak-color-low	#9c9c9c
--ak-color-basic	#d8dd5a
--ak-color-primary	#4aabea
--ak-color-secondary	#cfc2d1
--ak-color-advanced	#f1c644

Typography 字体

标题与正文分别提供衬线和无衬线辅助类。

PREVIEW / FOUNDATION/TYPOGRAPHYTypography

LINKING…

SOURCE / HTML

<div>
  <div class="ak-font-serif ak-text--title">明日方舟</div>
  <p class="ak-font-serif">罗德岛战术界面 / RHODES ISLAND</p>
  <div class="ak-font-sans-serif ak-text--title">行动开始</div>
  <p class="ak-font-sans-serif">保持通讯，等待下一条指令。</p>
</div>

.ak-font-serif {
  font-family: "Noto Serif SC", serif;
}

.ak-font-sans-serif {
  font-family: "Noto Sans SC", Roboto, Arial, sans-serif;
}

道具色彩参考