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.
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.
All tokens and components support both light and dark theme modes. The semantic color system ensures readability and accessibility when switching themes.
The spacing and typography systems have built-in responsive adaptation for mobile and desktop, automatically switching at the @media (min-width: 1024px) breakpoint.
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-lgToken CSS files are located in the @design-system/tokens package:
# Build tokens
npm run build:tokensEach 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) |
Design source files are available in Figma: ELFBAR Design System (Beta)