The design system is engineered for a high-impact creative professional, blending the high-octane energy of gaming aesthetics with the precision of premium SaaS interfaces. The brand personality is innovative, technical, and vibrant, positioned to evoke a sense of forward-thinking mastery.

The visual style is a fusion of Modern Minimalism and Glassmorphism. It utilizes "dark space" to create depth, allowing vibrant geometric accents and 3D elements to serve as focal points. The layout is structured yet dynamic, moving away from cluttered overlays toward intentional, high-contrast compositions that feel both experimental and authoritative.

This design system utilizes a "Deep Tech" palette. The foundation is a near-black neutral (#0A0A0C), providing a canvas for high-luminance accents.

• Primary (Electric Blue): Used for primary actions, active states, and critical branding elements.
• Secondary (Neon Lime): Reserved for highlights, success states, and secondary calls to action to provide a "gaming" punch.
• Tertiary (Vivid Purple): Applied to gradients and decorative geometric overlays to add depth and a creative edge.
• Surface Strategy: Backgrounds should remain dark to maintain a high-contrast environment. Use subtle shifts in lightness to define container boundaries rather than heavy borders.

The typography strategy pairs technical precision with expressive geometry.

• Headlines: Uses Sora for its wide, modern geometric structure. It should be typeset with tight letter-spacing to create a "locked-in" professional look.
• Body: Uses Inter for maximum readability across long-form descriptions and project details.
• Labels/Technical: Uses JetBrains Mono for small labels, categories, and metadata. This reinforces the "tech/developer" aspect of the creative portfolio.

The layout follows a Fluid Grid system based on an 8px base unit.

• Grid: A 12-column grid is used for desktop, 6-column for tablet, and 2-column for mobile.
• Section Spacing: Generous vertical padding (120px+) is required between sections to create the "dark space" aesthetic, allowing individual components to breathe.
• Alignment: While the grid is strict, decorative geometric accents (diagonal lines, mesh gradients) should intentionally break the grid or bleed off the edges of the viewport to create kinetic energy.

Depth is achieved through Glassmorphism and Luminous Layering rather than traditional shadows.

• Surfaces: Use a semi-transparent fill (e.g., rgba(255, 255, 255, 0.05)) with a high-saturation backdrop blur (20px-40px).
• Borders: "Ghost borders" are preferred—thin 1px strokes with a linear gradient (top-left to bottom-right) that transitions from a low-opacity white to a transparent state.
• Glow: For interactive elements, use "Ambient Glow"—a soft, outer drop-shadow tinted with the primary or secondary color, with a large blur radius (30px+) and low opacity (0.2).

The shape language is primarily Rounded (0.5rem), providing a sophisticated balance between the sharp angles of the "gaming" aesthetic and the softness of modern UI.

• Interactive Elements: Buttons and small cards use the standard rounded (8px) radius.
• Large Containers: Hero sections or main gallery cards use rounded-xl (24px) to emphasize the glassmorphic container style.
• Geometric Accents: Decorative background elements should feature 45-degree angles to maintain the "angled" legacy of the brand, but with precise, clean execution.

• Buttons: Primary buttons feature a solid Electric Blue fill with black text. Secondary buttons are "Ghost" style with a 1px Neon Lime border and a subtle hover glow.
• Glass Cards: Used for project galleries. They must include a backdrop-filter: blur(), a subtle inner gradient, and a 1px border. 3D floating job graphics should be centered within these cards.
• Chips/Badges: Small, technical-looking tags using JetBrains Mono. Use the tertiary purple for category labels with a very low opacity background.
• Inputs: Darker than the background surface with a 1px bottom border that animates to the primary color on focus.
• Navigation: A floating, glassmorphic header bar with a blur effect that persists at the top of the viewport. Link states should use a subtle vertical dash or underline in Neon Lime.