Clawd — the 8-bit pixel crab mascot
常設展 · Permanent Exhibit

Claudestyle Design System

本展廳每一張卡片、每一份提案的設計語言源頭 —— 一套溫暖、書卷氣的「博物館策展」視覺系統。

「本站的顏色,也是他們的顏色。」

從「名字的詩學」展覽蒸餾而來的設計語言

Claudestyle 是從非官方策展網站 「名字的詩學 — The Poetics of Naming」 蒸餾出來的編輯/博物館風格設計系統:象牙紙底、板岩墨字、單一陶土色點綴、襯線標題、小型大寫的策展標籤,以及「官方 / 語源學 / 推測」的來源可信度標記詞彙。讀起來像「一本溫暖的書,而不是一塊冰冷的螢幕」。

這份系統把那套語言完整打包:精確的色票、襯線主導的字級、來源可信度標記、語源鏈圖示、雙欄時間軸、現役模型表,以及吉祥物 Clawd —— 讓任何新產出都能用同一個聲音建造。

象牙底、板岩墨、一抹陶土

色票逐字取自 anthropic.com 的品牌 CSS 變數(非憑記憶重建)。陶土是唯一的強調色 —— 點綴,絕不氾濫。

ivory
#faf9f5
ivory-2
#f0eee6
oat
#e3dacc
kraft
#d4a27f
clay
#d97757
clay-deep
#a64a2c
slate
#141413
cactus
#bcd1ca

從色票到元件,一條 styles.css 全帶

styles.css

單一入口

link 這一個檔案,它會 import 所有 tokens(顏色/字級/間距/陰影)與字體。

tokens/

設計變數

顏色、字級、間距、海拔陰影的 CSS custom properties,語意化別名供元件引用。

guidelines/

基礎規範樣本

顏色、字級、間距、吉祥物、圖示的策展樣本卡 —— 11 個 specimen HTML。

components/

React 元件

Button/Card/Badge/Tag/SectionLabel 核心組,加上 EtymologyChain/TierDots/ExhibitHeader 等策展元件,共 12 類。

ui_kits/

整頁範例

naming-exhibition 完整頁面重現+Hermes 換膚示範,看語言實際運作。

assets/mascot/

Clawd 吉祥物

官方 8-bit 像素螃蟹 gif(113 幀動畫、透明)+一張裁切靜圖。🦀

使用原則:象牙底、板岩墨、陶土是強調色,永不氾濫;每個視圖一個主要動作。襯線給標題與閱讀;無襯線給標籤;等寬給模型代號;像素臉只屬於 Clawd 的 8-bit 世界。無藍紫漸層、無毛玻璃、無裝飾性 emoji(🦀 除外)。

逐項翻閱基礎規範

系統實際運作的樣子

點任一張即在站內放大檢視 —— ✕ 或 Esc 關閉、← → 切換上一張/下一張。