Firecrawl

An original Siftwell homepage on #F9F9F9 vellum stitched together by 1px #EDEDED hairlines: four full-height rails, a 101px blueprint grid in the hero with its centre cleared, a 1088×40 rounded ember announcement strip, a 100px header with a spark mark, six centred nav links and a quiet Sign up chip, a small white badge, a two-line 60px headline whose second line is #FF4D00, a 16px lede with one highlighted phrase, a filled Start for free button beside a grey Connect button, and a 552×113 white search card with Search / Scrape / Map / Crawl modes. Grey ASCII clouds sit either side of the lede; orange ones spill out beneath the card toward a product window rising from the fold.

• Best forDeveloper APIs, scraping and crawling tools, data infrastructure and AI-agent platforms that want to read as precise, open and engineered rather than glossy.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, rule and shadow token. Render the page as a server component; the only client code is the language-pill tab switch and an optional reduced-motion-aware ASCII shimmer. Self-host Inter (variable, 400–500) and Geist Mono (400–500), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the blueprint grid with CSS background gradients, and the rails, spark markers, pixel glyphs, logo, icons, product window and benchmark bars as HTML, CSS and inline SVG; the ASCII clouds are pre-rendered monospace text in an aria-hidden pre — never a bitmap, video or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Firecrawl" kickstart — A blueprint-grid developer homepage on near-white vellum: a rounded ember announcement strip, a two-line 60px headline whose second line burns orange, a search card with Search / Scrape / Map / Crawl modes, and faint ASCII clouds drifting out from behind it.

## Design
Build a rebrandable landing page for a web-data API that turns any website into clean data for AI agents. Developers and agents send it a search query or a URL and it returns the live web as clean markdown or JSON — search, scrape, map and crawl — sold on reliability, speed and being open source.

Create a complete landing page for Siftwell, a fictional web-data API. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, illustration and copy throughout.

Color: near-white and hairline-driven, one chromatic colour. Vellum #F9F9F9 is the page and the header. White #FFFFFF is the search card, cards that hold copy and the code-window body. Ink #262626 is every headline and body line. Slate #727272 is secondary copy and the input placeholder; Graphite #616161 is inline links in body copy. Hairline #EDEDED is every structural line — rails, grid, header rules, card outlines. Ember #FF4D00 is the second headline line, the logo spark, the spark markers, the active mode glyph and the orange ASCII clouds. Deep Ember #D93A00 is the fill of the announcement strip and every primary button, always with #FFFFFF labels. Glow #FCDDCC is only a 4px halo ring around primary buttons. Grey ASCII uses #CFCFCF, pixel glyphs #ECECEC, grid dots #DCDCDC, bracket tags rgba(0,0,0,0.2). No other hue — no blue, green or purple — and no gradient.

Typography: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif (Inter substitutes for a commercial humanist grotesque) at 400, 450 and 500 only. Hero 60px/64px 500 at -0.3px; section headings 52px/1.07 500 at -0.26px with one phrase in Ember; sub-headings 40px/1.1 at -0.2px; body and lede 16px/24px 400; nav links, buttons, chips and mode tabs 14px/20px 450; badge 12px/20px 450; announcement 14px/20px at 0.14px. Geist Mono 400 at 12px/16px for bracket tags, file names, line numbers and code tabs, 13px/1.57 for code. Never 600 or bold.

Layout: a 1440px viewport. Four 1px Hairline rails run the full page height at x 64, 164, 1275 and 1376; header rules end in small rotated-square nodes where they cross the rails. Content sits in the 1112px between the inner rails. Radii: 10px strip and buttons, 8px nav links and inputs, 20px search card, 16px cards, 999px badges, 8px code windows.

Announcement strip: 12px from the top, x 176 to 1264 (1088×40), 10px radius, Deep Ember, centred white 14px — Introducing Sift Index and our public crawl ledger. with Sift Index and Read the announcement → underlined at 450. A Hairline rule at y 63.

Header (id top): y 64 to 164, Vellum. The logo at x 220, vertically centred: a 22px four-point Ember spark with a hollow Vellum centre, then Siftwell in Inter 500 20px at -0.2px. Centred nav from x 467: Products and Resources with 12px Slate chevrons, then Pricing, Docs, Blog, Playground — 14px 450, 6px 10px padding, 8px gaps. Right-aligned, ending at x 1220: a ghost star counter (16px outlined star, 48.2K) and a 32px Sign up chip on rgba(0,0,0,0.04), 8px radius. A Hairline rule at y 164 with nodes at all four rails.

Hero (id hero): y 165 to 671, closed by a Hairline rule. Behind it a 101px square blueprint grid of Hairline lines from x 64 to 1376, aligned to x 64 and the hero top; the first row runs the full width, but below y 266 the centre from x 367 to 1073 is cleared to plain Vellum. In the grid: 3px #DCDCDC dots at cell centres, a few pixel glyphs made of 12px #ECECEC squares on a 6px gap (a 3×3 in the first cell after the left inner rail, a 4×4 near x 484, a 2×2 near x 704 in the first row, more scattered right of centre), Geist Mono bracket tags in the outer columns — [ 200 OK ] and [ CRAWL ] at the top, [ .CSV ] and [ .MD ] at the bottom — and two spark markers, 48px Vellum circles with a 1px Hairline border and an 18px four-point Ember star, centred on the intersections at (367, 266) and (1074, 266). Centred copy: at y 318 a 28px white badge with a 1px Hairline ring, Free crawl credits for open source and an 18px Ink chevron dot; at y 362 the headline Hand your AI agents / the whole live web, the second line in Ember; at y 506 a 440px 16px lede The web data API to search, scrape and crawl any site into clean markdown. ending in a rgba(0,0,0,0.04) 6px-radius highlight And it's open source. at 450; at y 580 a 36px Start for free primary button and, 12px right, a 40px secondary Connect Siftwell with three overlapping avatar dots (Ink, Ember, Graphite) and a chevron. Flanking the lede, x 372 to 560 and x 878 to 1066, y 505 to 665, two mirrored grey ASCII clouds of Geist Mono 9.5px/10px characters from the ramp . : - = + * # — denser at the core, fraying toward the copy.

Search card: centred at x 444, y 642, 552×113, above everything else. A 56px row with a 16px Slate globe and the placeholder Which rivers flow through three capitals? in 15px Slate, a 1px #F1F1F1 rule, then a 10px row holding the segmented control — Search (active, white, an eight-dot Ember burst glyph), Scrape, Map, Crawl each with a Mist dot glyph — and the 60×36 primary arrow button on the right. Beneath the card, two orange ASCII clouds in the Ember spark set ' - , : _ ^ + " = spill out from behind its lower corners down to y 830.

Product window (id product): from y 828 a 1062px wide outline window at x 189 with a 16px top radius, three 10px outlined dots, a 206px tab outline and a pill on the right, holding a white panel — the fold cuts it, so only its top shows at 1440×900. Below the fold it reveals a scraped page on the left with dashed Ember boxes labelled in mono (Logo, Navigation, H1 Title, Button) and the extracted JSON on the right in an 8px-radius code window with a Scraping… status.

Logo wall (id customers): Trusted by 150,000+ / companies of all sizes in 20px with the number in Ember, then a row of invented wordmarks in Ink separated by Hairline columns.

Feature trio with code window (id features): a numbered section header — a 2px Ember bar, a 4px Ember dot and Geist Mono 12px Slate 01 / MAIN FEATURES — then a centred Developer First badge and the 52px heading Start searching today with searching in Ember, a 16px Slate lede, three centred cards (Search, Scrape, Interact) on #F9F9F9 with a 1px Hairline border, 16px radius, a 24px Ember stroke icon in a 40px circle, 16px 500 title, 14px Slate copy and an Ember Learn more → link; beneath, language pills (Python, Node.js, cURL, CLI; the active one Ink with white text, 999px radius) over a two-pane code window — request on the left, JSON response on the right, Geist Mono 13px/1.57 with #B5B5B5 line numbers, Ember strings and #616161 comments.

Agent onboarding (id agents): 02 / POWER YOUR AGENT; a split heading Easily connect with your / AI agents (second line Ember) beside a 16px lede, then two bordered panels — One command. and Agent onboarding. — each with a tab row and a copyable mono command.

Performance benchmarks (id performance): 03 / CORE; a Built for Performance badge; Fast, reliable, token-efficient. / And it's open source with open source in Ember; a 2×2 bordered grid: a reliability card with horizontal bars (Siftwell 96% as a filled Ember bar, two competitors as outlined grey bars), a latency card with a mono URL / timing table, a token-efficiency card with skeleton lines and a token counter, and an open-source card listing recent invented commits with a star count.

Closing call (id start): a centred 52px Give your agents the web today. with the web in Ember, the primary and secondary buttons, and a mono pip install siftwell chip.

Footer: Vellum with a Hairline top rule, the Siftwell logo, four link columns (Products, Developers, Resources, Company) in 14px Slate, a mono [ ALL SYSTEMS NORMAL ] tag with an Ember dot and © 2026 Siftwell Labs.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, rule and shadow token. Render the page as a server component; the only client code is the language-pill tab switch and an optional reduced-motion-aware ASCII shimmer. Self-host Inter (variable, 400–500) and Geist Mono (400–500), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the blueprint grid with CSS background gradients, and the rails, spark markers, pixel glyphs, logo, icons, product window and benchmark bars as HTML, CSS and inline SVG; the ASCII clouds are pre-rendered monospace text in an aria-hidden pre — never a bitmap, video or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Siftwell clearly fictional and rebrandable: no real company, customer, person, mascot or logo, and no source screenshot, product name or copy reproduced. Ember is the only hue; no gradient, and no shadow darker than 5% black. Text pairs clear WCAG AA: #262626, #616161 and #727272 on #F9F9F9 and #FFFFFF; #FFFFFF on #D93A00. The #FF4D00 headline line is large text (60px) and clears 3:1 on #F9F9F9; never set body-size copy in #FF4D00. ASCII clouds, pixel glyphs, grid dots and bracket tags are decorative and hidden from assistive technology. Every link leads to a real anchor on the page; the search card is a real form with a labelled input, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible; any shimmer stops for prefers-reduced-motion. Every control shows a 2px #262626 focus ring with a 2px offset. At 360px the strip wraps to two lines, the rails collapse to the page edges, the nav becomes the logo, Sign up and a Menu button, the headline drops to 36px/40px at -0.2px, the ASCII clouds and grid hide, the mode control scrolls horizontally inside the card, card grids stack and the page never overflows horizontally.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.