Prisma

Overview

Prisma is a developer-first agent infrastructure platform that unifies TypeScript development from schema definition through deployment. The brand embodies "Technical Clarity"—a design philosophy that strips away unnecessary complexity while maintaining visual sophistication. The interface uses a clean, light-dominant palette anchored by a vibrant teal accent (#14b8a6), creating a sense of forward momentum and developer empowerment. The emotional response is one of confidence and efficiency: developers feel they're using a tool built by engineers who understand their workflow. Voice: direct, precise, and occasionally playful. Prisma speaks in concrete terms—"type-safe queries," "managed Postgres," "deployed in one conversation"—never vague or marketing-speak. Example: "Your schema is your source of truth. Everything else follows."

Colors

The color system is anchored by Primary Teal (#14b8a6), used exclusively for interactive elements—CTAs, links, focus states, and brand moments. This teal is neither pure cyan nor muted; it sits at the intersection of trust (blue undertones) and energy (green brightness), reflecting the platform's balance of reliability and innovation. Secondary colors support specific use cases: Deep Teal (#0d9488) for hover states and emphasis, Bright Cyan (#2dd4bf) for success and positive feedback, and Electric Blue (#3080ff) for tertiary actions and data visualization. The surface stack is deliberately minimal: pure white (#ffffff) as the primary canvas, with subtle grays (#f9fafb, #f1f1f1, #e9ecef) for container hierarchy. Text is Dark Slate (#1d242f) for primary content and Medium Gray (#6a7282) for

Typography

The type system pairs Mona Sans VF (a geometric, technical typeface) for headlines with Inter for body text, creating a visual hierarchy that feels both contemporary and trustworthy. Display (52px, 900 weight) is reserved for hero statements and major section breaks, commanding attention with tight letter-spacing (-0.02em). Headline-lg (40px, 700 weight) and Headline-md (28px, 700 weight) establish section structure with consistent -0.01em to -0.015em letter-spacing, creating a compressed, forward-leaning aesthetic. Body text (16–18px, 400 weight) maintains 24–28px line-height for comfortable reading at any screen size. Labels (12–14px, 500–600 weight) use 0.01–0.02em letter-spacing to add visual separation in UI components. When displaying code or technical terms, apply font-family: 'Mona

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across all breakpoints. Vertical spacing follows the 8px unit scale: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element gaps use sm spacing (12px). The hero section occupies the full viewport height with centered content, using a subtle animated background gradient (teal to cyan, 30-degree angle) to establish brand presence without overwhelming the typography. Container widths are constrained to 872–887px for optimal readability of body text, with generous gutters (24px minimum) on mobile. The design favors whitespace over decoration: every pixel of padding and margin serves a structural purpose, guiding the eye through informat

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle layering. Level 1 (Base) uses no shadow; elements sit flush on the white surface. Level 2 (Cards, Inputs) applies 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border at rgba(204, 204, 204, 0.5), creating a soft separation without visual heaviness. Level 3 (Modals, Popovers, Hover States) uses 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(204, 204, 204, 0.7), lifting the element distinctly above the canvas. Interactive elements (buttons, links) do not cast shadows at rest; instead, they shift to a darker background color on h

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are used sparingly and consistently to soften technical interfaces without introducing organic softness. Buttons and inputs use 6px (0.375rem) border-radius, creating a subtle roundness that feels contemporary without appearing playful. Cards and larger containers use 12px (0.75rem) for a slightly more generous curve. The full-radius (9999px) is reserved exclusively for badges and pill-shaped elements (tags, status indicators). This hierarchy ensures that the most interactive elements (buttons) feel immediate and accessible, while l

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses 44px height with 12px vertical and 24px horizontal padding, filled with Primary Teal (#14b8a6) and white text (Inter, 14px, 500 weight). On hover, the background shifts to primary-container (#16a394) with a 150ms ease-in-out transition, providing immediate visual feedback. Active/pressed state uses secondary (#0d9488). Button-secondary mirrors the primary structure but uses a transparent background with a 1px outline at #cccccc, maintaining visual weight while indicating lower priority. All buttons include a 6px border-radius and no box-shadow at rest. Focus states add a 3px ring at rgba(20, 184, 166, 0.1).

Containers & Surfaces Cards (card component) use a white background (#ffffff) wit

Do's and Don'ts

**Do**

• Do use Primary Teal (#14b8a6) exclusively for interactive elements—buttons, links, focus states, and brand moments—to maintain a consistent visual language.
• Do apply 150ms ease-in-out transitions to all interactive state changes (hover, focus, active) to reinforce the platform's responsiveness and polish.
• Do maintain at least 24px of vertical spacing between major sections and 12px between components to preserve the clean, spacious aesthetic.
• Do use Mona Sans VF for headlines (40px and above) and Inter for body text to create a clear typographic hierarchy that feels both technical and approachable.
• Do apply 6px border-radius to buttons and inputs, 12px to cards, and 9999px only to badges to maintain a consistent geometric precision.

**Don't**

• Don't use shadows heavier than 0 3px 8px rgba(0, 0, 0, 0.15)—the design relies on color and spacing for hierarchy, not depth.
• Don't apply Primary Teal to non-interactive elements or backgrounds; reserve it exclusively for CTAs, links, and focus states to preserve its signal strength.
• Don't mix Mona Sans VF and Inter within a single headline or body paragraph; use Mona for display/headline scales and Inter for body/label scales.
• Don't reduce padding below 12px on components or spacing below 24px between sections—whitespace is a core design principle and should never be sacrificed for content density.
• Don't use rounded corners greater than 12px on cards or containers; the design favors geometric precision over organic softness.