品牌識別規範
一條不間斷的線,停在打開的地方。這一頁是它的全部規則。
點一下標誌,再開一次鎖
標誌構想
一筆畫完,停在打開的地方
主標誌是 Unlocka 的字首 u,同時是一把鎖。整個造型是一條不間斷的線——從左腳出發,繞過碗底,沿右側爬升,翻過頂端,然後在快要扣回去的前一刻停住。那個缺口就是品牌本身。
unlocka33
主要橫式組合
unlocka33
直式・淺底單色
製圖規範
兩個圓,一個線寬
上下兩個半徑相同的圓(r = 20u)垂直相切,線寬固定 12u。因為半徑相同、切點垂直,右側筆畫是完全平滑的直線接圓弧,不會出現角度差造成的凸點。
幾何結構
- 線寬 x12u
- 圓半徑20u(上下相同)
- 整體比例52 : 80
- 開口收尾角度140°
- 最小留白四周各 2x
- 最小尺寸20 px / 7 mm 寬
- 字體Sora 700 / 300
- 路徑M30 52 V64 A20 20 0 0 0 70 64 V36 A20 20 0 0 0 34.7 23.1
產品家族
同一把鎖,換十一顆內核
每個符號都限制在碗內同一個圓形範圍(圓心 50,64,半徑不超過 14),所以整排排在桌面上,墨色重量幾乎相同——沒有誰特別搶眼。
色彩
深夜靛藍,鑰匙金
靛藍是所有圖示共用的底,產品色則由標誌本身承載——深底上的一道光。這讓十二個圖示在桌面上形成同一塊區域,對比度也全數通過 4.5 標準(最低 4.84)。標誌在深底上會提亮 18%,這是深色介面的標準做法。
Ink
#17123AInk 2
#211A52Key
#FFC44DPaper
#F4F1FFMuted
#9E95CCFlow
#5B84FFQuest
#FF7A45Beam
#E85CD3Yield
#FF5470Hydro
#22CFD8Care
#4ADE96Farm
#B7CE3ELawn
#7BD44ABrew
#C08A3EAmp
#AE5CFF
Hub
品牌本色使用規則
只要守住缺口
這樣用
- 單色版本用純金、純白或純靛藍
- 深底放金色,淺底放靛藍
- 四周至少留 2x 的空白
- 「33」永遠比「unlocka」細一階
- 新產品加入時,取一個尚未使用的色相
別這樣
- 把開口接回左腳(那就鎖上了)
- 把線拆成兩段、或改變任一段的角度
- 加陰影、外框、漸層或照片填色
- 把產品色混用在別的產品上
- 在碗裡放超過一個符號
資產
圖示資產
主標誌三種顏色,三個檔案都已含 2x 最小留白。十二組 App 圖示放在 assets/icons/ 下。
資料夾長什麼樣
- mark/主標誌三色 SVG
- icons/<產品>/svg/icon-light / dark / tinted、glyph-mono
- icons/<產品>/AppIcon.appiconset/拖進 Xcode 就好
- icons/<產品>/preview-180.png手機上肉眼比對
iOS 不吃 SVG
Xcode 的 AppIcon 資產只收 PNG,而且必須是 1024×1024、不透明、不含圓角——圓角由系統自己套用。所以每個產品同時附上 SVG 母檔與可直接拖進 Xcode 的 AppIcon.appiconset。
網頁上要用方形滿版的 icon-light.svg,圓角自己補:border-radius: 22.37%。glyph-mono.svg 用 currentColor,顏色跟著 CSS 走。