Architecture
Token JSON → sync-tokens.js → variables.css → tailwind.css @import → TW CLI → dist/prisma.css
21
Brand Primitives
16
Semantic Mappings
10
Z-Index Layers
v4
Tailwind Version
Usage
Import in HTML:
<link rel="stylesheet" href="dist/prisma.css">
Use Tailwind utilities:
<div class="bg-primary text-primary-foreground p-4 rounded-lg">...</div>
Status colors:
<span class="bg-destructive text-destructive-foreground">Error</span>
Z-Index layers:
<div class="z-modal">...</div>
Color & Utility Mappings
Brand: Prisma Blue 11
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-prisma-blue-50 | #e7eeff | bg-prisma-blue-50 text-prisma-blue-50 border-prisma-blue-50 |
--color-prisma-blue-100 | #cfddff | bg-prisma-blue-100 text-prisma-blue-100 border-prisma-blue-100 |
--color-prisma-blue-200 | #95b9ff | bg-prisma-blue-200 text-prisma-blue-200 border-prisma-blue-200 |
--color-prisma-blue-300 | #4f99ff | bg-prisma-blue-300 text-prisma-blue-300 border-prisma-blue-300 |
--color-prisma-blue-400 | #007ae0 | bg-prisma-blue-400 text-prisma-blue-400 border-prisma-blue-400 |
--color-prisma-blue-500 | #005baa | bg-prisma-blue-500 text-prisma-blue-500 border-prisma-blue-500 |
--color-prisma-blue-600 | #00498b | bg-prisma-blue-600 text-prisma-blue-600 border-prisma-blue-600 |
--color-prisma-blue-700 | #00376b | bg-prisma-blue-700 text-prisma-blue-700 border-prisma-blue-700 |
--color-prisma-blue-800 | #00264d | bg-prisma-blue-800 text-prisma-blue-800 border-prisma-blue-800 |
--color-prisma-blue-900 | #001834 | bg-prisma-blue-900 text-prisma-blue-900 border-prisma-blue-900 |
--color-prisma-blue-950 | #000e23 | bg-prisma-blue-950 text-prisma-blue-950 border-prisma-blue-950 |
Brand: Prisma Red 10
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-prisma-red-50 | #fff0f0 | bg-prisma-red-50 text-prisma-red-50 border-prisma-red-50 |
--color-prisma-red-100 | #ffd6d6 | bg-prisma-red-100 text-prisma-red-100 border-prisma-red-100 |
--color-prisma-red-200 | #ffadad | bg-prisma-red-200 text-prisma-red-200 border-prisma-red-200 |
--color-prisma-red-300 | #ff7070 | bg-prisma-red-300 text-prisma-red-300 border-prisma-red-300 |
--color-prisma-red-400 | #ff3333 | bg-prisma-red-400 text-prisma-red-400 border-prisma-red-400 |
--color-prisma-red-500 | #cc0000 | bg-prisma-red-500 text-prisma-red-500 border-prisma-red-500 |
--color-prisma-red-600 | #990000 | bg-prisma-red-600 text-prisma-red-600 border-prisma-red-600 |
--color-prisma-red-700 | #660000 | bg-prisma-red-700 text-prisma-red-700 border-prisma-red-700 |
--color-prisma-red-800 | #440000 | bg-prisma-red-800 text-prisma-red-800 border-prisma-red-800 |
--color-prisma-red-900 | #220000 | bg-prisma-red-900 text-prisma-red-900 border-prisma-red-900 |
Semantic Colors 8
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-primary | var(--primary) | bg-primary text-primary border-primary |
--color-primary-foreground | var(--primary-foreground) | bg-primary-foreground text-primary-foreground border-primary-foreground |
--color-primary-muted | var(--primary-muted) | bg-primary-muted text-primary-muted border-primary-muted |
--color-primary-muted-foreground | var(--primary-muted-foreground) | bg-primary-muted-foreground text-primary-muted-foreground border-primary-muted-foreground |
--color-secondary | var(--secondary) | bg-secondary text-secondary border-secondary |
--color-secondary-foreground | var(--secondary-foreground) | bg-secondary-foreground text-secondary-foreground border-secondary-foreground |
--color-secondary-muted | var(--secondary-muted) | bg-secondary-muted text-secondary-muted border-secondary-muted |
--color-secondary-muted-foreground | var(--secondary-muted-foreground) | bg-secondary-muted-foreground text-secondary-muted-foreground border-secondary-muted-foreground |
Status Colors 16
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-destructive | var(--destructive) | bg-destructive text-destructive border-destructive |
--color-destructive-foreground | var(--destructive-foreground) | bg-destructive-foreground text-destructive-foreground border-destructive-foreground |
--color-destructive-muted | var(--destructive-muted) | bg-destructive-muted text-destructive-muted border-destructive-muted |
--color-destructive-muted-foreground | var(--destructive-muted-foreground) | bg-destructive-muted-foreground text-destructive-muted-foreground border-destructive-muted-foreground |
--color-success | var(--success) | bg-success text-success border-success |
--color-success-foreground | var(--success-foreground) | bg-success-foreground text-success-foreground border-success-foreground |
--color-success-muted | var(--success-muted) | bg-success-muted text-success-muted border-success-muted |
--color-success-muted-foreground | var(--success-muted-foreground) | bg-success-muted-foreground text-success-muted-foreground border-success-muted-foreground |
--color-warning | var(--warning) | bg-warning text-warning border-warning |
--color-warning-foreground | var(--warning-foreground) | bg-warning-foreground text-warning-foreground border-warning-foreground |
--color-warning-muted | var(--warning-muted) | bg-warning-muted text-warning-muted border-warning-muted |
--color-warning-muted-foreground | var(--warning-muted-foreground) | bg-warning-muted-foreground text-warning-muted-foreground border-warning-muted-foreground |
--color-info | var(--info) | bg-info text-info border-info |
--color-info-foreground | var(--info-foreground) | bg-info-foreground text-info-foreground border-info-foreground |
--color-info-muted | var(--info-muted) | bg-info-muted text-info-muted border-info-muted |
--color-info-muted-foreground | var(--info-muted-foreground) | bg-info-muted-foreground text-info-muted-foreground border-info-muted-foreground |
Neutral 2
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-muted | var(--muted) | bg-muted text-muted border-muted |
--color-muted-foreground | var(--muted-foreground) | bg-muted-foreground text-muted-foreground border-muted-foreground |
Surfaces 8
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-background | var(--background) | bg-background text-background border-background |
--color-foreground | var(--foreground) | bg-foreground text-foreground border-foreground |
--color-canvas | var(--canvas) | bg-canvas text-canvas border-canvas |
--color-surface | var(--surface) | bg-surface text-surface border-surface |
--color-surface-foreground | var(--surface-foreground) | bg-surface-foreground text-surface-foreground border-surface-foreground |
--color-card | var(--card) | bg-card text-card border-card |
--color-card-foreground | var(--card-foreground) | bg-card-foreground text-card-foreground border-card-foreground |
--color-card-border | var(--card-border) | bg-card-border text-card-border border-card-border |
Interactive 5
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--color-border | var(--border) | bg-border text-border border-border |
--color-input | var(--input) | bg-input text-input border-input |
--color-input-border | var(--input-border) | bg-input-border text-input-border border-input-border |
--color-accent | var(--accent) | bg-accent text-accent border-accent |
--color-accent-foreground | var(--accent-foreground) | bg-accent-foreground text-accent-foreground border-accent-foreground |
Z-Index Layers 10
| CSS Variable | Value | Tailwind Utilities |
|---|---|---|
--z-index-dropdown | 1000 | z-dropdown |
--z-index-sticky | 1100 | z-sticky |
--z-index-fixed | 1200 | z-fixed |
--z-index-overlay | 1250 | z-overlay |
--z-index-drawer | 1300 | z-drawer |
--z-index-modal | 1400 | z-modal |
--z-index-popover | 1500 | z-popover |
--z-index-toast | 1600 | z-toast |
--z-index-tooltip | 1700 | z-tooltip |
--z-index-spotlight | 1800 | z-spotlight |
Reduced Motion
Prisma automatically disables animations for users who prefer reduced motion:
css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}