Core Components

Core Components

Design System Overview

Inspect the actual project component exports, token definitions and framework first. The names, $ tokens and props below illustrate an assumed local library; none is bundled here. Use its real documented API, preserve accessibility/native behavior and do not invent components/core imports or variantStyles. Reuse project primitives when appropriate rather than replacing valid native components solely to match this example.

Design Tokens

Prefer the project's existing semantic tokens. If no token expresses the requirement, document the exception or propose a scoped token addition; do not invent token names or change the whole design system.

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" />