core-components

Core Components

Design System Overview

Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.

Design Tokens

NEVER hard-code values. Always use design tokens.

Spacing Tokens

// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />

// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />

Token	Value
$1	4px
$2	8px
$3	12px
$4	16px
$6	24px
$8	32px

Color Tokens

// CORRECT - Semantic tokens
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />

// WRONG - Hard-coded colors
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />

Semantic Token	Use For
$textPrimary	Main text
$textSecondary	Supporting text
$textTertiary	Disabled/hint text
$primary500	Brand/accent color
$statusError	Error states
$statusSuccess	Success states

Typography Tokens

<Text fontSize="$lg" fontWeight="$semibold" />

Token	Size
$xs	12px
$sm	14px
$md	16px
$lg	18px
$xl	20px
$2xl	24px

Core Components

Box

Base layout component with token support:

<Box
  padding="$4"
  backgroundColor="$backgroun