DESIGN.md · Analysis

Bruno Simon's Three.js Journey

bruno-simon.com · 14 Oct 2026 · 47 colors · Amatic SC, Nunito

Bruno Simon's Three.js Journey

An immersive 3D interactive portfolio built with Three.js, blending game-like exploration with creative developer storytelling through a neon-lit, cyberpunk-inspired aesthetic.

Colors

surface#1d1721

surface-dim#0f0b13

surface-bright#2a2430

surface-container-lowest#0f0b13

surface-container-low#16121a

surface-container#1d1721

surface-container-high#251f2b

surface-container-highest#2d2733

on-surface#ffffff

on-surface-variant#e9ecef

inverse-surface#f5f5f5

inverse-on-surface#1d1721

outline#767676

outline-variant#555555

surface-tint#ffceca

primary#ffceca

on-primary#251f2b

primary-container#ff9aaa

on-primary-container#1d1721

inverse-primary#ff6a7c

secondary#d5ff95

on-secondary#251f2b

secondary-container#b8e66b

on-secondary-container#1d1721

tertiary#ffffff

on-tertiary#251f2b

tertiary-container#f0f0f0

on-tertiary-container#1d1721

error#ff6a7c

on-error#ffffff

error-container#c21515

on-error-container#ffffff

primary-fixed#ffceca

primary-fixed-dim#ff9aaa

on-primary-fixed#251f2b

on-primary-fixed-variant#1d1721

secondary-fixed#d5ff95

secondary-fixed-dim#b8e66b

on-secondary-fixed#251f2b

on-secondary-fixed-variant#1d1721

tertiary-fixed#ffffff

tertiary-fixed-dim#e9ecef

on-tertiary-fixed#251f2b

on-tertiary-fixed-variant#1d1721

background#1d1721

on-background#ffffff

surface-variant#2d2733

Typography

display: fontFamily: Amatic SC · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Amatic SC · fontSize: 40px · fontWeight: 700 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Amatic SC · fontSize: 28px · fontWeight: 700 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Nunito · fontSize: 20px · fontWeight: 700 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Nunito · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Nunito · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Nunito · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Nunito · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Bruno Simon's Three.js Journey is an immersive 3D interactive portfolio that transforms the traditional web experience into a playable, explorable world. Built with Three.js and WebGPU, it serves creative developers and design-forward audiences seeking inspiration through experiential storytelling. The aesthetic is "Neon Cyberpunk Minimalism"—a high-contrast blend of deep purples and blacks (#1d1721, #251f2b) punctuated by vibrant neon accents (peach #ffceca, lime #d5ff95, and crimson #c21515). The UI evokes the feeling of a retro arcade meets modern creative studio: precise, playful, and unapologetically bold. The brand personality is confident yet approachable, technical yet whimsical. Example voice: "Drive around to discover secrets—and don't break anything."

Colors

The color system is built on a dark, atmospheric foundation with strategic neon highlights that guide interaction and emotion. **Primary (#ffceca, a warm peach)** is the signature accent used on call-to-action buttons, success states, and interactive focus indicators—it reads as inviting and creative without being aggressive. **Secondary (#d5ff95, a bright lime-green)** reinforces positive feedback and achievement states, creating visual contrast against the dark canvas. **Tertiary (#ffffff, pure white)** serves as the neutral text and structural element, ensuring legibility on the dark gradient backgrounds. **Error (#ff6a7c, a vivid crimson)** is reserved for danger states and the menu trigger's gradient (paired with #46123b for depth). The surface stack uses a radial gradient philosophy:

Typography

The type system pairs **Amatic SC** (a playful, hand-drawn serif) for headlines and display text with **Nunito** (a geometric, friendly sans-serif) for body and UI labels. This pairing communicates creative confidence: the expressive headlines (display: 60px, headline-lg: 40px, both at 700 weight) announce personality and draw the eye, while Nunito's clean geometry (body-md: 16px/400, label-md: 14px/600) ensures functional clarity in menus, buttons, and input fields. Letter-spacing is conservative (0em to -0.04em) to maintain tightness and energy. All text on the dark background uses white or light colors; when text appears over busy 3D scenes, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to maintain legibility. Buttons use label-md (14px, 600 weight) for consistent visual weight, while

Layout

The layout is a fixed, full-viewport experience (html, body, .game all set to position: fixed, width: 100%, height: 100%) anchored by a Three.js canvas that fills the screen. Modal and menu overlays use flexbox centering (display: flex, align-items: center, justify-content: center) to float content over the 3D scene. Container max-width is 1100px for desktop, with responsive breakpoints at 520px (tablet) and 440px (mobile). The menu container uses min(1000px, calc(100% - 120px)) to maintain breathing room on all viewports. Spacing follows a semantic scale: **gutter (24px)** separates major sections, **md (24px)** is the standard padding inside cards and modals, **sm (12px)** is used for compact input groups and button padding, and **lg (40px)** creates breathing room between hero sections.

Elevation & Depth

Depth is conveyed through layered gradients and subtle shadows rather than dramatic drop-shadows. **Level 1 (Base Canvas):** The background is a radial-gradient(farthest-side at 0 0, #251f2b, #1d1721), creating a subtle vignette that pulls focus toward the center. **Level 2 (Modal/Menu Cards):** Modals and menu containers use the same radial-gradient background with a 1px solid border at rgba(255, 255, 255, 0.35) to create a frosted-glass frame. Box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) adds a soft separation from the background. **Level 3 (Elevated Overlays):** The modals.is-visible state use

Shapes

The shape philosophy is **Geometric Precision with Soft Edges**—a balance between technical sharpness and approachable warmth. **Buttons and inputs** use border-radius: 8px (rounded.md) as the default, creating a subtle roundness that feels modern without being overly soft. **Larger containers and modals** use border-radius: 15px (rounded.lg) to add visual softness and breathing room. **Small utility elements** (tooltips, badges, small buttons) use border-radius: 4px (rounded.sm) or 6px (rounded.DEFAULT) to maintain visual hierarchy—smaller radius for smaller elements. **Full-width input group

Components

Action Elements **Button Primary** (class .button, no modifier) is the default interactive element: backgroundColor transparent, textColor #ffffff (on-surface), border 1px solid rgba(255, 255, 255, 0.8), height 58px, padding 0 16px, border-radius 8px. On hover (html:not(.is-mode-touch) .button:not(.is-disabled):hover), the border becomes solid white and text shifts to pure white for emphasis. **Button Success** (class .button.is-success) uses textColor #d5ff95 (secondary) to signal positive outcomes (e.g., "Join server" CTA). **Button Danger** (class .button.is-danger) uses textColor #ff6a7c (error) for destructive or warning actions. **Button Small** (class .button.is-small) reduces height to 40px and uses label-sm typography (12px, 500 weight) for compact UI. All buttons use cursor:

---
version: alpha
name: Bruno Simon's Three.js Journey
description: >-
  An immersive 3D interactive portfolio built with Three.js, blending game-like exploration with creative developer
  storytelling through a neon-lit, cyberpunk-inspired aesthetic.
logo:
  src: https://bruno-simon.com/favicons/favicon.svg
colors:
  surface: '#1d1721'
  surface-dim: '#0f0b13'
  surface-bright: '#2a2430'
  surface-container-lowest: '#0f0b13'
  surface-container-low: '#16121a'
  surface-container: '#1d1721'
  surface-container-high: '#251f2b'
  surface-container-highest: '#2d2733'
  on-surface: '#ffffff'
  on-surface-variant: '#e9ecef'
  inverse-surface: '#f5f5f5'
  inverse-on-surface: '#1d1721'
  outline: '#767676'
  outline-variant: '#555555'
  surface-tint: '#ffceca'
  primary: '#ffceca'
  on-primary: '#251f2b'
  primary-container: '#ff9aaa'
  on-primary-container: '#1d1721'
  inverse-primary: '#ff6a7c'
  secondary: '#d5ff95'
  on-secondary: '#251f2b'
  secondary-container: '#b8e66b'
  on-secondary-container: '#1d1721'
  tertiary: '#ffffff'
  on-tertiary: '#251f2b'
  tertiary-container: '#f0f0f0'
  on-tertiary-container: '#1d1721'
  error: '#ff6a7c'
  on-error: '#ffffff'
  error-container: '#c21515'
  on-error-container: '#ffffff'
  primary-fixed: '#ffceca'
  primary-fixed-dim: '#ff9aaa'
  on-primary-fixed: '#251f2b'
  on-primary-fixed-variant: '#1d1721'
  secondary-fixed: '#d5ff95'
  secondary-fixed-dim: '#b8e66b'
  on-secondary-fixed: '#251f2b'
  on-secondary-fixed-variant: '#1d1721'
  tertiary-fixed: '#ffffff'
  tertiary-fixed-dim: '#e9ecef'
  on-tertiary-fixed: '#251f2b'
  on-tertiary-fixed-variant: '#1d1721'
  background: '#1d1721'
  on-background: '#ffffff'
  surface-variant: '#2d2733'
typography:
  display:
    fontFamily: Amatic SC
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Amatic SC
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Amatic SC
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Nunito
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Nunito
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Nunito
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Nunito
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Nunito
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 4px
  DEFAULT: 6px
  md: 8px
  lg: 15px
  xl: 20px
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1100px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 32px rgba(0, 0, 0, 0.25)
layout:
  containerMaxWidth: 1100px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 0 16px
    height: 58px
    lineHeight: 58px
    border: 1px solid rgba(255, 255, 255, 0.8)
  button-primary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    border: '1px solid #ffffff'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 0 16px
    height: 58px
    lineHeight: 58px
    border: 1px solid rgba(255, 255, 255, 0.8)
  button-secondary-hover:
    backgroundColor: transparent
    textColor: '#ffffff'
    border: '1px solid #ffffff'
  button-success:
    backgroundColor: transparent
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 0 16px
    height: 58px
    lineHeight: 58px
    border: 1px solid rgba(255, 255, 255, 0.8)
  button-danger:
    backgroundColor: transparent
    textColor: '{colors.error}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 0 16px
    height: 58px
    lineHeight: 58px
    border: 1px solid rgba(255, 255, 255, 0.8)
  button-small:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.md}'
    padding: 0 12px
    height: 40px
    lineHeight: 40px
    border: 1px solid rgba(255, 255, 255, 0.5)
  button-small-hover:
    backgroundColor: transparent
    textColor: '#ffffff'
    border: '1px solid #ffffff'
  input-field:
    backgroundColor: rgba(0, 0, 0, 0)
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    padding: 4px 15px 0 5px
    height: 58px
    lineHeight: 58px
    border: '1px solid #555555'
  input-field-focus:
    backgroundColor: rgba(0, 0, 0, 0)
    textColor: '{colors.on-surface}'
    border: '1px solid #ffffff'
  card-modal:
    backgroundColor: 'radial-gradient(ellipse at top left, #251f2b, #1d1721)'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.lg}'
    padding: 25px 40px 40px
    boxShadow: '{elevation.lg}'
  card-menu:
    backgroundColor: 'radial-gradient(ellipse at top left, #251f2b, #1d1721)'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.DEFAULT}'
    padding: 20px
    border: '1px solid #ffffff'
    borderOpacity: '0.35'
  menu-trigger:
    backgroundColor: 'radial-gradient(ellipse at top right, #c21515, #46123b)'
    textColor: '#ffffff'
    rounded: '{rounded.DEFAULT}'
    width: 44px
    height: 44px
    border: '1px solid #ffffff'
    borderOpacity: '0.35'
  menu-trigger-hover:
    transform: translate(-4px)
    transitionDuration: 150ms
    transitionDelay: 150ms
  tooltip:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    boxShadow: '{elevation.md}'
    fontSize: 12px
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
**Button Primary** (class .button, no modifier) is the default interactive element: backgroundColor transparent, textColor #ffffff (on-surface), border 1px solid rgba(255, 255, 255, 0.8), height 58px, padding 0 16px, border-radius 8px. On hover (html:not(.is-mode-touch) .button:not(.is-disabled):hover), the border becomes solid white and text shifts to pure white for emphasis. **Button Success** (class .button.is-success) uses textColor #d5ff95 (secondary) to signal positive outcomes (e.g., "Join server" CTA). **Button Danger** (class .button.is-danger) uses textColor #ff6a7c (error) for destructive or warning actions. **Button Small** (class .button.is-small) reduces height to 40px and uses label-sm typography (12px, 500 weight) for compact UI. All buttons use cursor:

Edit, then copy or download.