No single reference
Components, icons and front-end libraries were spread across projects, with no place to check what already existed.
OIKOS Design System
The design system behind EDX’s ServiceNow projects, with shared libraries, icons, components and tutorials, plus a tool that generates the user stories teams work from during development.
The challenge
Every project rebuilt the basics.
EDX delivers many ServiceNow portals. Without one shared source, teams rebuilt buttons, inputs and alerts, and wrote component specs from scratch each time.
Design and code apart
Developers needed the code behind each component, not only a picture of it in Figma.
Stories took time
Each component needed a user story before development, and writing them by hand slowed teams down.
The process
Collect, document, then automate.
Gather the parts
Listed the core components teams use, from alerts and accordions to tabs, toggles and text areas.
Document each one
Every component got a page with a live preview, editable attributes and View Code and Copy Code actions.
Add icons and libraries
An icon finder with filters, plus pages for Bootstrap, Angular UI Bootstrap, Select2 and iMask.
Design the story tool
A Generate Story form where teams enter a component’s name, tag and attributes to create its user story.
The solution
One home for how EDX builds.
Oikos is a portal with a fixed side menu: about, libraries, icons and components, and a Generate Story button always in reach.
01 / 05Final UI — Oikos home
The outcome
Shared parts, faster handoff.
Code next to design
Each component page shows a working preview with attributes to change and its code ready to copy.
Stories from a form
Generate Story turns a component’s name, tag and attributes into the user story used in development.
Docs for the stack
Library pages explain context, how it works, features, integrations and limits of each front-end tool.