JettZ Digital Space

Overview

JettZ Digital Space is a personal portfolio and creative hub that celebrates retro arcade culture and pixel-art brutalism—a design movement that combines the uncompromising geometry of 1980s arcade cabinets with contemporary web interactivity. The brand serves creative technologists and gaming enthusiasts who value nostalgic authenticity over polished minimalism. The aesthetic is intentionally aggressive: hard black borders (3px–6px), aggressive drop shadows (6px 6px 0px 0px), and saturated color blocking (hot pink #ff5e97, electric yellow #fcd116, deep teal #14b8a6) create visual tension and playful energy. The UI evokes the feeling of pressing a physical arcade button—tactile, responsive, and rewarding.

The voice is direct, irreverent, and unapologetically gamer-coded. Sentences are short and punchy: 'WELCOME TO MY DIGITAL SPACE. 🎮' Vocabulary leans into gaming culture ("projects," "comingsoon," emoji accents) without irony. The brand personality is confident but not arrogant—it's a digital space that invites exploration and celebrates the creator's passions without pretense. Every interaction (hover, click, scroll) should feel like operating a vintage machine: immediate, satisfying, and slightly rough around the edges.

Colors

The color system is built on five saturated, high-contrast accent colors layered over a near-black canvas (#18181b). Primary is hot pink (#ff5e97)—the signature CTA color used on the hero button and key interactive elements; it commands attention and signals action. Secondary is electric yellow (#fcd116), deployed on section titles and secondary CTAs to create visual rhythm and break up the dark background. Tertiary is teal (#14b8a6), used sparingly on accent buttons and status indicators. The surface stack is minimal: the base is near-black (#18181b), the container is a deep forest green (#065f46) that serves as the phone-frame background, and all text on dark surfaces is pure white (#ffffff) or near-white (#e9ecef) for maximum contrast. Outlines and borders use pure black (#000000) or da

Typography

The type system uses two distinct families to create visual hierarchy and reinforce the retro-arcade aesthetic. Press Start 2P (a bitmap-style font from Google Fonts) is reserved for display, headlines, and section titles—it's loud, pixelated, and instantly recognizable as gaming culture. VT323 (a monospace font evoking 1980s terminal displays) handles body text, labels, and interactive elements, maintaining readability while staying true to the retro theme. Display text (Press Start 2P at 48px, 700 weight, -0.02em letter-spacing) is used for hero titles and major section breaks. Headline-md (Press Start 2P at 22px, 700 weight) is applied to the main title 'Akhmad Hadi' with a 4px black text-shadow (0 4px 0 rgba(0, 0, 0, 1)) to create depth and simulate arcade cabinet lettering. Body-lg (V

Layout

The layout is a single-column, mobile-first design constrained to a max-width of 420px (simulating a smartphone screen). The phone-container uses a fixed aspect ratio (92vh height on desktop, 100vh on mobile) with a 4px black border and 6px 6px drop shadow to create a physical device frame. Inside, the main-content area uses flexbox (flex-direction: column, gap: 18px) to stack sections vertically with consistent spacing. Padding is 30px horizontal, 20px vertical, creating a gutter of 20px from the frame edge. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component internal padding, md (24px) for section separation, lg (40px) for major breaks. The background uses a semi-transparent overlay (linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.2))) o

Elevation & Depth

Depth is achieved through aggressive, hard-edged drop shadows that simulate physical button presses and layered arcade-cabinet aesthetics. There are three elevation levels: Level 1 (sm) uses 3px 3px 0px 0px rgba(0, 0, 0, 1)—applied to social icons and small interactive elements; Level 2 (md) uses 4px 4px 0px 0px rgba(0, 0, 0, 1)—applied to standard buttons and cards; Level 3 (lg) uses 6px 6px 0px 0px rgba(0, 0, 0, 1)—applied to the phone-container frame itself. Shadows are always pure black with zero blur and zero spread, creating a hard, pixelated effect that reinforces the retro aesthetic. W

Shapes

The shape philosophy is 'Pixel-Perfect Brutalism'—all corners are sharp (border-radius: 0px), all edges are hard, and all geometry is rectilinear. This extends to every component: buttons, cards, social icons, and input fields have zero border-radius. The only exception is the full-radius token (9999px), which is never used in this system. Buttons use a 3px solid black border (border: 3px solid #000000) to create visual weight and define the clickable area. Cards and containers use a 4px border to signal they are primary containers. Social icons use a 3px border and are exactly 42px × 42px squ

Components

Action Elements Buttons are the primary interactive component and come in three color variants: primary (pink #ff5e97), secondary (yellow #fcd116), and tertiary (teal #14b8a6). All buttons share the same structure: VT323 font at 20px, 700 weight, 12px vertical padding, 16px horizontal padding, 3px black border, and a 4px 4px drop shadow (box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1)). On hover, the background color shifts to the brand-specific hover state (e.g., pink button remains pink, but the text may brighten). On active/click, apply transform: translate(2px, 2px) and reduce the shadow to 2px 2px 0px 0px rgba(0, 0, 0, 1) to simulate button press. Transition timing is instant (transition: transform 0.05s ease, box-shadow 0.05s ease) to maintain the snappy, arcade-like feel.

Cont

Do's and Don'ts

**Do**

• Do use hard black borders (3px–4px) on all interactive elements to create visual weight and define clickable areas.
• Do apply aggressive drop shadows (4px 4px 0px 0px) and translate elements on click to simulate physical button press feedback.
• Do use Press Start 2P exclusively for display and headline text to maintain the arcade-cabinet aesthetic.
• Do keep all corners sharp (border-radius: 0px) and all geometry rectilinear—no rounded corners, no soft edges.
• Do use the five saturated accent colors (pink, yellow, teal, blue, purple) as primary CTAs and section breaks; never use them for body text or backgrounds.
• Do maintain instant color transitions and animations (0.05s ease) to keep the interface snappy and arcade-like.

**Don't**

• Don't use soft shadows, blur effects, or gradients—all shadows must be hard black rectangles with zero blur.
• Don't apply border-radius to any component; the system is built on sharp, rectilinear geometry.
• Don't use system fonts or generic sans-serif; always use Press Start 2P or VT323 to maintain the retro aesthetic.
• Don't animate color transitions or use hover states that fade or blend; all state changes should be instant or use translate/shadow shifts.
• Don't use the near-black surface color (#18181b) for text; always use white (#ffffff) or near-white (#e9ecef) for maximum contrast.
• Don't add padding or margin that breaks the 8px grid unit; all spacing should be a multiple of 8px (4px, 12px, 24px, 40px, 64px).