Palettes
Palettes 為產品設計或平面設計使用的基礎色盤，讓設計師在有限的範圍中使用顏色，可以保持畫面的和諧和一致性，不會出現過於突出、不協調的配色。
⚡️ 開發與設計文件：
→ Palettes_Master存放於 google drive 的 Palettes 主要文件，是所有 Palettes 衍伸文件的唯一資料來源，內容紀錄所有 Palettes 名稱和色碼。
→ Figma Design Library設計師在 Figma 中使用的顏色系統是一種設計工具，用於專案檔的物件顏色設定，資料來源為 Palettes_Master。
Palettes Categories
色盤分類
色盤 (Palettes) 依照應用場景及實作方式分為兩大類 —— UI Design Palettes 和 Graphic Design Palettes。
產品設計師與工程師進行開發時使用 UI Design Palettes，此色盤已建立於 Universal / Android / iOS 程式庫中；視覺設計師進行平面設計時使用 Graphic Design Palettes，並以設計工具 Figma 進行管理。兩色盤的顏色名稱、色碼及文件皆為設計團隊負責維護，程式庫則由工程團隊負責。
維護注意
由於過去定義的 UI Design Palettes 彩度較高，且除 StandardBlue、Gray 及 State Colors 外，使用率都非常低，因此團隊於 2022 年新定義一份更合乎使用的顏色，而目前 XD Playbook 上展示的 Palettes 有部分尚未套用至工程維護的程式庫。 可以利用此份盤點 Palettes_Master_v1,v2 對照表 參考尚未套用的顏色有哪一些，v1 代表程式庫目前顏色，v2 代表設計師規劃的新顏色。
Categories | Description | Usage | Master Documentation |
UI Design Palettes
產品色盤 | 以單一顏色擴展出具有深淺變化的色盤。 | 使用於產品介面設計的主要色盤。 | |
Graphic Design Palettes
平面設計色盤 | 以能夠搭配品牌色為主要的產出依據，單一顏色之間並無關聯性。 | 使用於產品中的平面設計中，例如：歌單封面設計、狀態插圖設計或其他在產品中曝光的數位行銷宣傳物。 | ⚠️ 暫無資料 |
UI Design Palettes 介面色盤
UI Design Palettes 依照用途大致分為 Primary Color、Based Color、Extended Color、State Color，每組系列色的組成方式皆由單一顏色調整明暗而成。設計時需要根據規範使用於特定場景。
Primary Colors 主要色
產品中最主要的色彩應用，以品牌色 #09CEF6 為基底擴展而成。
Standard Blue
Standard Blue 是一組由品牌色延伸出不同深淺的系列色，並以 stdBlue60 作為主要應用的顏色，可作為吸引使用者進行重要動作的視覺引導，一般運用於主要動作，例如：按鍵、連結或表示活躍狀態。
主要色 stdBlueHC60 與白色搭配時，對比度不足，容易造成使用者不易閱讀。所以當主要色 stdBlueHC60 在 Light Theme 中，需依照規範視情況調整顏色，在 Dark Theme 中對比度足夠，維持使用 stdHCBlue60。
Base Colors 基礎色
組成產品介面的基礎顏色，僅使用低彩度且不干擾視覺的中性顏色，大約佔整體畫面 80%。
Gray Tone
標準灰階未參雜其他顏色，允許自行與其他顏色搭配。灰階中每一種顏色都包含資訊層級的意義，並且會因應顏色主題進行相對應的調整，維持資訊的可閱讀性。
Extended Colors 延伸色
我們從 Graphic Design Palettes 挑出的四種作為產品使用的裝飾色，並將此展開成色階，以利 Dark、Light Mode 情境下運用。這些顏色可以在不影響產品的品牌體驗下使用。
而這些顏色同樣不特定指單一含義，例如：Green60 代表學生方案，也應用於曲風情境的背景色（*尚未在產品中實現）。
這些色彩不應用於向使用者傳達重要訊息，例如：錯誤狀態、不可操作狀態。
Vermilion
Gold
Gold 系列色主要要用於方案、音質識別。
參考章節 Color / Using color
Green
Pink
State Colors 狀態色
表示狀態的顏色，例如：錯誤、警告、成功等等，不可用於表示身份特徵。
當使用者對畫面進行操作時，也可透過顏色變化給予操作回饋，讓使用者知道系統對當下的操作是有反應的。我們可利用特定的顏色，輔助使用者了解當前的狀態，並進一步引導其進行對應操作。例如：在手機畫面點擊按鍵時，按鍵顏色會變深。
Red
紅色為通用的「錯誤」狀態。
Hover
Pressed
Graphic Design Palettes 視覺色盤
這是一組能與 Standard Blue 搭配的色盤，可以為我們的品牌帶來有趣、富表現力的溝通，通常使用於產品中的歌單封面、插畫應用、主題面板等，也會應用於 KKBOX 行銷上的宣傳物。
Usage 應用
Playlist Cover 歌單封面
使用於官方歌單封面視覺的用色，例如：[因為你聽過]歌單、[為你精選]歌單。
Illustration 插畫
主要用於幫助 KKBOX 傳達複雜、難以用簡短文字形容的情境給使用者，讓使用者能更快速地融入和理解，另外插圖的表現也讓 KKBOX 的整體體驗更加活潑、擬人，同時呼應「富表現的」的設計準則，例如：歌單封面、通知卡片、特殊頁面等。
→了解插畫應用詳情
Theme 主題面板
展現 KKBOX 品牌的主題面板
社群
KKBOX 在 Instagram 經營的社群有區分不同語系及顏色， 產品中的編輯帳號也有遵循社群用色使用各自對應的頭像顏色。
參考設計文件 Social Templates
產品行銷宣傳
與 KKBOX 官方功能、方案相關的廣告網頁主視覺也會使用這組色盤。行銷宣傳物通常會出現在 App Store、網頁等外部地方。例如：App Store 宣傳圖、家庭方案廣告、無損音質宣傳廣告。
由於是行銷方面，用色可以偏向大色塊、對比撞色的方式呈現品牌調性。
Exception
特例
我們建議在介面設計時採用 UI Design Palettes 中的顏色，但有時還是可能需要為特定專案指定額外的顏色。遇到這種情況時，設計師可以僅提供色碼進行開發，但必須記得此特例需承擔維護成本和破壞一致性的風險，所以非急迫情形不採用。