Colours
The Luaris Framework's design system includes a comprehensive colour palette that provides a wide range of options for creating visually appealing and accessible user interfaces. The colour palette is organized into several categories, including primary, secondary, neutral, and accent colours.
NOTE
You can click on any colour swatch to copy the corresponding CSS variable to your clipboard for easy use in your projects.
Palette
The primary colour palette consists of a set of core colours that are used to establish the overall look and feel of the application. These colours are designed to work well together and can be used for various UI elements, such as buttons, links, and backgrounds. Each colour in the palette is available in multiple shades, allowing for flexibility in design while maintaining a cohesive visual identity.
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
--lighter
--light
--dark
--darker
Surfaces
The surface colour palette includes a range of colours that are used for different surface levels in the application, such as backgrounds, cards, and modals. These colours are designed to provide sufficient contrast and visual hierarchy while maintaining a consistent aesthetic.
base
raised
sunken
overlay
border
inverse
State Colours
State colours relate to the various states of a UI element, such as hover, active, focus, and disabled. These colours are designed to provide clear visual feedback to the users through just colour.
WARNING
State colours are only generated for the core colour palette, i.e.: primary, secondary, accent, info, success, warning, danger, text, white, black, and do not include shades or surface colours, this is to ensure that the state colours maintain a consistent relationship with the core colours and provide clear visual feedback across the application. Shades and surface colours are meant to be used for specific design purposes to show differences in depth and hierarchy.
State: On
The on colour palette consists of colours that are used for content placed upon colours from the core palette, this does not include shades or surface colours, this is primarily used for the core colours list, i.e.: primary, secondary, accent, info, success, warning, danger, text, white, black.
on-primary
on-secondary
on-accent
on-info
on-success
on-warning
on-danger
on-text
on-white
on-black
State: Hover
The hover colour palette includes colours that are used to indicate when a user is hovering over an interactive element and are designed specifically for hover states.
primary
hover-primary
secondary
hover-secondary
accent
hover-accent
info
hover-info
success
hover-success
warning
hover-warning
danger
hover-danger
text
hover-text
white
hover-white
black
hover-black
State: Active
The active colour palette includes colours that are used to indicate when a user is actively interacting with an element, such as clicking or tapping, and are designed specifically for active states.
primary
active-primary
secondary
active-secondary
accent
active-accent
info
active-info
success
active-success
warning
active-warning
danger
active-danger
text
active-text
white
active-white
black
active-black
State: Disabled
The disabled colour palette includes colours that are used to indicate when an element is disabled and not interactive, and are designed specifically for disabled states.
primary
disabled-primary
secondary
disabled-secondary
accent
disabled-accent
info
disabled-info
success
disabled-success
warning
disabled-warning
danger
disabled-danger
text
disabled-text
white
disabled-white
black
disabled-black