CHROMIQ
Contrast · Harmony · Radius · Output · Motion · Inspect · Quality
A browser-first visual design workbench for frontend developers. Tune a live token system, compare directions, and export implementation-ready output in the formats your stack already uses.
What each letter does
- Contrast — WCAG contrast checks with per-pair grades, an auto-fix for failing pairs, and a color-vision preview.
- Harmony — accent-driven palettes in analogous, complementary, triadic, monochrome, and split-complementary modes, with light/dark theme pairs and semantic state colors.
- Radius — the shape layer: radius, spacing, border width, shadow depth, and breakpoints.
- Output — CSS custom properties, Tailwind v4, shadcn/ui variables, a JSON token file, DTCG, a portable project file, and a generated DESIGN.md.
- Motion — a motion-duration token that drives the preview, plus a reduced-motion setting honored across the UI.
- Inspect — a server-validated URL inspector (SSRF-safe, 8s timeout, 1.5 MB cap) that reconstructs a public page's title, headings, and hex colors with an honest confidence label.
- Quality — failing tokens are flagged before download, and named snapshots, local version history (commit/restore/compare), and undo/redo keep every direction recoverable.
Also in CHROMIQ
- Live preview — a DOM preview that reacts to every token change: light and dark surfaces, desktop/tablet/mobile/custom widths, zoom, and a side-by-side compare view.
- Type system — a 12-font Google Fonts catalog with display/body/mono pairing, plus type scale, line height, and tracking.
- Landing page and workspace —
/ is a landing page with a live restyle demo; the workbench itself lives at /workspace.
- Reading comfort — a calm Comfort mode (default) and a High-contrast mode, switchable on the landing page and in the workspace. The choice is remembered in the browser.
- Six preview surfaces — SaaS, dashboard, commerce, docs, editorial, and type specimen, all driven by the same tokens. Text in each surface is editable in place.
- Restyle any website — paste a link and CHROMIQ loads a scripts-off copy through a server proxy (
/api/proxy: SSRF-checked, size and time limited, rate limited). Change type, colors, accent, and radius live, then copy the override CSS. It is a static preview, not the live site, so pages built entirely with JavaScript may render incompletely and some sites cannot be fetched.
- CHROMIQ on any site bookmarklet — a drag-to-bookmarks-bar button (
public/chromiq-widget.js) opens a floating restyle panel over the live page you are on. Sites with strict Content Security Policies can block bookmarklets or Google Fonts; use paste-a-link on those.
Stack
| Technology | Version | Purpose |
|---|
| Next.js | ^15 | App Router shell and routes |
| React | ^19 | UI |
| TypeScript | ^5 | Types |
| Tailwind CSS | ^4 | Styling, driven by CHROMIQ tokens |
| Lucide React | ^0.468 | Icons |
| Motion | ^14 | Transitions and micro-animations |
Prerequisites
Node.js 18.18 or newer, and npm.
Getting started
npm install
npm run dev
Open http://localhost:3000.
Production build and serve:
npm run build
npm run start
Type-check and lint:
npm run lint
Export formats
CHROMIQ exports the active token system to CSS custom properties, Tailwind v4, shadcn/ui variables, a JSON token file, a portable project file, and a generated DESIGN.md summary. Every format is copyable and downloadable, and failing tokens are flagged before download.
Project structure
app/ routes (/ landing, /workspace), global styles, /api/inspect and /api/proxy
components/landing/ landing page sections, live demo, and bookmarklet block
components/workspace/ shell (topbar, sidebar, canvas, inspector) and modals
components/workspace/surfaces/ the six token-driven preview surfaces
components/workspace/restyle/ restyle view, engine, controls, and state
public/chromiq-widget.js the "CHROMIQ on any site" bookmarklet panel
lib/safe-fetch.ts SSRF-safe fetch used by the inspector and proxy
lib/url-safety.ts public-URL and private-address validation
lib/rate-limit.ts in-memory rate limiter and concurrency slots
hooks/use-workspace.ts token state, undo history, persistence, and exports
data/workspace.ts default tokens, starter presets, and the font catalog
lib/ color math, contrast, importers, font loader, validation
types/workspace.ts token and workspace types
DESIGN.md visual source of truth
BACKLOG.md Jira-style product backlog (epics CHROMIQ-100–CHROMIQ-900)
Design and product
DESIGN.md is the source of truth for look and feel; the UI reads from the CHROMIQ token variables rather than hardcoded values. BACKLOG.md tracks the product across nine epics, from the workbench shell through export and quality.
made by MikeKomari
