scrape.ly — Design System & Product Site
LiveA web scraping platform's brand site built on a bespoke twelve-column editorial grid, a strictly layered design-token architecture with an enforced rule about what may reference what, and an A/B landing variant that reshapes the layout through CSS alone — no UI kit, no component-API cost.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
- HugeIcons
- ESLint
- Prettier
- Vercel
Overview#
scrape.ly sells web scraping infrastructure — scrapers, proxies, an API, prebuilt templates, and a template store — to developers and data teams. The site covers the product lines, the resources, the company, and the legal surface.
The dependency list is deliberately short: Next, React, Tailwind, one animation library, one icon set, and nothing else. No UI kit, no CSS-in-JS. Everything visual is built on a design system defined in a single stylesheet and a small set of layout primitives — and that is the actual deliverable here. The pages are the easy part; the foundation is what determines whether the site still looks coherent after a year of other people adding to it.
The Grid System#
Every page is composed from two primitives, and the whole site inherits its rhythm from them.
SiteGrid establishes a twelve-column grid. GridRow then splits each row identically every time — two columns of decor, eight of content, two of decor — as three components: a left decor cell, a content cell, and a right decor cell.
What makes it hold is the CSS underneath. Below the breakpoint, the grid is twelve equal columns. Above it, the template becomes fluid margin, gutter, eight content columns, gutter, fluid margin — so the content band is a fixed measure and all the extra space is pushed to the outside where it belongs. Rows stretch, which is why the decorative side cells always match the height of whatever content sits between them, with no manual sizing anywhere.