DesignKit

About

1. Grid Overlay — Bootstrap-style column grid with full control over column count (1–24), gutter, max-width (fluid or all Bootstrap breakpoints), color+opacity, and horizontal offset. Drag the floating handle directly on the page to reposition. Stack multiple independent grids with different colors.

2. Element Inspector — Hover any element to see its tag, ID, classes, dimensions, position, z-index, typography, and live WCAG contrast ratio. Click to pin the selection and auto-copy the computed CSS to your clipboard.

3. Accessibility Checker — One-click WCAG 2.1 AA/AAA audit. Scans all text nodes, calculates real contrast ratios (traversing transparent backgrounds up the DOM), flags font-size violations, and overlays red/amber badges directly on failing elements with ratio values visible on-page.

4. Spacing Visualizer — Hover any element to see a tooltip with its exact margin and padding values on all four sides, and an orange/cyan/purple visual outline distinguishing the three box model zones.

5. Breakpoint Badge — A fixed badge in the corner shows your live viewport width and current named breakpoint. Supports Bootstrap 5, Tailwind CSS, and MUI.

6. Rulers & Guides — 20px rulers along the top and left edges with tick marks. Click either ruler to drop a draggable dashed guide line; double-click a guide to remove it. Mouse coordinates track in real time.

7. Color Picker — Uses Chrome's native EyeDropper API to sample any pixel on screen, returning HEX, RGB, and HSL values with a one-click copy button.