Brand Relaunch Explorations
This directory contains design explorations for the Beyond Code brand relaunch. Each version explores different visual approaches while maintaining the core brand identity and content.
The definitive document for anyone who speaks for Beyond Code. Mission, values, voice, and visual identity—explained in plain language.
Visual exploration of product colors, backgrounds, gradients, and typography scales. Reference for color decisions.
Product colors used across all design explorations:
The original design with custom CSS. Features ambient gradient glows, centered hero layout, and card-based product showcase.
Refined version with improved hero gradients, testimonials section, and enhanced visual hierarchy. Still uses custom CSS.
Full Tailwind CSS conversion maintaining the gradient aesthetic. Flowing gradients across hero and logo sections, Liftoff product addition.
Bold "Neon Pop" exploration with no gradients. Large solid color geometric blocks positioned at section edges create an architectural, edgy feel.
Thin horizontal color bars divide sections, creating visual rhythm. Full-width 4-color strips between sections, colored top bars on cards. Refined and sophisticated.
Fixed vertical color bars on both edges of the viewport frame the entire page. Content elements use left borders to echo the rail concept. Creates a "framed canvas" effect.
Technical minimalist design with mosaic background pattern, bento grid layouts, and corner markers. Uses Space Grotesk + JetBrains Mono typography. Paper background with forest green accents.
Bold, high-contrast brutalist design with heavy 2px borders, hard shadows, and acid yellow accents. Features glitch text effects, physical button presses, custom cursor, and infinite marquees.
Retro terminal aesthetic with neon green on black, CRT scanlines, and phosphor text glow. Features ASCII art, shell prompts, blinking cursors, and bracket-style buttons. JetBrains Mono throughout.
High-energy kinetic design with massive viewport-scaled typography, infinite marquees, and hard color inversions on hover. Uses vibrant brand colors with gradient text and noise texture overlay.
Light mode variant of V10's kinetic typography. Same high-energy design with massive headlines, marquees, and color floods—but on a clean white background with dark text and inverted terminal.
| Version | Approach | Feel | Tech |
|---|---|---|---|
| V1-V3 | Ambient Gradients | Soft, modern, glowing | CSS / Tailwind |
| V4 | Geometric Blocks | Bold, edgy, architectural | Tailwind |
| V5 | Accent Strips | Refined, rhythmic, sophisticated | Tailwind |
| V6 | Side Rails | Framed, contained, distinctive | Tailwind |
| V7 | Mosaic Grid | Technical, precise, light | Tailwind |
| V8 | Neo-Brutalism | Bold, playful, tactile | Tailwind |
| V9 | Terminal CLI | Retro, hacker, authentic | Tailwind |
| V10 | Kinetic Typography | High-energy, dramatic, motion | Tailwind |
| V11 | Kinetic Light | High-energy, dramatic, light | Tailwind |