Introduction

Mitek Design System

A single source of truth for colors, typography, spacing, and UI components used across all Mitek products.

Components + Tokens
Beautiful by default.
Every token, every component — consistent across every product.
v1.0StableBetaOpen source

What's inside

SectionDescription
FoundationDesign tokens: colors, typography, spacing, radii, shadows
ComponentsReusable React components built on top of the token layer

Quick start

Install the component library:

npm install @okapidev/mitek-ui

Import styles once at your app root, then use components:

import '@okapidev/mitek-ui/styles';
import { Button, Badge, Text } from '@okapidev/mitek-ui';
 
export function App() {
  return (
    <>
      <Text variant="heading-1">Hello, Mitek</Text>
      <Button variant="primary">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 (@okapidev/mitek-ui)
└── apps/
    └── docs/            ← This documentation site
Overview