# From a customer’s photo to a priced quote to approve.

Scribeline case study: photo-to-quote for trades. Scribeline drafts each quote from the photos and asks only what a photo can’t settle. Only its interface changed: it was rebuilt on Beamline UI.

[Open the live demo](https://scribeline.beamline.io)

## Measured on the same pages, before and after

- Text-contrast failures: 54 → 0 (axe: the same 6 pages)
- Lighthouse accessibility: 95 → 100 (lowest of 3 pages; all now 100)
- Hand-built controls: 98 → 17 (counted in the interface source)
- Themes: 1 → 2 (dark follows the device)

Before: the original app, measured 10 Oct 2026. After: the live demo, measured 12 Oct 2026. axe-core 4.11 and Lighthouse 12.8, desktop at 1512×982. Automated checks, not a full accessibility audit.

## Step three of a real quote: Same draft, same questions, one clear decision.

Each open question became a notice with its likely answer one tap away, and the approval waits in a panel of its own.

## What changed for the people using it.

### 01. One tap for the machine’s question.

Where a photo can’t settle a number, the desk shows its estimate, asks, and offers the likely answer as one button.

### 02. Sending takes a hold, not a click.

It is the one step the customer sees, so it takes a deliberate hold. Everything before it can still change.

### 03. The customer gets one clean page.

The business’s name, the priced lines and the total, what the quote assumes, a full-width Accept and a PDF to keep.

## Still unmistakably Scribeline.

Beamline’s Soft look in Scribeline’s blue, with its drafting-table type. Typefaces: Space Grotesk (headings and totals), Inter (reading), IBM Plex Mono (measured numbers · 400 sqft · $1,872.00). Palette: Night #040a1b, Raised #101b34, Paper #f5f7fb, Blue #1d4ed8. Every number the machine measured stays mono.

## Drive a real quote yourself.

Answer the questions, approve, hold to send, then accept it as the customer. It all runs in your browser. [Open the live demo](https://scribeline.beamline.io)

28 Beamline parts in Scribeline, among them [Hold to confirm](https://beamline.io/components/hold-to-confirm.md) · [Segmented control](https://beamline.io/components/segmented-control.md) · [Number field](https://beamline.io/components/number-field.md) · [Combobox](https://beamline.io/components/combobox.md) · [Alert](https://beamline.io/components/alert.md) · [Timeline](https://beamline.io/components/timeline.md) · [Metric card](https://beamline.io/components/metric-card.md) · [Empty state](https://beamline.io/components/empty-state.md) · [Confirm morph](https://beamline.io/components/confirm-morph.md) · [Stepper](https://beamline.io/components/stepper.md).

Next case study: [Proofdesk](https://beamline.io/showcase/proofdesk.md), the knowledge desk that refuses to guess.

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).