---
name: Mem
description: "This site is an excellent example of a clean, warm, and approachable SaaS landing page that uses AI as a core value proposition."
version: alpha

colors:
  background: "#FCF8F1"
  primary: "#100F31"
  neutral: "#707070"
  line: "rgba(16, 15, 49, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-3.2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-1.28px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 60px
  pill: 100px

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

---

## Overview

A clean, warm, and intelligent SaaS landing page for a personal AI-powered note-taking application.

*An elegant, warm digital notebook that anticipates your needs.*

## Colors

Warm off-white background paired with deep navy typography for a calm, readable experience.

- **Background (`#FCF8F1`)** — uses `bg` token
- **Primary text (`#100F31`)** — uses `ink` token
- **Muted (`#707070`)** — uses `muted` token
- **Borders (`rgba(16, 15, 49, 0.15)`)** — uses `line` token

## Typography

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

## Layout

Centered container with asymmetric hero layout.

*Rhythm:* Consistent vertical rhythm driven by 4px base and generous padding.

## Elevation & Depth

- none
- Borders: 1px solid #100F31 on primary interactive elements

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 60px
- `pill`: 100px

## Components

- **button:** Pill-shaped outline buttons with 100px border-radius and dark navy stroke.
- **card:** Implied by circular image containers with soft shadows.
- **chip:** N/A
- **input:** Search bar with rounded corners and orange focus ring.
- **hero:** Split layout with large typography on the left and overlapping circular elements on the right.

## Do's and Don'ts

**Don't:**
- Don't use a white background — the screenshot shows a warm cream (#FCF8F1) background.
- Don't use a bright primary blue for buttons — the screenshot shows outline buttons with navy borders.
- Don't use a heavy sans-serif for headlines — the screenshot uses a lighter-weight humanist-sans.
- Don't use sharp corners on containers — the screenshot shows pill-shaped buttons and circular image elements.
- Don't use a dark mode as the primary interface — the screenshot clearly shows a light theme.
- Don't use centered text for long headlines — the screenshot shows left-aligned hero text.

---

## System Prompt (paste into AI agent)

```
Mem is a clean, warm, and AI-focused SaaS application for personal knowledge management. It uses a light cream background (#FCF8F1) paired with deep navy (#100F31) typography for a calm, readable experience. The design relies on a humanist-sans font family with generous spacing and pill-shaped UI components. Critical design rules: avoid white backgrounds, avoid harsh primary blue buttons, and use left-aligned, benefit-oriented headlines instead of centered text. The overall aesthetic is minimalist, friendly, and focused on clarity and ease of use.
```