國家兩廳院

國家兩廳院（國家戲劇院、國家音樂廳）的官網。第一次打開會先播一段開場：「NATIONAL THEATER AND CONCERT HALL」的白色大字疊在場館的空拍照上，可以按 SKIP 跳過。

首頁本身是白底、黑字、少量的紅：左邊一條 80px 寬的直欄放紅色的兩廳院標誌、選單和四個圖示（會員、收藏、節目日曆、無障礙），右邊是內容。每一段的標題都是一個「只有外框線」的英文大字（PROMOTION、MEMBERSHIP、PROGRAMS、DISCOVER），旁邊直排或下面一行中文（推薦節目、主合辦及協辦節目、學習推廣）。

最特別的是斜切的形狀：推薦節目的大照片是梯形，右下角疊一塊同樣斜切的淺灰資訊框；節目卡片的照片也是左右高低不同的梯形，左下角壓一個紅色圓形的分類標籤。

• Canvas（#FFFFFF）：頁面和左邊直欄的白底。

• Text（#1A1A1A）：標題、內文、框線，接近黑。

• Primary（#CB333B）：兩廳院的紅。標誌、會員區的紅色圓形徽章（購票優惠、優先劃位、生日禮券）、輪播進度條目前那一段（4px 高）、暫停按鈕的紅框都用它。

• Crimson（#D00B33）：節目卡片上的紅色圓形分類標籤（秋天藝術節、劇院選……），比 primary 再深、再冷一點。

• Surface（#F6F6F6）：節目區整段的淺灰底，左上角斜切。

• Surface panel（#F0F0F0F2）：推薦節目照片上那塊斜切的資訊框，95% 不透明的淺灰。

• Text muted（#A8A8A8）：節目卡片的類型（音樂、舞蹈）和其他次要的灰字。

• Neutral（#B3B3B3、#B3B3B34D）：分隔線和沒選到的輪播字。

英文用 Avenir，中文用 Noto Sans TC（Avenir 沒有中文，系統會接著用 Noto Sans TC、蘋方）。

• 段落的英文大標題（PROMOTION、MEMBERSHIP、PROGRAMS）是只有外框線、裡面空心的粗體大寫字，用圖片或 SVG 做的；開場的「National」是 72px／900。

• 中文段落標題 24px／500，字距拉很開（6px）；推薦節目的是直排。

• 推薦節目的標題 26px／500、字距 1px；節目卡片標題 22px／500。

• 內文 16px、行高 28px；日期 13px；節目類型 13px、灰色、字距 1px。

• 紅色圓形標籤的字 12px／500，白色。

• 左邊固定一條 80px 寬的直欄（上下 30px 內距）：最上面紅色標誌，中間選單，最下面四個圖示，跟內容之間一條細線。

• 內容區左右約 80px 內距，最寬約 1200px。

• 推薦節目：一張斜切的大照片佔左邊三分之二，右上直排的「PROMOTION 推薦節目」，右下疊一塊斜切的淺灰資訊框（日期、標題、英文副標、右下角圓形箭頭）；照片下面四個節目的切換，目前那個上面一條紅線。

• 會員區：左邊外框字標題、說明和圓形箭頭，右邊三張會員卡的照片，周圍散落三個紅色圓形徽章；下面一行外框字「JOIN NOW」橫向重複跑動。

• 節目區：整段淺灰底，上方 280px 的空白，三欄的節目卡片，最後「查看更多節目」加圓形箭頭。

• 頁尾：左邊標誌和地址，右邊訂閱電子報（底線的輸入框加兩顆黑框按鈕）、社群圓形圖示、一排用直線隔開的連結。

Responsive

• 375px 寬時，左邊的直欄變成上面一條 60px 的頁首：左邊標誌，右邊會員、收藏、日曆、無障礙四個圖示和選單。

• 段落標題改成橫排：外框英文在上、中文在下。

• 推薦節目的照片滿寬，斜切的淺灰資訊框疊在照片下半，左右兩個箭頭切換。

沒有陰影。層次靠疊放：淺灰的資訊框疊在照片上、紅色圓形標籤壓在照片角落、整段淺灰底襯在白底上。

• 斜切是這個網站的招牌：大照片、節目卡片的照片、淺灰資訊框、節目區的灰底，都用 clip-path 切成左右高低不同的梯形，沒有圓角。

• 圓形只用在三種地方：紅色的標籤和徽章（100px）、黑色細框的圓形箭頭按鈕（66px、40px）、社群圖示。

• 一般按鈕（申請訂閱、取消訂閱）是直角的黑色細框。

• 左側直欄：80px 寬、白底、跟內容之間一條細線，放標誌、選單和四個 24px 的線條圖示。

• 圓形箭頭按鈕：透明底、1px 黑框的正圓，66px（大的）或 40px（小的），中間一個細線的 → 箭頭。

• 紅色圓形標籤：#D00B33 底、白字 12px／500，100px 的圓，壓在節目照片的左下角，一半在照片外。

• 會員徽章：#CB333B 底、白字 18px 的 100px 圓，兩行字（例如「購票優惠」）。

• 斜切資訊框：95% 不透明的淺灰（#F0F0F0），上下兩邊斜切，裡面是日期、26px 的標題、英文副標，右下角一個 66px 的圓形箭頭。

• 節目卡片：上面是斜切的照片加紅色圓形標籤，下面依序是日期（13px）、標題（22px／500）、類型（13px 灰字）。

• 輪播切換：一排四個節目名稱（13px，沒選到的是灰字），上面一條 1px 黑線，目前那一個上面換成 4px 的紅線。

• 暫停輪播按鈕：#1A1A1A 底、白字 14px、2px 紅框的直角按鈕，用來停下推薦節目和廣告的輪播。

• 訂閱電子報：只有底線的輸入框，後面兩顆 40px 高、1px 黑框的直角按鈕。

• 要用白底、接近黑的字，紅色只用在標誌、圓形標籤和進度線。

• 要把照片和色塊切成斜的梯形，不要用圓角。

• 段落標題要用空心的外框英文大字，配一行字距拉開的中文。

• 圓形只給標籤、徽章和箭頭按鈕；一般按鈕是直角細框。

• 不要加陰影，層次靠疊放。

• 不要把紅色當成大面積的底色。