Design SystemLive Demo

Prism

Design system and component library with colours, typography, buttons, forms, and more

Client

Interactive Demo

View Live Demo Build something similar

8 categories

Component sections

Dark + Light

Theme modes

The Problem

What needed solving

Product teams need a shared visual language — consistent colours, type scale, component states, and interaction patterns — documented in a living, interactive reference rather than a static Figma file.

The Solution

How we approached it

A comprehensive design system showcase covering the full Codalyst Tech design language: colour palette with all shades, typography scale, button variants and states, badge types, form inputs with validation states, alert patterns, card layouts, and toggle/checkbox components — all interactive.

Technical Approach

How we built it

A sidebar-navigated single-page app where each section renders live component previews alongside copy-able usage examples. Dark mode switches the entire system to a slate-950 palette, showing how every component behaves in both themes. The colour swatch section adapts to show contrast-appropriate text labels.

Outcomes

What we delivered

A living design system demo that prospective clients can use to understand the visual quality, consistency, and craft we bring to every component we build.

8 component sections fully documented and interactive

Dark mode applied consistently across all components

Copy-able class examples for every pattern

Full colour palette with primary, semantic, and neutral scales

Technologies Used

Next.js 16TypeScriptTailwind CSS v4LucideFramer Motion