DeLibra

Collect structured design tokens of the open tab: colours, type, spacing, radii, shadows. Export CSS, W3C JSON, Tailwind or DeLibra.

DeLibra collects and structures the design tokens of the page you're on and saves them as files your AI agents can use. Click the toolbar button, then Collect tokens. DeLibra reads the page in one pass, shows a short summary of what it found, and lets you save it. Rescan whenever the page changes: another theme, another screen, a modal. What it collects: • Colours: every text, background and border colour • Type: font families, sizes, weights, line heights, letter spacing and text styles • Spacing: padding, margin and gap values • Radii: corner radii • Shadows: box shadows • CSS variables: the custom properties the page declares, as found More than a scrape DeLibra doesn't just dump the values it finds. It builds a token system the way design-system teams do: near-duplicate colours are merged by how they look, not by their hex, then named on a hue and lightness scale; spacing, radii and font sizes are snapped into consistent step scales; shadows are ordered by elevation; and the most-used combinations become text styles. Every token keeps a usage count, so the scale reflects what the site really relies on. The result is a clean, structured token library, even from pages that never had tokens: plain CSS, old sites, or sites without a single CSS variable. Save as a .lbr design system for DeLibra or as: • CSS: tokens as CSS custom properties • W3C Design Tokens (DTCG) JSON: for Style Dictionary, Tokens Studio and other token tools • Tailwind v4: an @theme block ready to paste Good for auditing your own site, starting a design system from a product that already exists, or checking that a redesign kept its scale. Use it as a starting point for your own work, not to copy someone else's brand. Private by design It runs only when you click it, only on that tab, and nothing leaves your browser. No account, no tracking, no network requests. The last result for a page is kept only until you close the browser. Turn the result into an AI-native design system The DeLibra Mac app opens a .lbr file as a libra: a living design system your coding agent (Claude, Cursor, Codex, any MCP client) can read and edit. Versions, GitHub team work, diffs and checks against your product's code, rules for AI-generated designs. No subscription, 7 days free.