Agriculture Design System
Design System for the Export Service


Our design tokens are the foundation of our design system. They are the building blocks of our components and are used to create a consistent look and feel across all of our products.

  • Border

    Guidelines for using borders across the Design System.
  • Breakpoints

    Breakpoints are a set of predefined viewport widths that can be used to change the layout of a webpage to ensure it accommodates different devices.
  • Colour

    How to use colour to design consistent, purposeful, and accessible products.
  • Elevation

    A set of predefined tokens which are used to establish a sense of depth and perspective.
  • Max width

    Used to set the maximum width of elements and containers in a page layout.
  • Spacing

    Space is the distance between interface elements. It can affect grouping, visual hierarchy, and aesthetics.
  • Typography

    A set of predefined text styles to ensure text is consistent and legible.