Case studies

NSW Digital Design System

The NSW Digital Design System documentation site, rebuilt on Inka. Every component page is written in the editor and drawn with the design system's own markup. It is being rolled out to several NSW Government sites.

Building a grid of cards and a listing, then dragging both into the shared footer, where they become a menu column.

The button opens the form page in the editor. Change anything you like: nothing you do is kept.

How Inka fits it

• The design system's guidance, while people edit. Where NSW guidance says a choice works badly, Inka shows advice beside the field, with a link to the guidance, and the page still saves. It flags link text such as "click here" or a bare web address, a heading that skips a level, a card used on its own, a carousel of more than nine cards, and a dropdown of fewer than eight options, where radio buttons would show them all.
• Accessibility built into the blocks. Each block draws the design system's own markup, checked against the design system's own examples. The link-text and heading-order advice covers what markup cannot: what an author writes.
• A form builder. Authors add each kind of question, set the rules an answer has to meet, and show or close a question depending on another answer. They choose where the answers go, the acknowledgement the sender gets, and how the form is protected from spam. See the form page.
• A search builder. Each filter is a block: a tick list, a dropdown or a date. Results can update instantly or wait for an Apply button, and filters fold away on small screens. A hero search offers suggested search terms. See the search page.

UK GOV.UK Design System

A demo of the GOV.UK Design System on Inka, with blocks from GOV.UK Frontend and GOV.UK Publishing Components, the two component libraries GOV.UK pages are built from. Each of its 29 blocks has a documentation page, written in the editor, whose live example is checked against the design system's own examples.

Adding a filter to a search, typing its label and choosing what it filters by.

The demo asks for a sign-in, so that it is not mistaken for a real GOV.UK service: use gds as both the username and the password. Then press Try editing now: it opens the page in the editor, and nothing you change is kept.

How Inka fits it

• Two component libraries in one editor. GOV.UK Frontend and GOV.UK Publishing Components are separate libraries. In Inka they are one set of blocks, used side by side on a page.
• A form builder on GOV.UK's form components. A question can be a text input, radios, checkboxes, a date, a file upload and more, with its label, hint and error message. Answer rules put their message in the error summary and above the question. A long answer with a limit shows a character count. Each option can send a value separate from its label, so rewording an option later does not split the answers already collected. See the form page.
• A search builder. A search can suggest page titles as people type. Option and date filters sit in a column beside the results, and the results can be sorted. Filtering and sorting work without JavaScript, and the page's address keeps what was chosen, so a filtered search can be shared or bookmarked. See the search page.

Coming soon

A demo for one more design system, in the coming weeks:

• NHS Design System — the NHS digital service manual's components as an Inka frontend.