---
name: Akiflow
description: "A strong example of modern SaaS design that balances bold branding with a clean, uncluttered user interface."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#212833"
  secondary: "#323B4A"
  tertiary: "#8B00FF"
  neutral: "#5E687B"
  bg-soft: "#F8FAFC"
  bg-quiet: "#EEF3F8"
  muted-soft: "#8B94A3"
  line: "rgba(0, 0, 0, 0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  display-sm:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 999px

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

---

## Overview

A unified task and calendar app that uses AI to help you save time.

*A smart, clean digital planner that combines your schedule and to-do list into one AI-powered view.*

## Colors

A clean, white canvas with a high-contrast, high-chroma purple accent used sparingly for primary actions and highlights.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#212833`)** — uses `ink` token
- **Secondary text (`#323B4A`)** — uses `ink-soft` token
- **Accent (`#8B00FF`)** — uses `accent` token
- **Muted (`#5E687B`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.08)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use Geometric Sans for impactful display headlines.
- Use Humanist Sans for clear, readable body text.
- Maintain tight letter-spacing for large headings.

## Layout

A centered, single-column layout for the hero section, transitioning to a multi-column layout for feature grids.

*Rhythm:* Generous whitespace around primary elements to create a focused, uncluttered feel.

## Elevation & Depth

- 0px 1px 20px rgba(0, 0, 0, 0.08)
- 0px 1px 6px rgba(0, 0, 0, 0.16)
- 0px 1px 16px rgba(144, 0, 255, 0.2)
- Borders: Subtle 1px solid borders using a very low-opacity black.

## Shapes

- `sm`: 6px
- `md`: 10px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** A pill-shaped primary button with a solid purple background and white text, featuring a subtle glow effect on hover.
- **card:** A clean white card with a very subtle drop shadow and a large border-radius, often used to showcase product UI.
- **chip:** Small, rounded rectangular badges for labels or tags.
- **input:** A clean, borderless or subtly bordered input field with a light gray background.
- **hero:** A massive, centered headline followed by a sub-headline, a primary CTA button, and a large product screenshot.

## Do's and Don'ts

**Don't:**
- Don't use dark mode — the screenshot shows a predominantly white background.
- Don't use serif fonts — the screenshot shows clean, geometric and humanist sans-serif typography.
- Don't use overly complex gradients — the screenshot shows solid colors and very subtle, almost imperceptible gradients in specific areas.
- Don't use small, cramped layouts — the screenshot shows generous spacing and large, impactful typography.
- Don't use clashing colors — the screenshot shows a disciplined palette of white, dark gray, and a single purple accent.
- Don't use harsh, square corners — the screenshot shows a consistent use of rounded corners on buttons, cards, and UI elements.

---

## System Prompt (paste into AI agent)

```
Akiflow is a productivity SaaS for tasks and calendars, powered by AI. The design is clean and professional, using a white background (#FFFFFF) with a dark ink (#212833) for text. The primary accent is a high-chroma purple (#8B00FF). Typography is a mix of geometric and humanist sans-serifs. Key donts: avoid dark mode, don't use serif fonts, and avoid cluttered layouts with harsh corners. The overall feel is efficient, modern, and focused.
```