台灣本島依真實高程掃描成 10 行,北迴歸線那一行用臺灣青。
標誌
行島:台灣本島切成 10 條緯線,每一條的兩端是真實的海岸線。
構造
- 資料
- Tilezen Terrain Tiles z9(約每像素 280 公尺)。取最大的連通陸地:1354 列 × 716 欄,高寬比 1.89。
- 掃描
- 本島高度均分 10 行,第 6 行的中心釘在北緯 23.4365°。兩端取該段海岸的中位數,小凹凸不會讓行抖動。
- 北迴歸線
- 經過嘉義與花蓮瑞穗,玉山主峰在北緯約 23.47°。整個標誌只有這一行用臺灣青。
- 行
- 行粗為行距的 0.6 倍,兩端平切。
- 範圍
- 只畫本島。完整的領土資料在 台灣形狀。
- 原始碼
-
docs/brand/source/
三種尺寸
行數隨尺寸減少,北迴歸線永遠在。
色彩版本
單色時北迴歸線跟著同色,不挖空、不加框。
標準字
九個字母用同一套字,.md 只換顏色。
字形
- 字體
- Newsreader,光學尺寸 72,字重 500(OFL)
- 字距
- 整字收 18/1000 em,字偶照字體內建
- 交付
- 全部轉成向量外框,不需要對方裝字
Newsreader 是 Production Type 為 Google Fonts 做的新聞閱讀襯線字,帶光學尺寸軸;標準字取最大的 72,筆畫對比比內文版本鮮明。用開源字,fork 的站才能合法重製自己的標準字。
組合比例
以大寫高 X(T 的高度)為單位,放大縮小都不走樣。
- 標誌高
- 1.9 X,垂直置中於大寫高
- 標誌到字
- 0.42 X
- 淨空
- 四周 0.5 X,裡面不放任何東西
- 中文副標
- 思源黑體 TC 500,字級 0.37 X,字距 0.14 em,基線在 Taiwan 基線下 0.93 X,左緣對齊 T 的墨邊
- 最小
- 組合大寫高 10 px(整組約 20 px 高);更小只用標誌
組合
中文副標用在讀者可能不認識 Taiwan.md 的場合。
色彩
墨與紙佔版面九成,臺灣青只畫一行。
主色
版面底色
標題、內文、標誌的行
北迴歸線那一行、.md、連結、焦點框
一頁一處:勘誤、最重要的數字
面積
綠會被讀成政黨色,原因在面積。臺灣青不超過版面的 10%。
臺灣青是文化部「臺灣三顏色」裡的 Formosan Green(Pantone 3295 C),2007 年由國家文化總會發表,也是 Taiwan.md 一直在用的 .md 顏色。九重葛取同一組三色裡臺灣紅那一系的洋紅,是常見政黨用色裡沒有人用的色相。
輔助色
狀態色一定配圖示與文字,不單靠顏色。
#f3f6f5 卡片、區塊交替 #435258 次要文字、說明 #5d6c71 圖說、時間戳 #dce3e1 框線、分隔 #2f7a3e 通過、已驗證 #9a5b00 待確認、過期 #b3261e 失敗、斷鏈 對比
門檻是 WCAG 正文 4.5:1。完整驗證跑
tokens-audit.mjs,兩個模式全部通過。
ink-1 / paper 16.3 · 15.2 ink-2 / paper 8.1 · 10.0 ink-3 / paper 5.5 · 6.2 brand / paper 5.4 · 8.0 on-brand / brand 5.4 · 8.4 signal / paper 6.8 · 6.9 資料用色
類別色固定順序、不循環。散佈圖與地圖一律加直接標籤,藍鵲藍與苦楝紫在紅綠色盲下分不清。
#00806b #3b5bab #b0125f #5d7a1c #7b55a8 #b5651d 字體
基本字體全部開源;taiwan.md 網站上另用 justfont 贊助的字。
基本字體
SIL 開源授權,fork 的站零設定就有。中文依教育部標準字形。
Curated stories of an island
策展島嶼的深度敘事
一九八八年,攝影師扛著機器走進雲林的鹽田。
[^12] 23.4365°N · 3,952 m
網站用字
justfont 是 Taiwan.md 的字體贊助商,網頁授權只在 taiwan.md 網域。每一支都有基本字體備援。
內文 · 金萱那提
金萱 2015 年由七千多人群眾募資。
小標 · 蘭陽黑體
黑體也能寫出詩意
引言 · 蘭陽明體
從宜蘭的水看見字的可能
文章大標 · 日星宋體貳號
台北太原路的鉛字
圖示
98 支行線圖示:線寬 1.75、平頭、尖角,有面積的地方畫行線不填滿。
文法
- 格線
- 24 格,圖形留在中間 20 格;座標用整數與 .5。
- 行線
- 最多兩條,行距至少 4 格;平行筆畫至少隔 3 格。
- 台灣
- island 由海岸線算出,跟標誌同一套程式。
- 顏色
- 一律 currentColor,跟著文字走。
- 無障礙
- 裝飾用加 aria-hidden;只有圖示的按鈕才加 aria-label。
- 名字
- 英文小寫一個字,上線後不改名。
分類
14 支
介面
46 支
內容
38 支
尺寸
站上的 emoji 在建站時換成圖示,共 279 個對照;讀者留言與國旗保留原樣。
圖形元素
同一組行平放是標誌,依高程抬起就是地形行。
兩種狀態
地形行
- 用在
- 首頁與分類的大面、OG 分享圖、孢子方圖、簡報封面
- 不用在
- 文章內文;也不當底紋鋪滿整面
- 抬升
- 最高點不超過版面高度的 15%
版面與語氣
直角、細線、留白;說話像在跟朋友介紹台灣。
版心
數值在 src/styles/tokens.css。
prose 900首頁、關於、日記 article 1440文章雙欄 wide 1560列表、資料、時間軸 - 間距
- 1.5 / 2 / 2.5 / 3 / 4 rem 五階
- 圓角
- 標誌與行直角;卡片 8 px;標籤 16 px;照片不加
- 陰影
- 只給浮在內容上的選單與彈出;卡片用 1 px 線
語氣
可以有立場,但要有證據。書寫節制寫在 MANIFESTO §11。
一九八八年,攝影師扛著機器走進雲林的鹽田。
歡迎來到美麗的寶島台灣,讓我們一起探索⋯⋯
黃魚鴞一對要六公里的溪流才養得活。
為打造更美好的知識生態,持續精進中。
應用
頁首、分享圖、文章卡、孢子方圖、App 圖示。
自然
黃魚鴞:六公里溪流養一對,1,800 公尺烏心石上的夜行猛禽
使用規範
內容 CC BY-SA 4.0、程式碼 MIT,識別素材一樣開放;Taiwan.md 這個名字要先問。
誰可以怎麼用
不用問
- 報導、評論、教學、研究裡提到 Taiwan.md
- 連到 taiwan.md 的按鈕、徽章、簡報頁
- 原樣使用下載區的檔案
- 行線圖示(MIT)
註明出處
- Fork 的站沿用版型、圖示、地形行的產生方式
- 用 docs/brand/source/ 替自己的土地生一個行島
- 頁尾或 README 寫「Built on Taiwan.md」並連回來
分支品牌列
給 fork 的站放在最上方或頁尾。用自己的行島時,換成那塊土地自己的緯線。
錯誤用法
下載
對外預設給「組合・淺底」與「組合・深底」兩張。SVG 的字都已轉外框。