PRISM Studio Design Guide
The definitive reference for brand identity, design tokens, UI patterns, and creative standards.
Introduction
This document defines the visual and verbal identity of PRISM Studio. It serves as the single source of truth for all creative, product, and marketing deliverables.
Brand Philosophy
PRISM operates at the intersection of strategy, design, and technology. We believe in clarity over clutter, intention over trend, and craft over convenience. Every pixel, word, and interaction should reflect precision, creativity, and purpose.
Core Principles
- Radical Clarity: Communicate with precision. Remove ambiguity.
- Controlled Experimentation: Push boundaries within a disciplined framework.
- Human-Centered: Design for people first, platforms second.
- Future-Proof: Build systems that scale and adapt gracefully.
Logo & Mark
The PRISM wordmark is our primary identifier. It should be used consistently across all touchpoints with strict adherence to spacing, sizing, and color guidelines.
Clear Space & Minimum Size
Maintain a minimum clear space equal to the height of the "P" on all sides. Never scale below 48px wide for digital or 24mm for print.
✓ Correct Usage
• Proper clear space maintained
• Approved color combinations only
• Scaled proportionally
• Placed on clean backgrounds
✗ Incorrect Usage
• Adding drop shadows, strokes, or effects
• Stretching or rotating the mark
• Using unapproved colors
• Placing on busy/low-contrast backgrounds
Color System
Our palette balances energetic creativity with professional restraint. Use primary colors for emphasis and brand moments, neutrals for structure, and semantic colors for functional states.
Primary & Accent
Neutrals
💡 Usage: Primary purple is reserved for CTAs, key highlights, and brand moments. Use gradients sparingly (max 30% of interface). Dark mode is the default context for web products.
Typography
We use a dual-font system: Syne for expressive display headings, and Space Grotesk for UI/body text. Both prioritize readability, modern character, and digital clarity.
Display Heading (Syne 800)
Section Title (Syne 700)
Card/Component Title (Syne 600)
Body text uses Space Grotesk Regular (400) for optimal readability at 16px base. Line height 1.6. Used for paragraphs, UI labels, and navigation.
Type Scale & Weights
- 800 / 700: Headlines, key metrics, emphasis
- 600: Component titles, buttons, active states
- 500: Labels, navigation, secondary info
- 400: Body copy, descriptions, captions
Grid & Spacing
All spacing, sizing, and layout decisions follow an 8px base grid. This ensures visual rhythm and cross-platform consistency.
Layout Tokens
Imagery & Iconography
Visual assets should feel intentional, modern, and aligned with our brand ethos. Avoid stock clichés; prioritize authenticity and artistic direction.
Photography Style
- Lighting: High contrast, directional, natural or neon-accented
- Composition: Asymmetrical balance, negative space prioritized
- Subject: Human-centric but abstracted; focus on process, tools, and environments
- Processing: Minimal retouching. Apply subtle grain or duotone overlays (purple/blue) only for editorial use.
Icon System
Use a 2px stroke, rounded caps/joins line icon set. Icons must align to the 8px grid and maintain consistent visual weight across states. Never mix solid and outline styles in the same context.
UI Components
Standardized interactive elements ensure consistency across web, app, and marketing materials.
Buttons
Radius: 10px | Padding: 0.6rem 1.4rem | Font: Space Grotesk 600
Inputs & Forms
Border: 1.5px solid #eef0f4 | Focus: 3px ring #a855f7 @ 15% opacity
Voice & Tone
Our written communication is confident, precise, and approachable. We avoid corporate jargon and speak directly to the human behind the screen.
Confident, Not Arrogant
State facts clearly. Avoid hyperbole.
✅ "We design systems that scale with your ambition."
Precise, Not Clinical
Be specific, but keep it human.
✅ "We align strategy with execution."
Direct, Not Demanding
Guide, don't command. Use active voice.
✅ "Share your files when ready, and we'll handle the rest."
Accessibility
Inclusive design isn't optional. All deliverables must meet WCAG 2.1 AA standards as a baseline.
- Contrast: Minimum 4.5:1 for body text, 3:1 for large text/UI components
- Focus States: Visible, non-color-dependent indicators (3px ring)
- Typography: No all-caps for body text. Maintain adjustable font scaling.
- Color Usage: Never rely on color alone to convey meaning. Add icons or text labels.
- Alt Text: Descriptive, contextual, and concise. Decorative images use `alt=""`.
Implementation
Translating this guide into code and design files requires strict token mapping and version control.
CSS Variable Mapping
Design File Structure
- 📁 PRISM_Design_System_2025.fig
- ├─ 🎨 Colors / Typography / Effects
- ├─ 🧩 Components (Buttons, Inputs, Cards)
- ├─ 📐 Layouts & Grids
- └─ 📝 Documentation & Usage Notes
📌 Final Note: When in doubt, refer to this guide. Consistency builds trust. Break rules only with documented approval from the Creative Director.