bytejuggler.com small software projects & coding experiments
Made by AI

Living style guide

Design system

The building blocks of bytejuggler.com. It is derived from the logo and banner: graphite isometric blocks, juggled blue cubes and a clean light field. There is a dark Lab variant for the AI experiments.

Browse components tokens.css

01 · Brand

Logo & wordmark

The bj mark is three graphite isometric blocks forming the letters, with three blue cubes being juggled above them. On the web the wordmark is set in live text (Outfit 600), so it stays sharp and adapts to the theme. The raster lockup is for email and print only.

bj badge on light

Badge · light

bj badge on dark

Badge · dark / Lab

bytejuggler.comsmall software projects & coding experiments

Header lockup · HTML

bytejuggler.com lockup

Raster lockup · email/print

Usage

  • Keep clear space around the mark of at least the width of one blue cube.
  • Minimum size: 24 px for the badge, 120 px wide for the full lockup.
  • The .com always carries the blue gradient on light backgrounds and plain Lab cyan on dark ones.
  • Don't recolour the graphite blocks, rotate the mark or put it on busy photos without the white badge.
bytejuggler.com banner with isometric slabs

Key visual · also used for the social card (og-image.jpg)

02 · Colour

Palette

Colours are sampled from the logo and banner. Components only use semantic tokens (--c-*), so switching to the dark/Lab theme just re-maps them.

Graphite & paper neutrals

Ink--bj-ink #14171c
Graphite 800#1f2329
Graphite 700#2a2e33
Graphite 500#5e6470 · muted text
Graphite 300#a3a8b1
Line#e2e4e8
Mist#f3f4f6
Paper#ffffff

Juggled cubes accent

Cyan 400#10b8f8 · cube top
Blue 500#0a82fe
Blue 600#0057f7 · links, buttons
Blue 700#0047d4 · hover
Blue 100#e6f0ff · soft fill
Cube gradient--bj-cube-gradient

Lab dark theme, shared with Space Travel

Lab bg#07070d
Lab panel#0e1022
Lab line#262b4f
Lab cyan#4fd9ff
Lab violet#a58bff
Lab pink#ff8fd2
Lab gold#ffcf7a
Lab gradient--lab-gradient

Semantic tokens

TokenLightDark / LabUse
--c-bgPaperLab bgPage background
--c-bg-altMist#0b0c18Alternate sections, footer
--c-surfacePaperLab panelCards, lists
--c-text / --c-text-mutedInk / Graphite 500#d8dbea / #9aa0c0Body copy / secondary text
--c-accentBlue 600Lab cyanLinks, primary buttons, focus
--c-borderLineLab lineHairlines, card borders

Contrast: Ink on Paper 18.0:1 · Graphite 500 on Paper 5.9:1 · Blue 600 on Paper 5.7:1 · Lab text on Lab bg 14.6:1 · Lab dim on Lab bg 7.8:1. All pass WCAG AA for body text.

03 · Typography

Type

All fonts are self-hosted variable WOFF2 files under the SIL Open Font License. No external requests.

Display · Outfit

Aa Bb 123

Geometric sans that echoes the wordmark. Headings, nav, buttons.

Body · Inter

Aa Bb 123

Highly legible UI sans for paragraphs, tables and captions.

Code · JetBrains Mono

{ } => 0x

Code, file names, version numbers, tags.

Scale major third · 1.25

4xl · 36–49
Juggling bytes since 1998
3xl · 39
Space Travel explained
2xl · 31
Indigo Exporter for Cinema4D
xl · 25
Mirror Plane plugin for Silo
lg · 20
Lead paragraphs and card titles
md · 16
Body text. Christmas brought an iPod Touch and it's my first ever iPod. Really cool!
xs · 14
Captions, meta, footnotes

Prose sample

How the gallery used to work

The old Indigo gallery used a small ShowImg.php script to look up each render by ID. In the new site every image is a plain static file. A lightbox handles the viewing, and every image keeps a deep link.

  • No server runtime at all
  • Keyboard: ← → Esc
Shameless note to all of you kind users of my plugins with some spare time…

Kicker + accent bar

Lab · Experiment 01

Space Travel

Fifteen procedural space scenes, five minutes, one tracker tune.

04 · Spacing & shape

Grid, radius, depth

Everything sits on a 4 px grid. Corners are sharp or nearly sharp, like the isometric blocks. Use depth sparingly: mostly hairlines, with shadow only on interaction.

Spacing scale

--sp-1 · 4
--sp-2 · 8
--sp-3 · 12
--sp-4 · 16
--sp-6 · 24
--sp-8 · 32
--sp-12 · 48
--sp-16 · 64
--sp-24 · 96

Radius & shadow

radius-0
radius-1 · 2
radius-2 · 4
shadow-1
shadow-2
shadow-3

Isometric slabs

The banner's 30° slabs are recreated as inline SVG (decor-slabs partial), coloured by tokens, so they follow the theme and weigh about 2 KB instead of a large PNG. Small screens show a reduced set.

Hero · light

small software projects
& coding experiments

Section divider

05 · Components

Controls

Buttons

Primary Dark Ghost Small Download Coming soon

Badges

Plugin New Lab Archive · 2006 Windows only

Tags

  • C++20
  • OpenGL 4.6
  • GLSL
  • ray marching
  • Cinema4D SDK

Breadcrumb

Cube list

  • Metals (using nkdata files) and fresnel scale in phong material
  • Albedo and bump maps with exponent/gain control
  • Save scene and run Indigo in one click

06 · Cards

Project & experiment cards

The whole card is clickable (title link stretched). On hover it lifts and a blue corner cube appears.

Space Travel demo, intro scene
Lab · 01Made by AI2026

Space Travel

A real-time demoscene-style journey through fifteen procedural space scenes, with interactive explainers.

  • C++20
  • OpenGL
  • AI-coded
Table render made with Indigo and Cinema4D
Archive · 2006Cinema4D 9+ · Windows

Indigo Exporter

Export Cinema4D scenes to the Indigo unbiased renderer: materials, lights, depth of field.

  • C++
  • TinyXML
Archive · 2005Silo 1.x

Silo plugins

SimpleHUD, SiloScript and Mirror Plane: small helpers for the Silo modeler, with source code.

  • C++
  • VBScript

07 · Content blocks

Callouts, code, specs, media

Note

Indigo 0.6 test 1 XML format is supported. For the old 0.4 format use version 0.58.2.

Heads up

Java applets no longer run in modern browsers. See the HTML5 ports in the Lab.

From the archive

This page dates from 2006. Downloads are kept for history and may not work with current software.

Spec list

Platform
Windows · Cinema4D R9+
Latest
0.59.7
Language
C++ · Cinema4D SDK
Licence
Freeware
dataUri.rb (excerpt)
data = File.open( path + "/" + source, 'rb').read
out = Base64.encode64(data)
outFile = File.new( path + "/" + File.basename(source) + ".html", "w" )

Placeholder slot (not public yet)

Video coming soon

08 · Downloads

Download list & version history

The latest release is featured. Older versions collapse into a native <details> disclosure, so no JavaScript is needed.

  • Indigo Exporter 0.59.7 Latest
    IndigoExporter.0.59.7.zip · Indigo 0.5+ scene format     Download
  • Indigo Exporter 0.58.2
    IndigoExporter.0.58.2.zip · last for Indigo 0.4 format     Download
Version history (22 older releases)
  • 0.59.6b
    IndigoExporter.0.59.6b.zip    zip
  • 0.59.6
    IndigoExporter.0.59.6.zip    zip
  • 0.1
    IndigoExporter.0.1.zip · first public release    zip

10 · Lab theme

Coding experiments with AI

The /lab/ section is always dark (theme: lab in front matter). It shares its palette with the Space Travel explainers, so moving between the site and the demo pages feels seamless.

Spiral galaxy scene
13

Galaxy

A spiral galaxy built from millions of points.

nested ellipses · PCG hashes · gas and dust
Black hole scene
14

Black hole

An accretion disc bent around the event horizon.

bending light · Doppler beaming · lensing

Explainer top bar

bytejuggler.com/Lab/Space Travel Made by AI

A 44 px bar injected at the top of each untouched explainer page. It links back to the site without changing the demo's own styling.

PrimaryGhostBadge

11 · AI badges

Showing how a page was made

Pages and sections built with AI are marked openly, using the two badges in AIBadges/. Every AI page gets a hex badge in the top-right corner, and smaller elements get a text chip. All of them link to the explanation on the About page.

Made by AI

Made by AI

AI did the making

The code or content was written by AI. BlackLizard set the direction and design, and reviewed the result. Example: Space Travel ("Direction & design: blacklizard · Code: Claude"), the explainers, the HTML5 ports of the Java effects.

Made with AI

Made with AI

AI lent a hand

BlackLizard made it. AI helped: drafting text, refactoring, porting, debugging or editing images. Example: legacy pages rewritten from the original content, articles edited with AI.

Placement & sizes

WhereComponentSize
Whole page.ai-corner: automatic, top-right of the page (this page uses it)68 → 104 px
Section of a page.ai-badge--md next to the section heading96 px
Feature / hero.ai-badge--lg144 px
Cards, lists, downloads.ai-chip / .ai-chip--withtext
Untouched explainer pageschip in the Lab top bar + corner badgechip + 68 px
  • Below 64 px the hex text becomes unreadable. Use the chip instead.
  • A page carries one corner badge. Sections inside it only get their own badge if they differ from the page (e.g. a "Made by AI" demo embedded in a "Made with AI" article).
  • Never crop, recolour or rotate the hex badges. Keep the clear space at ⅛ of the badge width.
  • Blue means by and teal means with. The chips repeat the colour coding, but the text alone is enough, so colour is never the only signal.

Section-level example

Lab · 03

FX applets, reborn in HTML5

The 1998 Java effects, ported to Canvas by AI.

Made by AI

How to use it in a page

pages/lab/space-travel/index.html
<!--
title: Space Travel
theme: lab
ai: by        # by | with | none → corner badge
-->
…
<div class="card__meta">{{> ai-chip-by }}</div>
Made by AI Made with AI Made by AIMade with AI

On Lab / dark backgrounds

12 · Principles

How we build pages

Static, always

Plain HTML, CSS and a small vanilla JS file. No server runtime, CDNs, trackers or cookies.

Tokens first

Components never hard-code colours. They reference --c-* tokens, so themes come for free.

Accessible

AA contrast, visible focus rings, keyboard-friendly lightbox and menu, alt text on every render, reduced-motion support.

Honest archive

Old projects are marked with year and compatibility. History is kept, not hidden.