三種用途：主要用於品牌識別，墨色用於字體與底色，色調與邊框則使用「signals」。點擊任何十六進位或 RGB 色碼即可複製。

主要產品與品牌

墨與字體

訊號與表面

標題使用襯線字體，其餘內容則採用無襯線字體。DM Serif Display 賦予文字溫暖感與編輯級的份量；Inter 則能無干擾地處理長篇閱讀與使用者介面設計。

兩種量表。 文章 適用於長篇內容、部落格文章及活動頁面。 顯示 適用於重點區塊、著陸頁以及行銷關鍵時刻——這些場合中，字型需要發揮更大的作用。以下尺寸為桌面版上限——標題的預設大小為 clamp() 因此，它們在手機上的顯示會縮小。

第 16 / 600 頁， padding: 1rem 2rem, 半徑 8px，0.18 秒的顏色過渡。Squarespace 的連結樣式會延伸至程式碼區塊中，因此按鈕的錨點始終設定為 顏色 以及 text-decoration 與 !important.

可重複使用的設計模組。這些模組會出現在部落格文章、計畫頁面以及面向捐款人的內容中。在自行設計新模式之前，請先參考現有的模式——品牌的連貫性來自於重複運用，而非新穎性。

「運動」是一種暗示，而非表演。萬物皆沿著同一條短曲線運動，而沒有必要移動的事物，絕不會移動。

• 過渡

  0.18 秒至 0.2 秒 輕鬆 關於顏色、背景、邊框和透明度。不要太長，也不要太花俏。

• 將游標懸停在卡片上

  邊框採用 TCF Cyan 顏色，並搭配 1px 的同色環（box-shadow: 0 0 0 1px #00B4DB). 否 transY 新作品中的卡片式滑塊 — 隨著頁面重新建構，舊版滑塊正被移除。

• 將游標懸停在帳本上

  將游標懸停在一行上，會將其同級元素下移至 不透明度：0.55, 將斜體字句轉為青色，並將箭頭向右移動 4px。懸停時的行仍保持完全不透明。

• 焦點

  每個互動元素都會獲得 :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. 切勿在未重新安裝的情況下拆下對焦環。

• 不允許

  不得出現脈動、發光、彈跳、視差或自動播放的動態效果。頁面閒置時，不得出現重複播放的動畫。

該網站採用 Squarespace 7.1 運作，因此大多數新的設計作品皆以獨立的程式碼區塊形式交付，並置入「流體引擎」區段中。這些規則可避免這些區塊彼此衝突，或與平台產生衝突。

• 類別前綴

  每個新區塊都會使用 tcfx- 前綴。 tcf- 屬於舊版自訂 CSS，將會發生衝突。

• 僅限範圍內重置

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } 且寬度不得超過此範圍。一頁寬的 * 先前曾發生過重置導致網站無法運作的情況。

• 將所有內容都置於命名空間中

  將範圍涵蓋至該區塊根類別下的每條規則。程式碼區塊應可安全地貼至任何頁面，且不會產生任何副作用。

• 先匯入

  如果一個 <style> 用途 @import 至於字型，它必須是該標籤中的第一行，否則瀏覽器會忽略它。

• 沒有留言

  正式發布的 HTML 和 CSS 檔案中不包含註解。請改在專案備註中記錄該區塊的說明。

• 不使用表情符號作為圖示

  文字、數字或內嵌 SVG。表情符號在不同平台上的顯示效果不一致，且給人一種非正式的感覺。

• 海軍藍，不是黑色

  在使用者介面中，深海藍（Deep Navy）將全面取代黑色。純黑色則專用於媒體內容。

• 行動優先

  以手機版面配置為基礎，並新增 min-width 向上查詢。單欄堆疊， clamp() 字型、在 640px 以下減少內距、適合觸控操作的按壓區域。

• 外部連結

  target="_blank" 始終隨貨附贈 rel="noopener noreferrer".

• 內容完全照錄

  重新設計現有頁面時，請精確保留標題、正文、網址及 UTM 參數。若有任何修改，請明確標示，切勿默默進行。

• 保留 H1 標籤

  為了搜尋引擎優化（SEO），重建後的英雄頁面會保留一個 H1 標籤，且其文字內容完全維持原樣。請避免使用 Squarespace 的 平方根縮放文字 wrapper — 其內嵌大小可能在執行時消失，並導致標題收起。

• 章節接管

  若要將區塊的區段設為深色，請鎖定背景圖層，而非區段框 — 繪製 .page-section 將任何「clip-path」分隔線轉為方形。

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}