CURATED · OPEN · FREE

Morgen

An AI-driven daily planner that combines calendars and tasks into one unified view.

productivitysaas

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://www.morgen.so

📦 Browse pack contents →

Identity DNA

AI-powered plannerdaily schedulingcalendar integrationtask management

A smart digital assistant that intelligently organizes your day

Color

#F3C26AAccent

#FFFFFFInk

#CBCCCCInk soft

#191A23BG

#1E202BBG soft

#2A2E3CBG quiet

#686A74Muted

rgba(203, 204, 204, 0.2)Line

Deep dark background with high-contrast white text, utilizing a warm golden-yellow for primary actions.

Typography

humanist-sans · monospace

display56px · 700
heading48px · 700
subheading32px · 600
body16px · 400
caption14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px baseline grid with vertical spacing multiples.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 220px

Subtle 1px borders for separation on dark backgrounds.

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

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered content layout with a split hero and alternating feature sections.

Motion & Interaction

200msmicro

400mssmall

800msmedium

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

Smooth fade-ins for UI elements · Hover state transitions on buttons and links

Subtle color shifts or brightness changes on interactive elements. · Immediate feedback through scale or color change.

Components

button High-contrast pill-shaped CTA with golden-yellow background.
card Dark, subtly elevated containers with rounded corners for app mockups and features.
chip Small rounded badges for counts or tags.
input Dark-themed fields with subtle borders.
hero Centered headline with prominent CTA and large product mockup below.

Voice & Don'ts

Tone Empowering, helpful, and modern.
Headlines Action-oriented and benefit-driven, emphasizing AI and user control.
CTAs Direct and encouraging, focusing on getting started.

Don't use a bright white background — screenshot shows a deep, dark mode primary interface.
Don't use neon or highly saturated colors for accents — screenshot shows a warm, muted golden-yellow.
Don't use sharp, squared-off corners — screenshot shows consistently rounded corners on buttons and cards.
Don't use serif fonts for headlines — screenshot shows a clean, sans-serif typeface for all headings.
Don't use complex, multi-colored gradients for backgrounds — screenshot shows solid dark tones and subtle gradients.
Don't use heavy drop shadows — screenshot shows very subtle, soft shadows for elevation.
Avoid: Using overly technical jargon
Avoid: Relying on cold or impersonal language
Avoid: Creating visual clutter or unnecessary noise

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Morgen is an AI-powered daily planner that unifies calendars and tasks into a single, intelligent view. It is positioned as a premium productivity tool for individuals and teams. The design DNA is characterized by a deep, dark mode aesthetic (#191A23) with high-contrast white typography and a signature warm golden-yellow accent (#F3C26A) for primary actions. Typography is clean and modern, using humanist sans-serif categories for both display and body text to ensure readability and a friendly yet professional tone. Critical design principles include maintaining generous whitespace, using rounded corners (up to pill shapes), and avoiding bright, garish colors or heavy, intrusive shadows. The layout is centered and structured, often using split-screen or stacked sections to present information clearly. Motion is kept subtle and functional, focusing on smooth transitions for a premium feel.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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