The LSX Design System provides a detailed Style Guide organised across several pages, covering key design elements such as colours, typography, icons, and patterns. This guide ensures consistency and helps streamline the design process by offering clear standards for all visual elements.

Style Guide Page:

• Link to the page: LSX Design System Style Guide Page

• Divided into three core sections: Style Guide, Components, and Patterns.
  • Style Guide Section: Includes the full colour palette, text variations, breakpoint sizes, and column sizes to maintain consistent design standards.
  • Component Section: Showcases examples of essential elements like button states, text inputs, cards, decorators, lists, and images.
  • Pattern Section: Contains examples of patterns used in designs, including Contact, Content, CTA, FAQ, Gallery, Hero, Layout, Logos, Testimonials, and Team patterns from the pattern library.

Icons Page:

• Link to the page: LSX Design System Icons Page

• Features the site icon and logo, along with an extensive icon library organised into categories such as Arrows, Chevrons, Lists, Accordion, User, Contact, Blog, Document, Chat, eCommerce, Alerts, Video, Device, Rate, Navigation, and Social icons.

Placeholders Page:

• Link to the page: LSX Design System Placeholders Page
• Provides placeholders for images, users, and display frames, which can be used to create mock-ups and test layouts efficiently.

Backgrounds Page:

• Link to the page: LSX Design System Backgrounds Page
• Contains repeatable patterns that can be used as backgrounds, allowing for consistent styling across various pages and sections of the website.