The LSX Design System provides a robust set of variables and tokens to ensure consistency and flexibility across your designs. These cover essential design elements such as colours, typography, spacing, and prototyping components. Below is a breakdown of the key variables and tokens included in the system, in their variable files.:

Colours/Primitives: #

• Includes a Base and Contrast, plus colours for Accent 1 – Accent 5, and a 33% opacity Accent 6, all aligning with WordPress 2025 theme naming conventions.

Colours/Semantic: #

• Contains colour variables and tokens for state-specific elements such as Disabled, Information, Input, Success, Warning, and Error.

Radii: #

• 7 number variables for radius values, from 0 (no radius) to fully rounded, for consistent corner styling.

Sizing: #

• 3 variables for screen sizes: Content Width, Wide Width, and Full Width.
• 10 variables for column sizing, ranging from 20% to 70% wide, ensuring layout flexibility across various devices.

Breakpoints: #

• 3 breakpoints tailored for Desktop, Tablet, and Mobile screen sizes.

Spacing: #

• 8 number variables for spacing and padding, aligning with the WP Site Editor, ranging from None (0px) to XX-Large (80px).

Tokens: #

• Colour Tokens: 10 for backgrounds and 7 for text.
• Button Tokens: Tokens for default, hover, and active states for Link, CTA, Primary, Secondary, and Tertiary buttons. Also includes tokens for disabled button text, background, and border colours.
• Link Tokens: Covers states like Default, Hover, Active, Focus, Visited, and Disabled.
• Padding Tokens: Tokens for padding in Large, Medium, and Small buttons.

Typography: #

• 8 variables for body text sizes from xSmall to Gigantic.
• 4 heading size variables from xSmall to Large.
• 6 variables for Primary and Secondary heading font weights (H1-H6) and 3 for subheading font weights (Small to Large), aligning with the LSX Theme.
• 2 text variables for Primary and Secondary font families, along with line height variables for headings, subheadings, and body text.

Prototyping: #

• Various controller variables for managing dropdown states (sorting and navigation), text displays, inputs, quantity counters, input fields, star-ratings, and gallery sliders.

Prototypes – Single Product: #

• Includes controller variables for dropdowns, button states, item prices, quantities, total prices, and visibility states for single product pages.

Prototypes – Global: #

• Provides controller variables for cart and checkout processes, including shipping and payment options.

Prototype Cards – Cart: #

Contains variables for managing quantity, item price, total price, and visibility for cart items.