Brand guidelines

The Viet Academy 品牌識別

一個符號、一個字標、一個強調色。所有畫面都由這三樣加上黑白灰組成。本頁內容與專案根目錄的 BRAND.md 同步；主題切換時這裡的色票與標誌也會跟著變。

標誌

符號是圓角方塊裡的 V，右上角帶一個越南語聲調符號。V 來自品牌名，聲調符號代表「用中文學越南」；兩者以外沒有任何圖案。字標使用 Barlow Condensed ExtraBold 大寫，與價格、課號同一字型。

橫式・淺底

橫式・深底

直式・淺底

直式・深底

符號

符號・品牌色底

符號・單色

App 圖示

最小尺寸

符號最小 16px（favicon）；橫式組合最小高 24px；直式最小寬 96px。符號在 16px 時聲調符號仍可辨識，這是幾何設計的依據。

淨空區

標誌四周保留至少一個符號寬度的空間，不放其他文字或圖形。導覽列裡符號 32px、字標 21px，間距 11px。

不可以

改變符號與字標的比例或間距
把字標換成其他字型，或改成小寫
在符號上加陰影、漸層、外框
用品牌色以外的顏色畫聲調符號（單色版除外）
把符號放在對比不足的照片上

色彩

只有一個強調色。它用在主要按鈕、聲調符號、標籤與小面積提示，不當大區塊的底色；大區塊只用 Ink 與 Surface 交替。

Ink--ink導覽列、Pro 區塊、縮圖底、主文字

Brand--brand唯一強調色：主要按鈕、聲調符號、標籤、連結 hover

Brand strong--brand-strong按鈕 hover、淺底上的品牌色文字

Brand soft--brand-soft品牌色淡底，提示列

Surface--surface交替區塊底、側欄卡片

Line--line分隔線、卡片外框

Muted--muted次要文字、說明

Paper--paper頁面底

主題：預設 amber（Ink #15181D + Amber #FF7A1A）。替代主題 cobalt（Cobalt #1E3FBF + Lime #D9F24F，白色導覽）保留在 tokens.css，在 <html> 設 data-theme="cobalt" 即整站切換；預覽可加網址參數 ?theme=cobalt。

字型

Display ・ Barlow Condensed 800／600

The Viet Academy

NT$ 999 ・第 01 課

只用於字標、價格、課號與區塊計數。中文不使用。

Sans ・ Noto Sans TC 400／500／700

從設定搜尋條件到準備第一次聯絡

內文 16px、行高 1.75。標題 20／28／40px，字距 −0.02em。小標籤 13px、字距 0.12em、全大寫。

元件

按鈕

主要動作次要淺底外框停用

一個畫面只有一個品牌色按鈕。深底上的次要按鈕用白色外框。

標籤與小標

最新課程・生活實作

免費試看 PRO

小標用品牌色、全大寫、字距 0.12em；標籤填品牌色或 Ink，圓角 6px。

卡片

白底、1px Line 外框、圓角 10px，hover 上移 2px 加陰影。縮圖固定 16:9。價格用 Display 字型。

課程平面

封面、OG 圖、社群方圖與每一課的縮圖共用一套版型：Ink 底、淡格線、右上角一道品牌色聲調筆畫、傾斜 4° 的瀏覽器視窗放課程畫面、白色「越南文＝中文」單字卡，左側是大課號與標題，左下角固定放標誌。單字卡內容取自各課真實的單字表，不是裝飾。所有圖由 npm run build:stills 以本機 Chrome 輸出，改版型只改 scripts/brand/render-stills.mjs。