Qeetrix

Introduction

The Qeetrix design system — components, tokens and icons for every Qeet product.

Qeetrix is the design system behind the Qeet Group suite. Every Qeet front end — Qeet ID, Qeet Pay, Qeet Notify and the rest — is built from it, so a button in one product looks and behaves like a button in every other.

Live

Packages

PackageWhat it contains
@qeetrix/ui145 React UI modules built on Base UI, plus the design tokens, Qeet fonts and logo
@qeetrix/icons1,863 icons in round and sharp shapes, plus the Qeet logo and wordmark

Principles

  • Token-driven. Colour, spacing, radius and elevation come from design tokens, authored in OKLCH. Components never hard-code a value, so re-theming happens in one place.
  • Accessible by construction. Components are built on Base UI, which implements WAI-ARIA behaviour, and every one is tested with axe. Text and surface pairs meet WCAG AA contrast.
  • Light and dark. Every component is themed through semantic tokens, and the theme follows a .dark class on the page.

Next steps

Installation

Add Qeetrix to a React 19 + Tailwind CSS v4 app.

Guides

Theming, Next.js and TanStack Start setup, and accessibility.

Foundations

Colour, type, space, elevation and motion, from the design tokens.

Icons

Use icons and the Qeet logos from @qeetrix/icons.

Components

Every component, with its import, variants, states and accessibility.

On this page

PackagesPrinciplesNext steps