Nordic Civic Design
這是以 HDS 數值為基礎，打造公共服務畫面的設計方針。此為非官方技能，與赫爾辛基市無關。
目的並非讓成品看起來像市政府服務。使用的是數值與構成邏輯，而非任何可識別城市的元素。
禁止使用的項目
- 標誌、市徽、波浪圖案： 標誌為註冊商標，禁止重製或修改。波浪圖案為市府視覺元素，未確認第三方使用條件。
- Helsinki Grotesk 字型檔案： 為 Camelot Typefaces 的商業字體，禁止重新散布或用於 AI 訓練。不得隨附、嵌入網頁或應用程式。僅能在 CSS 中指定字型名稱。
- 自稱「赫爾辛基市」的表述： 成品名稱或內文不得使用可能被誤解為市府官方的語詞。
字型
font-family: HelsinkiGroteskPro, "Schibsted Grotesk", Arial, "Noto Sans JP", sans-serif;
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;700&display=swap">
在有授權的環境中會使用原始字型，其他環境則使用 Schibsted Grotesk。這並非 HDS 的指定，而是本技能的選擇。HDS 官方替代字型為 Arial。
Schibsted Grotesk 採用 OFL 1.1 授權，字重範圍 400 至 900。可以直接使用 HDS 的三個等級（400、500、700）。
日文字型並非 HDS 所指定。在日文畫面中，預設使用 Noto Sans JP，行高設為 1.75。這也是本技能的判斷。
形狀
形狀基準是 HDS 風格的關鍵，偏離會大幅改變印象。
- 圓角為 0： 按鈕、輸入欄、卡片皆不使用。
- 邊框寬度 2px： 用於按鈕、輸入欄、卡片邊框。
- 操作元件高度 56px： 按鈕與輸入欄的標準尺寸。小型按鈕為 44px。
- 不使用陰影： HDS 明確指出「陰影非品牌的一部分」。不用於表現高度、強調或文字裝飾。僅用於疊加內容的 toast 通知與對話框區隔。
- 卡片預設無邊框： 此為 HDS 預設。無邊框卡片置於淺灰色（
--color-black-5）背景上。若置於白底上，則加上 2px 邊框。白底處理方式為本技能的判斷。 - 通知採用左側 8px 色帶： 不將整個區域填入強烈色彩，而是以淺色背景搭配左側色帶傳達訊息。
色彩
數值位於 references/tokens.css，色彩用途與對比表位於 references/foundation.md。色彩名稱（如 bus、tram、metro、engel 等）源自赫爾辛基街景。
- 操作色彩為 bus：
--color-bus(#0000bf) 用於主要操作與連結。Hover 使用--color-bus-dark。 - 聚焦使用 coat-of-arms： 採用
--color-focus-outline的 3px 輪廓線。深色背景上改為白色。 - 內文使用 black-90：
--color-black-90(#1a1a1a)。文字顏色僅用黑色或白色，其他顏色僅於有特定意圖時使用。 - 強調色以大面積呈現： summer、suomenlinna、metro 等作為標題色帶或分隔區塊使用。分散使用會削弱特色。建議每個畫面只用一種強調色。此建議為本技能的判斷。
- 可放在白底上的品牌色僅四種： bus、brick、coat-of-arms、tram。metro 僅限用於大尺寸文字，summer 或 engel 等明亮色系只能作為色塊使用。
- -light 與 -dark 變體不用作主色： 僅用於元件狀態（如 hover）與資訊類型區分。
- 狀態色與強調色分開： error、success、alert、info 僅用於傳達狀態。品牌色不用於狀態顯示。務必搭配文字或圖示，不單用顏色傳達。
文字與背景的組合須符合 WCAG 2.1 AA 對比度要求。內文需達 4.5:1 以上，大字型 3:1 以上。品牌色上的文字顏色依照 foundation.md 表格（bus、coat-of-arms、tram、brick 上使用白色，其餘使用 black-90）。灰色文字最多使用 --color-black-60，--color-black-50 以下不得用於白底。
留白
以 4px 為基準。使用 --spacing-* 與 --spacing-layout-*，不自行建立中間值。
- 元件內部與元件之間：
--spacing-*的 8、12、16、24、32px - 區塊之間：
--spacing-layout-*的 48、64、96、128px - 小留白聚集，大留白分離： 緊鄰的元件看起來有關聯。留白越大的區塊看起來越重要。
- 依畫面性質調整密度： 宣傳或引導頁面留白較寬，資訊量大的業務畫面則較緊湊。
猶豫時選擇較寬的留白。寬闊的留白能營造畫面的穩定感。此句為本技能的判斷。網格採用 12 欄、最大寬度 1200px、Gutter 24px（行動版 16px）。
文字
- 字重三等級： 內文 400、按鈕或表單標籤 500、強調 700。
- 內文從 16px 起： 16px 是 HDS 內文的最小值，適用所有畫面寬度。文字量少的畫面預設使用 18px，窄畫面再降至 16px。14px 僅用於輔助文字與元件內部。
- 標題兩層級： 桌機版 h1 為 64px、h2 為 48px。行動版與業務畫面中，h1 為 40px、h2 為 32px。標題層級應依語意使用；僅想改變外觀時，透過 token 調整大小。
- 行高： 長篇內文 1.5、短段落與導言 1.2、單行標題與元件 1、小字與引用 1.75。
標題預設字重為 700。此為本技能的判斷，HDS 文件中未指定標題字重。數值表格與用途詳見 references/foundation.md。
元件
製作元件前請先閱讀 references/components.md。其中包含按鈕、輸入欄、核取方塊、通知、卡片、連結的數值與使用方式。重點如下：
- 每個畫面僅一個 primary 按鈕： 僅用於畫面中最主要的操作。取消或關閉使用 supplementary 樣式，因其無邊框，務必加上圖示。頁面導覽使用連結而非按鈕。
- 輸入欄務必附上標籤： 必填項目以
*標示，並在表單開頭說明星號含義。 - 通知僅用於重要資訊： 行內通知建議同時只出現一個，不應動態新增。錯誤等重要通知不會自動消失。
- 不讓整張卡片可點擊： 若需整張可點，請使用 Linkbox。
- 外部連結加上圖示： 原則上不開新分頁。
此處未列出的元件，請根據形狀、色彩、留白基準自行組合。未經確認的數值，不得標示為 HDS 的值。
檢查清單
完成後請檢查以下項目：
- 無殘留圓角與陰影（toast 通知與對話框陰影除外）
- 未使用 token 以外的色彩與留白數值
- 操作元件高度大於等於 44px
- 焦點輪廓線清晰可見
- 文字與背景對比度符合 AA 標準
- 未使用標誌、波浪圖案、市府名稱
參考來源
Token 與元件數值取自 hds-design-tokens 與 hds-core 6.0.7 版，使用方式則來自 HDS 官方文件（https://hds.hel.fi/ ，原文位於相同儲存庫的 site/src/docs）。兩者均採 MIT License，Copyright (c) 2023 City of Helsinki。授權條文見 references/LICENSE-HDS.txt。散布此技能時，請一併附上該檔案。色彩名稱由來依據赫爾辛基市視覺識別指引。