@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/guidelines.md

@@ -1,2054 +0,0 @@
-# Design Guidelines
-
-This document contains all design foundations and guidelines for the design system.
-
-## Introduction
-
-[](#introduction)Introduction
-=============================
-
-The IDS and product design team use the foundations to create a consistent user experience across all Iress products. This includes design principles and guidelines that ensure a cohesive look and feel.
-
-1.  [Principles](./?path=/docs/foundations-principles--docs)
-2.  [Accessibility](./?path=/docs/foundations-accessibility--docs)
-3.  [Tokens](./?path=/docs/foundations-tokens-introduction--docs)
-4.  [Breakpoints](./?path=/docs/foundations-breakpoints--docs)
-5.  [Consistency](./?path=/docs/foundations-consistency--docs)
-6.  [Grid](./?path=/docs/foundations-grid--docs)
-7.  [Content](./?path=/docs/foundations-content--docs)
-8.  [User Experience](./?path=/docs/foundations-user-experience--docs)
-9.  [Visual Design](./?path=/docs/foundations-visual-design--docs)
-10.  [Z-index (stacking)](./?path=/docs/foundations-z-index-stacking--docs)
-
-_This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
-
-On this page
-
-## Principles
-
-[](#core-design-principles)Core Design Principles
-=================================================
-
-[](#consistency)Consistency
----------------------------
-
-*   Maintain brand consistency across all applications and experiences
-*   Use standardised component naming conventions (all components start with `Iress` prefix)
-*   Leverage shared design tokens for spacing, colours, typography, and interactive states
-*   Ensure consistent behaviour patterns across similar components
-
-[](#accessibility-first)Accessibility First
--------------------------------------------
-
-*   Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
-*   Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
-*   Implement comprehensive keyboard navigation support
-*   Include screen reader compatibility with appropriate ARIA attributes
-*   Support focus management and skip navigation patterns
-*   Document accessibility considerations and requirements
-
-[](#clarity-and-usability)Clarity and Usability
------------------------------------------------
-
-*   Prioritise clear visual hierarchy through typography scales and spacing systems
-*   Use progressive disclosure to manage complexity
-*   Provide immediate feedback for user actions (loading states, validation, etc.)
-*   Design for touch-friendly interfaces with adequate target sizes
-
-[](#developer-experience)Developer Experience
----------------------------------------------
-
-*   Maintain clean component APIs with predictable prop patterns
-*   Provide comprehensive documentation with usage examples
-*   Include common patterns and anti-patterns
-*   Support both controlled and uncontrolled component patterns
-*   Enable efficient testing strategies with semantic roles and accessible queries
-*   Maintain up-to-date prop documentation and type definitions
-
-[](#quality-assurance)Quality assurance
----------------------------------------
-
-*   Test components across supported browsers and devices
-*   Validate accessibility compliance with automated and manual testing
-*   Ensure proper keyboard navigation functionality
-*   Test with assistive technologies (screen readers, voice control)
-
-### [](#code-standards)Code Standards
-
-*   Follow consistent naming conventions for CSS classes and component props
-*   Use semantic HTML elements where appropriate
-*   Implement proper TypeScript typing for better developer experience
-*   Maintain clean separation between presentation and logic
-
-### [](#performance-considerations)Performance Considerations
-
-*   Optimise component rendering and re-rendering
-*   Implement appropriate code splitting strategies
-*   Use efficient animation and transition patterns
-*   Consider bundle size impact of component dependencies
-
-On this page
-
-*   [Consistency](#consistency)
-*   [Accessibility First](#accessibility-first)
-*   [Clarity and Usability](#clarity-and-usability)
-*   [Developer Experience](#developer-experience)
-*   [Quality assurance](#quality-assurance)
-    *   [Code Standards](#code-standards)
-    *   [Performance Considerations](#performance-considerations)
-
-## Accessibility
-
-[](#accessibility)Accessibility
-===============================
-
-Accessibility is everyone's responsibility. It ensures that all users, regardless of their abilities or disabilities, can access and interact with our components effectively. This document outlines the key practices for building accessible components we follow within IDS.
-
-Please note: The default behaviour of our components is to be accessible, but it is the responsibility of the product to ensure that they are used correctly in accessibile context, or any modifications made to them do not compromise accessibility.
-
-[](#interaction-patterns)Interaction Patterns
----------------------------------------------
-
-### [](#keyboard-navigation)Keyboard Navigation
-
-*   Support standard keyboard shortcuts (Tab, Arrow keys, Enter, Space, Escape)
-*   Implement proper focus order and visual focus indicators
-*   Provide keyboard alternatives for mouse-only interactions
-*   Follow established ARIA patterns for complex widgets
-
-### [](#touch-interactions)Touch Interactions
-
-*   Provide adequate touch target sizes (minimum 44px)
-*   Implement touch-friendly spacing between interactive elements
-*   Support gesture-based interactions where appropriate
-*   Ensure consistent behaviour across device types
-
-### [](#loading-and-feedback)Loading and Feedback
-
-*   Use appropriate loading patterns based on context:
-    *   **Page**: Full page loading states
-    *   **Component**: Local loading within sections
-    *   **Button**: Inline loading for form submissions
-    *   **Validate**: Server-side validation feedback
-*   Provide clear success and error feedback
-*   Use progressive enhancement for better perceived performance
-
-On this page
-
-*   [Interaction Patterns](#interaction-patterns)
-    *   [Keyboard Navigation](#keyboard-navigation)
-    *   [Touch Interactions](#touch-interactions)
-    *   [Loading and Feedback](#loading-and-feedback)
-
-## Introduction
-
-[](#tokens)Tokens
-=================
-
-Design tokens are an integral part of the design system. They help us create consistency across components by sharing common design decisions and simplify our theming ecosystem.
-
-[](#what-are-tokens)What are tokens?
-------------------------------------
-
-Tokens are a set of variables that define the design properties of a component. They are used to define the visual properties of a component, such as colours, typography, spacing, and more.
-
-[](#token-list)Token list
--------------------------
-
-The table below shows all the new and old tokens in the design system. Use the filters to narrow down the list of tokens.
-
-Columns: 4 selected
-
-labelaliasdescriptionreadonly
-
-* * *
-
-typedefaultValuedeprecated
-
-None selected
-
-Show deprecated tokens
-
-Tokens (88)
-| Name
- | Alias
-
- | Description
-
- | Themeable
-
- |
-| --- | --- | --- | --- |
-| colour.primary.fill |  | Used for primary buttons and the active state of form controls such as checkboxes and radio buttons. Also used for the border of tags when they have a custom button. |  |
-| colour.primary.fillHover |  | Used for the hover state of primary buttons as well as hovering over active form controls. |  |
-| colour.primary.onFill |  | Used as the foreground colour on primary buttons and active form controls. |  |
-| colour.primary.surface |  | Used as the background colour for secondary buttons and the focused state of menu and tab items. Also used as the background colour of active buttons. |  |
-| colour.primary.surfaceHover |  | Used for the hover state of secondary buttons, form controls and hovering over focused menu and tab items. Also used when hovering over table rows. |  |
-| colour.primary.text |  | Used for text on primary buttons, active form controls and focused tab and menu items. Also used for the link text colour and tertiary buttons. |  |
-| colour.neutral.10 |  | Used as the default background colour for most components. For tooltips, it is used as the foreground colour for the tooltip content. |  |
-| colour.neutral.20 |  | Used as the alternating background colour for components such as tables. Used as the background colour behind panels and cards for highly interactive screens. |  |
-| colour.neutral.30 |  | Used as the border colour for dividers, and the default divider colour for components with in-built headers and footers such as cards. |  |
-| colour.neutral.40 |  | Used for borders in subtle interactive components, such as checkboxes and radios with hidden controls and the progress bar. |  |
-| colour.neutral.50 |  | Used as the background colour for interactive components such as the slider. |  |
-| colour.neutral.60 |  | Used for placeholder text in form controls and disabled states. |  |
-| colour.neutral.70 |  | Used for muted text such as hints and descriptions to allow for content hierarchy. |  |
-| colour.neutral.80 |  | Used as the default text colour for most components. For tooltips, it is used as the background colour. |  |
-| colour.accent.brand |  | The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements. |  |
-| colour.system.success.fill |  | Used for the background colour of primary success buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts. |  |
-| colour.system.success.fillHover |  | Used for the hover state of primary success buttons. |  |
-| colour.system.success.onFill |  | Used for the foreground colour of primary success buttons and badges. |  |
-| colour.system.success.surface |  | Used for the background colour of success alerts and toasts, and the background of secondary success buttons. |  |
-| colour.system.success.surfaceHover |  | Used for the hover state of secondary success buttons. |  |
-| colour.system.success.text |  | Used for the text colour of success alerts and toasts, and success tertiary buttons. |  |
-| colour.system.danger.fill |  | Used for the background colour of primary danger buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts. |  |
-| colour.system.danger.fillHover |  | Used for the hover state of primary danger buttons. |  |
-| colour.system.danger.onFill |  | Used for the foreground colour of primary danger buttons and badges. |  |
-| colour.system.danger.surface |  | Used for the background colour of danger alerts and toasts, and the background of secondary danger buttons. |  |
-| colour.system.danger.surfaceHover |  | Used for the hover state of secondary danger buttons. |  |
-| colour.system.danger.text |  | Used for the text colour of danger alerts and toasts, and danger tertiary buttons. |  |
-| colour.system.warning.fill |  | Used for the border of warning alerts and the background of warning badges. |  |
-| colour.system.warning.onFill |  | Used for the foreground colour of warning badges. |  |
-| colour.system.warning.surface |  | Used for the background colour of warning alerts. |  |
-| colour.system.warning.text |  | Used for the text colour of warning alerts. |  |
-| colour.system.info.fill |  | Used for the border of info alerts and toasts and the background of info badges. |  |
-| colour.system.info.onFill |  | Used for the foreground colour of info badges. |  |
-| colour.system.info.surface |  | Used for the background colour of info alerts and toasts. |  |
-| colour.system.info.text |  | Used for the text colour of info alerts and toasts. |  |
-| colour.system.backdrop.fill |  | Used for the background colour of the backdrop. |  |
-| elevation.raised.shadow |  | Shadow for raised elevations |  |
-| elevation.raised.border |  | Border for raised elevations |  |
-| elevation.floating.shadow |  | Shadow for floating elevations |  |
-| elevation.floating.border |  | Border for floating elevations |  |
-| elevation.overflow.shadow |  | Shadow for overflow elevations |  |
-| elevation.overflow.border |  | Border for overflow elevations |  |
-| elevation.focus.shadow |  | Shadow for focus elevations |  |
-| elevation.focusCompact.shadow |  | Shadow for focus compact elevations |  |
-| elevation.focusCompact.borderColor |  | Border color for focus compact elevations |  |
-| radius.100 |  | The base unit for radius. The fallback for all other values will be calculated from this value. |  |
-| radius.000 | none | No radius |  |
-| radius.025 |  | 25% (0.25x) radius |  |
-| radius.050 |  | 50% (0.5x) radius |  |
-| radius.075 |  | 75% (0.75x) radius |  |
-| radius.system.badge |  | Applies to badges and tags (that have not been designated to be a circle). |  |
-| radius.system.button |  | Applies to buttons and other interactive elements such as the hover state of links. |  |
-| radius.system.form |  | Applies to form inputs and alerts. |  |
-| radius.system.layout |  | Applies to panels, modals and slideouts. |  |
-| spacing.100 | xs | The base unit for spacing. The fallback for all other values will be calculated from this value. |  |
-| spacing.150 |  | 150% (1.5x) spacing |  |
-| spacing.200 | sm | 200% (2x) spacing |  |
-| spacing.250 |  | 250% (2.5x) spacing |  |
-| spacing.300 |  | 300% (3x) spacing |  |
-| spacing.350 |  | 350% (3.5x) spacing |  |
-| spacing.400 | md | 400% (4x) spacing |  |
-| spacing.500 |  | 500% (5x) spacing |  |
-| spacing.600 | lg | 600% (6x) spacing |  |
-| spacing.700 |  | 700% (7x) spacing |  |
-| spacing.800 |  | 800% (8x) spacing |  |
-| spacing.900 |  | 900% (9x) spacing |  |
-| spacing.1000 |  | 1000% (10x) spacing |  |
-| spacing.1200 | xl | 1200% (12x) spacing |  |
-| spacing.000 | none | No spacing |  |
-| spacing.050 |  | 50% (0.5x) spacing |  |
-| typography.base.size |  | This is the base font size, and is used to calculate the font sizes of each token. |  |
-| typography.base.headingFont |  | This is the base font family for headings, used for heading tokens. |  |
-| typography.base.bodyFont |  | This is the base font family for body, used for body tokens. |  |
-| typography.heading.1 |  | Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page. |  |
-| typography.heading.2 |  | Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg. |  |
-| typography.heading.3 |  | Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts. |  |
-| typography.heading.4 |  | Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout. |  |
-| typography.heading.5 |  | Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy. |  |
-| typography.body.sm.regular |  | The default small text, most commonly used to display text in small components and compact tables and lists. |  |
-| typography.body.sm.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.sm.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.body.md.regular |  | The default medium text, most commonly used to display text across all products. |  |
-| typography.body.md.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.md.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.body.lg.regular |  | The default large text, most commonly used to display large text across all products. |  |
-| typography.body.lg.strong |  | Strong text is used to highlight important information in a paragraph of text. |  |
-| typography.body.lg.em |  | Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes. |  |
-| typography.code |  | Used to display code snippets in the product, such as in the API documentation. |  |
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, the tokens have already been mapped out to their respective components. You can use the tokens in the component props to change the visual properties of the component.
-
-[
-
-Learn more about styling props
-
-](/?path=/docs/styling-props-reference--docs)
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { IressText } from '@iress-oss/ids-components';
-<IressText color\="colour.primary.text"\>I am branded text</IressText\>;
-
-Copy
-
-If you are not using the IDS components, you can use the tokens directly by using the `cssVars` object from `@iress-oss/ids-tokens`.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { cssVars } from '@iress-oss/ids-tokens';
-<div style\={{ color: cssVars.colour.primary.text }}\>I am branded text</div\>;
-
-Copy
-
-On this page
-
-*   [What are tokens?](#what-are-tokens)
-*   [Token list](#token-list)
-*   [For developers](#for-developers)
-
-## Colour
-
-[](#colour)Colour
-=================
-
-Colour is an integral aspect of conveying clear concise data. Our colours are optimized across two backgrounds, meeting or exceeding [WCAG 2.1 Level AA Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
-
-The default theme is designed to meet WCAG contrast guidelines. We can't guarantee this when consumer branding is applied, so colour combinations should be checked to ensure conformance.
-
-[](#primary)Primary
--------------------
-
-The primary colour is your "brand" colour, and is used across all interactive elements such as buttons, links, inputs, etc. This colour can define the overall feel and can elicit emotion.
-
-### Fill
-
-colour.primary.fill #13213F
-
-Used for primary buttons and the active state of form controls such as checkboxes and radio buttons. Also used for the border of tags when they have a custom button.
-
-#### Allowed foregrounds
-
-*   colour.primary.onFill (#ECF2FF)
-    
-    14.2 AAA
-    
-
-### On Fill
-
-colour.primary.onFill #ECF2FF
-
-Used as the foreground colour on primary buttons and active form controls.
-
-#### Allowed foregrounds
-
-*   colour.primary.fill (#13213F)
-    
-    14.2 AAA
-    
-
-### Fill Hover
-
-colour.primary.fillHover #2B3752
-
-Used for the hover state of primary buttons as well as hovering over active form controls.
-
-#### Allowed foregrounds
-
-*   colour.primary.onFill (#ECF2FF)
-    
-    10.6 AAA
-    
-
-### Surface
-
-colour.primary.surface #D9E5FF
-
-Used as the background colour for secondary buttons and the focused state of menu and tab items. Also used as the background colour of active buttons.
-
-#### Allowed foregrounds
-
-*   colour.primary.text (#13213F)
-    
-    12.6 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    8.4 AAA
-    
-
-### Text
-
-colour.primary.text #13213F
-
-Used for text on primary buttons, active form controls and focused tab and menu items. Also used for the link text colour and tertiary buttons.
-
-#### Allowed foregrounds
-
-*   colour.primary.surface (#D9E5FF)
-    
-    12.6 AAA
-    
-
-### Surface Hover
-
-colour.primary.surfaceHover #E1EAFF
-
-Used for the hover state of secondary buttons, form controls and hovering over focused menu and tab items. Also used when hovering over table rows.
-
-#### Allowed foregrounds
-
-*   colour.primary.text (#13213F)
-    
-    13.2 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    8.8 AAA
-    
-
-* * *
-
-[](#neutral)Neutral
--------------------
-
-Neutral colours apply to most backgrounds, text, and shapes in our experiences. They do not typically have a meaning associated with them, though they can imply things like disabled states. **Note:** There are some colour contrasts that are AA Large and are used for placeholders. If WCAG compliance is necessary for your application, please avoid using placeholders to meet this requirement.
-
-### 10
-
-colour.neutral.10 #FFF
-
-Used as the default background colour for most components. For tooltips, it is used as the foreground colour for the tooltip content.
-
-#### Allowed foregrounds
-
-*   colour.neutral.80 (#393F46)
-    
-    10.6 AAA
-    
-*   colour.neutral.70 (#6D7278)
-    
-    4.9 AA
-    
-*   colour.neutral.60 (#878B92)
-    
-    3.4 AA Large
-    
-
-### 20
-
-colour.neutral.20 #F9F9F9
-
-Used as the alternating background colour for components such as tables. Used as the background colour behind panels and cards for highly interactive screens.
-
-#### Allowed foregrounds
-
-*   colour.neutral.80 (#393F46)
-    
-    10.1 AAA
-    
-*   colour.neutral.70 (#6D7278)
-    
-    4.6 AA
-    
-
-### 30
-
-colour.neutral.30 #E4E5E7
-
-Used as the border colour for dividers, and the default divider colour for components with in-built headers and footers such as cards.
-
-### 40
-
-colour.neutral.40 #D7D8DA
-
-Used for borders in subtle interactive components, such as checkboxes and radios with hidden controls and the progress bar.
-
-### 50
-
-colour.neutral.50 #AFB2B6
-
-Used as the background colour for interactive components such as the slider.
-
-### 60
-
-colour.neutral.60 #878B92
-
-Used for placeholder text in form controls and disabled states.
-
-#### Allowed foregrounds
-
-*   colour.neutral.10 (#FFF)
-    
-    3.4 AA Large
-    
-
-### 70
-
-colour.neutral.70 #6D7278
-
-Used for muted text such as hints and descriptions to allow for content hierarchy.
-
-#### Allowed foregrounds
-
-*   colour.neutral.10 (#FFF)
-    
-    4.9 AA
-    
-*   colour.neutral.20 (#F9F9F9)
-    
-    4.6 AA
-    
-
-### 80
-
-colour.neutral.80 #393F46
-
-Used as the default text colour for most components. For tooltips, it is used as the background colour.
-
-#### Allowed foregrounds
-
-*   colour.neutral.10 (#FFF)
-    
-    10.6 AAA
-    
-*   colour.neutral.20 (#F9F9F9)
-    
-    10.1 AAA
-    
-
-* * *
-
-[](#accent)Accent
------------------
-
-The accent colour is a colour used to emphasise key parts of the UI. These act as "secondary" or "supporting" colours to you primary colour.
-
-### Brand
-
-colour.accent.brand #FF99A8
-
-The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements.
-
-* * *
-
-[](#system-colours)System colours
----------------------------------
-
-Along with primary colours, it is helpful to have a selection of system colours to use in components such as pills, alerts and labels. System colours emphasis different semantic states. They are used to provide visual feedback and/or warnings to users as they use your interface.
-
-### [](#success-positive)Success (Positive)
-
-Communicates that an action has been successful and inform a user that the action is a positive action.
-
-### Fill
-
-colour.system.success.fill #02794D
-
-Used for the background colour of primary success buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.
-
-#### Allowed foregrounds
-
-*   colour.system.success.onFill (#EFFBF2)
-    
-    5.1 AA
-    
-
-### On Fill
-
-colour.system.success.onFill #EFFBF2
-
-Used for the foreground colour of primary success buttons and badges.
-
-#### Allowed foregrounds
-
-*   colour.system.success.fill (#02794D)
-    
-    5.1 AA
-    
-
-### Fill Hover
-
-colour.system.success.fillHover #01603D
-
-Used for the hover state of primary success buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.success.onFill (#EFFBF2)
-    
-    7.2 AAA
-    
-
-### Surface
-
-colour.system.success.surface #E6F9EB
-
-Used for the background colour of success alerts and toasts, and the background of secondary success buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.success.text (#015537)
-    
-    8.1 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    9.7 AAA
-    
-
-### Text
-
-colour.system.success.text #015537
-
-Used for the text colour of success alerts and toasts, and success tertiary buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.success.surface (#E6F9EB)
-    
-    8.1 AAA
-    
-
-### Surface Hover
-
-colour.system.success.surfaceHover #D5F6DE
-
-Used for the hover state of secondary success buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.success.text (#015537)
-    
-    7.7 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    9.2 AAA
-    
-
-* * *
-
-### [](#danger-negative)Danger (Negative)
-
-Communicates something went wrong or prevents the user from moving forward with their task, as well as inform a potential action is destructive/negative.
-
-### Fill
-
-colour.system.danger.fill #C20A0A
-
-Used for the background colour of primary danger buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.onFill (#FFF6F5)
-    
-    5.9 AA
-    
-
-### On Fill
-
-colour.system.danger.onFill #FFF6F5
-
-Used for the foreground colour of primary danger buttons and badges.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.fill (#C20A0A)
-    
-    5.9 AA
-    
-
-### Fill Hover
-
-colour.system.danger.fillHover #A50606
-
-Used for the hover state of primary danger buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.onFill (#FFF6F5)
-    
-    7.5 AAA
-    
-
-### Surface
-
-colour.system.danger.surface #FEE8E7
-
-Used for the background colour of danger alerts and toasts, and the background of secondary danger buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.text (#970202)
-    
-    7.7 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    9.1 AAA
-    
-
-### Text
-
-colour.system.danger.text #970202
-
-Used for the text colour of danger alerts and toasts, and danger tertiary buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.surface (#FEE8E7)
-    
-    7.7 AAA
-    
-
-### Surface Hover
-
-colour.system.danger.surfaceHover #FEDEDC
-
-Used for the hover state of secondary danger buttons.
-
-#### Allowed foregrounds
-
-*   colour.system.danger.text (#970202)
-    
-    7.2 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    8.5 AAA
-    
-
-* * *
-
-### [](#warning)Warning
-
-Communicates attention required but does not prevent the user from moving forward with their task.
-
-### Fill
-
-colour.system.warning.fill #F6C84C
-
-Used for the border of warning alerts and the background of warning badges.
-
-#### Allowed foregrounds
-
-*   colour.system.warning.onFill (#1A1200)
-    
-    11.8 AAA
-    
-
-### On Fill
-
-colour.system.warning.onFill #1A1200
-
-Used for the foreground colour of warning badges.
-
-#### Allowed foregrounds
-
-*   colour.system.warning.fill (#F6C84C)
-    
-    11.8 AAA
-    
-
-### Surface
-
-colour.system.warning.surface #FEF4CD
-
-Used for the background colour of warning alerts.
-
-#### Allowed foregrounds
-
-*   colour.system.warning.text (#1A1200)
-    
-    16.8 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    9.6 AAA
-    
-
-### Text
-
-colour.system.warning.text #1A1200
-
-Used for the text colour of warning alerts.
-
-#### Allowed foregrounds
-
-*   colour.system.warning.surface (#FEF4CD)
-    
-    16.8 AAA
-    
-
-* * *
-
-### [](#information)Information
-
-Provides additional helpful context.
-
-### Fill
-
-colour.system.info.fill #004FBD
-
-Used for the border of info alerts and toasts and the background of info badges.
-
-#### Allowed foregrounds
-
-*   colour.system.info.onFill (#F5FAFF)
-    
-    7.0 AAA
-    
-
-### On Fill
-
-colour.system.info.onFill #F5FAFF
-
-Used for the foreground colour of info badges.
-
-#### Allowed foregrounds
-
-*   colour.system.info.fill (#004FBD)
-    
-    7.0 AAA
-    
-
-### Surface
-
-colour.system.info.surface #E5F3FF
-
-Used for the background colour of info alerts and toasts.
-
-#### Allowed foregrounds
-
-*   colour.system.info.text (#123987)
-    
-    9.5 AAA
-    
-*   colour.neutral.80 (#393F46)
-    
-    9.4 AAA
-    
-
-### Text
-
-colour.system.info.text #123987
-
-Used for the text colour of info alerts and toasts.
-
-#### Allowed foregrounds
-
-*   colour.system.info.surface (#E5F3FF)
-    
-    9.5 AAA
-    
-
-* * *
-
-### [](#backdrop)Backdrop
-
-Used to cover the page in order to highlight a specific component, such as a modal.
-
-### Fill
-
-colour.system.backdrop.fill #393F46CC
-
-Used for the background colour of the backdrop.
-
-#### Allowed foregrounds
-
-*   colour.neutral.10 (#FFF)
-    
-    10.6 AAA
-    
-
-On this page
-
-*   [Primary](#primary)
-*   [Neutral](#neutral)
-*   [Accent](#accent)
-*   [System colours](#system-colours)
-    *   [Success (Positive)](#success-positive)
-    *   [Danger (Negative)](#danger-negative)
-    *   [Warning](#warning)
-    *   [Information](#information)
-    *   [Backdrop](#backdrop)
-
-## Elevation
-
-[](#elevation)Elevation
-=======================
-
-Elevation is a design concept that adds depth and hierarchy to user interfaces by using shadows and layers. It helps users understand the relationship between different elements on the page, guiding their attention and interaction.
-
-Raised
-------
-
-Raised elevations sit slightly higher than default elevations. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-
-elevation.raised
-
-Floating
---------
-
-Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-
-elevation.floating
-
-Overflow
---------
-
-Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-elevation.overflow
-
-Focus
------
-
-Focus is an outline indicating that an element is focused, usually via keyboard interaction. It is user when a user cannot interact with the page using a mouse/touch.
-
-elevation.focus
-
-Focus Compact
--------------
-
-Focus compact is a variation of the focus elevation to indicate focus on elements that have restricted space making the default focus not aesthetically pleasing (for example, a search input in a dropdown like rich select). Avoid using where possible, as it makes the focus state less obvious.
-
-elevation.focusCompact
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<I\>
-  <w
-    gutter\="md"
-    verticalAlign\="stretch"
-  \>
-    <n
-      span\={{
-        base: 6,
-        xl: 3
-      }}
-    \>
-      <I
-        layerStyle\="elevation.raised"
-        stretch
-      \>
-        <h2\>
-          Raised        </h2\>
-        <p\>
-          Raised elevations sit slightly higher than default elevations. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.        </p\>
-        <p\>
-          <TokenTag\>
-            elevation.raised          </TokenTag\>
-        </p\>
-      </I\>
-    </n\>
-    <n
-      span\={{
-        base: 6,
-        xl: 3
-      }}
-    \>
-      <I
-        layerStyle\="elevation.floating"
-        stretch
-      \>
-        <h2\>
-          Floating        </h2\>
-        <p\>
-          Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.        </p\>
-        <p\>
-          <TokenTag\>
-            elevation.floating          </TokenTag\>
-        </p\>
-      </I\>
-    </n\>
-    <n
-      span\={{
-        base: 6,
-        xl: 3
-      }}
-    \>
-      <I
-        layerStyle\="elevation.overflow"
-        stretch
-      \>
-        <h2\>
-          Overflow        </h2\>
-        <p\>
-          Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.        </p\>
-        <p\>
-          <TokenTag\>
-            elevation.overflow          </TokenTag\>
-        </p\>
-      </I\>
-    </n\>
-    <n
-      span\={{
-        base: 6,
-        xl: 3
-      }}
-    \>
-      <I
-        layerStyle\="elevation.focus"
-        stretch
-      \>
-        <h2\>
-          Focus        </h2\>
-        <p\>
-          Focus is an outline indicating that an element is focused, usually via keyboard interaction. It is user when a user cannot interact with the page using a mouse/touch.        </p\>
-        <p\>
-          <TokenTag\>
-            elevation.focus          </TokenTag\>
-        </p\>
-      </I\>
-    </n\>
-    <n
-      span\={{
-        base: 6,
-        xl: 3
-      }}
-    \>
-      <I
-        layerStyle\="elevation.focusCompact"
-        stretch
-      \>
-        <h2\>
-          Focus Compact        </h2\>
-        <p\>
-          Focus compact is a variation of the focus elevation to indicate focus on elements that have restricted space making the default focus not aesthetically pleasing (for example, a search input in a dropdown like rich select). Avoid using where possible, as it makes the focus state less obvious.        </p\>
-        <p\>
-          <TokenTag\>
-            elevation.focusCompact          </TokenTag\>
-        </p\>
-      </I\>
-    </n\>
-  </w\>
-</I\>
-
-Copy
-
-On this page
-
-## Radius
-
-[](#radius)Radius
-=================
-
-Radius is the curvature of the corners of elements. It is used to soften the appearance of elements and make them more visually appealing.
-
-Radius tokens
-| Token Name | Alias | Description | Visual |
-| --- | --- | --- | --- |
-| radius.000 | none | No radius | 
-0px
-
- |
-| radius.025 |  | 25% (0.25x) radius | 
-
-4px
-
- |
-| radius.050 |  | 50% (0.5x) radius | 
-
-8px
-
- |
-| radius.075 |  | 75% (0.75x) radius | 
-
-12px
-
- |
-| radius.100 |  | The base unit for radius. The fallback for all other values will be calculated from this value. | 
-
-16px
-
- |
-
-[](#system)System
------------------
-
-Some components have a default radius to better align to a brand. Although usually they inherit from the base units, for some brands you may need to customise this to further emphasise their identity.
-
-### Badge
-
-Applies to badges and tags (that have not been designated to be a circle).
-
-radius.system.badge
-
-* * *
-
-### Button
-
-Applies to buttons and other interactive elements such as the hover state of links.
-
-radius.system.button
-
-* * *
-
-### Form
-
-Applies to form inputs and alerts.
-
-radius.system.form
-
-* * *
-
-### Layout
-
-Applies to panels, modals and slideouts.
-
-radius.system.layout
-
-On this page
-
-*   [System](#system)
-
-## Spacing
-
-[](#spacing)Spacing
-===================
-
-Spacing is the distance between elements. It is used to create visual balance and hierarchy in the UI to ensure a cohesive experience for the user.
-
-Spacing tokens
-| Token Name | Alias | Description | Visual |
-| --- | --- | --- | --- |
-| spacing.000 | none | No spacing | 
-0px
-
- |
-| spacing.050 |  | 50% (0.5x) spacing | 
-
-2px
-
- |
-| spacing.100 | xs | The base unit for spacing. The fallback for all other values will be calculated from this value. | 
-
-4px
-
- |
-| spacing.150 |  | 150% (1.5x) spacing | 
-
-6px
-
- |
-| spacing.200 | sm | 200% (2x) spacing | 
-
-8px
-
- |
-| spacing.250 |  | 250% (2.5x) spacing | 
-
-10px
-
- |
-| spacing.300 |  | 300% (3x) spacing | 
-
-12px
-
- |
-| spacing.350 |  | 350% (3.5x) spacing | 
-
-14px
-
- |
-| spacing.400 | md | 400% (4x) spacing | 
-
-16px
-
- |
-| spacing.500 |  | 500% (5x) spacing | 
-
-20px
-
- |
-| spacing.600 | lg | 600% (6x) spacing | 
-
-24px
-
- |
-| spacing.700 |  | 700% (7x) spacing | 
-
-28px
-
- |
-| spacing.800 |  | 800% (8x) spacing | 
-
-32px
-
- |
-| spacing.900 |  | 900% (9x) spacing | 
-
-36px
-
- |
-| spacing.1000 |  | 1000% (10x) spacing | 
-
-40px
-
- |
-| spacing.1200 | xl | 1200% (12x) spacing | 
-
-48px
-
- |
-
-On this page
-
-## Typography
-
-[](#typography)Typography
-=========================
-
-Typography is controlled by the `IressText` component, or the `textStyle` prop on other components. They implement consistent line heights and font weights.
-
-[](#body)Body
--------------
-
-This is the default text variant, and is designed to be clear and easy to read. This high level token also styles other tags beneath it such as `ul`, `ol`, `em` and `strong`, so that they inherit the same styling as the body text.
-
-Nobis odit nesciunt in, **harum provident** deleniti molestiae dolorum aliquid tempora optio accusamus dolore _porro voluptatibus_. Dolorum, repellat expedita.
-
-*   Voluptatem assumenda soluta!
-*   Illum et atque alias possimus maiores rem in corrupti consectetur!
-*   Dolorum, repellat expedita!
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressText\>
-  <p\>
-    Nobis odit nesciunt in,{' '}
-    <strong\>
-      harum provident    </strong\>
-    {' '}deleniti molestiae dolorum aliquid tempora optio accusamus dolore{' '}
-    <em\>
-      porro voluptatibus    </em\>
-    . Dolorum, repellat expedita.  </p\>
-  <ul\>
-    <li\>
-      Voluptatem assumenda soluta!    </li\>
-    <li\>
-      Illum et atque alias possimus maiores rem in corrupti consectetur!    </li\>
-    <li\>
-      Dolorum, repellat expedita!    </li\>
-  </ul\>
-</IressText\>
-
-Copy
-
-### [](#sizes)Sizes
-
-Body text can be set in a variety of sizes, from small to large. The size of the text should be chosen based on the context and importance of the content.
-
-typography.body.sm Used for small components such as badges and field hints, as well as compact variations of tables and lists.
-
-typography.body.md The most commonly used body text size, used for most text content in the product.
-
-typography.body.lg Used for tag lines, subtitles, and other large text content in the product.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressText textStyle\="typography.body.sm"\>
-    <TokenTag\>
-      typography.body.sm    </TokenTag\>
-    {' '}Used for small components such as badges and field hints, as well as compact variations of tables and lists.
-  </IressText\>
-  <IressText textStyle\="typography.body.md"\>
-    <TokenTag\>
-      typography.body.md    </TokenTag\>
-    {' '}The most commonly used body text size, used for most text content in the product.
-  </IressText\>
-  <IressText textStyle\="typography.body.lg"\>
-    <TokenTag\>
-      typography.body.lg    </TokenTag\>
-    {' '}Used for tag lines, subtitles, and other large text content in the product.
-  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#variants)Variants
-
-Body text can be combined with bold (strong) and italic (emphasis) text to create emphasis or hierarchy within the content.
-
-*   Bold text should be used to **draw attention** to part of a sentence, or to provide a visual label for readonly text.
-*   Italic text should be used to add _emphasis_ to content, or to add stress to part of a sentence.
-
-#### Strong
-
-Strong variant is used to draw attention to certain text, making a large block of text easier to scan. This token is used to style the <strong /> tag in a body of text.
-
-typography.body.sm.strongStrong text is used to highlight important information in a paragraph of text.
-
-typography.body.md.strongStrong text is used to highlight important information in a paragraph of text.
-
-typography.body.lg.strongStrong text is used to highlight important information in a paragraph of text.
-
-* * *
-
-#### Emphasis
-
-Emphasis (em) variant is used to emphasise certain text to indicate they make a reference to a standard/legal term. This token is used to style the <em /> tag in a body of text.
-
-typography.body.sm.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-typography.body.md.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-typography.body.lg.em Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressText\>
-    <h4\>
-      Strong    </h4\>
-    <p\>
-      {\`Strong variant is used to draw attention to certain text, making a large block of text easier to scan. This token is used to style the <strong /> tag in a body of text.\`}
-    </p\>
-  </IressText\>
-  <IressText textStyle\="typography.body.sm.strong"\>
-    <TokenTag\>
-      typography.body.sm.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressText textStyle\="typography.body.md.strong"\>
-    <TokenTag\>
-      typography.body.md.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressText textStyle\="typography.body.lg.strong"\>
-    <TokenTag\>
-      typography.body.lg.strong    </TokenTag\>
-    Strong text is used to highlight important information in a paragraph of text.  </IressText\>
-  <IressDivider />
-  <IressText\>
-    <h4\>
-      Emphasis    </h4\>
-    <p\>
-      {\`Emphasis (em) variant is used to emphasise certain text to indicate they make a reference to a standard/legal term. This token is used to style the <em /> tag in a body of text.\`}
-    </p\>
-  </IressText\>
-  <IressText textStyle\="typography.body.sm.em"\>
-    <TokenTag\>
-      typography.body.sm.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-  <IressText textStyle\="typography.body.md.em"\>
-    <TokenTag\>
-      typography.body.md.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-  <IressText textStyle\="typography.body.lg.em"\>
-    <TokenTag\>
-      typography.body.lg.em    </TokenTag\>
-    {' '}Emphasised text is used to highlight a term or definition in a paragraph of text. It is used sparingly, usually for legal purposes.
-  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#headings)Headings
----------------------
-
-Headings form the structure of a web page. They're designed to stand out visually, drawing a user's eye to distinct sections of the document. They can be set in a variety of sizes based on systematic font sizing with native heading scales (H1-H6).
-
-Heading 1 `<h1 />`
-==================
-
-typography.heading.1
-
-Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page.
-
-Heading 2 `<h2 />`
-------------------
-
-typography.heading.2
-
-Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg.
-
-### Heading 3 `<h3 />`
-
-typography.heading.3
-
-Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-
-#### Heading 4 `<h4 />`
-
-typography.heading.4
-
-Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-
-##### Heading 5 `<h5 />`
-
-typography.heading.5
-
-Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-
-An H2 styled as an H3.
-----------------------
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="lg"\>
-  <IressText\>
-    <h1\>
-      Heading 1{' '}
-      <code\>
-        {\`<h1 />\`}
-      </code\>
-    </h1\>
-    <IressText
-      mb\="sm"
-      mt\="\-sm"
-    \>
-      <TokenTag\>
-        typography.heading.1      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for the main page title to establish a clear hierarchy. There is only one H1 per screen, emphasising the primary purpose or context of the page.    </p\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      Heading 2{' '}
-      <code\>
-        {\`<h2 />\`}
-      </code\>
-    </h2\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.2      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for \*\*primary section headings\*\* within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with: body.md or body.lg.    </p\>
-  </IressText\>
-  <IressText\>
-    <h3\>
-      Heading 3{' '}
-      <code\>
-        {\`<h3 />\`}
-      </code\>
-    </h3\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.3      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.    </p\>
-  </IressText\>
-  <IressText\>
-    <h4\>
-      Heading 4{' '}
-      <code\>
-        {\`<h4 />\`}
-      </code\>
-    </h4\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.4      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.    </p\>
-  </IressText\>
-  <IressText\>
-    <h5\>
-      Heading 5{' '}
-      <code\>
-        {\`<h5 />\`}
-      </code\>
-    </h5\>
-    <IressText
-      mb\="sm"
-      mt\="\-xs"
-    \>
-      <TokenTag\>
-        typography.heading.5      </TokenTag\>
-    </IressText\>
-    <p\>
-      Use for: minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.    </p\>
-  </IressText\>
-  <IressText
-    element\="h2"
-    textStyle\="typography.heading.3"
-  \>
-    An H2 styled as an H3.  </IressText\>
-</IressStack\>
-
-Copy
-
-[](#code)Code
--------------
-
-The code variant is used to display code snippets or other monospaced text. It is designed to be clear and easy to read, with a fixed-width font that makes it easy to distinguish between characters.
-
-typography.code Used to display code snippets in the product, such as in the API documentation.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressText textStyle\="typography.code"\>
-    <TokenTag\>
-      typography.code    </TokenTag\>
-    {' '}Used to display code snippets in the product, such as in the API documentation.
-  </IressText\>
-</IressStack\>
-
-Copy
-
-On this page
-
-*   [Body](#body)
-    *   [Sizes](#sizes)
-    *   [Variants](#variants)
-*   [Headings](#headings)
-*   [Code](#code)
-
-## Responsive (breakpoints)
-
-[](#responsive-design)Responsive Design
-=======================================
-
-The Iress Design System (IDS) is built with responsive design principles in mind. This means that our components are designed to adapt to different screen sizes and orientations, ensuring a consistent user experience across devices.
-
-[](#breakpoints)Breakpoints
----------------------------
-
-*   Implement mobile-first responsive design
-*   Use consistent breakpoint values across all components
-*   Provide appropriate component variants for different screen sizes
-*   Consider content priority and progressive disclosure on smaller screens
-
-### Breakpoints supported by IDS
-
-| Name | Screen Width | Media Query |
-| --- | --- | --- |
-| xs | 0 - 575px | (min-width: 0) and (max-width: 575px) |
-| sm | 576px - 767px | (min-width: 576px) and (max-width: 767px) |
-| md | 768px - 1023px | (min-width: 768px) and (max-width: 1023px) |
-| lg | 1024px - 1199px | (min-width: 1024px) and (max-width: 1199px) |
-| xl | 1200px - 1499px | (min-width: 1200px) and (max-width: 1499px) |
-| xxl | 1500px and above | (min-width: 1500px) |
-
-[](#adaptive-behaviour)Adaptive Behaviour
------------------------------------------
-
-*   Reduce option counts on mobile devices where appropriate
-*   Implement responsive navigation patterns
-*   Adjust spacing and sizing for different contexts
-*   Maintain usability across all supported devices
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, the breakpoints have already been mapped out to their respective props. You can use props such as `gap` to change the visual properties of the component at certain breakpoints.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { IressStack } from '@iress-oss/ids-components';
-<IressStack gap\={{ xs: 'spacing.100', md: 'spacing.200' }} />;
-
-Copy
-
-### [](#hooks)Hooks
-
-#### [](#usebreakpoint)`useBreakpoint`
-
-We also provide a `useBreakpoint` hook that allows you to access the current breakpoint in your components. This can be useful for conditionally rendering components based on the current screen size.
-
-**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useBreakpoint` hook when there is no other way to achieve the desired responsive behavior.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { useBreakpoint } from '@iress-oss/ids-components';
-const MyComponent \= () \=> {
-  const { breakpoint } \= useBreakpoint();
-  return (
-    <div\>
-      {breakpoint \=== 'xs' && <p\>This is extra small screen</p\>}
-      {breakpoint \=== 'md' && <p\>This is medium screen</p\>}
-    </div\>
-  );
-};
-
-Copy
-
-#### [](#useresponsiveprops)`useResponsiveProps`
-
-Another hook is `useResponsiveProps`, which allows you to define responsive properties that change based on the current breakpoint. This is particularly useful for completely changing components at various screen sizes.
-
-**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useResponsiveProps` hook when there is no other way to achieve the desired responsive behavior.
-
-`useResponsiveProps`
---------------------
-
-This example demonstrates a use case for `useResponsiveProps`, for changing the columns on a table based on the breakpoint.
-
-Resize the screen to see the columns change
-
-| Name | Age |
-| --- | --- |
-| Luke Skywalker | 19 |
-| Princess Leia | 19 |
-| Han Solo | 32 |
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-export const ResponsiveTableColumns \= () \=> {
-  const { value } \= useResponsiveProps({
-    base: \[{ key: 'name', label: 'Name' }\],
-    lg: \[
-      { key: 'name', label: 'Name' },
-      { key: 'age', label: 'Age' },
-    \],
-  });
-  return (
-    <IressTable
-      caption\={
-        <IressText textAlign\="left"\>
-          <h2\>
-            <code\>useResponsiveProps</code\>
-          </h2\>
-          <p\>
-            This example demonstrates a use case for{' '}
-            <code\>useResponsiveProps</code\>, for changing the columns on a table
-            based on the breakpoint.          </p\>
-          <p\>Resize the screen to see the columns change</p\>
-        </IressText\>
-      }
-      columns\={value}
-      rows\={\[
-        { name: 'Luke Skywalker', age: 19 },
-        { name: 'Princess Leia', age: 19 },
-        { name: 'Han Solo', age: 32 },
-      \]}
-    />
-  );
-};
-
-Copy
-
-### [](#constant)Constant
-
-You can also use the breakpoints directly in your CSS or styled components. The breakpoints are defined in the `@iress-oss/ids-components` package.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { BREAKPOINT\_DETAILS } from '@iress-oss/ids-components';
-const css \= \`
-  @media (${BREAKPOINT\_DETAILS.md.mediaQuery}}) {
-    .my-class {      padding: 20px;    }  }
-\`;
-<style\>{css}</style\>;
-
-Copy
-
-On this page
-
-*   [Breakpoints](#breakpoints)
-*   [Adaptive Behaviour](#adaptive-behaviour)
-*   [For developers](#for-developers)
-    *   [Hooks](#hooks)
-    *   [Constant](#constant)
-
-## Consistency
-
-[](#using-components-consistently)Using components consistently
-===============================================================
-
-[](#buttons)Buttons
--------------------
-
-*   **Primary**: Limit to one per view for main call-to-action
-*   **Secondary**: Use for secondary actions
-*   **Tertiary**: Extra affordance between secondary actions
-*   **Link**: Button styled as link (avoid with icon-only content)
-*   **Danger**: Destructive actions requiring extra confirmation
-*   **Positive/Negative**: Financial transactions (buy/sell)
-
-[](#forms)Forms
----------------
-
-*   Always use `IressField` wrapper for proper label, hint, and error placement
-*   Provide clear validation feedback with appropriate error messages
-*   Use consistent input sizing based on expected content length
-*   Implement proper form state management and accessibility
-
-[](#navigation)Navigation
--------------------------
-
-*   Use semantic HTML5 navigation elements
-*   Provide skip links for keyboard users
-*   Implement proper ARIA labelling for navigation sections
-*   Ensure consistent navigation patterns across applications
-
-[](#data-display)Data Display
------------------------------
-
-*   Use semantic table structures with proper headers
-*   Provide clear visual hierarchy in data presentations
-*   Implement consistent sorting and filtering patterns
-*   Use appropriate loading states for data-heavy components
-
-[](#modals-and-overlays)Modals and Overlays
--------------------------------------------
-
-*   Reserve modals for critical tasks requiring full attention
-*   Provide multiple dismissal methods (backdrop, escape key, close button)
-*   Implement proper focus management and restoration
-*   Use slideouts for supplementary tasks where underlying content needs visibility
-
-On this page
-
-*   [Buttons](#buttons)
-*   [Forms](#forms)
-*   [Navigation](#navigation)
-*   [Data Display](#data-display)
-*   [Modals and Overlays](#modals-and-overlays)
-
-## Grid
-
-[](#grid)Grid
-=============
-
-The grid is used to evenly place other components across the page to ensure a consistent hierarchy and structure.
-
-[](#reference)Reference
------------------------
-
-Grid size: 12
-
-1
-
-2
-
-3
-
-4
-
-5
-
-6
-
-7
-
-8
-
-9
-
-10
-
-11
-
-12
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, you can use `IressContainer`, `IressRow`, and `IressCol` to create a grid layout. These components are designed to work together to create a responsive grid system.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { IressContainer, IressRow, IressCol } from '@iress-oss/ids-components';
-<IressContainer\>
-  <IressRow\>
-    <IressCol span\={8}\>Column 1</IressCol\>
-    <IressCol span\={4}\>Column 2</IressCol\>
-  </IressRow\>
-</IressContainer\>;
-
-Copy
-
-The base grid size is exported as `GRID_SIZE` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
-
-On this page
-
-*   [Reference](#reference)
-*   [For developers](#for-developers)
-
-## Content
-
-[](#content)Content
-===================
-
-[](#microcopy-guidelines)Microcopy Guidelines
----------------------------------------------
-
-*   Use clear, concise language that matches user mental models
-*   Provide helpful error messages with actionable guidance
-*   Implement consistent tone of voice across all interface text
-*   Use progressive disclosure for complex information
-
-[](#iconography)Iconography
----------------------------
-
-*   Use icons consistently with established meanings
-*   Provide screen reader text for meaningful icons
-*   Avoid using icons as the sole means of communication
-*   Maintain consistent icon sizing and alignment
-
-On this page
-
-*   [Microcopy Guidelines](#microcopy-guidelines)
-*   [Iconography](#iconography)
-
-## User Experience
-
-[](#user-experience)User experience
-===================================
-
-We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
-
-[](#system-feedback)System Feedback
------------------------------------
-
-*   Always show users where they are, what just happened, and what’s possible next.
-*   Provide immediate visual and textual feedback for all actions and states.
-*   Ensure feedback is clear, contextual, and proportionate to the importance of the action.
-
-[](#language-and-mental-models)Language and Mental Models
----------------------------------------------------------
-
-*   Use user-centred language and avoid technical jargon.
-*   Follow cultural and industry conventions for colour, iconography, terminology, and layout.
-*   Align interaction patterns with real-world analogues wherever feasible.
-
-[](#control-and-forgiveness)Control and Forgiveness
----------------------------------------------------
-
-*   Make actions reversible and provide undo where errors may occur.
-*   Let users easily backtrack, edit inputs, or abandon flows.
-*   Provide escape hatches from any process without penalty.
-
-[](#standards-and-consistency)Standards and Consistency
--------------------------------------------------------
-
-*   Use consistent layout, labelling, iconography, and grammar.
-*   Reinforce expectations by placing similar elements in predictable positions.
-*   Apply colour, spacing, and visual patterns consistently across all screens.
-
-[](#error-prevention-and-recovery)Error Prevention and Recovery
----------------------------------------------------------------
-
-*   Prevent errors by anticipating misuse and validating early.
-*   Phrase error messages with clarity, empathy, and constructive suggestions.
-*   Where errors occur, explain why and how they can be resolved.
-
-[](#recognition-over-recall)Recognition Over Recall
----------------------------------------------------
-
-*   Display necessary information at the point of decision.
-*   Use visual grouping, spacing, and affordance to reveal hierarchy.
-*   Prioritise visual clarity over novelty.
-
-[](#simplicity-and-minimalism)Simplicity and Minimalism
--------------------------------------------------------
-
-*   Remove unnecessary detail—every word, element, or feature should earn its place.
-*   Design for clarity of purpose with visually distinct, semantically meaningful UI components.
-*   Use whitespace, clean alignment, and simplified flows to reduce cognitive load.
-
-On this page
-
-*   [System Feedback](#system-feedback)
-*   [Language and Mental Models](#language-and-mental-models)
-*   [Control and Forgiveness](#control-and-forgiveness)
-*   [Standards and Consistency](#standards-and-consistency)
-*   [Error Prevention and Recovery](#error-prevention-and-recovery)
-*   [Recognition Over Recall](#recognition-over-recall)
-*   [Simplicity and Minimalism](#simplicity-and-minimalism)
-
-## Visual Design
-
-[](#visual-design-standards)Visual Design Standards
-===================================================
-
-[](#typography)Typography
--------------------------
-
-*   Use systematic font sizing with heading scales (H1-H6)
-*   Implement consistent line heights and font weights
-*   Provide text colour hierarchies (primary, muted, success, warning, danger)
-*   Support responsive typography scaling
-
-[](#colour-system)Colour System
--------------------------------
-
-*   Maintain semantic colour meanings:
-    *   **Primary**: Main call-to-action colour with high contrast
-    *   **Success**: Positive outcomes and confirmations
-    *   **Warning**: Caution and important notices
-    *   **Danger**: Errors and destructive actions
-    *   **Info**: Neutral information and guidance
-    *   **Positive/Negative**: Financial context (buy/sell actions)
-*   Ensure all colour combinations meet accessibility contrast requirements
-*   Provide consistent hover and active state colours
-
-[](#spacing-and-layout)Spacing and Layout
------------------------------------------
-
-*   Use systematic spacing scale (xs, sm, md, lg, xl)
-*   Apply consistent gutter systems for layout components
-*   Implement responsive breakpoints for adaptive layouts
-*   Maintain proper margin and padding relationships
-
-[](#interactive-states)Interactive States
------------------------------------------
-
-*   Provide clear hover, focus, active, and disabled states
-*   Use consistent transition timing and easing
-*   Implement proper focus indicators for keyboard navigation
-*   Show loading states for asynchronous operations
-
-On this page
-
-*   [Typography](#typography)
-*   [Colour System](#colour-system)
-*   [Spacing and Layout](#spacing-and-layout)
-*   [Interactive States](#interactive-states)
-
-## Z-index (stacking)
-
-[](#z-index-stacking)Z-index (stacking)
-=======================================
-
-The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
-
-[](#reference)Reference
------------------------
-
-| Name | Usage | Value |
-| --- | --- | --- |
-| DEFAULT | The default z-index used for most elements. Can be combined with raised and floating elevations. | 0 |
-| MODAL | Used for IressModal. Can be combined with floating elevation. | 400 |
-| NAVBAR | Used for navbars. Can be combined with overflow elevation. | 100 |
-| POPOVER | Used for IressPopover. Can be combined with floating elevation. | 200 |
-| SLIDEOUT | Used for IressSlideout. Can be combined with floating elevation. | 300 |
-| TOAST | Used for IressToast. Can be combined with floating elevation. | 500 |
-| TOOLTIP | Used for IressTooltip. Can be combined with floating elevation. | 600 |
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, the z-indexes have already been mapped out to their respective components based on the usage above. They are hardcoded into the components, so you don't need to worry about them.
-
-The mapping is exported as `Z_INDEX` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
-
-On this page
-
-*   [Reference](#reference)
-*   [For developers](#for-developers)
-