# Lede — brand guidelines (for marketing / landing pages)

Derived from the extension UI (`popup/popup.css`, `options/options.css`, `scripts/config.js`, `manifest.json`, HTML).

---

## Identity

| Role | Copy |
|------|------|
| **Product name** | Lede |
| **Short tagline** | Page summarizer & chat |
| **Full one-liner** | Lede — page summarizer & chat |
| **Manifest description** | Lede — page summarizer & chat. Don't bury the main point—summarize and discuss any article. |
| **Core metaphor** | Journalism “lede” — put the main point first |

**Hero / feature copy (popup empty state)**

- Headline: **Don't bury the lede**
- Sub: **Put the main point first—then ask anything about the page—with AI.**

**Primary action**

- Button label: **Summarize**
- Tooltip: **Reads this tab and puts the main point first.**

**Chat placeholder**

- **Ask Lede about this page…**

**Keyboard shortcuts** (keep in sync with the product)

- Windows/Linux: **Ctrl+Shift+U**
- macOS: **Cmd+Shift+U**
- Command description: **Summarize with Lede**

---

## Voice

- Direct, concrete, **page-grounded** (avoid generic “AI assistant” filler).
- Prefer **short** lines for headings and CTAs.
- Loading / status tone examples: *Finding the lede…*, *Reading this tab…*, *Tracing the thread…*, *Spotting what matters first…*, *Sifting signal from noise…*
- Product answers from **the open tab**; positioning should reflect summarize + Q&A on **that** content.

---

## Typography

**Google Font (display / UI chrome)**

- Family: **Sora**
- Weights loaded in-app: **500, 600, 700**
- Stylesheet URL:

    https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&display=swap

**Font stacks**

- Display: `"Sora", system-ui, sans-serif`
- Body: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- Mono: `ui-monospace, "SF Mono", "Cascadia Code", monospace`

**Usage**

- **Sora 600–700**: wordmark, hero titles, section headings, button labels, uppercase labels.
- **Sora 500**: medium UI weight (buttons).
- **System UI / regular**: paragraphs, long-form, body prose.
- **Mono**: shortcuts, code, technical hints.

**Scale** (modular ~1.25)

- xs: `0.6875rem` (11px at 16px root)
- sm: `0.8125rem`
- md: `0.875rem`
- base: `1rem`
- lg: `1.25rem`
- xl: `1.5625rem`

**Line height**

- Headings: `1.25`
- UI: `1.35`
- Prose: `1.62` (light) / up to `1.7–1.75` (dark long copy)

**Letter-spacing**

- Display titles: `-0.02em`
- Uppercase micro-labels: `0.08em` + `text-transform: uppercase`

---

## Color

### Light (default)

| Token | Hex | Notes |
|--------|-----|--------|
| Background | `#f5f0e8` | Warm paper |
| Subtle / panels | `#ede8de` | Chips, secondary surfaces |
| Border | `#e0d8cc` | Dividers, outlines |
| Border hover | `#c8c0b4` | |
| Text | `#1a1a1a` | Primary |
| Text secondary | `#2a2a2a` | Popup prose (options use `#666` for secondary—same family) |
| Text muted | `#aaa` | Icons, de-emphasis |

**Cards on light (options pattern)**

- Surface: `#ffffff` on `#f5f0e8` canvas

### Dark

| Token | Hex |
|--------|-----|
| Background | `#1a1a1a` |
| Subtle | `#252525` |
| Border | `#2e2e2e` |
| Text | `#e8e3db` |
| Text secondary | `#d0cbc3` (popup) / `#bbb` (options) |

### Brand accent (default)

| State | Hex |
|--------|-----|
| Brand | `#F15B2F` |
| Hover | `#D94E27` |
| Active | `#BF4522` |

**User-selectable accent presets** (optional on a site for illustrations or secondary accents)

- Orange `#F15B2F` (default)
- Blue `#2F80ED`
- Green `#2FA36B`
- Purple `#7E57C2`
- Teal `#14B8A6`
- Pink `#EC4899`
- Indigo `#4F46E5`

### Semantic (light)

- Error background `#fdf0f0`, border `#f0d8d8`, text `#c05050`
- Inline links (prose): default `#555`, hover → brand

### Focus

- `outline: 2px solid` brand, `outline-offset: 2px`
- Inputs: brand border + `box-shadow: 0 0 0 2px` brand at **22%** opacity (e.g. `color-mix(in srgb, brand 22%, transparent)`)

---

## Logo

- **Asset**: `lightning.svg` (repo root)
- **Usage in product**: single-color mark via mask/fill using **brand orange**
- **Lockup**: bolt + **Lede** in Sora semibold
- **Sizes in UI**: ~13–14px (header), larger in empty state (~18px)—scale up freely for web

---

## Shape language

- Small controls: **6px** radius
- Buttons, inputs, cards: **8px**
- Suggestion chips: **14px** radius
- Toasts: **~20px** pill
- Dividers: **1px** solid border color

---

## Buttons / CTAs (signature)

Primary CTA in the extension is **outline brand**, not solid by default:

- Transparent background, **1px** border in brand, **brand** text
- **Hover**: fill brand, **white** text
- **Active**: darker brand (`#BF4522`)

Secondary: neutral border, subtle fill on hover.

---

## Motion

- Easing: `cubic-bezier(0.25, 1, 0.5, 1)`, `cubic-bezier(0.22, 1, 0.36, 1)`
- Durations: ~**0.32s** enter, **0.14s** tap, **0.22s** light toasts
- Entrance: slight **translateY** + fade
- Hover: small **translateY(-1px)** or light **scale** on icons
- Respect **`prefers-reduced-motion: reduce`**

---

## Theme

- App supports **light**, **dark**, **system**
- Landing page: default **light** warm canvas; optional **dark** section using dark tokens + same orange accent reads as “the same product”

---

## Technical positioning (accurate to the codebase)

- Works with **Ollama** and **OpenAI-compatible** APIs; defaults include local Ollama URL patterns.
- Mention localhost / bring-your-own endpoint only if your landing page promises that—align with actual install docs.

---

*Single source of truth for strings: `scripts/config.js` (`CONFIG.EXTENSION`, `CONFIG.UI`, `CONFIG.PROMPTS`); colors: `popup/popup.css` and `options/options.css` `:root` / `[data-theme="dark"]`.*