Prism Softworks

Overview

Prism Softworks is a vibrant, community-driven Roblox script hub designed for gamers seeking clarity and accessibility in game automation. The brand embodies a **Glassmorphic-Maximalist** aesthetic: a bold magenta-to-pink gradient canvas (#c2308f primary, #ff64c8 accent) serves as the energetic foundation, while frosted glass UI elements (backdrop-filter: blur(22px), rgba(255,255,255,0.1–0.4) backgrounds) act as crystalline lenses that focus attention and reduce cognitive load. The emotional response is one of playful sophistication—vibrant yet refined, energetic yet navigable. The design evokes the sensation of looking through a prism: light refracted into clarity.

The brand voice is direct, youthful, and community-first. Vocabulary favors action-oriented language ("Join," "Pulse," "Clarity") and avoids corporate jargon. Tone is confident without arrogance, welcoming without condescension. Example sentence in brand voice: "One hub. Infinite clarity."—a mantra that appears in the hero interlude, balancing simplicity with aspiration.

Colors

The color system is built on a **Vibrant-Minimalist** philosophy: a dominant magenta-pink gradient (surface: #c2308f, primary accent: #ff64c8) provides the brand's signature energy, while supporting pastels (secondary: #c4b5fd, tertiary: #93c5fd) and complementary tones create visual rhythm without competing for attention. Primary (#ff64c8) is reserved exclusively for interactive CTAs ("Join Discord" button) and key accent moments—it appears infrequently but commands immediate recognition. The surface stack leverages deep purples (surface-container-lowest: #50003c) for depth and lighter magentas (surface-bright: #e85ba8) for elevation. All text is white (#ffffff) or muted white (rgba(255,255,255,0.72)) for maximum contrast over the vibrant canvas. Glassmorphic surfaces use semi-transparent

Typography

The type system prioritizes clarity and hierarchy through weight and scale rather than color variation. Display (86px, 700 weight) and Headline-lg (64px, 800 weight) use the system font stack (-apple-system, BlinkMacSystemFont, 'SF Pro Display') for native performance and familiarity. Negative letter-spacing (-0.03em to -0.04em) on large headlines creates visual tension and reinforces the brand's bold personality. Body text (17px, 400 weight) maintains 1.55 line-height for comfortable reading over the vibrant background. Labels and tags use elevated weights (590–600) and increased letter-spacing (0.18em on tags) to signal interactivity and hierarchy. All text over busy backgrounds or glass surfaces should apply a subtle text-shadow (0 2px 4px rgba(0,0,0,0.15)) to ensure legibility; this is

Layout

The page uses a **sticky-scroll** layout model with three major sections (hero, interlude, pulse) that pin to the viewport as the user scrolls through tall wrapper containers (260vh, 200vh heights). This creates a cinematic, immersive experience where content appears to unfold vertically. The container max-width is 1280px, but the design favors full-bleed backgrounds and viewport-relative padding (6vw–9vw) to adapt fluidly across devices. Spacing follows a semantic scale: lg (40px) separates major sections, md (24px) frames content blocks, and sm (12px) creates breathing room within components. The hero section uses centered, column-based alignment (flex-direction: column) with 1.2rem margin between eyebrow, headline, and subtext. The pulse section shifts to row-based layout (flex-directio

Elevation & Depth

Depth is conveyed through glassmorphic layering and subtle shadow physics rather than traditional material shadows. Level 1 (Base): The fixed background gradient (#c2308f) with vignette overlay (radial-gradient, rgba(30,4,22,0.12–0.42)) establishes the canvas. Level 2 (Standard Glass): backdrop-filter: blur(22px) saturate(180%), background: rgba(255,255,255,0.1–0.14), with inset highlights (inset 0 1px rgba(255,255,255,0.85)) and border (1px solid rgba(255,255,255,0.35)) to simulate frosted glass. Box-shadow: 0 10px 24px rgba(75,0,48,0.16) adds soft separation. Level 3 (Elevated/Interactive):

Shapes

The design employs a **Soft-Technical** shape philosophy: pill-shaped buttons and badges (border-radius: 100px) soften the interface and evoke playfulness, while subtle rounded corners on text containers (4px–12px) maintain technical precision. Primary CTAs use full-pill radius (100px) to maximize tap targets and signal affordance. Glass cards and status badges use the same pill radius for visual consistency. The vignette overlay uses an elliptical radial-gradient (75% 65% at 50% 46%) rather than sharp corners to create organic, breathing edges. Icon wrappers maintain sharp corners (border-rad

Components

Action Elements Primary CTA buttons ("Join Discord") use a glassmorphic treatment: background: linear-gradient(155deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.16)), backdrop-filter: blur(22px) saturate(180%), padding: 11px 24px, border-radius: 100px. The gradient direction (155deg) creates a subtle light-to-dark flow that reinforces the frosted-glass illusion. Hover state applies background: linear-gradient(155deg, rgba(255,255,255,0.52), rgba(255,255,255,0.16) 55%, rgba(255,255,255,0.22)) and transform: translateY(-1px) with transition: transform 0.2s ease, background 0.2s ease. Secondary glass buttons (pulse-cta) reduce opacity to rgba(255,255,255,0.14) and add border: 1px solid rgba(255,255,255,0.32) for visual distinction. All buttons use box-shadow:

Do's and Don'ts

**Do**

• Do use glassmorphic surfaces (backdrop-filter: blur(22px), rgba(255,255,255,0.1–0.4)) as the primary container style to maintain visual cohesion and the prism aesthetic.
• Do apply gradient text (background-clip: text) to headlines and key accent phrases to reinforce the brand's vibrant, spectrum-inspired identity.
• Do reserve the primary accent (#ff64c8) exclusively for CTAs and interactive moments—overuse dilutes its impact and confuses hierarchy.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'SF Pro Display') for native performance and to align with the brand's modern, accessible positioning.
• Do apply inset highlights (inset 0 1px rgba(255,255,255,0.85)) to glass surfaces to simulate light refraction and depth.

**Don't**

• Don't use solid, opaque backgrounds for interactive elements—the glassmorphic aesthetic depends on backdrop-filter and semi-transparency to create visual clarity.
• Don't apply text-shadow or drop-shadow to gradient text; it breaks the gradient effect. Instead, ensure sufficient contrast via background color and opacity.
• Don't exceed 2–3 accent colors in a single view—the vibrant palette is powerful in small doses but overwhelming if overused.
• Don't use border-radius values below 4px or above 24px for standard components; this breaks the soft-technical balance and feels either too sharp or too organic.
• Don't animate opacity and transform simultaneously on the same element without staggering delays—it creates visual chaos. Use transition-delay to sequence entrance animations.