Matchids Design System

Design tokens, a shared Tailwind preset, brand assets, and reusable UI components for every Matchids product — matchids-web and matchids-admin both build on this instead of redefining the same colors and components twice.

What's here

assets/
  logo/            Primary logo (matchids-logo.png)
  favicon/          Pre-generated 16/32/180/512px favicons
src/
  tokens/
    colors.ts        Brand palette
    typography.ts     Font families + type scale
    spacing.ts         Spacing + border radius (including "blob", the signature soft corner)
  components/
    Button, Badge, Card, Alert, Modal
    BookCard, DonationCard, PaymentMethodOption
  tailwind-preset.ts  Shared Tailwind config — see usage below
docs/
  BRAND.md            Logo usage, color meaning, typography rationale, tone

Using the Tailwind preset

// tailwind.config.ts in matchids-web or matchids-admin
import matchidsPreset from "@matchids/design-system/tailwind-preset";

export default {
  presets: [matchidsPreset],
  content: ["./src/**/*.{ts,tsx}"],
};

Using components

import { Button, BookCard, Badge } from "@matchids/design-system";

<Button variant="coral">Give Back</Button>

Every component is a plain React component with Tailwind classes — no CSS-in-JS, no runtime theme provider needed. They assume the consuming app has loaded the Tailwind preset above (for the color/font tokens) and the Baloo 2 / Plus Jakarta Sans fonts (loaded via next/font/google in each app's root layout).

Design language

International, warm, playful without being childish, professional enough that a parent skimming pricing or a donation receipt trusts it. See docs/BRAND.md for the full rationale — the short version: rounded display type and a saturated multi-color palette (drawn straight from the logo) paired with generous whitespace and a clean body font, so the product reads as considered rather than templated.

Local setup

npm install
npm run typecheck
npm run lint

This package isn't meant to run standalone — it's consumed by matchids-web and matchids-admin via a workspace/local dependency.