TOKENS

Spacing, Radius & Shadows

Layout primitives built on an 8px grid. Consistent spacing, border radius, and elevation.

Spacing Scale

Based on an 8px grid. Click any row to copy the token name.

Border Radius

From sharp inputs to full pills.

none0px

sm4px

md8px

lg12px

xl16px

full9999px

Shadows / Elevation

Light, clean shadows for depth hierarchy.

shadow-xs

shadow-sm

shadow-card

shadow-md

shadow-lg

shadow-modal

Usage in Code

Tailwind (web)

<div className="p-6 rounded-lg shadow-card">
  Card with standard spacing and elevation
</div>

<div className="mt-8 mb-4 px-4">
  Spacing utilities
</div>

StyleSheet (mobile)

import { spacing, radius, shadows } from "@/components/mobile";

const styles = StyleSheet.create({
  card: {
    padding: spacing[6],      // 24dp
    borderRadius: radius.lg,  // 12dp
    ...shadows.card,          // iOS shadow + Android elevation
  },
});