Design System Inspired by Prisma

1. Visual Theme & Atmosphere

Prisma's design is technical documentation at its finest — dark slate surfaces with indigo-blue accents that feel scholarly and precise. Clean code blocks, generous typography, and minimal chrome keep developers focused on the ORM concepts being documented.

Key Characteristics:

• Dark slate backgrounds with indigo accent
• Documentation-first layout with code alongside prose
• Barlow typeface for warmth in a technical context
• Zero decorative elements — function over form

2. Color Palette & Roles

Primary

• Indigo (#5A67D8): CTAs, active states, highlighted code
• Dark Indigo (#434190): Hover states

Accent Colors

• Teal (#38B2AC): Secondary highlights, schema diagrams

Neutral Scale

• Text Primary (#EDF2F7): Body text on dark
• Text Secondary (#A0AEC0): Code comments, captions
• Text Muted (#718096): Placeholders, disabled

Surface & Borders

• Background (#1A202C): Main page background
• Surface (#2D3748): Code blocks, cards
• Border (#4A5568): Dividers, table borders
• Surface Light (#F7FAFC): Light mode docs page

Semantic / Status

• Success (#48BB78): Passing tests, green schema fields
• Error (#FC8181): Schema errors, failed migrations
• Warning (#F6E05E): Deprecation warnings
• Info (#63B3ED): Tips, notes callouts

3. Typography Rules

Font Family

Primary: Barlow, fallback: system-ui, sans-serif. Code: JetBrains Mono

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
H1	Barlow	36px	700	1.2	-0.01em	Doc page title
H2	Barlow	28px	600	1.3	0	Section headings
H3	Barlow	22px	600	1.4	0	Subsections
H4	Barlow	18px	600	1.4	0	Sub-subsections
Body	Barlow	16px	400	1.7	0	Documentation prose
Caption	Barlow	14px	400	1.5	0	Notes, metadata
Code	JetBrains Mono	14px	400	1.6	0	Inline and block code

Principles

• Long-form reading requires 1.7 line height and 700px max column width
• Code and prose alternate — never bury code more than one scroll from its explanation

4. Component Stylings

Buttons

• Primary: bg #5A67D8, text #FFFFFF, padding 10px 20px, radius 6px, font 15px/600
• Secondary: bg transparent, border 1px solid #5A67D8, text #5A67D8
• Ghost: bg transparent, text #A0AEC0, hover text #EDF2F7

Cards & Containers

• bg #2D3748, border 1px solid #4A5568, radius 8px, padding 24px
• Callout: left border 4px #5A67D8, bg rgba(90,103,216,0.1)

Inputs & Forms

• Border 1px solid #4A5568, bg #1A202C, radius 6px, padding 10px 14px, text #EDF2F7
• Focus: border #5A67D8

Navigation

• Left sidebar #1A202C, 280px, structured by doc category
• Top nav #1A202C, 64px, border-bottom #2D3748

5. Layout Principles

Spacing System

• 4px — Inline code padding
• 8px — Tight element spacing
• 16px — Card padding, paragraph gaps
• 24px — Section separation
• 32px — Major section breaks
• 48px — Page-level sections
• 64px — Hero/feature spacing

Grid & Container

• Docs max width 860px. Full-page: 280px sidebar + content.

Whitespace Philosophy

Documentation requires breathing room. Body paragraphs never exceed 700px wide.

Border Radius Scale

• None (0px): Full-width code blocks
• Sm (4px): Inline code, badges
• Md (6px): Buttons, inputs
• Lg (8px): Cards, callouts
• Full (9999px): Language/version pills

6. Depth & Elevation

Level	Treatment	Use
Flat	none	Doc surface, code blocks
Raised	0 1px 3px rgba(0,0,0,0.3)	Cards
Overlay	0 4px 16px rgba(0,0,0,0.4)	Dropdown menus
Modal	0 12px 40px rgba(0,0,0,0.5)	Schema diagrams

7. Do's and Don'ts

Do

• Pair every code block with prose explaining what it does
• Use syntax highlighting with Prisma-specific tokens
• Keep the left sidebar always visible on desktop

Don't

• Don't use light backgrounds in code blocks
• Don't hide navigation depth beyond 3 levels
• Don't use Barlow below 14px

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	0–767px	No sidebar, hamburger menu
Tablet	768–1023px	Collapsible sidebar
Desktop	1024px+	Fixed sidebar + content

Touch Targets

Minimum 44×44px. Sidebar nav items are 40px tall.

Collapsing Strategy

Sidebar becomes a bottom drawer on mobile. Code examples scroll horizontally.

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Indigo (#5A67D8)
• Background: Dark Slate (#1A202C)
• Surface: Card Slate (#2D3748)
• Body text: Light Gray (#EDF2F7)
• Border: Gray (#4A5568)

Iteration Guide

1. Dark theme is the default — light mode is secondary
2. Code blocks use #2D3748 bg, never pure black
3. Use JetBrains Mono for all code rendering
4. Callout boxes use a 4px left border in the accent color
5. Schema diagrams use teal (#38B2AC) for relation lines