Skip to main content

​
Design System Overview

Interface X uses a comprehensive design system built on Tailwind CSS to provide consistent, themeable components for commerce search and discovery experiences.

​
Architecture

The design system consists of several layers:

​
Core Theme

The theme defines design tokens for colors, typography, spacing, and other visual properties. All theme values are accessible through the theme('x.*') helper in component styles. 
export default {
  colors: {
    neutral: {
      0: '#FFFFFF',
      10: '#EEF1F2',
      25: '#DBE2E5',
      50: '#5F717B',
      75: '#3C494F',
      90: '#283034',
      100: '#000000',
    },
    lead: {
      25: '#BBC9CF',
      50: '#5E7782',
      75: '#243D48',
    },
    auxiliary: {
      25: '#E3F0F5',
      50: '#0086B2',
      75: '#006485',
    },
    accent: {
      25: '#F8EBEF',
      50: '#D44A6F',
      75: '#A42748',
    },
    // Additional color palettes...
  },
  spacing: {
    0: '0px',
    1: '1px',
    2: '2px',
    4: '4px',
    8: '8px',
    12: '12px',
    16: '16px',
    20: '20px',
    24: '24px',
    // Up to 512px
  },
  fontSize: {
    xxs: '10px',
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '20px',
    xl: '24px',
    '2xl': '32px',
    // Up to 8xl
  },
  borderRadius: {
    none: 0,
    xs: '2px',
    sm: '4px',
    md: '8px',
    lg: '16px',
    xl: '32px',
    full: '99999px',
  },
}
Source: /home/daytona/workspace/source/packages/x-tailwindcss/src/x-tailwind-plugin/theme.ts:1

​
Component Styles

Components are built using utility-first CSS with pre-configured styles. Each component:
  • Has a base class (e.g., .x-button, .x-suggestion)
  • Supports modifiers for variants (e.g., .x-button-outlined, .x-button-ghost)
  • Uses CSS custom properties for theming
  • Responds to the x-selected variant
export function buttonDefault(helpers: TailwindHelpers) {
  const { theme } = helpers
  return {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    
    borderStyle: 'solid',
    borderWidth: theme('x.borderWidth.1'),
    
    fontFamily: theme('x.fontFamily.main'),
    fontWeight: theme('x.fontWeight.bold'),
    
    backgroundColor: `var(--button-color-50, ${theme('x.colors.neutral.90')})`,
    borderColor: `var(--button-color-50, ${theme('x.colors.neutral.90')})`,
    color: theme('x.colors.neutral.0'),
    
    '&:hover,&:active': {
      backgroundColor: `var(--button-color-75, ${theme('x.colors.neutral.100')})`,
      borderColor: `var(--button-color-75, ${theme('x.colors.neutral.100')})`,
    },
  }
}
Source: /home/daytona/workspace/source/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/default.ts:1

​
Available Components

The design system includes pre-styled components for:

Interactive Elements

  • Buttons (default, outlined, ghost, link)
  • Input fields and groups
  • Tags and badges
  • Facet filters

Content Display

  • Pictures with aspect ratios
  • Typography styles
  • Highlight components
  • Progress bars

Layout Components

  • Layouts with max-width constraints
  • Scroll containers
  • Sliding panels
  • Button groups

Search Components

  • Suggestions and suggestion groups
  • Query highlighting
  • Attach components
  • Icons

​
Design Tokens

​
Color System

Colors are organized into semantic categories with tint levels (25, 50, 75):
  • Neutral: Primary grayscale palette
  • Lead: Primary brand color
  • Auxiliary: Secondary brand color
  • Accent: Accent color for emphasis
  • Highlight: Alternative highlight color
  • Success: Success states
  • Warning: Warning states
  • Error: Error states

​
Typography

Four font families are available:
  • main: Inter, sans-serif (default)
  • alternative: Lora, serif
  • extra: Poppins, sans-serif
  • special: Bree Serif, serif
Font sizes range from xxs (10px) to 8xl (96px).

​
Spacing Scale

The spacing scale uses a combination of small increments (1px, 2px, 4px) and a base-8 system (8px, 16px, 24px…) up to 512px.

​
Responsive Breakpoints

screens: {
  tablet: '744px',
  desktop: '1280px',
  large: '2560px',
}

​
CSS Custom Properties

Components use CSS custom properties to enable runtime theming: 
/* Button component uses CSS variables */
background-color: var(--button-color-50, #283034);
border-color: var(--button-color-50, #283034);

/* Override by setting custom properties */
.my-custom-button {
  --button-color-50: #0086B2;
  --button-color-75: #006485;
}
This allows you to customize component colors without modifying the theme.

​
Next Steps

Tailwind Plugin

Install and configure the x-tailwindcss plugin

Customization

Learn how to customize the design system

Build docs developers (and LLMs) love

Get started for freeTalk to us