Konstruct UI

Kongregate, an open platform for web gaming, set forth on a massive effort to rebrand its identity and platform. Because of technical debt from the past it quickly became clear that working new components into its existing technology stack would be problematic and prohibitively time consuming.

By utilizing web components it was possible to create reusable custom elements which encapsulated their functionality away from the monolitic app codebase. This avoided issues of overridden and unexpected behavior, and provided us with the confidence to use the design library in any Kongregate project moving forward. The system was created to be used intuitively by future developers, while maintaining a level of design fidelity we intended.

Developed at Kongregate

Role

Backend?Frontend?ProjectTechnologies
Konstruct UIFigma, Lit Web Components, NX Monorepo, Storybook
kongregate.com (Rails integration)Figma, Hotwire/Turbo, Ruby on Rails, StimulusJS, View Components, and Lookbook

Stack

  • Fastly
  • Figma
  • Hotwire
  • Lit Framework
  • NX Monorepo
  • Ruby on Rails
  • StimulusJS
  • Storybook
  • TailwindCSS
  • Turbo
  • View Components
  • Web Components
A screenshot of various components in the Konstruct UI kit
A screenshot of the Konstruct color palette
A screenshot of various components in the Konstruct UI kit
A screenshot of various components in the Konstruct UI kit
A screenshot of various components in the Konstruct UI kit
A screenshot of the Konstruct UI Account sign-in screen
A screenshot of the Konstruct UI Account sign-in screen