Bytegen

Overview

Bytegen is a high-contrast, precision-focused design system for a fullstack engineer's professional portfolio. The aesthetic is 'Technical Minimalism'—a deliberate rejection of decorative flourishes in favor of stark clarity, geometric precision, and monochromatic authority. The brand serves developers and blockchain enthusiasts seeking credibility through visual restraint: pure black (#202020) on white, with strategic accent colors (Spotify green #1db954, deep purple #3e2360) deployed only on interactive elements and status indicators. The UI evokes a command-line interface translated to the web—functional, uncompromising, and intellectually rigorous.

The voice is direct, technical, and unapologetically confident. Vocabulary favors precision over warmth: 'S-tier fullstack engineer,' 'optimized, maintainable solutions,' 'scale.' The brand personality rejects hype; instead, it communicates through demonstrated expertise and clean execution. Example sentence in brand voice: 'I build systems that don't break when they matter.'

Colors

The color system operates on a principle of maximum contrast and functional hierarchy. Primary (#202020) is the dominant text and interactive color—pure near-black that commands attention and conveys authority. It appears on all body text, headings, buttons, and active navigation states. On-primary (#ffffff) is reserved for text and icons layered over primary backgrounds, ensuring WCAG AAA compliance (contrast ratio 19:1). Secondary (#1db954, Spotify green) is used sparingly for accent highlights, status indicators, and brand-distinctive micro-interactions—it appears on hover states and secondary CTAs to signal interactivity without overwhelming the monochromatic foundation. Tertiary (#3e2360, deep purple) serves as a supporting accent for badges, tags, and tertiary containers, adding visu

Typography

The type system pairs Faculty Glyphic (monospace, geometric, technical) for display and headlines with DM Sans and Poppins for body and labels. Faculty Glyphic at 40px weight 700 (headline-lg) conveys technical precision and brand identity—used exclusively for the ₿ytegen logo and major section headings. Poppins (sans-serif, humanist) at 28px weight 600 (headline-md) bridges the gap between technical and approachable, used for section titles and subsections. DM Sans (sans-serif, neutral) at 18px weight 400 (body-lg) and 16px weight 400 (body-md) provides readable body copy with generous line-height (28px and 24px respectively) to maintain legibility over long-form content. Label-md (Poppins, 14px, weight 600, letter-spacing 0.01em) is applied to buttons, navigation items, and interactive l

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid responsive behavior on mobile and tablet. The gutter is 24px (md spacing), applied consistently between grid columns and major section blocks. White-space is weaponized: lg spacing (40px) separates major sections (hero, services, portfolio), while md spacing (24px) separates cards and subsections within sections. The hero section uses asymmetric layout—profile image on the left (circular, 50% border-radius), text and CTA on the right—creating visual balance without symmetry. Container max-widths vary by section (1000px, 1200px, 1300px) to accommodate different content types; the primary container is 1280px. Padding follows the spacing scale: sections use xl (64px) top/bottom padding on desktop, lg (40px) on ta

Elevation & Depth

Depth is achieved through subtle shadows and layering, not through color gradients or transparency. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and dropdown panels. This shadow has a 3px vertical offset and 8px blur radius, creating a soft separation from the base layer. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), applied to modals, expanded dropdowns, and hover states of cards. The larger blur radius (40px) and vertical offset (16px) create a pron

Shapes

The shape philosophy is 'Geometric Precision'—a deliberate mix of hard edges and perfect circles that reflects technical rigor. Circular shapes (border-radius: 50%) are reserved for profile images, avatar containers, and pill-shaped buttons (nav items, CTAs), creating visual landmarks and signaling primary interactive zones. Standard containers and cards use border-radius: 1rem (16px), a moderate radius that balances approachability with technical restraint. Input fields use border-radius: 0.75rem (12px), slightly tighter than cards to signal a different interaction type. Buttons use border-ra

Components

Action Elements Buttons are the primary interactive element. Button-primary uses background: {colors.primary} (#202020), text-color: {colors.on-primary} (#ffffff), padding: 10px 30px, height: 48px, border-radius: 9999px (full pill), and border: 2px solid {colors.primary}. Typography is label-md (Poppins, 14px, weight 600). On hover, transition to button-primary-hover with background: {colors.primary-container} (#505050) and border: 2px solid {colors.primary-container} over 150ms (cubic-bezier(0.4, 0, 0.2, 1)). Button-secondary mirrors the primary structure but uses background: transparent, text-color: {colors.primary}, and border: 2px solid {colors.primary}. On hover, background transitions to {colors.surface-container-high} (#d0d0d0) over 150ms. Both button variants include a 2px bord

Do's and Don'ts

**Do**

• Do use Faculty Glyphic exclusively for the ₿ytegen logo and display-level headings to reinforce technical brand identity.
• Do apply 2px borders to all buttons and interactive elements to signal clickability and maintain visual precision.
• Do use primary (#202020) for all body text, headings, and active states to maintain maximum contrast and authority.
• Do reserve secondary (#1db954) and tertiary (#3e2360) for accent highlights, badges, and status indicators only—never use them for body text or large surface areas.
• Do apply Level 2 elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers, transitioning to Level 3 (0 16px 40px rgba(0, 0, 0, 0.12)) on hover over 200ms.
• Do use circular border-radius (50%) for profile images and pill-shaped buttons to create visual landmarks.
• Do maintain 24px gutter spacing between grid columns and 40px lg spacing between major sections for consistent rhythm.

**Don't**

• Don't use mid-tone grays (#a0a0a0, #666666) for primary text or interactive elements; stick to pure black (#202020) or white (#ffffff) for maximum contrast.
• Don't apply glassmorphism, transparency, or backdrop-filter effects; the system relies on hard edges and shadow contrast to define layers.
• Don't use rounded corners smaller than 4px (0.25rem) on standard containers; reserve minimal radii for utility elements like dropdowns.
• Don't mix typefaces within a single heading or body paragraph; Faculty Glyphic is for display only, DM Sans/Poppins for body and labels.
• Don't apply more than one accent color (secondary or tertiary) to a single component; use one accent per interactive element to avoid visual noise.
• Don't use box-shadows larger than Level 3 (0 16px 40px rgba(0, 0, 0, 0.12)); deeper shadows dilute the technical precision aesthetic.
• Don't apply padding smaller than 8px (xs spacing) or larger than 64px (xl spacing) without explicit design rationale; stick to the spacing scale.