ellioth.co / lede-webpage
Website for the Lede browser extension.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

lede-webpage / brand-guidelines.md
at main 5.7 kB view raw view code
Elliot Hopkins Add Lede marketing site (Astro) and brand context
6d9b5773

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)

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))
  • 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"].