精選 · 開放 · 免費

Hello Monday

為新創公司與產品部門打造數位與魔法體驗的創意代理商。

agencycreative

↓ 下載設計系統包 (5 MB)在 OpenDesign 中開啟

原站: https://hellomonday.com

📦 瀏覽包內檔案 →

設計氣質 DNA

創意代理商產品創新數位體驗協作

高端編輯雜誌與現代創意工作室的結合。

色彩

#DB7093Accent

#000000Ink

#2C2D2EInk soft

#FFFFFFBG

#F8F6F5BG soft

#CACACAMuted

rgba(0, 0, 0, 0.3)Line

強烈的黑白對比搭配單一活潑強調色，高度依賴留白與排版。

字型

transitional-serif · humanist-sans

display80px · 400
body-lg22px · 400
body-sm14px · 400

展示型排版採用經典過渡襯線體以達到最大衝擊力。 · 內文排版採用簡潔的人文無襯線體以確保高可讀性。 · 字重主要以常規（400）為主，輕細（300）僅少量用於細微的層次區分。

間距

4px

8px

16px

24px

32px

48px

64px

96px

垂直節奏透過充裕的內邊距與較大的外邊距建立，常用基礎單位的大倍數（例如：64px、71px）。

表面 (圓角 / 陰影 / 邊線)

sm · 0px

md · 0px

lg · 0px

pill · 999px

使用 1px solid rgba(0, 0, 0, 0.3) 作為細微的區塊分割線；無圓角。

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

簡潔的網格，包含清晰的主視覺區塊、大型水平分割線與充裕的留白。

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

內容區塊的淡入轉場效果 · 文字連結的滑鼠懸停狀態轉換

文字連結與互動元素有細微的底線或透明度變化。 · 立即回饋，無複雜的動態效果。

組件

button 以文字為基礎的行動呼籲，僅有簡潔的底部底線，無背景填充。
card 極簡的案例研究卡片，配有大型圖片與下方的粗體襯線文字。
hero 佔據整個視窗的巨大排版，搭配細膩的說明性圖示。

文案語氣與禁用清單

語氣自信、專業，又帶點 playful 的親近感。
標題風格 粗體、具衝擊力，常略帶 whimsical 或詩意。
按鈕文案 直接且以行動為導向，以簡潔的底線文字呈現。

不要在卡片或按鈕上使用圓角——畫面截圖顯示為銳利的 90 度角。
不要為表面添加陰影——畫面截圖顯示為平坦、簡潔的版面。
不要使用雜亂的色彩組合——畫面截圖顯示為嚴格的黑、白與單一強調色方案。
不要將導覽隱藏在複雜的大型選單中——畫面截圖顯示為極簡的漢堡選單圖示。
不要使用無襯線體作為主要標題——畫面截圖顯示為突出的過渡襯線展示字體。
不要用內容填滿每一個像素——畫面截圖顯示大量運用留白以創造焦點。
避免: 避免雜亂的版面或繁複的背景。
避免: 避免團隊版面使用圖庫照片；偏好自訂插圖。
避免: 避免過於複雜的導覽結構。

包內真實截圖

Hello Monday — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

擷取自真實頁面 · 真 computed styles

System Prompt

這是一個為 Hello Monday 設計的創意代理商作品集網站。設計風格極簡且高度編輯感，特點是巨大的過渡襯線展示字體與簡潔的人文無襯線內文字體之間的強烈對比。色彩以單色調（黑色 #000000 與白色 #FFFFFF）為主，搭配溫潤的米白色背景（#F8F6F5）與標誌性的活潑粉色強調色（#DB7093）。版面高度依賴充裕的留白、銳利的 90 度角與細分割線。關鍵設計限制包括：永遠使用銳利、非圓角的角；永遠使用充裕的垂直間距；永遠不要為團隊插圖使用圖庫照片。整體感受是精緻、自信且具質感的。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko