品牌識別規範

一條不間斷的線,停在打開的地方。這一頁是它的全部規則。

點一下標誌,再開一次鎖

一筆畫完,停在打開的地方

主標誌是 Unlocka 的字首 u,同時是一把鎖。整個造型是一條不間斷的線——從左腳出發,繞過碗底,沿右側爬升,翻過頂端,然後在快要扣回去的前一刻停住。那個缺口就是品牌本身。

unlocka33

主要橫式組合

unlocka33

直式・淺底單色

兩個圓,一個線寬

上下兩個半徑相同的圓(r = 20u)垂直相切,線寬固定 12u。因為半徑相同、切點垂直,右側筆畫是完全平滑的直線接圓弧,不會出現角度差造成的凸點。

52u 80u

幾何結構

  • 線寬 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),所以整排排在桌面上,墨色重量幾乎相同——沒有誰特別搶眼。

unlocka33
Flow
Quest
Hub
Beam
Yield
Hydro
Care
Amp
Farm
Lawn
Brew

深夜靛藍,鑰匙金

靛藍是所有圖示共用的底,產品色則由標誌本身承載——深底上的一道光。這讓十二個圖示在桌面上形成同一塊區域,對比度也全數通過 4.5 標準(最低 4.84)。標誌在深底上會提亮 18%,這是深色介面的標準做法。

Ink#17123A
Ink 2#211A52
Key#FFC44D
Paper#F4F1FF
Muted#9E95CC
Flow#5B84FF
Quest#FF7A45
Beam#E85CD3
Yield#FF5470
Hydro#22CFD8
Care#4ADE96
Farm#B7CE3E
Lawn#7BD44A
Brew#C08A3E
Amp#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 走。

一次解鎖一件事

從螢幕時間到喝水、吃藥、投資、照顧院子——同一把鎖,管你想打開的每一件事。