Prismatic Pay
A premium, developer-oriented design system that communicates trust, sophistication, and technical precision. Prismatic Pay combines a signature purple accent with rich gradient backgrounds and a dark navy canvas to create an aesthetic that feels both luxurious and engineering-grade. The design language bridges the gap between financial gravitas and developer-friendly approachability — gradients add visual richness while crisp typography and generous spacing maintain clarity.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxA premium, developer-oriented design system that communicates trust, sophistication, and technical precision. Prismatic Pay combines a signature purple accent with rich gradient backgrounds and a dark navy canvas to create an aesthetic that feels both luxurious and engineering-grade. The design language bridges the gap between financial gravitas and developer-friendly approachability — gradients add visual richness while crisp typography and generous spacing maintain clarity.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here