@chekinapp/tokens

Design tokens for Chekin UI — CSS variables for colors, typography, spacing, and component primitives.

Architecture

One kit, surface-specific tokens

All UI components read from CSS variables. Different surfaces (dashboard, guest, marketing) load different token values, making the same component look appropriate for its context.

@chekin/tokens
  base/              ← shared foundation (minimal, grow on demand)
    colors.css       essential brand colors
    typography.css   font families, weights
    spacing.css      spacing scale (add as needed)
    radii.css        border radius
    shadows.css      focus and outline shadows
    components.css   component tokens (Button)

  surfaces/          ← surface-specific overrides
    dashboard.css    Montserrat, radius=6px, compact sizing
    guest.css        Poppins, radius=24px, larger touch targets

Philosophy: Start minimal, add tokens on demand. Don't add tokens until they're actually used by a component.

Usage

In consumer apps

Import the surface CSS file that matches your app:

// apps/dashboard/src/main.tsx
import '@chekinapp/tokens/surfaces/dashboard.css';
import {Button} from '@chekinapp/ui';

// Button automatically uses Montserrat, 6px radius, 40px height

// apps/guestapp/src/main.tsx
import '@chekinapp/tokens/surfaces/guest.css';
import {Button} from '@chekinapp/ui';

// Same Button component, now uses Poppins, 24px radius, 56px height

Legacy import

For backward compatibility, @chekinapp/tokens/tokens.css imports the dashboard surface by default:

import '@chekinapp/tokens/tokens.css'; // equivalent to dashboard.css

Component tokens

Components read from CSS variables defined in base/components.css and overridden in surfaces:

Button

/* Base defaults */
--button-radius: var(--chekin-radius-button); /* 12px */
--button-height-default: 40px;
--button-primary-bg: var(--chekin-color-brand-main-blue);
--button-primary-text: var(--chekin-color-white);

/* Dashboard override */
--button-radius: var(--chekin-radius-input); /* 6px */

/* Guest override */
--button-radius: 24px;
--button-height-default: 56px;

Adding new surfaces

1. Create src/surfaces/marketing.css
2. Import base tokens
3. Override surface-specific values
4. Export in package.json
5. Document usage

Philosophy

• Components are surface-neutral — they only read CSS variables
• Surfaces are composable — base + overrides
• No runtime overhead — pure CSS, no JS token resolution
• Type-safe Tailwind utilities — optional preset for each surface