DESIGN.md — TavilyLegacy format

### Color — Brand Surfaces

| Token | Hex | Usage |

| -------------------- | --------- | -------------------------------------- |

| --color-background | #fefcf5 | Primary canvas — warm cream paper |

| --color-white | #fffcf6 | Warm white — cards, nav, footer |

| --color-white-tint | #eaeae2 | Subtle dividers / chip background |

| --color-light-gray | #f7f7f5 | Section tint background |

| --color-black | #3c3a39 | Default text — warm near-black |

### Color — Black Alpha Scale

```css

--color-black-rgb: 11, 9, 7; / base black token /

--color-black-80: #0b0907cc; / 80% /

--color-black-60: #0b090799; / 60% — secondary body text /

--color-black-40: #0b090766; / 40% — tertiary /

--color-black-20: #0b090733; / 20% — disabled /

--color-black-10: #0b09071a; / 10% — subtle borders /

--color-black-5: #0b09070d; / 5% — faintest surface /

```

### Color — White Alpha Scale

```css

--color-white-50: #fffcf680; / 50% — overlay text /

--color-white-10: #fffcf61a; / 10% — overlay border /

```

### Color — Accent Palette

| Token | Hex | Usage |

| ----------------------- | --------- | -------------------------------- |

| --color-primary-red | #ff272d | Signature voltage red |

| --color-orange | #ff7300 | Warm orange accent |

| --color-yellow | #ffc753 | Soft yellow |

| --color-primary-yellow| #fdc211 | Bright primary yellow |

| --color-pink | #f49eff | Electric pastel pink |

| --color-lav (lavender)| #817fff | Lavender purple |

| --color-primary-blue | #2677ff | Primary blue (links / data) |

| --color-light-blue | #aaf2fc | Aqua highlight |

| --color-turquoise | #79deeb | Turquoise accent |

These accent colors appear mostly in:

• Endpoint API badges (color-coded per route)

• Benchmark chart bars

• Decorative spotlight highlights

• Logo / hero gradients

---

### Page Tokens

```css

--page-padding-x: 100px; / horizontal page padding (desktop) /

--page-padding-x-half: 50px; / half-padding for inset rails /

--max-content-width: 1440px; / content container ceiling /

--module-vertical-spacing: 0; / sections handle their own padding /

```

### Body

```css

body {

background-color: #fefcf5; / warm cream /

color: #3c3a39; / warm near-black /

font-family: "Suisse Int'l", -apple-system, sans-serif;

font-size: 16px;

}

```

### Section Pattern

Sections own their internal padding:

```css

.page-module { padding: 50px 0; } / default vertical rhythm /

.hero { padding: 0 50px; height: ~769px; }

.users { padding: 0 100px; background: #fffcf6; }

.benchmarks { background: #fffcf6; height: ~764px; }

.large-block { padding: 80px 100px; }

```

The site is essentially a single warm canvas with subtle white surface lifts (#fffcf6) marking premium feature bands (Users, Benchmarks). No dark band breaks at all — the entire experience stays in the cream-paper register.

### Responsive

Fluid type (clamp) does most of the responsive work — there are no abrupt breakpoint jumps in the type scale. Page horizontal padding collapses from 100px to 50px on tablet via --page-padding-x-half.

---

| Value | Usage |

| ---------- | -------------------------------------- |

| 1px | Inline icon outlines, sparkline dots |

| 2px | Small chip / tag corners |

| 3px | Very small UI elements |

| 8px | Default block corners |

| 10px | Section sub-cards |

| 12px | Standard cards |

| 14px | Larger feature cards |

| 18px | Modal corners |

| 20px | Premium feature cards |

| 40px | Sign-Up pill button |

| 45px | Login ghost pill |

| 50px | Large feature pills |

| 50% | Avatars / circular dots |

| 100px | Large outlined CTAs |

| 9999px | True full-pill |

---

Default borders are hairline, low-contrast — favoring quiet definition over emphasis:

```css

1px solid rgb(32, 32, 32); / strong text-color border /

1px solid rgb(31, 30, 30); / near-black border /

1px solid rgb(247, 247, 245); / surface-tone border (invisible-ish) /

1px solid rgb(221, 221, 221); / light divider /

1px solid rgba(60, 58, 57, 0.1); / 10% body-color border /

1px solid rgba(11, 9, 7, 0.1); / 10% black border /

1px solid rgba(129, 176, 154, 0.3); / sage accent border /

1px solid rgb(50, 174, 136); / success green /

```

---

```css

/ Mouse-tracked spotlight on feature cards /

background: radial-gradient(at var(--spotlight-x) var(--spotlight-y), accent, transparent);

/ Hover micro-shift on link+arrow patterns /

.link { transform: translateX(var(--text-shift, 0px)); }

.link .arrow { transform: translateX(var(--icon-shift, 0px)); }

```

• Hover micro-shifts: 2–4px translate on text + arrow icons

• Smooth fluid type — no breakpoint jumps

• Card hover: borders darken from rgba(11,9,7,0.1) to rgba(11,9,7,0.4)

• Sign-Up pill: hover opacity / subtle scale only — no heavy state changes

---

• Benchmark charts: Bar charts using --color-primary-blue, --color-primary-red, --color-lav to compare Tavily vs competitors

• Hero illustration: Abstract web-of-nodes representing agent → web connections

• Customer logos: Rendered in --color-black (warm dark) on cream, monochrome

• No photography: The site is illustration- and type-driven; there are no people or product screenshots in the hero band

---

Warm. Editorial. Type-designer.

Tavily's design language is the rarest thing in dev tools — a brand that actually feels designed:

1. Cream paper canvas (#fefcf5) is the entire identity. There is no dark mode, no harsh white, no flat gray — just a warm, magazine-paper background top to bottom.

2. Warm-black text (#3c3a39) instead of pure black. A small choice, but it makes every paragraph feel printed rather than rendered.

3. Suisse Int'l everywhere. A swiss-modernist sans with a wide weight range — Tavily uses it confidently across sizes from 15px eyebrows to 100px H0 hero displays with clamp() fluid scaling.

4. `/path-style` mono eyebrows. The single most distinctive visual gesture — section prefixes like /benchmarks and /the web access layer for agents use Suisse Int'l Mono to evoke CLI paths and signal "we are a developer tool" without ever shouting it.

5. Pastel-bright accent palette. Electric pink, lavender, turquoise, primary blue — vivid but used sparingly as endpoint badges, chart series, and decorative spotlights. The accents punch precisely because the canvas stays so calm.

6. Outlined cards, no shadows. Trust comes from hairline 1px borders, not box-shadow lift. The whole UI feels printed.

7. Fluid type via `clamp()`. Every heading scales smoothly from mobile to desktop — there is no "mobile breakpoint jump" anywhere on the site.

8. Tight heading line-height (`1`). Display headings sit tight, with negative letter-spacing on H1/H2 — the type designer's craft showing through.

9. Quiet micro-interactions. Hover shifts text 2–4px left while the arrow moves right; the spotlight follows the cursor on feature cards. No bouncy animations, no parallax — just the right amount of life.

The result is a developer-tool homepage that reads like a literary magazine cover — confident, beautifully typeset, and unmistakably crafted by someone who cares about how the word "/benchmarks" sits next to a number.