阿忠個人品牌的視覺設計系統。當使用者要產出「強強滾工作室 / 強強滾一家 / 夏日只想躺在家」的視覺物件(網頁、簡報、IG 貼文、Reels 封面、podcast cover、提案 PDF、Notion 頁面樣式)時觸發。自動套用對應品牌的色票、字型、卡片樣式,避免 AI 感的套版輸出。
做設計的時候要讓人「一看就知道是阿忠做的」,而不是 ChatGPT / Midjourney 感。三條金律:
2~3px solid 黑色邊框 + 3~6px offset 無模糊陰影(Brutalist / Maxima Therapy 血統),絕不用 box-shadow: 0 4px 12px rgba(0,0,0,0.1) 這種軟糊陰影。border-radius: 999px(藥丸),資訊卡才用 12~16px 圓角。避免所有元件一律圓角的「Material 塑膠感」。#F5F1E4(奶油),不要 #FFFFFF。純白會讓亮彩色看起來廉價。用在:index.html 戰情表、提案文件、工作室網站、B2B 合作簡報
| 角色 | 變數 | Hex |
|---|
| 底色 | --cream | #F5F1E4 |
| 文字 / 邊框 | --ink | #1a1a1a |
| 主強調(按鈕、高亮) | --orange | #E8441E |
| 進行中 / 成功 | --green | #1BB24B |
| 連結 / 次要強調 | --blue | #1F3FD4 |
| 品牌 / 重點事件 | --pink | #E6298A |
| 等待 / 警示 | --yellow | #F7C93A |
| 輔助灰 | --gray | #9ca3af |
| 淡灰底 | --gray-soft | #e5e5e5 |
配色原則:一個畫面最多用 2 個主色 + 黑 + 奶油。不要 rainbow。
/* 標題 */
font-family: 'Anton', 'Noto Sans TC', sans-serif; /* 英數粗大 + 中文黑體 */
/* 內文 / UI */
font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
卡片