Skip to content
The Prism Design System from ZORC offers a high-quality interface design with a focus on components and accessibility
Prism – screenshot 2
Prism – screenshot 3
// COLOUR PALETTE
Indigo Mist Primary #6366F1
Glass White Surface #FFFFFF
Prism Glow Accent #A855F7
Deep Void Background #0F172A
Soft Slate Secondary #64748B
// Glassmorphism UI kit

Prism

Prism-style design system for AI-driven development

25 kr

One-time payment • VAT included • Source code included

Components
10
Tech stack
React, Tailwind CSS, Framer Motion, Lucide Icons, TypeScript, Inter Font
Licence
Commercial
Delivery
Instant access (zip + Git)
Updated

About this kit

A modern UI Kit with Prism aesthetics. Contains ready-made components for rapid prototyping and production.

Components included

Navigationsmenyer Statistik-kort Datatabeller Interaktiva grafer Input field Sidoskelett (Sidebar) Modal window Aviseringar (Toasts) Button Sets Profilmenyer

Features

  • Optimized for Cursor and AI prompts
  • Fullt responsiva komponenter
  • Sofistikerade glassmorphism-effekter
  • Dark and light mode included
  • Accessibility adapted according to WCAG AA
  • Enkel copy-paste integration

When does this kit fit?

saas dashboard landing-page mobile-app

Tech stack

React Tailwind CSS Framer Motion Lucide Icons TypeScript Inter Font

How to use this kit

  1. Step 01

    Download

    Sign in to ZORC and fetch the zip from your purchases. All source code and documentation is included.

  2. Step 02

    Copy into your project

    Drop the components/ folder into your project — or install via package.json if the kit is packaged for npm.

  3. Step 03

    Wire up design tokens

    The tokens/ folder holds colours, typography and spacing for your Tailwind config or CSS variables.

  4. Step 04

    Start building

    Import the components and use them straight away. Each one ships with examples, props and variants in the docs.

Example AI prompt

Use the Prism UI Kit to build a dashboard for an AI analytics service. Create a sidebar with navigation, a main view with three stats cards that have a glassmorphism effect, and a graph module in the middle. Make sure all buttons and input fields follow the Prism style with soft shadows and subtle gradients.

Common questions

What does Prism include?
Prism includes 10 components, including Navigationsmenyer, Statistik-kort, Datatabeller, Interaktiva grafer and more.
What tech stack is Prism built on?
Prism is built with React, Tailwind CSS, Framer Motion, Lucide Icons, TypeScript, Inter Font.
Are the components accessible?
Yes. They follow WCAG 2.1 AA where the content allows — focus rings, keyboard support, ARIA and contrast.
What licence do I get?
Commercial. You may use the components across your organisation's paid projects. What you cannot do is resell the kit itself.
How do I get started?
Copy in the components/ folder, add the design tokens and start building. A full guide ships with the kit.
Do I get updates?
Yes. All future versions are included at no extra cost for as long as the kit remains in the catalogue.
// More UI kits

More kits from ZORC