Warm, considered, editorial-calm — closer to a well-set essay than a developer tool, and LIGHT rather than the dark its networked-outliner heritage would suggest (the company now presents as an agentic meeting platform, with the outliner as a secondary link). The canvas is near-white #fbfbfb over #f4f4f3 surfaces, and every neutral is deliberately WARM-BIASED: ink is #0c0805 with rgba(20,16,14,.92/.6/.4) secondaries rather than neutral black. Its 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 — and the hero drops a single word into ITALIC, which does most of the personality work, while Inter handles all UI and body at 14-17px. Pastels (pink #ffc4c4, salmon #e8a8a4, gold #ebcf94, cream #ece4d4) belong to product surfaces and imagery rather than chrome; the only strong chrome value is a 54px near-black pill CTA at 14px radius. Atmosphere comes from RASTER aurora imagery composited under a grey tint and faded into the canvas with linear-gradient edges, not from CSS gradients. Built on Radix Themes, which shows: the primary hover layers a translucent gradient sheen over the fill instead of simply darkening, shadows follow a fractionally computed elevation scale (3.9px/9.75px, 5.5px/13.75px) with one authored in wide-gamut color(srgb), motion is fast at 0.12-0.16s, and the site ships fifteen prefers-reduced-motion blocks — the most thorough in this library.
Browse Tana in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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#0000eeseen 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.
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.
| 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.
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.