Stealth-Scraper
v1 · design direction

A precision instrument,
not a SaaS dashboard.

Stealth-Scraper extracts structured data from the open web. The UI treats selectors, URLs, and JSON as first-class — not chrome to be hidden. Monospace where it counts, calm color, deliberate density. The product trusts the user; the design trusts the product.

Color

One neutral ramp, one accent, one semantic set

Dark mode is primary. Accent is reserved for primary actions, active state, and the 'data we care about' indicator on the brand mark. If you're reaching for accent for decoration, stop.

Neutral · 9 steps
Canvas
--color-ink-0
page bg
Surface
--color-ink-1
cards, panels
Elevated
--color-ink-2
modals, popovers, hover
Border
--color-ink-3
default separator
Border-strong
--color-ink-4
focus, active
Subdued
--color-ink-5
placeholders, disabled
Muted
--color-ink-6
secondary text
Fg
--color-ink-7
primary text
Fg-strong
--color-ink-8
headings, emphasis
Semantic · 5 tones
Accent
--color-accent
primary CTA, active state
Success
--color-success
operational, paid, ok
Warning
--color-warning
quota approaching, attention
Danger
--color-danger
errors, destructive actions
Info
--color-info
neutral notice, rarely used
Type

Inter for UI, JetBrains Mono for data

Six-step scale with explicit line-heights. Tracking tightens as size increases. Monospace earns the user's eye anywhere a string is technical — URLs, CSS selectors, IDs, timestamps, numerics.

Display
display
Structured web data
H1
h1
Saved templates
H2
h2
Generated schema
Body
body
Click to define schemas — no XPath, no LLM-as-parser.
Small
small
5 of 5 components operational
Tiny
tiny
Updated 2m ago · sub_2169310
UI face · Inter

The quick brown fox jumps over the lazy dog. 0123456789

Mono · JetBrains Mono

div.product-card > h2.title:nth-of-type(1)

Space

4px base grid

Pick a density per surface and don't mix. Marketing surfaces use comfortable; product surfaces use compact.

4px
--space-1
8px
--space-2
12px
--space-3
16px
--space-4
24px
--space-6
32px
--space-8
48px
--space-12
64px
--space-16
96px
--space-24
Signature

The URL paste input

The single most-touched component. This is the product's hero affordance — the bar that turns a URL into a working scraper. Mono font on the URL itself, inline submit on the right, focus state lifts the border rather than throwing a glow.

Or try news.ycombinator.com
Components

Primitives, side-by-side

Every component below uses tokens from this page. Change a token and the change propagates.

Buttons · 5 variants × 3 sizes
primary
accent
secondary
ghost
danger
Inputs
Badges + keyboard hints
defaultaccentsuccesswarningdangerinfomuted·Save selector⌘S·Copy⌘C
Cards · 2 density tiers

Comfortable

24px padding. Use on landing, pricing, marketing surfaces where the eye needs room.

Compact + interactive

16px padding. Use inside lists, dashboards, dense surfaces. Hover state shows it's clickable.

Copyable mono · 1-click, 1-frame confirmation
div#search > .a-section > h2.titleline > a
States

Loading, empty, error

Skeletons match final layout, not generic spinners. Empty states ship a single clear next action. Errors are typed and recoverable.

Loading skeleton
Empty state
No templates yet
Snapshot a URL to create your first.
Error
Snapshot failed
502: connection refused
Consistency check

Every surface, same DNA

Below: the same primitives composed for landing, /pick chrome, /templates, /pricing tile, /status indicator, /ai-extract — proving the system holds without bespoke per-page styling.

Landing

Structured web data for AI agents

Templates row
Amazon product specs
amazon.com · 7 fields · 142 runs
99.4% ok
Pricing tile

Pro

$99/mo
  • 10,000 scrapes/mo
  • REST API + SDKs
Status indicator
All systems operational
5/5
/ai-extract input
/pick header chrome
247 elementsnews.ycombinator.com
If a stranger screenshots any two pages and they don't feel like the same product — the system has failed. Hold the line.