精選 · 開放 · 免費

Sunsama

為現代專業人士打造的任務管理與每日規劃器。

productcalendar

Sunsama 網站截圖

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

原站: https://sunsama.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

平靜專注生產力規劃日常行程

一款寧靜的每日計畫工具，幫助你保持平靜與專注。

02

色彩

#FF891CAccent

#202228Ink

#4C4F56Ink soft

#FFFFFFBG

#FAFAFABG soft

#F6F5F1BG quiet

#767F86Muted

rgba(32,34,40,0.1)Line

乾淨的白色背景，搭配溫暖、高飽和度的橘色強調色與柔和的中性灰色。

03

字型

geometric-sans · humanist-sans

display48px · 500
h227px · 400
body16px · 400
small14px · 400

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

採用一致的 4px 基礎網格，搭配寬裕的垂直間距，營造通透的版面。

05

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

sm · 4px

md · 10px

lg · 40px

pill · 48px

1px solid rgba(32,34,40,0.1)，用於卡片和輸入框的細微邊界。

None: None · None: None

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

桌面版為寬內容容器，搭配左側重的主視覺區塊；行動版則轉換為中央對齊的內容堆疊。

07

動效與互動

200msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

按鈕與連結的平滑懸停過渡效果 · 互動狀態的細微背景色調變化

根據元件基礎色調，進行細微的背景色加深或變亮效果。 · 立即回應，並帶有輕微的縮小效果以提供觸覺回饋。

08

組件

button 藥丸形狀的主要按鈕，採用明亮的橘色背景與白色文字。
card 帶有輕微陰影的白色或柔和灰色卡片，擁有寬裕的圓角（10px 至 40px）。
chip 小型、圓角的標籤或標示，帶有細微邊框或淺色背景。
input 簡潔的輸入框，帶有細微邊框，著重於可讀性。
hero 大型分割區塊，採用粗體排版與產品截圖，置於柔和背景上。

09

文案語氣與禁用清單

語氣平靜、專業且令人安心。
標題風格 簡短、陳述性且以效益為導向（例如：「從容開始，專注前行」）。
按鈕文案 直接且無壓力（例如：「免費試用」、「14 天免費體驗」）。

避免使用侵略性、高對比的霓虹色彩——截圖顯示為柔和的白色、灰色與溫暖橘色調。
避免在主要元件上使用銳利的方形圓角——截圖顯示為 10px 至 40px 的圓角。
避免使用密集、長篇的文字區塊——截圖顯示為寬裕的間距與簡潔的文案。
避免使用裝飾性、高度風格化的展示字體——截圖顯示為乾淨的幾何/人文主義無襯線字體系統。
避免使用深色模式或高對比的黑色背景——截圖顯示為主要為白色與淺灰色的表面。
避免使用複雜、厚重的投影——截圖顯示為非常細微、低不透明度的陰影以營造深度。
避免: 過於技術性的術語
避免: 侵略性的銷售用語
避免: 陰暗或雜亂的視覺隱喻

10

包內真實截圖

Sunsama — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sunsama — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

此網站是為 Sunsama 設計，一款為現代專業人士打造的平靜、專注的每日計畫工具。它採用明亮、乾淨的白色 (#FFFFFF) 與柔和的灰色 (#FAFAFA) 色板，搭配活潑的橘色 (#FF891C) 強調色。字體是幾何與人文主義無襯線字體類別的乾淨混合。關鍵限制：優先使用寬裕的留白與 4px 網格，採用 10-48px 圓角以營造友善感，並避免任何可能破壞平靜、生產力定位的侵略性、陰暗或雜亂視覺隱喻。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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