---
name: Tana
description: "Worth including as a prime example of blending editorial elegance (serif headlines) with modern SaaS utility (clean UI, rounded cards)."
version: alpha

colors:
  background: "#FBFBFB"
  primary: "#0C0805"
  secondary: "#3A3A3A"
  neutral: "#6A6A6A"
  bg-soft: "#FFF2EF"
  line: "rgba(12,8,5,0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 72px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-2.16px"
  headline:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.44px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  nav:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 14px
  lg: 20px
  pill: 999px

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

---

## Overview

A premium productivity tool that uses editorial typography and warm, human photography to make meetings feel like active work.

*A sleek, high-end productivity application that blends classic editorial typography with modern app UI patterns.*

## Colors

Warm, high-contrast monochrome palette with soft peach accents, prioritizing readability and premium feel.

- **Background (`#FBFBFB`)** — uses `bg` token
- **Primary text (`#0C0805`)** — uses `ink` token
- **Secondary text (`#3A3A3A`)** — uses `ink-soft` token
- **Muted (`#6A6A6A`)** — uses `muted` token
- **Borders (`rgba(12,8,5,0.1)`)** — uses `line` token

## Typography

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

- Use Didone Serif (Source Serif 4) for large display text and headlines.
- Use Humanist Sans (Inter) for body copy, UI elements, and navigation.
- Maintain tight negative letter spacing for display text.

## Layout

Centered single-column layout for hero sections, expanding to grid for content.

*Rhythm:* Use 4px base increments for consistent rhythm, ensuring generous padding (24px-48px) in cards and sections.

## Elevation & Depth

- rgba(20, 22, 36, 0.1) 0px 6px 18px -12px
- rgba(20, 22, 36, 0.28) 0px 40px 96px -28px
- Borders: Subtle 1px borders using rgba(12,8,5,0.1) for separation.

## Shapes

- `sm`: 6px
- `md`: 14px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** High-contrast black rounded pill buttons for primary actions, transparent or light gray for secondary.
- **card:** Soft, rounded cards with large border-radius (14px-20px), often containing media or complex UI previews.
- **chip:** Small, rounded pill-shaped tags or status indicators.
- **input:** Subtle, clean input fields with minimal borders.
- **hero:** Full-width centered headline with generous vertical spacing and soft background gradients.

## Do's and Don'ts

**Don't:**
- Don't use vibrant, high-chroma accent colors — screenshot shows a mostly monochrome palette with warm, soft accents.
- Don't use a geometric or technical sans-serif for headlines — screenshot shows elegant serif typography.
- Don't use dark mode as the default — screenshot shows a light, off-white background (#FBFBFB).
- Don't use sharp, square corners — screenshot shows large border-radii (14px, 20px) on all cards and buttons.
- Don't clutter the layout with dense grids — screenshot shows generous whitespace and a focused, centered hero.
- Don't use playful or cartoonish illustrations — screenshot relies on high-quality, cinematic photography.

---

## System Prompt (paste into AI agent)

```
Tana is a premium productivity tool that blends classic editorial design with modern app UI. The visual system uses a didone-serif (Source Serif 4) for large display headlines and a humanist-sans (Inter) for all body copy and UI elements. The primary color palette is a high-contrast monochrome (ink #0C0805 on off-white #FBFBFB) with a soft peach/warm accent (#FFF2EF) in specific sections. Critical constraints: Never use vibrant, high-chroma accent colors; always use soft, rounded corners (14px-20px radius); and ensure generous vertical whitespace (24px-96px) to maintain a premium, editorial feel. The tone is confident and professional, using short, impactful headlines with occasional italic emphasis.
```