少年報導者 The Reporter for Kids

《報導者》做給國小、國中孩子看的新聞網站「少年報導者」。整站是柔和、可愛的：最上面淺灰、帶一點紙張紋理的底，頁首左邊粉紅色的標誌和「理解世界 × 參與未來」，右邊兩顆小膠囊（加入我們、訂閱）、搜尋和會員圖示；下面一排用細直線隔開的分類導覽。

首頁第一屏是一張超大圓角（96px）的白色卡片輪播，左邊照片、右邊專題的標題和粉紅框的「了解更多」，左右兩顆粉紅底的圓形箭頭；卡片下緣一條粉紅、米色的波浪，上面站著藍色和黃色的書本小人。往下是米色（#FFF9EC）的底：編輯推薦、最新文章、一行灰色的 hashtag 跑馬燈、多媒體、校園、Podcast、教案，每段都是三欄 30px 圓角的白色卡片，標題前有一個手繪感的小圖示，最後一顆粉紅框的「看全部」。

整體是粉紅、白、米色，配黃、藍的插畫角色；所有東西都很圓：膠囊按鈕、大圓角卡片、圓形箭頭。

• Primary（#F76977）：珊瑚粉紅，少年報導者的主色。實心按鈕（訂閱、贊助我們、我想關心）、白色按鈕的 2px 框、圓形箭頭、頁尾最下面那條、標誌都用它。

• Canvas（#FFFFFF）：卡片和頁尾的白；最上面一段是帶紙張紋理的淺灰。

• Cream（#FFF9EC）：首頁中段以後的米色底，跟波浪接在一起。

• Text（#232323）：標題和內文的深灰；白色按鈕上的字是更深、偏藍的 #101828。

• Text muted（#8E8E8E）、Text faint（#A3A3A3）：卡片摘要和日期的灰字。

• Surface（#EAEAEA）：分類標籤（生活、民俗）和 hashtag 的淺灰底。

• 插畫的黃、藍：書本小人、標題前的小圖示用的顏色，量測時沒有收進色票，介面上不拿來當色塊。

段落標題和專題標題用 swei（一套中文字型，Google Fonts 沒有），其他都用 Noto Sans TC。字重偏重，內文就是 500。

• 段落標題 40px／700、行高 64px、字距 2px（編輯推薦、最新文章）。

• 第一屏專題標題 32px／700、字距 1.6px；副標用 Noto Sans TC 的粗體。

• 編輯推薦的編號（01、02）28px／700。

• 卡片標題 22px／700、行高 35.2px、兩行；最新文章的列表標題小一點，18px／700。摘要 16px／500、行高 1.6、字距 0.8px，灰色。

• 分類標籤和日期 14px／500；按鈕 16px／700，頁首的小按鈕 14px／700。

• 內容寬度 1200px 置中。

• 頁首兩層：上面標誌、標語和右邊的按鈕圖示，下面一排平均分開的分類（最新、專題、新聞、多媒體、校園、Podcast、教案），用細直線隔開，上下各一條灰線。

• 第一屏：白色的大圓角卡片置中，左右兩側露出前後兩張的邊，粉紅的圓形箭頭壓在卡片兩邊。

• 每一段：置中的標題（前面一個小插畫圖示），三欄卡片，最後置中一顆「看全部」。

• 右下角固定一個粉紅色的貓頭圖示。

• 頁尾：白底，左邊標誌、介紹和「贊助我們」，右邊兩欄連結；最下面一條粉紅色的長條放版權和社群圖示。

Responsive

• 375px 寬時，頁首只剩標誌、會員圖示和三色（藍、粉紅、黃）的選單按鈕。

• 第一屏的卡片改成上面照片、下面標題，左右箭頭壓在照片兩邊；卡片改成一欄。

陰影很淡：卡片有一層幾乎看不出來的陰影（0 4px 10px，5% 黑）；浮起來的面板（例如提示框）用比較深的（0 25px 50px -12px，25% 黑）。層次主要靠白卡片放在米色底上。

• 全站都是圓的：按鈕、標籤、hashtag 是膠囊形；卡片 30px 圓角；第一屏的大卡片 96px 圓角；箭頭是正圓。

• 區塊之間用手繪感的波浪曲線接起來，不用直線。

• 只有很小的圖示按鈕用 4px 圓角。

• 主要按鈕：#F76977 粉紅底、白字 16px／700，膠囊形，上下 8px、左右 20px，高 44px（贊助我們、我想關心）。

• 次要按鈕：白底、2px 粉紅框、深色字 16px／700，膠囊形（了解更多、看全部、跳過）。

• 頁首按鈕：小的膠囊，14px／700，高 32px，「訂閱」是粉紅底白字，「加入我們」是白底粉紅框。

• 圓形箭頭：輪播的是粉紅底白箭頭；段落的上一頁下一頁是 56px、白底、2px 粉紅框的圓。

• 分類標籤：#EAEAEA 淺灰底、14px／500 的字，30px 圓角，上下 6px、左右 10px。

• 卡片：白底、30px 圓角、很淡的陰影，341×463；上面圓角照片，下面分類標籤和日期一行、兩行的粗體標題、三行的灰色摘要。

• 第一屏的大卡片：白底、96px 圓角，上下 96px、左右 56px 的內距。

• 頁尾長條：粉紅底、白色 12px 的字和社群圖示。

• 要用珊瑚粉紅當主色，白和米色當底，黃、藍只用在插畫角色。

• 要讓所有東西都圓：膠囊按鈕、大圓角卡片、圓形箭頭、波浪的分界。

• 標題要用 swei 的粗體，內文用 Noto Sans TC 500，讓小朋友容易讀。

• 次要按鈕用白底粉紅框，主要按鈕才用實心粉紅。

• 陰影要非常淡，不要用深色的陰影。

• 不要用直角和硬朗的線條；這個網站是寫給孩子看的。