# Excalidraw — Marketing site Design Spec

> Source: plus.excalidraw.com (live DOM, computed styles), 2026-07-21.
> Coverage: home page (hero, Create section, logo wall, CTA band, nav). Pricing/Teams not captured.
> Responsive: breakpoints not captured (Tailwind defaults presumed, not claimed).

## 1. Visual Theme & Atmosphere

A white page that behaves like a sheet of paper someone has been drawing on. All the structural type is a clean variable grotesque (Assistant) in a deep indigo-navy, and *on top of it* float genuinely hand-drawn elements: a hero word set in Excalifont with a wobbly marker highlight behind it, scattered sketch marks, pastel collaborator name-tags with cursor arrows, and a curly hand-lettered "14 days of free trial" arrow pointing at the CTA. The chrome itself is disciplined — full pills, one violet, no gradients, no borders on the nav — so the hand-drawn layer reads as *content on the canvas* rather than as a decorative typeface choice. It deliberately avoids the enterprise-whiteboard look: no dark mode hero, no gradient mesh, no product screenshot in a tilted 3D frame.

Feels: playful, papery, unfussy, warm.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| ink | `#030064` | ALL text — headings, body, nav, buttons on light. Not black. |
| primary | `#6965db` | The one accent: primary pill fill, hand-drawn annotations, links |
| primary-hover | `#5753d0` | Hover fill |
| primary-active | `#4440bf` | Active / pressed |
| logo-text | `#190064` | Wordmark only |

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page ground — 60 of the page's blocks are pure white |
| surface-high | `#f1f0ff` | Faint violet wash on hover fills |
| dark-band | `#232329` | The single inverted block on the page |
| border-outline-variant | `#c5c5d0` | The only hairline — 1px, on the secondary button |

| Token | Hex | Role / usage |
|---|---|---|
| github-fill | `#ffe599` | GitHub star pill background |
| github-border | `#705400` | 1px border on that pill (a real brown, not a tint) |
| annotation-blue | `#004170` | One hand-lettered annotation in a deeper blue |

Rules: **the accent is `#6965db` and there is only one of it** — every other hue on the page is *drawn content* (pastel sketch marks, name-tags, the mint highlight), never chrome. Text is never `#000000` and never a grey; it is `#030064` at every size including captions.

## 3. Typography Rules

- UI / structure: `Assistant, -apple-system, system-ui, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif` — a **variable** face, so weights land on non-standard steps (480).
- Hand-drawn: `Excalifont, Xiaolai` — the same face the editor draws with.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| h1 hero | 56 / 64.4 | 600 | normal |
| h1 highlighted word (Excalifont) | 56 | 400 | normal |
| h2 section | 44 / 50.6 | 600 | normal |
| h3 / eyebrow | 14 / 20 | 700 | normal |
| Body | 16 / 24 | 400 | normal |
| Nav link | 14 / 20 | **480** | normal |
| Button label | 14–16 / 20 | 500–600 | normal |
| Annotation (Excalifont) | 20 | 480 | normal |
| Small annotation (Excalifont) | 13–14 | 400 | normal |
| Badge (Excalifont) | 12 | 480 | normal |

Patterns: **tracking is `normal` on every role, including the 56px hero** — no negative-tracking display trick anywhere. Weight ceiling is 600 for sans (700 only on the 14px h3). Nothing is uppercase. The hand-drawn face never carries structure — only a highlighted word, badges and margin annotations.

## 4. Component Stylings

- **Primary button** — `#6965db` fill, `#ffffff` label, radius `9999px`, height 44–48px, padding `12px 24px`, 14–16px / 600, no border, no shadow at rest.
- **Secondary button** — `#ffffff` fill, `#030064` label, `1px solid #c5c5d0`, radius `9999px`, height 46px, padding `12px 24px`, 14px / 500.
- **Nav link** — transparent, `#030064`, radius `8px`, height 44px, padding `12px`, 14 / 480. The Resources dropdown trigger is a `9999px` pill instead.
- **GitHub star pill** — `#ffe599` fill, `1px solid #705400`, `#030064` label, radius **8px** (not a pill), height 30px, padding `4px 12px`, 14 / 480, star glyph leading.
- **Badge / chip** — Excalifont 12 / 480 in `#030064` with `4px 8px` padding and **no CSS background**: the mint highlight behind it is a drawn SVG marker stroke, exactly like the hero word's highlight.
- **Card / product frame** — radius `16px` (the page's most common radius, 109 uses), white on white, separated by the ambient shadow below rather than a border.
- **Nav bar** — `position: fixed`, **100px tall**, fully transparent, no border-bottom, no backdrop-filter.

## 5. Layout Principles

Centered single-column hero: wordmark-scale h1, one line of sub, one CTA pill, then the hand-drawn field spreading behind and around all of it. Section blocks below are left-aligned against a thin vertical rail with a circular glyph marker at the top of each. Full-bleed white throughout, broken once by the `#232329` band. Product surfaces are shown inside a rounded browser frame, not a bare screenshot.

## 6. Depth & Elevation

Radius scale, by frequency: `16px` (cards/frames) · `9999px` (every button) · `8px` (nav links, GitHub pill) · `12px` · `3px`.

Two recipes only:

```css
/* focus / hover ring */
box-shadow: rgba(105,101,219,.08) 0 0 0 3px;

/* ambient card lift — four fractional layers */
box-shadow:
  rgba(0,0,0,.024) 0 0.34267px 0.665184px 0,
  rgba(0,0,0,.035) 0 0.502948px 1.83915px 0,
  rgba(0,0,0,.047) 0 1.83821px 4.42796px 0,
  rgba(0,0,0,.07)  0 5.78613px 14.6879px 0;
```

Philosophy: **shadow, not border.** The only 1px border in the system is the secondary button's `#c5c5d0` and the GitHub pill's `#705400`. The fractional pixel values in the ambient stack mark it as curve-generated.

## 7. Motion

House transition is `0.15s cubic-bezier(0.4, 0, 0.2, 1)`, applied most often to **`box-shadow` alone** (48 elements) and then to the colour group (`color, background-color, border-color, outline-color, fill, stroke`). Overlays fade at `0.5s linear` on `opacity, visibility`. The hero's collaborator cursors and name-tags animate continuously (the site's one piece of ambient motion); nothing else moves on scroll.

## 8. Backgrounds, Effects & WebGL

No gradients, no `backdrop-filter`, no blend modes, no WebGL, no grain. The entire atmosphere is **drawn SVG artwork on a flat white ground**: sketch squiggles, dots, arcs and arrows in pastel strokes; pastel name-tag chips with cursor arrows; the marker-stroke highlight behind the hero word and the section badges. The live product embed further down is the real Excalidraw editor rendering to `<canvas>`.

## 9. Do's and Don'ts

### Do
- Set all text in `#030064` — headings, body, captions, button labels alike.
- Keep tracking `normal` at every size, including a 56px hero.
- Make every button a `9999px` pill; reserve `8px` for nav links and the GitHub pill.
- Use Excalifont only for a highlighted word, a badge, or a margin annotation — never for a heading, nav item or button.
- Separate surfaces with the fractional ambient shadow, not a border.
- Let colour arrive as *drawn artwork* (sketch marks, name-tags, marker highlights) on a white ground.

### Don't
- Don't use black, grey or a neutral ink.
- Don't add a second accent — `#6965db` is the only one.
- Don't apply negative letter-spacing to the display sizes.
- Don't give the nav a fill, border or blur; it is transparent at 100px tall.
- Don't reach for a gradient, blur or dark hero — the page is flat white.
- Don't set the hand-drawn face bold; it is 400–480 everywhere.

## 10. Responsive Behavior

Not captured — desktop viewport only (1514px). The nav is `position: fixed` at 100px; no mobile pattern observed.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#030064` · Muted `#c5c5d0` · Border `#c5c5d0` · Accent `#6965db`
- Font: Assistant (variable) + Excalifont for hand-drawn · Body: 16px · Radius: 9999px control / 16px card · Control height: 44–48px
- Focus: `rgba(105,101,219,.08) 0 0 0 3px` · Hover fill: `#5753d0`

<excalidraw_design_language>
A flat white page that reads as a sheet of paper being drawn on. All structural type is Assistant, a variable grotesque, in a deep indigo-navy #030064 that replaces black at every size — hero 56/64.4 at 600, sections 44/50.6 at 600, body 16/24, nav 14 at weight 480 — with letter-spacing left normal even at 56px. One accent, violet #6965db (hover #5753d0, active #4440bf), on 9999px pill buttons at 44-48px with 12px 24px padding; the secondary is white with a single 1px #c5c5d0 hairline. Cards sit at 16px radius and are lifted by a four-layer fractional ambient shadow rather than a border, with a rgba(105,101,219,.08) 0 0 0 3px focus ring. Everything playful is *drawn content*, not styling: pastel sketch marks, collaborator name-tags with cursors, and marker-stroke highlights behind words set in Excalifont at 400-480. Transitions are 0.15s cubic-bezier(.4,0,.2,1), mostly on box-shadow. Feels: playful, papery, unfussy, warm. Avoid: black or grey text, negative tracking, gradients, blurs, a dark hero, a second accent colour, or setting headings in the hand-drawn face.
</excalidraw_design_language>