---
version: alpha
name: Tana
description: An AI-native workspace where Source Serif 4's editorial weight anchors a warm off-white canvas, soft terracotta gradients signal intelligence, and restrained Inter UI keeps the chrome from competing with thought.

colors:
  # Canvas — warm near-white, slightly cream. CSS var: (manifest themeColor) #fbfbfb
  background: "#fbfbfb"
  surface: "#ffffff"
  surface-muted: "#f5f3f0"  # warm section alternation, barely perceptible

  # Ink — a very dark warm brown, not pure black
  ink: "#0c0805"            # primary text, near-black with warm undertone
  ink-secondary: "#3a3a3a"  # secondary labels, nav links
  ink-muted: "#6a6a6a"      # captions, metadata, muted labels (CSS --color-ink-faint #999999 is faintest)
  ink-faint: "#999999"      # CSS var: --color-ink-faint
  ink-faintest: "#cccccc"   # CSS var: --color-ink-faintest

  # Brand accent — soft terracotta/dusty rose, Tana's signature warmth
  primary: "#d88a82"        # warm terracotta — accent color seen in hero gradient + pill hover
  primary-container: "#f2d4d0"  # light terracotta tint for chip/badge fills
  on-primary: "#0c0805"

  # Canvas accent — the peach-cream hero gradient color
  accent-peach: "#dcae87"   # was rgba(220,174,135,0.42) over #fbfbfb — flattened over warm white

  # Interaction
  hover-overlay: "#f0ece9"  # was color(srgb …/0.06) over #fbfbfb — subtle hover fill
  text-hover: "#0e0a06"     # ink-darkened on hover (from interactiveDeltas)

  # Borders — brand-tinted near-transparent dividers
  border: "#e8e4e0"         # was color(srgb 0.047 0.031 0.020 / 0.12) over #fbfbfb — flattened
  border-light: "#efefef"   # lighter dividers, internal panels

  # Shadow tint — blue-leaning dark per shadow rgba(20,22,36,…)
  shadow-soft: "#141624"    # was rgba(20,22,36) — used as shadow base color, kept as opaque key

  # Paper tone — CSS var: --color-paper-dark #c6c6c6 (sidebar/chrome border)
  paper-dark: "#c6c6c6"

typography:
  display-hero:
    fontFamily: "Source Serif 4, Georgia, ui-serif, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -3.24px
  display:
    fontFamily: "Source Serif 4, Georgia, ui-serif, serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -2.7px
  heading-section:
    fontFamily: "Source Serif 4, Georgia, ui-serif, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -2.16px
  heading-sub:
    fontFamily: "Source Serif 4, Georgia, ui-serif, serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.17px
  body-large:
    fontFamily: "Source Serif 4, Georgia, ui-serif, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.99px
  body:
    fontFamily: "Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15px
  nav-link:
    fontFamily: "Inter, Inter Fallback, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.075px
  button-ui:
    fontFamily: "Inter, Inter Fallback, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Inter Fallback, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Inter Fallback, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-allcaps:
    fontFamily: "Inter, Inter Fallback, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.88px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 44px
  2xl: 56px
  3xl: 96px
  4xl: 152px
  5xl: 192px

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 18px
  xl: 20px
  pill: 9999px

components:
  # Primary dark CTA — "Download" dark pill
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "#000000"
    textColor: "{colors.surface}"

  # Secondary ghost pill — "Try Tana→" style, used on dark sections
  button-ghost:
    backgroundColor: "{colors.hover-overlay}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 14px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"

  # Nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  # Content cards — the floating demo panels with rounded corners
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: 1px solid {colors.border}
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  # Pill / badge — meeting toolbar, status chips
  badge:
    backgroundColor: "{colors.hover-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-accent:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Form input (Tana app-side UI inferred from app patterns)
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    border: 1px solid {colors.border}
  input-focus:
    border: 1px solid {colors.ink-secondary}
    backgroundColor: "{colors.surface}"
---

# Tana Design System

## Overview

Tana's design language makes a firm statement about what kind of productivity tool it is: not a spartan command-line workspace, but something closer to a reading room. The primary canvas (`{colors.background}`) is a warm off-white borrowed from aged paper — barely distinguishable from pure white in isolation, but unmistakably softer in context. The primary display typeface, Source Serif 4, appears at sizes up to 72px with aggressive negative tracking (-3.24px at the hero), giving headlines an editorial confidence that signals depth over speed. This is a tool built for thinkers, not dashers.

The color system is strikingly restrained. Beyond the near-black text (`{colors.ink}`), only a soft terracotta-rose (`{colors.primary}`) and a warm peach-cream gradient (`{colors.accent-peach}`) carry any brand color at all. The peach gradient appears in the hero section as a diffuse diagonal bloom, evoking warmth without being precious. There is no bright blue primary, no saturated green CTA — the palest warmth of unbleached paper is the dominant chromatic experience. This positions Tana in sharp contrast to the cold efficiency of Linear or the stark white of Notion, leaning instead toward the analog calm of a well-organized desk.

The interplay between the serif display family and the Inter UI system (for navigation, labels, captions, and buttons) creates a two-register design language: the content layer speaks in Source Serif 4 — weighted, considered, long-form — while the chrome speaks in Inter — precise, compact, instrumental. This split is functionally honest: the tool's value is in the structured data and AI-generated synthesis, and the interface frames that value without competing with it.

**Key Characteristics:**
- Source Serif 4 at weight 500 for all display headings, tight-tracked (-3.24px at 72px) for editorial density
- Near-black warm ink (`{colors.ink}`) with a subtle brown undertone — not pure black, not cool gray
- Warm off-white canvas (`{colors.background}` `#fbfbfb`) — the manifest theme color, consistent across all contexts
- Soft terracotta accent (`{colors.primary}`) used sparingly — pill highlights, hover states, accent chips only
- Peach-cream diagonal gradient as the hero atmosphere — warmth without saturation
- Inter for all UI chrome: navigation links, buttons, labels, captions — weight 400-500
- Negative letter-spacing throughout the serif scale: -3.24px at 72px down to -0.99px at 22px
- Border radius system emphasizing rounded corners: 12-20px on interactive elements, 9999px pill on chips
- Multi-layer shadow stacks (base color `{colors.shadow-soft}`) for floating card depth
- Motion is fast and consistent: 0.12s ease dominates button/overlay transitions, 0.15-0.16s for links
- CSS custom property naming reveals semantic intent: `--color-ink-faint`, `--color-ink-faintest`, `--color-paper-dark`
- `{typography.caption-allcaps}` at 0.88px letter-spacing signals metadata-level label hierarchy

## Colors

### Primary Canvas
- **Warm Off-White** (`{colors.background}`): The page canvas and manifest theme color. Source Serif 4 and photography float directly on this ground.
- **Pure White** (`{colors.surface}`): Elevated panels and cards that float above the background — the separation is subtle by design.
- **Muted Warm** (`{colors.surface-muted}`): Section bands, hover fills, very light alternation in content groups.

### Ink Scale
- **Deep Warm Brown** (`{colors.ink}`): The darkest text. All headings, body copy, and primary UI labels. The brown undertone is intentional — it reads as black but without cold neutrality.
- **Charcoal** (`{colors.ink-secondary}`): Secondary nav links, card subheadings. Demoted one step in the hierarchy.
- **Mid Gray** (`{colors.ink-muted}`): Captions, metadata, supporting descriptions. CSS `--color-ink-faint` (#999999) goes one step further.
- **Faint / Faintest** (`{colors.ink-faint}` / `{colors.ink-faintest}`): Placeholders, decorative text, disabled states.

### Brand Accent
- **Terracotta Rose** (`{colors.primary}`): Tana's warmth token. Applied to hover-state action highlights, active pill chips, and accent UI elements. The hero gradient's deepest bloom color.
- **Peach Container** (`{colors.primary-container}`): Fills accent badges and chips, a lighter terracotta tint that stays within the warm palette.
- **Gradient Peach** (`{colors.accent-peach}`): Flattened approximation of the hero diagonal gradient mid-tone — warm amber used as an atmospheric layer.

### Structure
- **Brand Border** (`{colors.border}`): Subtle warm-tinted 1px dividers on cards, panels, and interactive containers. Was `color(srgb 0.047 0.031 0.020 / 0.12)` — flattened over the `#fbfbfb` canvas.
- **Light Border** (`{colors.border-light}`): Internal panel dividers, the faintest structural marks.
- **Paper Dark** (`{colors.paper-dark}`): CSS `--color-paper-dark` — a mid-gray used for chrome separators and sidebar boundaries.
- **Shadow Base** (`{colors.shadow-soft}`): The shadow color is `rgba(20,22,36,…)` — a slightly blue-dark that departs from warm neutrality, adding depth without warmth.

## Typography

### Font Family
- **Display (Serif)**: `Source Serif 4`, self-hosted as a variable Roman + Italic woff2. Fallbacks: `Georgia, ui-serif, serif`. The variable axis allows weight to shift without loading additional files.
- **UI (Sans)**: `Inter`, self-hosted as `InterVariable.woff2`. Fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serif`. The variable axis covers weight 100-900.
- No Google Fonts CDN calls — both families are self-hosted, embedded in Next.js build output.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Hero headline, above-the-fold campaign headings |
| `display` | Major section headings — "Connect to the rest of your work" scale |
| `heading-section` | Feature section headings, 48px editorial moments |
| `heading-sub` | Sub-feature heads, card titles in marketing sections |
| `body-large` | Pullquotes, featured body paragraphs in serif |
| `body` | Standard body copy in Inter — descriptions, prose |
| `body-medium` | Navigation prose, secondary links, footer text |
| `nav-link` | Top navigation anchors, active state labels |
| `button-ui` | CTA button labels — the "Download" pill |
| `label` | Meeting toolbar pills, action chips, UI micro-labels |
| `caption` | Metadata, timestamps, fine-print explanations |
| `caption-allcaps` | All-caps category labels at 0.88px tracking |

### Principles
- Negative tracking tightens with size: the largest headlines compress hardest (-3.24px at 72px), body text carries neutral or minimal tracking
- Source Serif 4 is the content voice; Inter is the chrome voice — they never cross-contaminate (no Inter in hero, no serif in navigation)
- Weight 500 throughout the serif scale signals authority without heaviness; 400 in body Inter signals approachability
- The variable font setup means no FOUT penalty — the fallback (Source Serif 4 Fallback, Inter Fallback) is matched to the metric box of the target font

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Tana's spacing is generous at the section level — 96px, 152px, and 192px section rhythms create the breathing room that makes the editorial serif type feel unhurried. At the component level, 8px and 4px units govern the internal density of pills, labels, and navigation chrome.

### Grid & Container
- Maximum content width: approximately 1280px (the 1280px breakpoint marks the large-desktop boundary)
- Desktop marketing layout: centered column with lateral padding, asymmetric sections where the demo UI crops to the right
- 18 breakpoints from 98px to 1640px, reflecting a complex responsive matrix for the app-embedded demo panels

### Whitespace Philosophy
- Section margins are dramatically large — the 192px vertical spacing between major page sections communicates unhurried thought over compressed features
- Component-level spacing (8-24px) is efficient, creating dense but readable UI chrome
- The contrast between macro-generous and micro-tight spacing is intentional: breathe between ideas, work precisely within them

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, section backgrounds, inline text |
| Subtle (Level 1) | `rgba(20,22,36,0.04) 0px 1px 2px, rgba(20,22,36,0.10) 0px 6px 18px -12px` | Standard content cards, chip components |
| Card (Level 2) | `rgba(20,22,36,0.18) 0px 6px 16px -8px, rgba(20,22,36,0.28) 0px 40px 96px -28px` | Elevated panels, floating demo screenshots |
| Deep (Level 3) | `rgba(20,22,36,0.35) 0px 3.9px 9.75px, rgba(20,22,36,0.62) 0px 27.3px 54.6px -11.7px` | Application window mockups, modals |
| Dialog (Level 4+) | `rgba(20,22,36,0.49) 0px 5.5px 13.75px, rgba(20,22,36,0.88) 0px 38.5px 77px -16.5px` | Deepest floating overlays in app UI |
| Focus Ring | `0px 0px 0px 2px {colors.ink}` | Keyboard focus on buttons and inputs |

**Shadow Philosophy**: Tana's shadow system uses a proprietary recipe — a cool blue-dark (`rgba(20,22,36,…)`) rather than the warm brown ink color. This creates a psychologically neutral depth, ensuring shadows read as spatial recession rather than as part of the warm chromatic system. The multi-layer stacks pair a short sharp shadow with a long diffuse shadow, creating dimension without visible falloff at the edge. The resulting floating cards appear to sit above the page plane without drama — weight is implied, not announced.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Divider lines, full-width image crops |
| `sm` | 6px | Small inline tags, tight code snippets |
| `md` | 12px | Modals, dropdown panels, standard inputs |
| `lg` | 18px | Content cards, elevated demo panels |
| `xl` | 20px | Primary CTA buttons, prominent UI controls |
| `pill` | 9999px | Navigation pills, meeting toolbar chips, "Try Tana→" links |

Tana avoids sharp corners almost entirely. Even small elements (6px) carry visible rounding. The two most visible shapes — the primary download button (20px) and the status pill badges (9999px) — represent the two poles of the system: generous rounding for UI controls, full-pill for ephemeral chips and tags. No element on the marketing site uses 0px radius for intentional visual effect.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — The "Download" CTA: ink-dark fill (`{colors.ink}`), white text, 20px radius, 14px 28px padding. On hover, shifts to pure black. The dark button on the warm canvas creates maximum contrast without using a chromatic accent color.
- **`button-ghost`** — The "Try Tana→" pill: transparent fill with a 1px border, 9999px radius, lighter text. Used on dark hero sections as a secondary action that fades in beside the primary.

### Cards

Tana uses cards at two elevations: standard (`{rounded.lg}`, thin border, subtle shadow) and elevated (`{rounded.xl}`, deeper multi-layer shadow). The elevated cards are the demo UI screenshots — they float above the canvas as if screen-captured and placed in space, reinforcing the "AI captures your work context" narrative.

### Navigation

The top navigation is transparent on page load, gaining a `{colors.background}` fill with backdrop blur as the user scrolls. Nav links use `{typography.nav-link}` — medium-weight Inter at 15px. On hover, links transition opacity (0.16s ease) rather than changing color, a subtlety that keeps the warm palette from flickering.

### Badges / Tags

Meeting toolbar pills use the `badge` component — a small Inter 500 label in a neutral-fill rounded container. Accent chips use `badge-accent` with the `{colors.primary-container}` terracotta tint. Both styles use `{rounded.pill}` geometry.

### Inputs

Standard inputs follow the app-side pattern: clean white fill, 1px warm border, 12px radius, 8px 12px padding. Focus states tighten the border from `{colors.border}` to `{colors.ink-secondary}` — no color-shift accent, just a contrast step in the neutral scale.

## Do's and Don'ts

### Do
- Use Source Serif 4 (`{typography.display-hero}`, `{typography.display}`) for all heading-level content — the serif is the content voice and must dominate the editorial register
- Apply negative letter-spacing throughout the serif scale — tighter at larger sizes, releasing gradually toward body text
- Let `{colors.background}` breathe: match the manifest `#fbfbfb` warmth across section fills, avoiding pure white `#ffffff` for full-width backgrounds
- Use `{colors.primary}` terracotta sparingly — one accent hover state or one chip per view, not multiple simultaneous uses
- Pair the CTA button's dark fill (`{colors.ink}`) with generous padding (14px 28px) and 20px radius — the shape communicates premium before the label is read
- Apply the multi-layer shadow recipe for any card or panel that floats — the specific `rgba(20,22,36,…)` cool-dark base is required for the depth to read as spatial recession
- Use `{typography.caption-allcaps}` at 0.88px tracking for true metadata labels — never apply all-caps treatment to body or heading tokens

### Don't
- Don't introduce bright blue, green, or purple accents — the terracotta-warm system has no room for cool saturated hues
- Don't use Inter for display-level headings or section titles — the dual-register distinction between serif content and sans chrome is structural
- Don't apply `{rounded.none}` (0px) for visual effect on any marketing component — sharpness contradicts the rounded approachability signal
- Don't override the warm ink (`{colors.ink}`) with pure `#000000` for body text — the warm undertone is intentional and meaningful
- Don't collapse the large section spacing (96-192px) for content density — the editorial breathing room is part of the tone, not wasted space
- Don't place two terracotta accent elements adjacent to each other — scarcity is what gives `{colors.primary}` its warmth signal
- Don't omit the gradient bloom from hero sections — the peach-cream atmospheric layer (`{colors.accent-peach}`) is what separates Tana from generic white-canvas tools

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Tiny | <380px | Single-column layout, nav collapses fully |
| Mobile Small | 380–480px | Compact hero text, stacked CTA buttons |
| Mobile | 480–700px | Demo panel scales down, integration logos wrap |
| Tablet | 700–1024px | Two-column starts appearing for feature sections |
| Desktop | 1024–1300px | Full demo UI visible, nav fully expanded |
| Large Desktop | 1300–1640px | Max content width hit, lateral whitespace increases |
| XL | >1640px | Layout fixed, additional whitespace on extreme widths |

### Touch Targets
- Navigation pills and ghost buttons maintain minimum 44px height on mobile (extrapolated from 44px spacing token presence in the data)
- Toolbar action pills (meeting UI) use 999px radius and full-pill geometry that naturally expands tap area

### Collapsing Strategy
- Navigation collapses to a hamburger at 860px; the mobile menu opens as an overlay
- The hero demo panel (the floating video meeting mockup) is removed or repositioned below the headline on mobile
- Integration logo grid wraps into two rows below 700px
- Section vertical spacing reduces from 192px maxima to approximately 96px on tablet, 56px on mobile

### Image Behavior
- Demo screenshots are responsive via container scaling — they maintain aspect ratio and clip on narrow viewports
- Integration partner logos are SVG and scale cleanly without breakpoint-specific resets
- The hero background gradient (peach bloom) is applied via CSS gradient, not an image — it adapts without loading penalty

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — warm off-white `#fbfbfb`
- Text: `{colors.ink}` — deep warm brown `#0c0805`
- Brand accent: `{colors.primary}` — terracotta rose `#d88a82`
- Secondary text: `{colors.ink-secondary}` — charcoal `#3a3a3a`
- Border: `{colors.border}` — warm hairline `#e8e4e0`
- CTA: `{colors.ink}` — dark fill button, not the accent color

### Example Component Prompts

- "Build a hero section with background `{colors.background}`, a diagonal peach gradient bloom fading in from the upper right using `{colors.accent-peach}` at 42% opacity, a centered `{typography.display-hero}` headline in `{colors.ink}` with letter-spacing -3.24px, a subheadline in `{typography.body-large}` Source Serif 4, and a dark pill CTA using `{components.button-primary}` with 14px 28px padding and `{rounded.xl}` radius."

- "Create a floating content card with `{components.card}` styling: white surface, `{rounded.lg}` radius, 24px padding, a 1px `{colors.border}` edge, and a two-layer shadow of `rgba(20,22,36,0.04) 0px 1px 2px, rgba(20,22,36,0.10) 0px 6px 18px -12px`. Card heading in `{typography.heading-sub}` Source Serif 4, body text in `{typography.body}` Inter."

- "Design a navigation bar using `{components.nav-bar}`: `{colors.background}` fill, 16px 24px padding, Tana wordmark left, three text links in `{typography.nav-link}` Inter 500 at `{colors.ink-secondary}`, and a right-side Download pill in `{components.button-primary}`. On hover, link opacity drops to 0.76 over 0.16s ease."

- "Generate a meeting action toolbar with four pill badges using `{components.badge}`: Inter 500 13px label, `{colors.hover-overlay}` fill, `{rounded.pill}` geometry, 4px 12px padding. One active pill uses `{components.badge-accent}` with `{colors.primary-container}` terracotta fill to indicate current selection."

- "Create a feature section with 96px vertical padding (`{spacing.3xl}`), an eyebrow label in `{typography.caption-allcaps}` at 0.88px letter-spacing in `{colors.ink-muted}`, a section heading in `{typography.heading-section}` Source Serif 4 500, and a three-column card grid where each card uses `{components.card}` with `{rounded.lg}` radius and shadow depth Level 1."

### Iteration Guide

1. Start with the warm canvas — set the page background to `{colors.background}` `#fbfbfb`, not pure white. Everything else reads against this warm ground.
2. Choose your type register first — editorial sections use Source Serif 4 (`{typography.display-hero}` down to `{typography.body-large}`); UI chrome uses Inter (`{typography.nav-link}`, `{typography.button-ui}`, `{typography.label}`). Never mix them at the same content level.
3. Apply negative tracking religiously — at 72px use -3.24px, at 48px use -2.16px, scaling proportionally for intermediate sizes. Neutral or slightly positive tracking is reserved for body Inter only.
4. Build shadows with the `{colors.shadow-soft}` base color — the `rgba(20,22,36,…)` cool-dark creates spatial depth that reads as physically plausible rather than decorative.
5. Use `{colors.ink}` for the primary CTA, not the accent color — the dark button on the warm canvas delivers the contrast; the terracotta is reserved for accent chips and atmospheric gradients.
6. Border radius: 20px on buttons, 18px on cards, 9999px on pills — no sharp corners in any user-facing element.
7. Add the peach gradient bloom last — a `135deg` diagonal linear gradient from transparent through `{colors.accent-peach}` at 42% opacity, applied as a full-bleed background layer on hero and feature sections for atmospheric warmth.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tana. Brand names and trademarks belong to their respective owners.