厳選・オープン・無料

Morgen

カレンダーとタスクを統合ビューで組み合わせる、AI主導の日次プランナー。

productivitysaas
Morgen のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

オリジナル: https://www.morgen.so

📦 パックの中身を見る →

01

デザイン DNA

AI搭載プランナー日次スケジュール管理カレンダー連携タスク管理

一日を知的に整理するスマートなデジタルアシスタント

02

カラー

#F3C26AAccent
#FFFFFFInk
#CBCCCCInk soft
#191A23BG
#1E202BBG soft
#2A2E3CBG quiet
#686A74Muted
rgba(203, 204, 204, 0.2)Line

高コントラストのホワイトテキストを活用した深いダーク背景と、プライマリアクションのための温かなガールデンイエロー。

03

タイポグラフィ

humanist-sans · monospace

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一貫した4pxベースライングリッドと垂直方向のスペーシング倍数。

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 12px
pill · 220px

ダーク背景上の区切りのための繊細な1pxボーダー。

0px 0px 20px 5px rgba(0, 0, 0, 0.15) · 0px 2px 32px 0px rgba(0, 0, 0, 0.16)

06

レイアウト

1200container
12columns
24pxgutter
768 / 1024breakpoints

標準的なセンタリングコンテンツレイアウト。ヒーローを分割し、フィーチャーセクションを交互に配置。

07

モーションとインタラクション

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI要素のための滑らかなフェードイン · ボタンとリンクのホバーステートトランジション

インタラクティブ要素の微妙なカラーシフトまたは明度変化。 · スケールやカラーチェンジによる即時フィードバック。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Morgen — 桌面首屏（hero）
桌面首屏（hero）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Morgen — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

Morgenは、カレンダーとタスクを単一のインテリジェントビューに統合するAI搭載の日次プランナーです。個人とチームのためのプレミアム生産性ツールとしてポジショニングされています。デザインDNAは、深いダークモード美学（#191A23）、高コントラストのホワイトタイポグラフィ、そしてプライマリアクションのための特徴的な温かなガールデンイエローのアクセント（#F3C26A）によって特徴づけられます。タイポグラフィはクリーンでモダンで、表示用と本文テキストの両方にヒューマニストサンセリフ書体カテゴリを使用し、読みやすさとフレンドリーでありながらプロフェッショナルなトーンを確保しています。重要なデザイン原則には、余裕のあるホワイトスペースの維持、丸みを帯びた角（ピルシェイプに至るまで）の使用、そして明るく派手なカラーや重く邪魔なシャドウの回避が含まれます。レイアウトはセンタリングされ構造化されており、情報を明確に提示するために分割画面や積み重ねられたセクションをよく使用します。モーションは意図的で機能的、滑らかなトランジションによるプレミアム感に焦点を当てています。

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

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

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

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