舊振南

台南百年糕餅老店舊振南（1890 年創立）的品牌官網。首頁第一屏是滿版的照片：師傅的手把印著紅色店號的漢餅排上烤盤，中間一行白色的明體「百年真情・厚禮相待」，下面英文「Rich Flavor Rich Tradition」。左上角是直式的店徽和「JIU ZHEN NAN SINCE 1890」，右上角一個細線的「MENU」。

往下是米色的漸層底：每一段的標題是置中的明體中文（經典商品、企業禮贈），左右夾著淺色的括號裝飾，下面一行 Crimson Text 的英文（PRODUCTS）。段落之間穿插直排的短句（「由手入心，文化的滋味，在此成形。」），旁邊一個小小的紅色圓章。最下面是整片正紅的頁尾。

整體是「老店新做」：米色、金棕、正紅三個顏色，明體標題、直排文字、印章感的小圖案，按鈕是金棕色的膠囊。

• Canvas（#F9F3EF）：大部分段落的米白底，段落之間用 #F9EEE4（cream）、#EADED3（surface）做上下的漸層。

• Text／Heading（#4D4D4D）：標題和內文都是深灰，不用純黑。

• Primary（#A27127）：金棕色，「MORE」按鈕。

• Secondary（#9B7336）：比 primary 再暗一點的金棕，「了解更多」按鈕和右下角固定的「線上購物」花形徽章。

• Subtitle（#957F6C）：英文副標（PRODUCTS、ONE-YEAR-OLD CATCH）的灰棕色。

• Text muted（#ADADAD）：商品下面那行小英文（SOUVENIR）。

• Red（#C7000F）：正紅，整片的頁尾；漢餅上的店號和小圓章也是這個紅。

• Gold（#CC9A5D、#E6B074、#F3BD7D）、Sand（#C1AC93、#C5AB8F）：量到的淺金、沙色，用在少量的文字和框線，像標題旁的括號裝飾。

• Paper（#FFFFFF）：按鈕 hover 時的白底、頁尾和深色段落上的字。

標題用明體（Noto Serif TC），內文用黑體（Noto Sans TC），英文用 Crimson Text 的襯線字。

• 段落標題 38px／600、字距 3px，置中；下面英文 27px 的 Crimson Text，灰棕色。

• 直排的短句 20px／500 的明體，行高 60px、字距 9px，很疏。

• 商品分類（伴手禮品、喜餅）24px／400、字距 3px，下面一行 14px 的英文。

• 內文 16px、行高 32px（2 倍）、字距 3px，讀起來很鬆。

• 「MORE」按鈕是 16px／700 的 Crimson Text 大寫；「了解更多」是 17px 的黑體。

• 第一屏滿版照片，字置中。

• 內容寬度約 1200px 置中。

• 段落標題置中，下面是四欄的商品圖卡（經典商品、企業禮贈），圖片是圓角的直式照片，下面置中的分類名稱和英文。

• 段落之間留很大的空白，中間放一段直排的短句和小圓章，像書頁的留白。

• 寶寶抓周那段：左邊直排的分頁（抓周、手作、展覽），中間標題、說明和 MORE 按鈕，右邊一張大照片。

• 最新消息：深色的漢餅照片當底，左邊白色的「最新消息 NEWS」，右邊一則一則的日期和標題，用細線隔開。

• 右下角固定一個金棕色的花形「線上購物」徽章，上面一行小字 SHOPPING。

• 頁尾整片正紅，白字的客服資訊和社群圖示。

Responsive

• 375px 寬時，第一屏改成直式的照片，標題和英文改成兩行置中；左上店徽、右上 MENU。

• 「線上購物」徽章維持在右下角。

沒有陰影。層次靠米色的上下漸層、照片和疊在照片上的半透明深色。

• 商品照片和「線上購物」徽章是 20px 的圓角。

• 「MORE」是膠囊形，「了解更多」是 30px 圓角。

• 括號、圓章、店徽這些小裝飾都帶傳統的印章、雲紋感。

• MORE 按鈕：金棕（#A27127）底、白字 16px／700 的 Crimson Text 大寫，膠囊形，上下 16px、左右 24px 內距，高 56px；滑鼠移上去變成白底金棕字。

• 了解更多按鈕：金棕（#9B7336）底、白字 17px，30px 圓角、1px 同色框線，上下 7px、左右 14px；滑鼠移上去變白底金棕字。

• 線上購物徽章：右下角固定，金棕色的花形，裡面兩行白色明體「線上 購物」，上面一行小字 SHOPPING。

• 商品圖卡：圓角直式照片，下面 24px 的分類名稱和一行灰色小英文，沒有框和底色。

• 直排分頁：寶寶抓周段落左邊，直排的小字（手作、展覽），外面一條細框，目前那一個是金棕底白字的大字。

• 頁尾：正紅（#C7000F）底、白字，左邊客服資訊，右邊版權。

• 要用米色當底，金棕當按鈕，正紅只用在頁尾、店號和小圓章。

• 標題要用明體、置中，配一行灰棕色的英文襯線字。

• 要留大量空白，用直排的短句和小圓章點綴段落之間。

• 內文行高和字距要拉開（行高 2 倍、字距 3px）。

• 不要用純黑和純白的大色塊；字是深灰，底是米色。

• 不要加陰影和硬朗的直角按鈕；按鈕是膠囊或圓角。