Jude Shanon

Generated May 18, 2026

DESIGN.md for pi.inc

pi.inc

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by Presentation Intelligence

1. Visual Theme & Atmosphere

Presentation Intelligence embodies a modern, intelligent SaaS aesthetic with a strong emphasis on clarity and innovation. The design system balances deep, sophisticated dark backgrounds with vibrant cyan-blue accents that convey energy, trustworthiness, and cutting-edge AI technology. The visual language is minimal yet refined, using generous whitespace, subtle geometric elements (diamond sparkles, light effects), and clean typography to create an aspirational, professional atmosphere. This is a design system for forward-thinking users who value both beauty and functionality—one that communicates precision, accessibility, and modernity without sacrificing visual warmth or approachability.

Key Characteristics:

Dark-first color strategy with luminous cyan accents for maximum visual hierarchy
Minimal, clean typography with generous leading for readability
Soft, refined card designs with subtle borders and transparent backgrounds
Sophisticated use of depth and elevation through shadows and layering
Accessibility-forward with high contrast ratios between text and backgrounds
Premium, scalable component architecture suitable for enterprise SaaS
AI-forward aesthetic with geometric, crystalline visual motifs

2. Color Palette & Roles

Primary

Primary Action (#5EB7FF): Primary call-to-action buttons, main interactive elements, and focus states across the interface
Primary Dark (#3B82F6): Alternative primary for contexts requiring deeper blue; secondary interactive accent

Accent Colors

Bright Cyan (#53C9FF): Secondary accent for highlights, hover states, and supporting visual emphasis
Light Cyan (#59C8FF): Tertiary cyan for subtle backgrounds and decorative elements

Interactive

Primary Button State (#5EB7FF): Default state for primary CTAs
Button Hover (#53C9FF): Brightened state on hover and active interactions

Neutral Scale

Pure White (#FFFFFF): Primary text on dark backgrounds, primary surface color for light mode
Off White (#F5F5F5): Secondary light surface, subtle background tints
Light Gray (#F3F6FF): Blue-tinted light background for content areas
Medium Gray (#CCCCCC): Borders, dividers, and disabled states
Dark Gray (#777777): Secondary text, reduced-emphasis content
Darker Gray (#666666): Tertiary text, helper text and captions

Surface & Borders

Dark Surface Primary (#111827): Primary dark background surface
Dark Surface Secondary (#1B1D23): Secondary dark background, card backgrounds
Dark Surface Tertiary (#1F2937): Tertiary dark background for nested surfaces
Border Gray (#6B7280): Default border color for light mode dividers

Semantic / Status

Warning / Highlight (#FFD700): Warning states, alerts, and attention-required indicators
Deep Black (#000000): Deepest shadows, extreme contrast text
Near Black (#0B0B0B): Subtle off-black for very dark contexts

3. Typography Rules

Font Family

Primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif Fallback: system-ui, sans-serif

The system uses native system fonts for optimal performance, rendering, and platform consistency while maintaining a modern, accessible aesthetic.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display (H1)	-apple-system	30px	600	39px	0px	Page titles, hero headlines; reserved for maximum impact
Heading (H2)	-apple-system	24px	600	32px	0px	Section headers, card titles; strong visual hierarchy
Heading (H3)	-apple-system	20px	600	28px	0px	Subsection headers, feature titles; balanced emphasis
Heading (H4)	-apple-system	18px	500	26px	0px	Minor headings, navigation labels; moderate emphasis
Body (Regular)	-apple-system	15px	400	23px	0px	Default body text, descriptions, content blocks
Body (Small)	-apple-system	13px	400	20px	0px	Secondary text, captions, helper text
Link	-apple-system	19px	500	46px	0px	Navigation links, inline links; distinguished via color and weight
Button	-apple-system	15px	500	23px	0px	Button labels; consistent with body but emphasizing clickability
Caption	-apple-system	12px	400	18px	0px	Form labels, timestamps, supplementary metadata
Code / Mono	`'Courier New', monospace`	14px	400	21px	0px	Code snippets, technical content (fallback: fixed-width system mono)

Principles

Emphasis via weight: Primary hierarchy is achieved through font weight (400 → 600) rather than size variation
Generous leading: Line heights are set 40–50% above font size for optimal readability in both light and dark contexts
Contrast preservation: All text maintains WCAG AA minimum contrast ratios (4.5:1 for normal, 3:1 for large text)
System-first approach: Native system fonts ensure platform consistency and eliminate web font latency
Readable at scale: Typography scales gracefully from 12px (smallest) to 30px (display) without loss of legibility

4. Component Stylings

Buttons

Primary Button

Background: #5EB7FF
Text Color: #FFFFFF
Padding: 12px 24px
Border Radius: 8px
Border: 0px none
Font Size: 15px
Font Weight: 500
Line Height: 23px
Hover State: Background #53C9FF, text #FFFFFF
Active State: Background #3B82F6, text #FFFFFF
Disabled State: Background #CCCCCC, text #666666, cursor not-allowed
Box Shadow (default): 0px 2px 8px rgba(94, 183, 255, 0.2)
Box Shadow (hover): 0px 4px 12px rgba(94, 183, 255, 0.3)

Secondary Button

Background: rgba(255, 255, 255, 0.1)
Text Color: #FFFFFF
Padding: 12px 24px
Border Radius: 8px
Border: 1px solid rgba(255, 255, 255, 0.3)
Font Size: 15px
Font Weight: 500
Line Height: 23px
Hover State: Background rgba(255, 255, 255, 0.15), border 1px solid rgba(255, 255, 255, 0.5)
Active State: Background rgba(255, 255, 255, 0.2), border 1px solid rgba(255, 255, 255, 0.6)
Disabled State: Background rgba(255, 255, 255, 0.05), text #6B7280, border 1px solid rgba(255, 255, 255, 0.1)
Box Shadow (default): none
Box Shadow (hover): 0px 2px 8px rgba(255, 255, 255, 0.1)

Ghost Button (Text-only)

Background: transparent
Text Color: #FFFFFF
Padding: 8px 16px
Border Radius: 6px
Border: 0px none
Font Size: 15px
Font Weight: 500
Line Height: 23px
Hover State: Background rgba(255, 255, 255, 0.08), text #FFFFFF
Active State: Background rgba(255, 255, 255, 0.12), text #53C9FF
Disabled State: Text #6B7280, cursor not-allowed
Box Shadow: none

Cards & Containers

Card (Dark Surface)

Background: #1B1D23
Text Color: #FFFFFF
Padding: 24px
Border Radius: 15px
Border: 1px solid rgba(255, 255, 255, 0.1)
Font Size: 15px
Font Weight: 400
Line Height: 23px
Box Shadow: 0px 4px 16px rgba(0, 0, 0, 0.3)
Hover State: Background #212530, border 1px solid rgba(255, 255, 255, 0.15)

Card (Light Surface)

Background: #FFFFFF
Text Color: #111827
Padding: 24px
Border Radius: 15px
Border: 1px solid #CCCCCC
Font Size: 15px
Font Weight: 400
Line Height: 23px
Box Shadow: 0px 2px 8px rgba(0, 0, 0, 0.08)
Hover State: Background #FFFFFF, border 1px solid #777777

Card (Transparent/Overlay)

Background: rgba(0, 0, 0, 0)
Text Color: #FFFFFF
Padding: 23px
Border Radius: 15px
Border: 1px solid rgba(255, 255, 255, 0.8)
Font Size: 15px
Font Weight: 400
Line Height: 23px
Box Shadow: none
Hover State: Border 1px solid rgba(255, 255, 255, 1)

Inputs & Forms

Text Input

Background: #111827
Text Color: #FFFFFF
Placeholder Color: #6B7280
Padding: 12px 16px
Border Radius: 8px
Border: 1px solid #1F2937
Font Size: 15px
Font Weight: 400
Line Height: 23px
Focus State: Border 1px solid #5EB7FF, box-shadow 0px 0px 0px 3px rgba(94, 183, 255, 0.1)
Disabled State: Background #0B0B0B, text #666666, cursor not-allowed
Error State: Border 1px solid #FFD700, box-shadow 0px 0px 0px 3px rgba(255, 215, 0, 0.1)

Textarea

Background: #111827
Text Color: #FFFFFF
Placeholder Color: #6B7280
Padding: 12px 16px
Border Radius: 8px
Border: 1px solid #1F2937
Font Size: 15px
Font Weight: 400
Line Height: 23px
Min Height: 120px
Focus State: Border 1px solid #5EB7FF, box-shadow 0px 0px 0px 3px rgba(94, 183, 255, 0.1)

Form Label

Text Color: #FFFFFF
Font Size: 13px
Font Weight: 500
Line Height: 20px
Margin Bottom: 8px
Letter Spacing: 0px

Navigation

Main Navigation (Header)

Background: rgba(0, 0, 0, 0.95)
Text Color: #FFFFFF
Padding: 16px 0px
Border Bottom: 1px solid rgba(255, 255, 255, 0.1)
Display: flex
Align Items: center
Justify Content: space-between

Navigation Link

Text Color: #FFFFFF
Font Size: 19px
Font Weight: 500
Line Height: 46px
Padding: 0px 16px
Border Radius: 6px
Background (default): transparent
Hover State: Background rgba(255, 255, 255, 0.1), text #53C9FF
Active State: Background rgba(94, 183, 255, 0.2), text #5EB7FF
Transition: background 200ms ease, color 200ms ease

Logo

Font Size: 18px
Font Weight: 700
Text Color: #FFFFFF
Display: flex
Align Items: center
Gap: 8px

Badges

Badge (Primary)

Background: #5EB7FF
Text Color: #000000
Padding: 4px 12px
Border Radius: 12px
Font Size: 12px
Font Weight: 500
Line Height: 18px

Badge (Secondary)

Background: rgba(94, 183, 255, 0.2)
Text Color: #5EB7FF
Padding: 4px 12px
Border Radius: 12px
Font Size: 12px
Font Weight: 500
Line Height: 18px

Badge (Warning)

Background: #FFD700
Text Color: #000000
Padding: 4px 12px
Border Radius: 12px
Font Size: 12px
Font Weight: 500
Line Height: 18px

5. Layout Principles

Spacing System

The spacing system is built on a base unit of 4px, scaling exponentially for consistent, predictable layouts:

Micro spacing: 4px, 8px — Gap between inline elements, tight padding
Small spacing: 12px, 16px — Component padding, list item gaps
Medium spacing: 20px, 24px — Section spacing, card gaps
Large spacing: 28px, 32px — Major section separation
Extra large: 36px, 40px, 44px — Full section spacing, hero spacing
Maximum: 56px — Hero sections, full-width padding

Usage context:

8px: Padding within compact buttons, tight component gaps
16px: Standard button padding, form input padding, card spacing
24px: Default card padding, section gaps in normal content
32px – 40px: Hero sections, major content blocks
56px: Full-width padding on hero sections

Grid & Container

Max Width: 1440px (standard container for desktop layouts)
Full Width: 100% (section backgrounds extend to viewport edges)
Column Strategy: Flexible column layout with 12-column reference grid for responsive design
Padding (desktop): 40px on sides for content sections
Padding (tablet): 32px on sides
Padding (mobile): 20px on sides

Section patterns:

Hero sections: Full-width background with 40px–56px vertical padding
Content cards: Grid of 3–4 columns on desktop, stacking on smaller screens
Navigation header: Full-width sticky bar, 16px vertical padding

Whitespace Philosophy

The design system emphasizes breathing room through generous whitespace:

Minimum gap between content blocks: 24px
Line spacing (leading): 40–50% above font size for optimal readability
Card interiors: Uniform 24px padding on all sides
Section-to-section: 40px minimum vertical spacing
Text to supporting element: 16px minimum spacing
Focus is on clarity and digestibility; negative space is a design feature, not wasted space

Border Radius Scale

Minimal (forms, small components): 6px — Text inputs, small badges
Standard (cards, containers): 8px — Button corners, small cards, chips
Medium (larger cards): 12px — Medium-sized modals, content cards
Large (featured cards, modals): 15px — Hero cards, feature cards, prominent containers
Extra large (soft edges): 20px–24px — Full-screen modals, hero overlays

6. Depth & Elevation

Level	Treatment	Use
Base (0)	`box-shadow: none`	Flat backgrounds, text, base surfaces
Raised (1)	`box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08)`	Light mode cards, subtle elevation
Elevated (2)	`box-shadow: 0px 4px 12px rgba(94, 183, 255, 0.2)`	Primary buttons, floating elements
Prominent (3)	`box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3)`	Dark mode cards, featured containers
Maximum (4)	`box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4)`	Modals, dropdowns, overlay containers

Shadow Philosophy:

The shadow system creates subtle depth without visual heaviness. Dark mode contexts use deeper, more pronounced shadows (with higher opacity) to clearly separate layered content against dark backgrounds. Light mode uses very soft shadows to maintain delicacy. All shadows use rgba(0, 0, 0, ...) on dark backgrounds and rgba(0, 0, 0, ...) on light backgrounds to maintain consistency. Primary action elements (buttons, CTAs) use cyan-tinted shadows (rgba(94, 183, 255, ...)) to reinforce brand color and visual hierarchy. Shadows should never feel harsh; they exist to guide the eye and clarify layering, not to distract.

7. Do's and Don'ts

Do

Use high-contrast text: Always ensure text on dark backgrounds is pure white (#FFFFFF) or very light gray; text on light backgrounds should be dark (#111827 or #000000)
Leverage cyan accents sparingly: Reserve #5EB7FF and #53C9FF for primary CTAs, hover states, and critical UI elements; overuse dilutes their impact
Embrace whitespace: Leave breathing room between components; negative space is a design ally, not wasted space
Maintain consistent radius: Use 15px for major cards, 8px for inputs and secondary components; avoid arbitrary values
Prioritize accessibility: All interactive elements must meet WCAG AA contrast minimums; focus states should be clearly visible with 3px glow rings
Stack shadows intentionally: Use shadow elevation to clarify layering; deeper shadows (level 3–4) for modals and overlays, subtle shadows (level 1–2) for cards
Scale typography responsively: Adjust body text size down to 14px on mobile, maintain minimum line height of 1.5x for readability
Use system fonts: Rely on -apple-system for optimal rendering and zero web font latency
Create logical color hierarchy: Dark backgrounds → Light text → Cyan accents → Secondary actions
Design for touch: Minimum touch target size of 44px × 44px; comfortable tap spacing of 12px between interactive elements

Don't

Don't mix dark and light backgrounds without clear purpose: Avoid random light surfaces on dark pages or vice versa; maintain predictable color logic
Don't overuse cyan: Cyan accents should appear in 5–10% of interface; overuse creates visual fatigue
Don't add unnecessary shadows: Every shadow should serve a clarity purpose; gratuitous depth is noise
Don't nest cards excessively: Avoid more than two levels of card nesting (e.g., card within card within card); use other visual techniques instead
Don't set arbitrary font sizes: Always reference the established hierarchy table; custom sizes break consistency
Don't use low-contrast text: Never combine light text on very light backgrounds or dark text on very dark backgrounds, even for reduced-emphasis content
Don't deviate from the radius scale: Don't use 7px, 9px, or other off-scale values; maintain consistency with 6px, 8px, 12px, 15px
Don't ignore focus states: Every button, link, and form input must have a clear, visible focus ring (3px #5EB7FF glow)
Don't stretch typography: Never artificially increase line height beyond the hierarchy table or use unusual letter spacing; it harms readability
Don't create busy layouts: Use generous padding and spacing; resist the urge to cram content; information hierarchy should be immediately clear

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 639px	Single-column layout, `20px` padding, font size `-2px` (body: `13px`), `24px` card padding, full-width cards
Tablet	640px–1023px	Two-column grid, `32px` padding, standard typography, `24px` card padding, stacked sections
Desktop	1024px–1439px	Three-column grid, `40px` padding, full typography scale, max-width `1200px`
Large Desktop	≥ 1440px	Four-column grid, `56px` padding, max-width `1440px`, full featured layout

Touch Targets

Minimum size: 44px × 44px for all clickable elements (buttons, links, form inputs)
Comfortable spacing: 12px minimum gap between interactive elements
Mobile-optimized buttons: 16px padding (vertical) × 24px (horizontal) = minimum 48px height
Form inputs: Minimum 40px height with 12px padding (vertical) on mobile
Navigation items: Minimum 44px × 44px tap area in header

Collapsing Strategy

Mobile (≤ 639px):

Navigation: Collapse main nav into hamburger menu; show only logo and menu icon in header
Grid: Single column; full-width cards with 20px padding
Typography: Reduce heading sizes by 2px (H1: 28px, H2: 22px)
Spacing: Reduce major gaps from 40px to 24px, padding from 32px to 20px
Hero sections: Reduce vertical padding to 24px; stack elements vertically
Cards: Full width, 24px padding maintained

Tablet (640px–1023px):

Navigation: Keep main nav if space allows; collapse less critical items
Grid: Two columns, staggered on smaller tablets
Typography: Maintain full scale; line heights unchanged
Spacing: Use 32px gaps, 32px padding
Cards: 50% width in two-column grid

Desktop & Beyond (1024px+):

Navigation: Full horizontal nav with all items visible
Grid: Three to four columns depending on context
Typography: Full hierarchy with all sizes at maximum
Spacing: Full 40px gaps, 56px hero padding
Cards: 25–33% width in multi-column grids

9. Agent Prompt Guide

Quick Color Reference

Use this mapping when implementing components:

Primary CTA (buttons, links): Bright Cyan (#5EB7FF) on dark background; use #FFFFFF text
Secondary CTA: Secondary Button (rgba(255, 255, 255, 0.1)) with #FFFFFF text and 1px solid rgba(255, 255, 255, 0.3) border
Background (dark mode): Dark Surface Primary (#111827) or Dark Surface Secondary (#1B1D23)
Background (light mode): Pure White (#FFFFFF) with #F5F5F5 for secondary surfaces
Heading text: Pure White (#FFFFFF) on dark backgrounds; Deep Black (#111827) on light backgrounds
Body text: Pure White (#FFFFFF) at 15px / 400 weight on dark; #111827 at 15px / 400 weight on light
Borders (dark mode): 1px solid rgba(255, 255, 255, 0.1)–0.8 (varies by prominence)
Borders (light mode): 1px solid #CCCCCC or #6B7280 depending on contrast need
Accent / Hover: Bright Cyan (#53C9FF) as upgraded primary; use for hover states
Warning / Alert: Yellow (#FFD700) for warnings and attention states
Shadows: Use rgba(0, 0, 0, 0.08)–0.4 on dark; rgba(0, 0, 0, 0.08) on light

Iteration Guide

Follow these numbered rules for accurate, on-brand implementation:

Start with background: Establish dark (#1B1D23) or light (#FFFFFF) surface first; all other colors depend on this choice
Layer text with contrast: Apply white text on dark, dark text on light; verify minimum 4.5:1 contrast ratio
Reserve cyan for actions: Use #5EB7FF only for primary CTAs, focus rings, and key interactive states; everything else uses white/gray
Apply consistent radius: Cards and containers always 15px, inputs always 8px, buttons always 8px; no exceptions
Space with intent: Use 24px between card groups, 16px between card elements, 8px between inline components
Match shadow depth to layer: Buttons get level 2 shadow (0px 4px 12px rgba(94, 183, 255, 0.2)), cards get level 3 (0px 4px 16px rgba(0, 0, 0, 0.3))
Respect typography scale: Never deviate from the hierarchy table; use only specified sizes and weights
Enable focus states: Every interactive element must have a 3px glow ring in cyan (#5EB7FF) on focus; use outline: 3px solid #5EB7FF; outline-offset: 2px
Verify touch targets: All clickable elements must be at least 44px × 44px; adjust padding accordingly
Test contrast ratios: Ensure all text pairs pass WCAG AA (4.5:1 for normal, 3:1 for large); use contrast checker before shipping
Implement breakpoint collapse: At ≤ 639px, reduce font sizes by 2px, collapse nav, switch to single column, use 24px spacing
Use system fonts exclusively: Implement -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif fallback stack; never embed external fonts without strategic purpose

Want a DESIGN.md like this for your own website?