# Tana — Marketing site Design Spec

> Source: tana.inc (live DOM, computed styles), 2026-07-25. 0 stylesheets
> blocked. Built on **Radix Themes** (`.rt-*` classes, `rt-` keyframes) with 987
> :root vars — most are Radix scaffolding, so §2 is read from computed
> fills/text. The `#0000ee` seen 13x is browser-default link colour on unstyled
> anchors — excluded as leakage.
> Reality check: **the hint is wrong on all three counts, and the product has
> repositioned.** The queue said "networked outliner — dark, technical, supertag
> graph". Tana now presents as an **agentic meeting platform** ("Do work *in* the
> meeting"); the outliner is a secondary nav link. The site is **LIGHT** — a
> near-white #fbfbfb canvas washed with warm peach/gold aurora imagery — and the
> register is **warm editorial, not technical**: the display is a **Source Serif 4
> serif** at 72/75.6 with a mixed-italic word, and the accents are pastels
> (#ffc4c4, #e8a8a4, #ebcf94, #ece4d4). No supertag graph on the homepage.

## 1. Visual Theme & Atmosphere

Warm, considered, editorial-calm — much closer to a well-set essay than to a
developer tool. The canvas is near-white with soft peach-and-gold aurora washes
bleeding in behind the content, and the headline is set in a transitional serif at
large size with one word dropped into italic, which does most of the personality
work. Everything else is quiet Inter at 14–17px. Colour arrives as warm pastels on
product surfaces rather than as chrome accents; the only strong value is the
near-black pill CTA. Depth is soft and layered with fractional, computed shadow
values. Feels: warm, editorial, calm, considered.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| canvas | #fbfbfb | THE page background (near-white) |
| surface | #f4f4f3 | alt light surface |
| ink | #0c0805 | primary text + pill CTA fill (270 uses) |
| ink-2 | #080808 | 1px border colour |
| ink-3 | #202020 | dark heading / 2px border |
| slate | #3a3a3a | nav and secondary text |
| grey | #6a6a6a | muted text |
| warm-ink-92 | rgba(20,16,14,.92) | strong warm-black text |
| warm-ink-60 | rgba(20,16,14,.6) | warm secondary text |
| warm-ink-40 | rgba(20,16,14,.4) | warm scrim |
| warm-ink-10 | rgba(20,16,14,.1) | faint warm fill |
| white | #ffffff | text on dark, card fills |
| white-85 | rgba(255,255,255,.85) | translucent panel |
| white-55 | rgba(255,255,255,.55) | glass fill |
| white-06 | rgba(255,255,255,.06) | subtlest wash |
| black-04 | rgba(0,0,0,.04) | light inset fill |
| pink | #ffc4c4 | pastel product accent |
| salmon | #e8a8a4 | pastel product accent |
| sand | #ebcf94 | pastel gold accent |
| cream | #ece4d4 | warm section band |
| near-black-2 | #0b0606 | deepest fill |

Rules: the palette is **warm-biased** — even the "blacks" carry red/brown
(#0c0805, rgba(20,16,14,…)) rather than being neutral. Pastels belong to product
surfaces and imagery, not chrome; the one strong chrome value is the near-black
pill.

## 3. Typography Rules

A two-voice split. **Source Serif 4** carries display at weight **500** with
strong negative tracking — 72/75.6 at **-3.24px**, 48/52.8 at -2.16px — and the
hero drops a single word into **italic** ("Do work *in* the meeting"), which is
the signature typographic move. **Inter** handles everything else at 14–18px,
weights 400–500, tracking essentially normal. Note the fractional computed sizes
(18.144px, 23.5872px) — the scale is fluid.

> Specimen substitution: **both faces are open Google fonts** (Source Serif 4,
> Inter), so previews use the real faces.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Source Serif 4 | 72/75.6 | 500 | -3.24px |
| Section (h2) | Source Serif 4 | 48/52.8 | 500 | -2.16px |
| Sub-head (h3) | Inter | 18.14/23.59 | 500 | -0.09px |
| Large CTA label | Inter | 17 | 500 | normal |
| Body | Inter | 16/24 | 400 | normal |
| Nav / button | Inter | 14/21 | 500 | normal |

## 4. Component Stylings

Radii sit in a soft mid-range: **14px** and **20px** (21 uses each), 999px pills,
16px, 22px, 6px, 50%, plus a fractional 16.632px. The primary CTA is a **54px**
near-black #0c0805 pill at 14px radius with `14px 28px` padding and a 17px label;
nav items are 37px ghost buttons at 14px radius. Borders are 1px #080808 or
translucent white (`rgba(255,255,255,.35)`, `.75`) on glass panels.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | #0c0805, #fff, 14px, 54px, Inter 17/500 | bg → #000000 plus a subtle `linear-gradient(black-a2 -15%, transparent, white-a3)` overlay (Radix classic) | Radix `:focus-visible` path | filter shift | Radix disabled |
| Nav ghost | transparent, #3a3a3a, 14px, 37px | `background-color 0.12s ease` | as above | — | — |
| Glass panel | rgba(255,255,255,.55), 1px rgba(255,255,255,.35) | — | — | — | — |

Note the hover recipe on the primary: Radix's "classic" variant doesn't just
darken — it **layers a translucent gradient over the fill** (`black-a2` at -15% to
`white-a3`), giving a subtle sheen. Focus comes from Radix Themes' own
`:focus-visible` handling rather than a bespoke rule.

## 5. Layout Principles

A light, borderless top bar: logo/wordmark left, two links centred, then an
outliner link, Log in and a black Download pill right. The hero is centred — 72px
serif headline with an italic word, two-line Inter sub, one black pill, and a
reassurance line — over warm aurora washes. Below sits a large app-window mockup
with a peach/gold gradient panel and floating agent-action chips ("Updated all
team OKRs", "Filed issue").

## 6. Depth & Elevation

Radius: **14px** / **20px** dominant, 999px pills, 16px, 22px, 6px, 50%, and a
fractional 16.632px. Shadows are soft, layered and **fractionally computed** — a
Radix elevation scale:

- `rgba(20,22,36,.04) 0 1px 2px` + layer — chrome
- `rgba(20,22,36,.12) 0 2px 6px -2px` + layer — card
- `rgba(20,22,36,.353) 0 3.9px 9.75px` — mid lift (note the fractional px)
- `rgba(20,22,36,.494) 0 5.5px 13.75px` — high lift
- `rgba(0,0,0,.12) 0 0 0 0.5px inset` — hairline ring
- One shadow authored in **`color(srgb …)`** wide-gamut notation

Borders: 1px #080808 (15 uses), translucent white on glass, one 2px #202020.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.15s | ease | fades (dominant, 17x) |
| opacity, transform | 0.12s | ease | fast reveals |
| background-color | 0.12s | ease | hover fills |
| transform | 0.16s | ease | nudges |
| background, border-color, transform | 0.16s | ease | control group |
| color | 0.15s | ease | text |

House feel: **fast and short — 0.12–0.16s**, which keeps the calm surface feeling
responsive rather than sleepy. The keyframe set is entirely **Radix Themes'
library**: `rt-fade-in`/`-out`, four-direction `rt-slide-from-*`/`-to-*`,
`rt-skeleton-pulse`, `rt-dialog-content-show`/`-hide`, and a four-part
`rt-progress-indicator-*` set. Declared easings include
`cubic-bezier(0.16, 1, 0.3, 1)` (a strong expo-out). **The site ships 15
`prefers-reduced-motion: reduce` blocks — the most thorough in this library**, a
direct benefit of building on Radix.

## 8. Backgrounds, Effects & WebGL

The atmosphere is **raster aurora imagery**, not CSS gradients: named
`aurora-gradient-*.png` assets are composited under a
`linear-gradient(rgba(160,160,160,.18), …)` tint, with `linear-gradient(#fbfbfb 0,
transparent 20%)` fade-outs on multiple edges to blend them into the canvas. A
`linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.35) 40%, rgba(0,0,0,.1))`
scrim sits over media. No canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Keep the canvas near-white #fbfbfb and let warm aurora washes supply atmosphere.
- Bias every neutral warm — #0c0805 and rgba(20,16,14,…) rather than neutral black.
- Set display in a transitional serif at weight 500 with strong negative tracking (-3.24px at 72px).
- Drop one word of the headline into italic — that is the signature move.
- Keep all UI in Inter at 14–17px.
- Use 14px/20px radii and a 54px near-black pill for the primary CTA.
- Move fast (0.12–0.16s) even though the surface is calm.
- Honour the 15 reduced-motion blocks.

### Don't
- Don't go dark — this is a light brand despite the outliner heritage.
- Don't use neutral blacks or greys; the palette is warm-biased.
- Don't let the pastels into chrome — they belong to product surfaces.
- Don't set the display in a sans, or lose the italic word.
- Don't reach for CSS gradients for the aurora; it is raster imagery.

## 10. Responsive Behavior

A dense 30-step ladder with several near-duplicate seams (639.98/640,
767/767.98/768, 1023.98/1024) — the fractional values are a framework artefact:

| Breakpoint | What changes |
|---|---|
| max 380 / 480 / 520 / 560px | phone tiers |
| 620–700px | large phone |
| 767–768px | tablet seam (heavily subdivided) |
| 820 / 860 / 900 / 980px | tablet upper steps |
| 1000 / 1024px | desktop |
| 1100 / 1200 / 1280 / 1300px | wide desktop |
| 1440 / 1640px | ultra-wide |

No dark-scheme blocks (`darkSchemeBlocks:0`) — light-only. No container queries.
**15 reduced-motion blocks.**

## 11. Agent Prompt Guide

- Canvas `#fbfbfb` · Surface `#f4f4f3` · Ink `#0c0805` (warm) · Nav `#3a3a3a` · Muted `#6a6a6a` · Border `1px #080808` · Pastels `#ffc4c4` / `#ebcf94` / `#ece4d4`
- Font: **Source Serif 4** display 72/75.6 500 **-3.24px** with an italic word + **Inter** UI 14–17 (both open, real faces) · Radius: 14px / 20px / 999px · Control height: 54px pill / 37px ghost
- Focus: Radix Themes `:focus-visible` · Hover: bg → #000 plus a translucent gradient sheen · Motion: 0.12–0.16s ease, 15 reduced-motion blocks

<tana_design_language>
Warm, considered, editorial-calm — closer to a well-set essay than a developer
tool, and LIGHT rather than the dark its outliner heritage suggests. Canvas is
near-white #fbfbfb with #f4f4f3 surfaces, and every neutral is WARM-BIASED: ink is
#0c0805 with rgba(20,16,14,.92/.6/.4) secondaries, never neutral black. The
typographic signature is a two-voice split where Source Serif 4 carries display at
weight 500 with strong negative tracking (72/75.6 at -3.24px, 48/52.8 at -2.16px)
and the hero drops ONE WORD into italic, while Inter handles all UI and body at
14-17px. Both are open Google fonts, so use the real faces. Pastels — pink
#ffc4c4, salmon #e8a8a4, gold #ebcf94, cream #ece4d4 — belong to product surfaces
and imagery, never to chrome; the one strong chrome value is a 54px near-black
#0c0805 pill CTA at 14px radius with a 17px Inter label. Radii sit in a soft
mid-range (14px and 20px dominant, 999px pills), and shadows are soft, layered and
fractionally computed on a Radix elevation scale (rgba(20,22,36,.353) 0 3.9px
9.75px), with one authored in wide-gamut color(srgb …). Atmosphere comes from
RASTER aurora imagery composited under a grey tint and faded into the canvas with
linear-gradient(#fbfbfb 0, transparent 20%) edges — not from CSS gradients. Built
on Radix Themes: the primary hover layers a translucent gradient sheen over the
fill rather than simply darkening, motion is fast and short (0.12-0.16s ease), and
the site ships FIFTEEN prefers-reduced-motion blocks. Feels: warm, editorial,
calm. Avoid: a dark canvas, neutral blacks or greys, pastels in chrome, a sans
display, losing the italic word, faking the aurora with CSS gradients.
</tana_design_language>