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 10 shades of 10 colour variables, ranging from Primary to Denary.
• Additional shades are provided for CTA, Base, Neutral, and Contrast colour variables, allowing for flexible theming.

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, Wide, and Full.
• 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 xLarge (100px).

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.