AI-powered smart search across documentation sources
Description
Today, the documentation for Designsystemet is spread across several sections – including best practices, patterns, individual component pages, and insights in github. This makes it difficult for users to find relevant guidance and understand how to correctly use a given component. Sometimes users also wonder which components to use for a specific use case, and it’s not obvious where to start looking in the documentation.
To improve usability and adoption of Designsystemet, we propose adding a smart search function that works across the documentation and pages.
Goal
Make it easier for users to find, understand, and apply the right guidance from Designsystemet, no matter where the information is located.
- Improve the user experience of the documentation by providing a simple, effective search that helps users quickly find relevant content.
- Reduce incorrect usage of components and patterns by making it easier to identify what to use in different scenarios – and how to use it correctly.
- Increase adoption and trust in Designsystemet by offering search that understands natural language and returns answers that feel relevant and helpful.
- Support continuous learning and collaboration by surfacing insights not only from official documentation but also from GitHub issues, discussions, and other relevant sources.
Desired functionality
- A unified search field that queries all documentation content
- Search label: "Hva kan jeg hjelpe deg med?"
- Results that include a direct answer (generated by AI), with clear references to where in the documentation the information comes from.
- Search that understands natural language queries (e.g. "How do I show a warning that requires action?")
- Ability to also search in content from theese sources and include relevant information with references:
What we expect users will ask
We expect that users will enter natural language queries like:
- "How should I mark optional fields in a form?"
- "How should I ask the user for bank account details?"
- "How do I show a warning that requires user action?"
- "What’s the best way to display an error message in a form?"
- "Can I use a modal for confirmation?"
- "Which component should I use to let users choose between multiple categories?"
- "How can I help users recover from validation errors?"
These questions often span multiple parts of our documentation and reflect real-life use cases where users are seeking guidance, not just definitions. A smart search should help surface both direct answers and contextual information.
Why this matters
Designers and developers often struggle to find the right guidance. A smart, AI-powered search can reduce friction and increase the likelihood that users apply Designsystemet as intended — resulting in more consistent and accessible user experiences across public sector solutions.
Simple example
Here’s a first draft of the design. Any comments or suggestions?
🌈 Because life’s too short for dull colors?
Suggestion for the search button in header:
Using surface-colors that shound be contrast approved with text-default. Background from Figma dev:
background: linear-gradient(104deg, var(--ds-color-surface-hover) 15.87%, var(--ds-color-surface-hover) 49.04%, var(--ds-color-surface-hover) 75.96%);
Questions for discussion:
- How can we measure that you are getting the right answers?
- How is the AI solution kept up to date and secure?
- Defining the scope
See the guide: https://www.regjeringen.no/contentassets/6332353676204e90a0ab94f9c968f967/no/pdfs/veileder-til-bruk-av-ki-assistenter.pdf
Latest design:
Need designer feedback on how to handle search input design focus vs not focused @Febakke. On a sidenote we have currently removed the search button in place of autosearch as you type, but may want to add it back since it can be a bit annoying if you are writing a longer question for the ai.
not focused dark
default focus dark
possible more subtle focus dark (add background-default as background)
not focused light
default focus light
possible more subtle focus light (accent-surface-active as border outside)
The component can be seen live here just with no search results yet
Daily 21.10.25, @mrosvik @oddvernes @Thunear @Barsnes @Febakke @frankdahle We’ve decided to put the AI part on hold for now and focus on delivering a great search experience instead, mainly because we don’t have the right competence in the team to maintain it, and current AI solutions tend to produce too many inaccurate answers.
We’re putting search on hold for now. Setting up Meilisearch in Azure wasn’t straightforward — their one-click deploy didn’t quite work. It would also require several configuration changes to host it as an API on www, among other things. Given our current resources, we decided it’s not the right priority at the moment.