v1.0.0
Design Extractor
First Release
- Click any website, or press Alt+Shift+E: its colours, type, spacing, corners, shadows, breakpoints, motion, components and CSS variables in one report.
- Colours with their roles (primary, background, text, surfaces, borders, states), a neutral scale and every colour the site uses, shown and copied as HEX, RGB, HSL or OKLCH.
- Contrast: every piece of text checked against what is really behind it, with the nearest colour that passes WCAG AA.
- Type samples in the site's real fonts, with the type scale, one style per element and where to get each font.
- Components drawn with the site's own styles: buttons, inputs, links, cards, navigation, tabs, badges, alerts and more, with their hover, focus and pressed states.
- Combines every page you read of a site into one system, or shows each page alone: two pages of a site can have different designs.
- Export an HTML document of the whole report (no scripts: a menu of its sections, light or dark, the pages read on its cover; pick its sections, with or without the site's fonts), DESIGN.md, design tokens (W3C), CSS variables with the site's dark values, or a Tailwind v4 theme; read it first, then download or copy it.
- Sort any table in the report by a column: click its head, and again for the other way.
- Pick: point at any element (Alt+Shift+P, or the right-click menu) to see its type, colours, contrast and spacing with the site's own CSS variables, and copy it as CSS.
- Stylesheets served from another domain read too, when you allow that domain.
- Your sites as previews or a list, sorted by date, name, pages or colours; forget one site or all of them.
- Light and dark, a guide and a tour.