Mitek Design System

Welcome to the Mitek Design System — a single source of truth for colors, typography, spacing, and UI components used across all Mitek products.

This documentation is intended for design and engineering teams building on top of the Mitek design foundation.

What's inside

Section	Description
Foundation	Design tokens: colors, typography, spacing, radii, shadows
Components	Reusable React components built on top of the token layer

Quick start

Install the component library from the private registry:

npm install @mitek/ui

Import the component styles and start using components:

// Import styles once at your app root
import '@mitek/ui/styles';
 
// Use components
import { Button, Badge } from '@mitek/ui';
 
export function App() {
  return (
    <Button variant="primary" size="md">
      Get started
    </Button>
  );
}

Token-first philosophy

Every value in every component — colors, spacing, radii, shadows, typography — comes from a design token. This means:

One change, everywhere: update a token and all components update.
Consistent output: no magic numbers scattered across files.
Easy theming: swap a token file to change the entire visual language.

Tokens are defined in /tokens/*.json and compiled to CSS custom properties (prefixed --mk-).

Repository structure

design-ui/
├── tokens/              ← Raw token definitions (JSON)
├── packages/
│   ├── tokens/          ← Compiled token package (@mitek/tokens)
│   └── ui/              ← Component library (@mitek/ui)
└── apps/
    └── docs/            ← This documentation site

Overview