From marquee — the illuminated sign outside a theatre. The anticipation before the show starts.
Marq is a UI kit built for products that put content centre stage. It targets the general public — people who stream, browse, discover, and share — not developer tooling or internal dashboards.
The aesthetic draws from the visual language of modern media and entertainment: rich contrast, confident use of colour, and 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
Pre-development. Technology investigation complete. Ready to scaffold.