Most design systems are built for the people who build products — internal dashboards, admin panels, developer tooling. Marq is built for the people who use them.
From marquee — the illuminated sign outside a theatre. The anticipation before the show starts.
Marq is a UI kit for products that put content centre stage. It targets the general public — people who stream, browse, discover, and share — which means every decision has to work for an audience that has no patience for interfaces that get in the way.
The aesthetic draws from modern media and entertainment: rich contrast, confident use of colour, interfaces that feel crafted rather than assembled. Components are opinionated enough to look good immediately but composable enough to adapt to any brand.
Guiding principles
- Content-first — UI steps back when content is present and steps forward only when interaction is required
- Motion with purpose — every transition communicates state change or guides attention; motion is a first-class material
- Accessibility — WCAG 2.1 AA as a floor, not a ceiling; the accessible choice is always the default
- Composability over configuration — consumers can reach in at any layer without fighting the system
Tech stack
Styling — Panda CSS Zero-runtime CSS-in-JS with static class extraction. Semantic tokens and typed slot recipes replace ad-hoc styling and generate a single static stylesheet at build time. Fully CSP-safe — no inline styles, ever.
Headless components — Ark UI + Zag.js Interaction logic is modelled as finite state machines via Zag.js, exposed as unstyled React components by Ark UI. WAI-ARIA compliance, keyboard navigation, and focus management are handled by the state machine — not by hand. Ark’s slot system maps directly to Panda’s slot recipes.
Build — Vite
Library mode with preserveModules: true for per-component tree-shaking, dual ESM/CJS output, and vite-plugin-dts for TypeScript declarations. Storybook shares the same Vite config.
Testing
- Vitest + React Testing Library for unit and component tests
vitest-axeruns axe-core accessibility audits on every component test automatically- Chromatic for visual regression — pixel snapshots on every PR via Storybook
Tooling
Biome for fast linting and formatting, with ESLint filling the jsx-a11y and react-hooks gaps. Lefthook for parallel git hooks. Changesets for versioning and changelog across the monorepo.
Status
In development. Currently powering Media Explorer as an in-repo package (@marq/core). Extraction to a standalone, publishable library is the next phase.