Prisma

Prisma, technical, developer

Preview image. Unlock full-res

Architectural blueprint on white marble. Light, precise structures with sharp accents.

Palette
#ffffff
#f3f4f6
#e2e8f0
#111827
#1d242f
#6b7280
#718096
#9ca3af
#14b8a6
#0d9488
#0d9488

The Prisma design system evokes the precision of a high-performance developer tool. Predominantly achromatic surfaces in shades of cool gray and crisp white create an environment of focus and clarity. A vibrant teal (#14B8A6) acts as a singular, sharp accent, drawing attention to critical actions and active states. Typography is distinct, with a custom geometric sans-serif for headlines that conveys technical authority, complemented by a highly legible system font for body text. Use Border Frost (#E2E8F0) for all component borders and separators. Apply 6px border-radius as the default for most interactive elements and cards, reserving 10px for larger contextual elements. Prioritize Prisma Teal (#14B8A6) exclusively for primary calls to action to maintain its impact. Employ Mona Sans VF for all primary headings, ensuring a letter-spacing of 0.1em at display sizes for distinctiveness. Maintain a clear visual hierarchy by using the progression of Charcoal Black (#111827) for headings, Obsidian Text (#1D242F) for body, and Muted Stone (#6B7280) for secondary details. Space elements using multiples of 4px as a base unit, with elementGap at 4px, cardPadding at 16px, and sectionGap at 48px to maintain density and rhythm. Use Mona Sans Mono VF (16px, weight 400) for all code-related content, including inline snippets and code block buttons. Do not introduce new chromatic colors outside of the teal brand palette in interactive contexts. Avoid shadows other than rgba(0,0,0,0.04) 0px 1px 2px 0px; elevation is primarily achieved through background color shifts and borders. Do not deviate from the specified letter-spacing for Mona Sans VF headings; the 0.1em value is integral to its character. Do not use highly rounded forms (like the pill shape) for anything other than small, tertiary buttons or tags. Avoid using bold or semi-bold weights for body text; rely on font size and color for emphasis with Inter font. Do not use generic system fonts for code snippets; Mona Sans Mono VF ensures consistency and readability for technical content.

More like this