Getting Started

Set up Prism

Whether you're a designer working in Figma or a developer building with code, Prism is built to get you up and running in minutes.

For Designers

Use our Figma plugin to generate a complete design system in your file — with color styles, text styles, and all 25+ components already built.

Recommended Font

The plugin uses Inter by default. After installing, swap to General Sans for the full Meridian brand look. Download General Sans free from Fontshare.

Download the Figma Plugin files

Clone or download the Prism Design System repository from GitHub. The plugin lives in the root folder (manifest.json + code.js + ui.html).

Install locally in Figma

Open Figma Desktop. Go to Plugins → Development → Import plugin from manifest… and select the manifest.json file from the downloaded folder.

Run the plugin

Open any Figma file. Go to Plugins → Development → Meridian Design System Builder. Click Build Design System → and watch the magic happen.

Explore your 5 pages

The plugin creates: 🏠 Foundations, 🔥 SparkRamp, 🌊 StreamOps, 🔮 ClarityMap, and 🎨 Icon Library — each with full component coverage.

Swap fonts (optional)

After building, use Figma's font replacement feature to swap Inter for General Sans if you have it installed. This gives you the full Meridian brand look.

What gets built

The plugin scaffolds these assets across 5 dedicated pages:

Page	Contents
🏠 Foundations	Color styles, text styles, spacing scale, semantic colors
🔥 SparkRamp	All 25+ components in the orange/warm SparkRamp theme
🌊 StreamOps	All 25+ components in the blue/calm StreamOps theme
🔮 ClarityMap	All 25+ components in the violet/rich ClarityMap theme
🎨 Icon Library	30+ Lucide icons in a searchable dark-background grid

For Developers

Prism's design tokens are available as CSS custom properties. Copy-paste them into your project and start building.

Clone the repository

bash

git clone https://github.com/svesplana/Prism-Design-System.git
cd Prism-Design-System

Add tokens to your project

Copy the CSS custom properties from the tokens file into your project's global stylesheet.

css

:root {
  /* Prism Color Tokens */
  --prism-primary: #6C63FF;
  --prism-primary-dark: #4F46E5;
  --prism-accent: #00D4AA;
  --prism-accent-warm: #F5A623;

  /* Neutral Palette */
  --prism-gray-50:  #F8F9FC;
  --prism-gray-100: #F1F5F9;
  --prism-gray-200: #E5E7EB;
  --prism-gray-500: #9CA3AF;
  --prism-gray-700: #4B5563;
  --prism-gray-900: #0F1B2D;

  /* Spacing Scale (4px base) */
  --prism-space-1:  4px;
  --prism-space-2:  8px;
  --prism-space-3:  12px;
  --prism-space-4:  16px;
  --prism-space-6:  24px;
  --prism-space-8:  32px;
  --prism-space-12: 48px;
  --prism-space-16: 64px;

  /* Border Radius */
  --prism-radius-sm: 4px;
  --prism-radius-md: 8px;
  --prism-radius-lg: 12px;
  --prism-radius-xl: 16px;
  --prism-radius-full: 9999px;

  /* Typography */
  --prism-font-sans: 'Inter', sans-serif;
  --prism-font-mono: 'Roboto Mono', monospace;
}

Use a product theme

Add a theme class to your root element to activate a product's color palette.

css

/* SparkRamp Theme (orange/warm) */
.theme-spark {
  --prism-brand: #E8572A;
  --prism-brand-light: #F5A623;
}

/* StreamOps Theme (blue/calm) */
.theme-stream {
  --prism-brand: #2A6BE8;
  --prism-brand-light: #00D4AA;
}

/* ClarityMap Theme (violet/rich) */
.theme-clarity {
  --prism-brand: #7B2FD4;
  --prism-brand-light: #00E5FF;
}

html

<body class="theme-spark">
  <!-- Your SparkRamp app content -->
</body>

Build with tokens

Reference tokens in your components for maintainable, themeable UI.

css

.btn-primary {
  background: var(--prism-primary);
  color: white;
  padding: var(--prism-space-2) var(--prism-space-4);
  border-radius: var(--prism-radius-md);
  font-family: var(--prism-font-sans);
}

Design Token Reference

A quick overview of all token categories in Prism.

Category	Prefix	Example
Color — Brand	`--prism-primary`	`#6C63FF`
Color — Neutral	`--prism-gray-*`	`--prism-gray-200: #E5E7EB`
Color — Semantic	`--prism-success`, `--prism-danger`	`#22C55E`, `#EF4444`
Spacing	`--prism-space-*`	`--prism-space-4: 16px`
Border Radius	`--prism-radius-*`	`--prism-radius-md: 8px`
Typography	`--prism-font-*`	`--prism-font-sans: 'Inter'`
Product Themes	`--prism-brand`	Set via `.theme-spark` / `.theme-stream` / `.theme-clarity`

Contributing

Prism is open source under the MIT license. We welcome contributions of all kinds.

Report Issues

Found a bug or have a feature request? Open an issue on GitHub.

Open an issue

Submit a PR

Have an improvement ready? Fork the repo and submit a pull request.

View pull requests