// ui kit · v1.0

Tessera UI kit. Every token and component behind the site.

Built with plain HTML and CSS custom properties, so it works in any stack. Everything here comes from assets/css/styles.css.

tokenstypographybuttons badgesformsfeedback cardscodeimage slotsicons
01

Color tokens

A near-black canvas, hairline borders and one cobalt accent. Click a swatch to copy its value.

02

Typography

Satoshi for UI and display, Geist Mono for code and labels. Headings are two-tone: ink, then muted.

display
Satoshi 500 · −4.2%Never blocked.
h2
clamp 32–52pxEverything a browser needs.
h3
20px · 500Undetectable by default.
lede
17px · ink-2Launch thousands of stealth Chromium sessions over CDP.
eyebrow
Geist Mono 12px// workflow
code
Geist Mono 13pxawait page.extract({ schema })
03

Buttons & links

The primary button's icon block rotates and turns cobalt on hover.

Start building free Book a demo Start 14-day trial Small ghost Small primary Text link
04

Badges, pills & status

Mono labels for metadata, plus a live dot for real-time state.

NewExtract API v2 is live default most popular connected All systems operational ⌘ K hover for tooltip
abc
05

Forms & controls

Inputs, selects, switches, the range slider and the segmented billing toggle.

Fingerprint & CAPTCHA solving
$npm i @tessera/sdk
06

Feedback

Toasts, a usage meter and the FAQ accordion with an animated plus.

Session ses_8f2k finished48 items extracted to deals.json in 1.84s.
82% of browser hours usedYou'll move to overage at $0.05 / hr after 7,500 hrs.
browser hours 6,120 / 7,500
What counts as a browser hour?

Time from connect to close, billed per second.

Can I bring my own proxies?

Yes. Pass any HTTP or SOCKS5 proxy per session.

07

Cards

Feature cards get a cursor-tracking border glow. Pricing cards have a highlighted "popular" variant.

feature card

Watch, replay, take over.

Hover me: the border picks up a cobalt glow that follows your cursor.

“We swapped one URL and shipped the same day. No rewrite.”

av
Priya NairStaff Engineer
99.99%
uptime SLA
Active sessions
1,284
+12.4%
p50 latency
412ms
−24ms
08

Code window

Tabbed editor with a tiny built-in highlighter for JS, Python and shell. No dependencies.

import { Tessera } from "@tessera/sdk";

const page = await new Tessera().newPage();
await page.goto("https://shop.acme.dev/deals");
const deals = await page.extract({ name: "string", price: "number" });
from tessera import Tessera

page = await Tessera().new_page()
await page.goto("https://shop.acme.dev/deals")
deals = await page.extract(schema=Deal)
# create a session and extract in one call
curl -X POST https://api.tessera.dev/v1/extract \
  -H "Authorization: Bearer $TESSERA_KEY" \
  -d '{ "url": "https://shop.acme.dev/deals" }'
09

Image slot

Drop a file with the matching name into images/ and it replaces the placeholder automatically. No code changes needed.

Image slotblog-1.webp16:10 · shows the image once the file exists
10

Icons & mark

A 1.4px stroke set in one inline sprite. Use any icon with <use href="#i-name">.

tessera