u42 Design System

Figma tokens / SCSS components / SvelteKit - Figma source

Foundations

Colors Semantic tokens and primitive paletteTypography Scale, families, weightsSpacing Tokens --space-* base 16 pxRadius & Blur Border radius and blur levels

Components

Button Primary, ghost, destructiveTable CSS grid list with status dotTags Semantic badgesAccordion Expandable contentCards Surfaces with title and contentDialog Modal window

Examples

Test card UX test card compositionEmpty state Zero data screen patternSettings Settings form with sections