# Coda / Superhuman Docs — DESIGN.md

> **Rebrand note:** Coda product surfaces now ship as **Superhuman Docs** (`docs.superhuman.com`). Marketing still exposes legacy “Coda AI” routes alongside pink “Coda is now Superhuman Docs” banners. This guide documents the **current Docs product UI** plus the rebrand marketing page. Collection id remains `coda` for catalog continuity; preferred logo file is `superhuman-docs.png` (Superhuman mark). Legacy Simple Icons `coda.svg` retained only as labeled interim.

Light workspace docs: gray sidebar, purple primary actions, glassmorphic starter cards, document canvas with Docs AI panel.

Independent ScreenRove capture guide. Not an official brand guide. **Observed** / **sampled** / **recommended** labeled. Captured: 2026-09-30 (BST) · Workspace: Alex's Workspace · Signed in: yes (migrated Coda → Superhuman Docs)

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed: clean **geometric sans** across product chrome and marketing (Superhuman Docs wordmark is bold all-caps sans). Recommended: Inter / system-ui. No proprietary font files included.

---

## 1. Visual Theme & Atmosphere
- Product Home: calm gray rail, purple “+ New doc”, greeting (“Welcome Alex”), glassmorphic template carousel over blue/purple/teal gradients, Recent list.
- Document: spacious white page with large title placeholder, body bullets, interactive tables, floating formatting pill, purple Docs AI sidebar / FAB.
- Marketing (Coda AI → Superhuman Docs): pale blue hero, pink rebrand banner, purple/pink gradient announcement band, black rectangular CTAs, feature mockup cards.
- Mood: approachable productivity; AI is a purple collaborator, not a dark terminal.

## 2. Color Palette & Roles

| Token | Value | Role | Confidence |
|---|---|---|---|
| Canvas | `#fcfcfc` / `#f0f0f0` | Doc page / home background | sampled |
| Sidebar | light gray `#f0f0f0` | Nav rail | sampled |
| Primary purple | ≈ `#6c48b4` / `#8490e4` family | + New doc, Copy link, AI FAB, focus ring | sampled |
| Marketing black CTA | `#000000` | Get started / Try it free | observed |
| Rebrand pink banner | soft pink | “Coda is now Superhuman Docs!” | observed |
| Hero blue band | `#d8e4f0` family | Marketing hero | sampled |
| Gradient announcement | purple/pink | Mid-page rebrand story | observed |
| Avatar pink | pink circle + “A” | User chip | observed |
| Status tag | soft colored select (“Not started”) | Table select list | observed |
| Overlay scrim | dimmed white | Behind Share modal | observed |

## 3. Typography Rules

| Role | Size / line height | Weight | Tracking | Notes |
|---|---|---|---|---|
| Marketing hero | ~40–56px | 600–700 | tight | “The work assistant your team deserves” |
| Home greeting | ~28–36px | 600 | tight | “Home / Welcome Alex / …” |
| Doc title placeholder | ~32–40px | 600 | tight | “Add page title” |
| Body | ~15–16px / 1.5 | 400 | normal | Doc prose |
| Sidebar nav | ~13–14px | 400–500 | normal | Home, Starred, Templates |
| Table header | ~12–13px | 500 | normal | Tracker columns |
| Button | ~13–14px | 500–600 | normal | New doc, Share, Copy link |
| Wordmark | all-caps bold | 700 | slight positive | “SUPERHUMAN Docs” |

## 4. Component Stylings

### Navigation
- Sidebar: Docs mark + label, + New doc (purple pill), Home / Starred / Shared / Owned / Templates / Folders, Starred folders, profile footer.
- Doc top bar: sidebar toggle, doc title, Share, workspace grid, comments, more.

### Buttons
- Product primary: purple filled, highly rounded (“+ New doc”, “Copy link”).
- Marketing primary: **black** rectangle, white label (distinct from product purple).
- Secondary: Free plan · Upgrade chips; outline/ghost icon buttons.

### Cards
- Glassmorphic onboarding cards: translucent panes over colorful gradients.
- Recent row: icon tile + title + “Start here!” tan badge + last-viewed meta.
- Marketing feature cards: UI mockups for AI search, assistant, AI columns.

### Inputs & AI
- Home search: wide rounded “Search all docs”.
- Share modal: purple-bordered “Type names or emails…”, access rows (Anyone with link / Workspace / Owner), Copy link.
- Docs AI sidebar: Beta tag, action log, suggestion chips, ask field with @ and / hints, purple send.
- Floating format pill: H2, B/I/U, lists, link, comment, purple sparkle.

### Tables
- Interactive tracker: Initiative / Owner / Status (color select) / Next milestone (date) / Notes — populated with synthetic rows.

## 5. Layout Principles
- Home: sidebar + greeting + horizontal starter carousel + Recent list.
- Doc: full-bleed page canvas; AI as right sidebar or FAB — capture shows both panel and sparkle button contexts.
- Marketing: banner → nav → hero → rebrand band → logo wall → feature grid → FAQ → footer.
- Recommended spacing base 4px; generous vertical rhythm on marketing.

## 6. Depth & Elevation
- Glass cards: blur + soft shadow over gradients.
- Share modal: centred white card, rounded corners, dimmed backdrop.
- Format toolbar: floating pill with soft shadow.
- Otherwise hairline borders and flat gray surfaces.

## 7. Do's and Don'ts

### Do
- Use purple for product primary actions and AI affordances.
- Use black for Superhuman Docs marketing CTAs as captured.
- Show AI as a sidebar collaborator that can create structured tables — with suggestion chips.
- Keep glassmorphic starters optional; Recent list is the durable home pattern.
- Call out the Coda → Superhuman Docs rebrand when documenting marketing.

### Don't
- Don’t ship a stale “Coda” purple mark as if it were current Docs identity — prefer Superhuman mark.
- Don’t mix marketing black CTAs into the product chrome as the only primary.
- Don’t invent invite sends, payment, or authorized external connectors.
- Don’t claim legacy Coda-only chrome still exists in-product (unavailable in capture).

## 8. Responsive Behavior
- Desktop only observed. Recommended: sidebar drawer <1024px; carousel → vertical stack; AI panel → bottom sheet; modal full-bleed on small screens; ≥44px targets.

## 9. Agent Prompt Guide
- Light gray sidebar; purple + New doc; white doc canvas; purple Docs AI panel.
- Marketing: pink rebrand banner, pale blue hero, black Get started, glass/gradient feature cards.
- Prompt starter: “Build a docs home with a light sidebar, purple new-doc button, glassmorphic starter cards, and a document editor with a purple AI assistant sidebar. Original branding; mention a product rebrand banner only on marketing.”

---

## Implementation recommendations
- Original branding; do not redistribute Superhuman/Coda proprietary assets beyond permitted logo files.
- Accessible focus on purple controls; don’t rely on color alone for Status selects.
- 4px spacing; implement empty/loading; no inferred billing.

## Interaction inventory
- Pre-signup Superhuman Docs. `flow/00-presignup-coda-superhuman-docs.jpg`.
- Marketing home (redirects to Docs workspace in session). `marketing/coda-marketing-home.jpg`.
- Marketing pricing (Superhuman Docs plans). `marketing/coda-marketing-pricing.jpg`.
- Marketing Coda AI / rebrand. `marketing/coda-marketing-product-ai.jpg`.
- Docs home. `product/coda-product-home.jpg`.
- Populated research brief. `product/coda-product-doc-populated.jpg`.
- Share/settings dialog. `product/coda-product-share-settings.jpg`.
- Docs AI panel. `product/coda-product-ai-panel.jpg`.
- Launch Research Tracker table. `product/coda-product-table-view.jpg`.

## Avoid
- Depicting unpaid Enterprise admin or gallery templates as live product captures.
- Ignoring the rebrand — copy that says only “Coda” for current product UI is inaccurate.

## Reference pages
- https://coda.io/ → redirects into Docs workspace when signed in
- https://docs.superhuman.com/workspaces/.../docs
- https://blog.superhuman.com/introducing-superhuman-docs/

## Capture scope
Migrated workspace; migration notice dismissed; synthetic brief + tracker table; no invites/payments/connectors. Legacy Coda-only product UI unavailable. Mobile/hover not exercised.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- Independent ScreenRove research from our captures — not a copy of third-party DESIGN.md prose.