Colors & type

toomore.net 的配色與字型。做簡報、名片或任何個人素材時，從這頁挑顏色和字就不會跑掉。點色塊可以直接複製 HEX 值。

色彩的出處

所有顏色都取自這張 Lomo LC-A 120 拍的鏡中自拍。舉著相機、臉被擋住，一張自拍卻看不到臉，同時是身份也是匿名。下面是直接從照片量出來的六個主色，核心色票就是從它們調整而來：提亮讓文字讀得清楚，拉高飽和度讓連結看得出來，並把背景刻意偏綠，避開常見的暖奶油色。

#CEBF9D最亮的牆面與光
#AD9664磁磚的暖黃
#8E723B黃銅色的反光
#748265偏綠的陰影
#625628橄欖色的暗部
#3B3512最暗的角落

核心色票

分成兩組：暗房用在深色背景，相紙用在淺色背景。同一組裡的顏色互相搭配；跨組使用前先看下面的對比度表。

暗房（深色背景）

暗房 --darkroom

#22261A RGB 34 38 26

深色背景：首頁 hero、內頁頂端、簡報封面
卡其 --khaki

#D6C9A6 RGB 214 201 166

暗房上的主要文字與大標
淡卡其 --khaki-soft

#A89E80 RGB 168 158 128

暗房上的次要文字、說明
亮黃銅 --brass-lit

#D4AE5E RGB 212 174 94

暗房上的強調：按鈕、重點數字

相紙（淺色背景）

相紙 --paper

#EAEDE3 RGB 234 237 227

淺色背景：內容區、簡報內頁
深相紙 --paper-deep

#DFE3D6 RGB 223 227 214

相紙上的區塊底色：程式碼、引用
墨 --ink

#1F2218 RGB 31 34 24

相紙上的主要文字
淡墨 --ink-soft

#5C604D RGB 92 96 77

相紙上的次要文字、說明
分隔線 --rule

#CDD2C1 RGB 205 210 193

細線、邊框
苔綠 --moss

#43582A RGB 67 88 42

相紙上的連結與段落標題
黃銅 --brass

#785D26 RGB 120 93 38

相紙上的年份、小標強調

深色模式

網站會跟著系統的深色模式切換。暗房在深色模式下再壓暗一階，讓它和內容區仍然分得開；苔綠與黃銅則提亮，維持在深底上的可讀性。卡其、淡卡其、亮黃銅兩種模式相同。

名稱	變數	淺色模式	深色模式
暗房	`--darkroom`	`#22261A`	`#0F1109`
相紙	`--paper`	`#EAEDE3`	`#1A1D14`
深相紙	`--paper-deep`	`#DFE3D6`	`#23271C`
墨	`--ink`	`#1F2218`	`#E4E6D9`
淡墨	`--ink-soft`	`#5C604D`	`#A2A68F`
分隔線	`--rule`	`#CDD2C1`	`#33382A`
苔綠	`--moss`	`#43582A`	`#A8C27A`
黃銅	`--brass`	`#785D26`	`#D4AE5E`

對比度

依 WCAG 2 計算。內文至少要 AA（4.5），大字標題可以接受 3。黃銅在相紙上用的是加深過的 #785D26，原本照片裡的黃銅只有 4.15，不夠當小字。

範例	組合	對比	等級
Aa 字	卡其 on 暗房	9.38	AAA
Aa 字	淡卡其 on 暗房	5.78	AA
Aa 字	亮黃銅 on 暗房	7.36	AAA
Aa 字	墨 on 相紙	13.63	AAA
Aa 字	淡墨 on 相紙	5.48	AA
Aa 字	苔綠 on 相紙	6.64	AA
Aa 字	黃銅 on 相紙	5.22	AA
Aa 字	苔綠 on 深相紙	6.03	AA

字型

一個有個性的窄體英文字配系統字。中文網頁字型動輒數 MB，所以中文一律用系統字型；這也讓中英混排的粗細比較一致。

Toomore Chiang

Barlow Condensed 700：名字、封面大標。靈感來自加州公路標誌與公共標牌，窄體讓大字不佔寬。

Writing, Now, Before

Barlow Condensed 600：段落標題、年份、按鈕。只用於英文與數字。

匿名網路社群 anoni.net：個人隱私指引、Tor Relay 校園建立競賽、匿名支付探索。Backend engineer working in Python and Go.

系統無襯線（PingFang TC、Noto Sans TC、微軟正黑體）：所有內文與中文標題。

2FD9 1A7F F5F6 0D79 8386 534B D1B0 2A14 CAD8 FEF7

系統等寬：PGP 指紋、主機名稱、指令與程式碼。

字級

13px 0.8125rem照片說明、頁尾、備註
15px 0.9375rem次要文字、條目說明
17px 1.0625rem內文，為中英混排調大一級
20px 1.25rem引言、自我介紹
30px 1.875remSection
56–116pxName

簡報用法

封面與章節頁用暗房，內頁用相紙。一份簡報裡，暗房頁只放在需要停頓的地方，其餘都是相紙頁。

Privacy tools
for civil society

Toomore Chiang, anoni.net

COSCUP 2026

封面：暗房底、卡其大標、淡卡其副標、亮黃銅標籤

What we built

2023–24 OONI 網路干預開放觀察計畫
2025 Tor Relay 校園建立競賽
2026 個人隱私指引

內頁：相紙底、苔綠標題、墨色內文、黃銅年份

使用原則

一個畫面只用一個強調色。暗房上用亮黃銅，相紙上用苔綠，不要兩個同時搶。
苔綠和黃銅不要當大面積背景，它們是點綴，背景只用暗房與相紙。
照片優先用黑白或偏暖、偏黃綠的彩色照；大面積冷藍或高飽和紅的照片會和底色打架，可以先轉黑白。
Barlow Condensed 只排英文與數字。中文標題改用系統字型加粗。
需要更多層次時，用字級和粗細拉開，不要再加新顏色。

複製用

CSS 變數

:root {
  --darkroom: #22261A;
  --khaki: #D6C9A6;
  --khaki-soft: #A89E80;
  --brass-lit: #D4AE5E;
  --paper: #EAEDE3;
  --paper-deep: #DFE3D6;
  --ink: #1F2218;
  --ink-soft: #5C604D;
  --rule: #CDD2C1;
  --moss: #43582A;
  --brass: #785D26;
}

純色碼（貼進 Keynote、Figma、Canva）

暗房　　 #22261A
卡其　　 #D6C9A6
淡卡其　 #A89E80
亮黃銅　 #D4AE5E
相紙　　 #EAEDE3
深相紙　 #DFE3D6
墨　　　 #1F2218
淡墨　　 #5C604D
分隔線　 #CDD2C1
苔綠　　 #43582A
黃銅　　 #785D26