System Architecture

Design & Elements

A breakdown of the atomic units, motion physics, and technology stack powering this digital experience.

Color System

Void Black

#050505

Surface Gray

#0a0a0a

Electric Purple

#a855f7

Neon Green

#22c55e

Muted Text

#9ca3af

Border White

rgba(255,255,255,0.1)

Animation Physics

Spring Physics

config: {"stiffness":500,"damping":30}

Typography

Heading 1 / Inter Bold

The Quick Brown Fox

Heading 2 / Inter Semibold

Jumps Over The Lazy Dog

Body / Inter Regular

Typography serves as the primary interface for communication. We utilize a geometric sans-serif to maintain clarity and modern aesthetics across all viewports.

Layout Grid

Responsive Columns

max-w-7xl

Col

Gap: 16px (1rem)Margin: Auto

Full Technology Stack

Frontend Core

Next.js 14

Framework

React 18

Library

TypeScript

Language

Style & Motion

Tailwind CSS

Styling

Framer Motion

Animation

Figma

Design

Backend & DB

Node.js

Runtime

PostgreSQL

Database

Docker

Container

DevOps

Vercel

Hosting

GitHub

VCS

Bash/Zsh

CLI

Component Syntax

components/Button.tsx

const Button = ({ children, variant = 'primary' }) => {
  return (
    <button 
      className={clsx(
        "px-4 py-2 rounded-full font-medium transition-all",
        variant === 'primary' 
          ? "bg-white text-black hover:bg-gray-200" 
          : "bg-white/10 text-white hover:bg-white/20"
      )}
    >
      {children}
    </button>
  );
}