Foundation guidelines in the Prism design system define the core principles and shared design decisions—such as colour, typography, spacing, layout and more—that underpin every page, component and pattern. They ensure consistency across products, helping designers and developers work more efficiently, make aligned decisions faster, and scale cohesive user experiences with confidence.
Color
Colour highlights important areas, communicates status, urgency, directs attention and reinforces brand.
Elevation
A combination of shadows and background colours used as the foundation of our UI, used to convey depth, visual hierarchy and focus.
Grid & Breakpoints
Iconography
Icons are visual symbols that communicate actions to the user, messages at a glance and act as markers for information.
Spacing
A spacing system simplifies the creation of page layouts and UI.
Typography
Create clear hierarchies, organise information to guides users, and reinforces brand.
Design Tokens
Design tokens serve as the single source of truth for naming and storing design decisions across EcoOnline's products.