Mid-office

Design System

The canonical component layer and design source of truth for the Malkai mid-office. It also governs shared foundations and reusable patterns used by selected companion products, including customer-facing itinerary pages where the same interaction contract applies.

Visual foundations define the visual language, Typography defines its voice, Layout defines responsive composition, and the component catalogue owns reusable anatomy, variants, states and behaviour.

Editorial composition of a planning grid, route line, paper layers and an architectural arch

How to work with the system

Product surfaces should reuse this layer instead of recreating local versions of the same pattern. A prototype may reveal a missing need first; once that need is reusable, it is promoted here and the prototype is reconnected to the shared implementation.

  1. Start with what existsCompose screens from the documented tokens, foundations and components. Match the component to its job before adding page-local styling.
  2. Promote reusable needsWhen a prototype introduces a reusable pattern, add a component or variant here, document its contract, then replace the local prototype version with the shared one.
  3. Evolve the contractThe system is expected to improve. Add variants, refine behaviour and expand specifications when product evidence changes, then update every consuming prototype so the system and its uses remain linked.

Files

The source files that define and document the system.

  • tokens/tokens.cssCanonical values for colour, type, spacing, shape and elevation.
  • styles.cssRoot stylesheet that loads fonts, tokens and page defaults.
  • components.app.cssShared component and layout primitive styles.
  • fonts/Self-hosted typefaces and their licence notes.
  • assets/Approved Malkai wordmarks and emblem files.
  • context/malkai-context.mdProduct context, guardrails and the hypothesis register.
  • README.mdHow to use and extend the system.