# @ledgerhq/lumen-design-core **Design tokens and Tailwind presets for Ledger Design System** - Centralized design tokens that ensure consistency across React and React Native applications. All design tokens are automatically synchronized with Figma via the Figma REST API. ## 📦 Installation ```bash npm install @ledgerhq/lumen-design-core # Install required peer dependency npm install tailwindcss ``` **Note:** Tailwind CSS v3.x is required as a peer dependency. Not compatible yet with Tailwind CSS v4. ## ⚡ Quick Setup Create or update your `tailwind.config.js`: ```typescript import type { Config } from 'tailwindcss'; import { ledgerLivePreset } from '@ledgerhq/lumen-design-core'; const config = { content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@ledgerhq/lumen-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}'], presets: [ledgerLivePreset], } satisfies Config; export default config; ``` ## 🎨 Design Tokens ### Colors & Typography ```tsx // Semantic colors that auto-adapt to light/dark themes

Secondary text

Success state
// Typography system

Main Heading

Regular paragraph text

``` ### Spacing & Layout 1:1 pixel mapping where each number equals its pixel value: ```tsx
{/* padding: 4px, margin: 8px, gap: 12px */} ``` ## 🌓 Dark Mode Support All design tokens automatically support dark mode: ```tsx
Dark mode content
``` ## 🔧 Alternative Usage For non-Tailwind projects, use CSS custom properties: ```css .my-component { background-color: var(--color-background-base); color: var(--color-text-base); padding: var(--spacing-16); } ``` ## 🔄 Token Synchronization All design tokens are automatically kept in sync with Figma design files through: - **Figma REST API integration** - Tokens are extracted directly from Figma design system - **Automated updates** - Changes in Figma are automatically reflected in the token library - **Version consistency** - Ensures perfect alignment between design and code ## 🔗 Links - [📚 Full Documentation](https://ldls.vercel.app) - [🎨 Setup Tailwind](https://ldls.vercel.app/?path=/docs/getting-started-setup-tailwind--docs) - [🏠 Repository](https://github.com/LedgerHQ/lumen)