CURATED · OPEN · FREE

Tana

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

productnotes

↓ Download design system (33 MB)Open in OpenDesign

Visit: https://tana.inc

📦 Browse pack contents →

Identity DNA

ProductivityMeetingsNotesAICollaborationWorkflow

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

Color

#0C0805Ink

#3A3A3AInk soft

#FBFBFBBG

#FFF2EFBG soft

#6A6A6AMuted

rgba(12,8,5,0.1)Line

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

Typography

didone-serif · humanist-sans · monospace

display72px · 400
headline48px · 400
body17px · 400
nav15px · 400

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 6px

md · 14px

lg · 20px

pill · 999px

Subtle 1px borders using rgba(12,8,5,0.1) for separation.

rgba(20, 22, 36, 0.1) 0px 6px 18px -12px · rgba(20, 22, 36, 0.28) 0px 40px 96px -28px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

120msmicro

160mssmall

400msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth opacity and transform transitions on hover and click.

Subtle opacity reduction or background color change. · Scale down slightly (transform) or opacity change.

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.

Voice & Don'ts

Tone Confident, professional, and slightly editorial.
Headlines Short, impactful statements, often using a single emphasized word in italics.
CTAs Direct and benefit-oriented, e.g., 'Start free trial'.

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.
Avoid: Excessive punctuation
Avoid: ALL CAPS for body text
Avoid: Overly technical jargon

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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