AAPD 產品設計學院

教產品設計、UI／UX 的線上學校 AAPD 產品設計學院的網站。頁首是半透明的米白長條：左邊黑色的「AαPD」字樣，中間「精選課程、2026 課程行事曆」這類小字導覽，右邊一顆黑色的「開始學習」。第一屏左邊是黑色超粗的標題「發揮設計影響力 成為更好的 產品人」，最後一個詞輪流換成橘色的「設計師」、橄欖綠的「研究員」、藍色的「產品人」；右邊是一個黑色的大「α」，一個手繪的人物從裡面探出身體，周圍飄著橘、綠、藍的小旗子標籤（設計影響力、初學者友善…）。

往下是米白底（#F8F8F5）：「探索共學的旅程」和一排白色的圓角卡片（核心技能樹培養…），統計數字（500+）、教練的人像卡片（米灰底、24px 圓角、名字和職稱的黑色小標籤）、學員好評的白卡片疊在一條粗的淡綠色曲線上、深藍黑底的「豐富的設計內容庫」配手繪插畫、白色圓角的電子報區塊（一個手繪的人物從左邊趴在框上）、淡綠底的 LINE 區塊，最後是深藍黑、24px 圓角的頁尾面板。

整體是親切、有活力的教育網站：米白底、深藍黑字，按鈕是 8px 小圓角的黑色或淺灰；卡片都是 24px 的大圓角；手繪的線條人物和橘、綠、藍、黃綠的點綴色讓畫面輕鬆。

• Canvas（#F8F8F5）：米白底；頁首是 80% 不透明的同一個顏色。

• Text（#101828）：深藍黑的標題和字；同一個顏色也是內容庫段落和頁尾面板的底（inverse）。#1D2939 是圓形箭頭按鈕。

• Primary（#000000）：黑色的主要按鈕（開始學習）、電子報的訂閱按鈕。

• Secondary（#E4E7EC）：淺灰的次要按鈕（2026 課程行事曆、訂閱電子報），字是 #475467。

• 點綴色：Orange（#ED7738、#F1A242）、Olive（#A0A742）、Blue（#306DB8）是標題裡換來換去的詞和小標；Lime（#D6EA74、#DEEF8B）、Sky（#8DCEFA）是幾張彩色卡片和好評區那條曲線；Sand（#D2C5BB）是教練人像的底。

• Line green（#67AF1F）：「馬上加入好友」按鈕；Mint（#F2FFE6）是 LINE 區塊的淡綠底。

• Text muted（#475467、#667085）、Border（#98A1B2）：說明文字和次要的灰。

中文用 Noto Sans TC，數字用 Prompt；字重很重，標題都是 800。

• 第一屏標題 56px／800、行高 1.2，三行，最後一個詞用點綴色。

• 段落標題 48px／800；LINE 區塊的標題 40px／800。

• 統計數字 48px／700 的 Prompt（500+）。

• 卡片標題 24px／700；段落說明 20px／400、行高 32px，灰色。

• 主要按鈕 16px／700；導覽和次要按鈕 14px／700。

• 內容寬度 1200px 置中。

• 頁首 80px 高，半透明米白，固定在最上面。

• 第一屏左右兩欄：左邊標題、說明、兩顆按鈕；右邊大的「α」插畫。

• 每段：左邊一行橘色小標、粗體大標題、灰色說明；下面是三欄的卡片，或可以左右滑的人像卡片（右邊一顆黑色圓形箭頭）。

• 段落之間用整段換底色（米白 → 深藍黑 → 米白 → 淡綠）和手繪的插畫。

• 頁尾是深藍黑、24px 圓角的大面板，不貼齊畫面邊緣；右上角一個橘色圓形的「α」。

Responsive

• 375px 寬時，頁首剩「α」標誌和選單；標題改成兩、三行置中，「開始學習」「2026 課程行事曆」兩顆按鈕滿寬上下排，插畫在下面。

卡片有很淡的陰影（0 4px 8px -2px，10% 黑，加一圈 0 0 4px -2px，6% 黑）；浮起來的元件用比較明顯的一種（2px 2px 16px 3px，12% 黑）。其他的層次靠整段換底色和插畫。

• 卡片、人像、頁尾面板是 24px 的大圓角；少數大的插畫框 40px。

• 按鈕、輸入框是 8px 的小圓角，不是膠囊。

• 箭頭按鈕是正圓；手繪插畫是不規則的粗線條和圓弧。

• 主要按鈕：黑底白字 16px／700，8px 圓角，高 48px，上下 12px、左右 24px（開始學習）。

• 次要按鈕：#E4E7EC 淺灰底、#475467 字 14px／700，8px 圓角，高 48px（2026 課程行事曆）。

• LINE 按鈕：#67AF1F 綠底白字，8px 圓角，高 48px。

• 卡片：白底、24px 圓角、32px 內距，很淡的陰影；有幾張是整張黃綠或天藍。

• 教練卡片：#D2C5BB 米灰底、24px 圓角，280×432，去背的人像，左下兩個小標籤（白底的名字、深色底的職稱）。

• 圓形箭頭：40px、#1D2939 底的正圓，白色箭頭。

• 輸入框：白底、1px 深色框、8px 圓角，高 52px；旁邊黑色的訂閱按鈕。

• 要用米白底和深藍黑字，橘、橄欖綠、藍、黃綠只當點綴和標題裡的重點詞。

• 標題要用很粗的 Noto Sans TC（800），重點詞換顏色。

• 卡片用 24px 的大圓角和很淡的陰影；按鈕用 8px 的小圓角。

• 用手繪的線條人物增加親切感，讓人物探出框外。

• 不要把點綴色大面積鋪滿；整段的底色只用米白、深藍黑和淡綠。