品牌識別
黑、灰、白之間，以對比成就清晰。這份規範定義奧越設計的標誌、色彩、字體、版面、質感與動態，網站與所有品牌接觸點都從這裡出發。
01 — Symbol
標誌
A 與 D 以 180° 旋轉對稱組成同一個形體——設計與工程是同一件事的兩面。外圈是一枚開環的光圈：讓光進入、讓焦點成形。所有斜邊與開口都沿著 58° 軸線。
- 58°斜角軸線
- 所有斜邊、擦除與斜線質感的角度
- 180°旋轉對稱
- A 轉半圈即為 D；淺色與深色亦是如此
- 44°光圈開口
- 兩道開口沿 58° 軸線兩側相對
- ¼安全距離
- 四周至少留出圓環直徑的四分之一
- 01只能等比縮放，不可變形、改字距或重排字標
- 02只使用墨與紙兩色，不加漸層、陰影或描邊
- 0316–47px 使用小尺寸圖形，48px 以上使用標準圖形
- 04保留圓環直徑四分之一的安全距離
標誌最小 48px，英文字標最小 144px。
02 — Colour
色彩
色彩只有黑、灰、白。墨與紙負責對比，十六階無彩度的灰處理層次；介面不使用彩色——作品本身就是色彩。
中性灰階
- 0#FFFFFFWhite
- 25#FAFAFAPaper 紙白
- 50#F4F4F4
- 100#EDEDEDMist 霧
- 150#E4E4E4
- 200#D6D6D6
- 300#BDBDBD
- 400#A1A1A1Ash 灰
- 500#858585
- 600#6B6B6BSteel 鋼
- 700#525252
- 800#2B2B2BGraphite 石墨
- 850#1F1F1F
- 900#161616
- 950#0E0E0E
- 1000#0A0A0AInk 墨
語意色彩
| 角色 | 淺色 | 深色 | 對比（淺／深） |
|---|---|---|---|
| --color-bg | #FAFAFA | #0A0A0A | — |
| --color-bg-subtle | #F4F4F4 | #0E0E0E | — |
| --color-surface | #EDEDED | #161616 | — |
| --color-surface-raised | #FFFFFF | #1F1F1F | — |
| --color-fg | #0A0A0A | #FAFAFA | 19.0 / 19.0 |
| --color-fg-body | #2B2B2B | #E4E4E4 | 13.6 / 15.6 |
| --color-fg-muted | #525252 | #A1A1A1 | 7.5 / 7.7 |
| --color-fg-subtle | #6B6B6B | #858585 | 5.1 / 5.4 |
| --color-line | #E4E4E4 | #1F1F1F | — |
| --color-line-strong | #BDBDBD | #525252 | — |
| --color-line-contrast | #0A0A0A | #FAFAFA | — |
| --color-inverse-bg | #0A0A0A | #F4F4F4 | — |
| --color-inverse-fg | #FAFAFA | #0A0A0A | — |
| --color-inverse-muted | #A1A1A1 | #525252 | — |
| --color-inverse-line | #2B2B2B | #D6D6D6 | — |
| --color-inverse-surface | #161616 | #EDEDED | — |
| --color-focus | #0A0A0A | #FAFAFA | — |
| --color-overlay | rgb(10 10 10 / 0.96) | rgb(10 10 10 / 0.97) | — |
| --color-nav | rgb(250 250 250 / 0.82) | rgb(10 10 10 / 0.78) | — |
03 — Typography
字體
拉丁字母使用 Geist，繁體中文使用思源黑體，標籤與數字使用 Geist Mono；簡中、日文、韓文使用對應的 Noto Sans。只用 400、500、600 三種字重，大字緊排、內文寬鬆。
字級（375–1440px 之間連續縮放）
- --text-display46–116px讓品牌，在數位世界清晰呈現。
- --text-3xl36–76px讓品牌，在數位世界清晰呈現。
- --text-2xl30–52px讓品牌，在數位世界清晰呈現。
- --text-xl24–36px讓品牌，在數位世界清晰呈現。
- --text-lg20–26px讓品牌，在數位世界清晰呈現。
- --text-md18–20px讓品牌，在數位世界清晰呈現。
- --text-base16–17px讓品牌，在數位世界清晰呈現。
- --text-sm14px讓品牌，在數位世界清晰呈現。
- --text-xs12px讓品牌，在數位世界清晰呈現。
- --text-2xs11px讓品牌，在數位世界清晰呈現。
04 — Layout
版面
12 欄網格，內容最寬 1440px；邊界與欄距隨螢幕連續縮放，間距以 4px 為單位。
- 欄數
- 12
- 最大寬度
- 1440px
- 邊界
- 20–56px
- 欄距
- 16–24px
間距
- --space-14px
- --space-28px
- --space-312px
- --space-416px
- --space-520px
- --space-624px
- --space-832px
- --space-1040px
- --space-1248px
- --space-1664px
- --space-2080px
- --space-2496px
- --space-32128px
- --space-40160px
無圓角
結構與控制項一律方角。整個系統裡，只有光圈是圓的。
05 — Texture
質感
延續原官網的斜線與點陣，並納入識別系統：斜線沿 58° 軸線，點陣是標誌與作品的繪圖底；實線區分段落，點線區分項目。
06 — Motion
動態
動態只有三種語彙：對焦、擦除與旋轉。偏好減少動態時全部停用，內容仍完整可讀。
將游標移到方塊上預覽
緩動曲線
- --ease-focus0.16, 1, 0.3, 1
- --ease-standard0.2, 0, 0, 1
- --ease-inout0.65, 0, 0.35, 1
- --ease-exit0.4, 0, 1, 1
時長
- --duration-instant100ms
- --duration-fast200ms
- --duration-base360ms
- --duration-slow640ms
- --duration-slower1000ms
07 — Voice
語調
說話像我們做設計：先講重點，用具體的詞，不誇大。
- 01簡潔
一句話只說一件事，刪去不必要的修飾。
- 02篤定
用肯定句說明能做到的事，不做模糊的承諾。
- 03溫和
以「我們」與「您」對話，專業但不疏遠。
08 — Design tokens
設計標記
所有數值只有一個來源：W3C Design Tokens 格式的 design/tokens/aoyue.tokens.json。建置時產生 CSS 變數並檢查文字對比；同一份檔案也能匯入設計工具，或轉成其他平台需要的格式。
:root {
--color-fg: var(--gray-1000); /* Ink */
--color-bg: var(--gray-25); /* Paper */
--brand-diagonal: 58deg;
--text-display: clamp(2.875rem, …, 7.25rem);
--ease-focus: cubic-bezier(0.16, 1, 0.3, 1);
--radius-none: 0px;
}
