Getting Started

Introduction

Ladom UI is the Ladom design system for React: design tokens, icons and components built 1:1 from the Ladom UI Figma file.

Principles

Figma is the source of truth. Colors, type, spacing, radius, depth and motion come from the Figma variables and styles. Nothing is invented in code.
Everything is a token. Components never hard-code a visual value; they use CSS custom properties such as var(--color-primary) or var(--text-ui-title).
Plain React and CSS. Components are framework-independent React with CSS Modules. No Tailwind, no runtime styling.
One icon per meaning. Every icon name maps to exactly one icon, so a product never mixes three different phone icons.

Packages

@ladom/tokens: design tokens as CSS variables, with Light/Dark themes, Desktop/Tablet/Mobile values and Comfort/Narrow density. See Foundations.
@ladom/icons: icon components with semantic names. See Icons.
@ladom/ui: React components. They are being built now and land in this site one by one.

Modes

Modes are set with attributes on <html>. Device values follow the screen width (Mobile below 768px, Tablet below 1280px) and can be forced with data-device. The Dark theme is opt-in with data-theme="dark", and Narrow density with data-density="narrow".

Next steps

Continue with Installation.