core-components

name	core-components
description	Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	frontend
risk	unknown
source	community
tags	["skill","software-development","frontend","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