---
name: Morgen
description: "This site is an excellent example of a modern, premium SaaS application using a dark mode aesthetic to reduce eye strain and project a sophisticated, tech-forward brand identity."
version: alpha

colors:
  background: "#191A23"
  primary: "#FFFFFF"
  secondary: "#CBCCCC"
  tertiary: "#F3C26A"
  neutral: "#686A74"
  bg-soft: "#1E202B"
  bg-quiet: "#2A2E3C"
  muted-soft: "#444444"
  line: "rgba(203, 204, 204, 0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 700
    letterSpacing: "-1px"
  subheading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0.25px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 220px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A smart digital assistant that intelligently organizes your day*

## Colors

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

- **Background (`#191A23`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#CBCCCC`)** — uses `ink-soft` token
- **Accent (`#F3C26A`)** — uses `accent` token
- **Muted (`#686A74`)** — uses `muted` token
- **Borders (`rgba(203, 204, 204, 0.2)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

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

*Rhythm:* Consistent 4px baseline grid with vertical spacing multiples.

## Elevation & Depth

- 0px 0px 20px 5px rgba(0, 0, 0, 0.15)
- 0px 2px 32px 0px rgba(0, 0, 0, 0.16)
- Borders: Subtle 1px borders for separation on dark backgrounds.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 220px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```