Introduction
ELFBAR Design System is a unified design language system serving both ELFBAR and LOSTMARY brands. It provides designers and developers with consistent design standards and reusable components, ensuring a coherent experience across platforms and brands.
Core Features
Dual-Brand Support
The system supports both ELFBAR and LOSTMARY brands. Use the brand switcher in the top-right corner to preview color and component differences between brands.
Light / Dark Theme
All tokens and components support both light and dark theme modes. The semantic color system ensures readability and accessibility when switching themes.
Responsive Design
The spacing and typography systems have built-in responsive adaptation for mobile and desktop, automatically switching at the @media (min-width: 1024px) breakpoint.
Design Tokens
All design specifications are provided as CSS variables with the --ds- prefix:
/* Colors */
--ds-color-brand-accent1-default
--ds-color-text-primary
--ds-color-background-primary
/* Typography */
--ds-font-size-headline-lg
--ds-font-weight-medium
/* Spacing */
--ds-spacing-comp-md
--ds-radius-lg
Installation
Token CSS files are located in the @design-system/tokens package:
# Build tokens
npm run build:tokens
Each brand generates three CSS files:
| File | Purpose | Selector |
|---|---|---|
light.css | Light theme | :root |
dark.css | Dark theme override | [data-theme="dark"] |
desktop.css | Desktop responsive override | @media (min-width: 1024px) |
Figma Resources
Design source files are available in Figma: ELFBAR Design System (Beta)