厳選・オープン・無料

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

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

ボタンやリンクの滑らかなhoverトランジション · インタラクティブな状態のための繊細なbackground-colorの変化

要素のベースカラーに応じた、繊細なbackground-colorの暗軒化または明軒化。 · タクタイルフィードバックのための、わずかなスケールダウン効果を伴う即時応答。

08

コンポーネント

09

文体と禁止事項

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）をアクセントとしています。タイポグラフィは、ジオメトリックおよびヒューマニストsans-serifカテゴリのクリーンなミックスです。重要な制約：generousなwhitespaceと4pxグリッドを優先し、フレンドリーな雰囲気のために10-48pxの角丸を使用し、穏やかで生産性を重視するポジショニングを損なうような、攻撃的、ダーク、または雑然とした視覚的メタファーは避けてください。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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