PRISM Design System by Ida Akiwumi

Token-Driven UI Playground

Generate a component spec and compare it with the linked Figma design file below.

Component Spec Builder

Use the controls below to create a JSON spec and see the design update instantly.

Component type

Theme

Component variant

Component state

Component label

Status badge

Card title

Card body text

Notes (optional)

Notes can tweak the result. Example keywords: bolder, cinematic, soft, quiet, uppercase.

This is the structured output that can also feed the Figma plugin.

Recently approved

This card shows how typography, badges, spacing, and buttons work together in one token-driven component.

This shows the public Figma file with token architecture, components, variants, and pre-built examples.