Skip to content
The Kode Company

Design dossier

How the Observatory works.

The palette, the type, and the living particle cosmos behind this site, documented plainly.

One idea threads every screen.

The premise: every skill is a constellation, and practice connects the stars. So the site is built as a night observatory. A single field of a few thousand points of light sits behind everything, and it never stops listening.

As you scroll, the field re-forms into the chapter's figure: the word KODE for the studio, Satya's own lotus, a globe for the work, a star map for the goodbye. Your cursor bends the field like a small gravity well. Nothing loops on its own; the sky only answers you.

A cosmos in six inks.

#081335
Deepest field
page ground
#0A1747
Royal midnight
section tint
#10236B
Raised panel
elevated surfaces
#A9B8E8
Dim starlight
secondary text
#EAF0FF
Starlight
primary text
#E9D8A6
Pale gold
the single accent

The ground stays saturated royal blue, never graphite and never purple, so the cosmos reads unmistakably as sky. One pale gold does all the pointing: candlelight on a star chart, soft instead of alarm. No neon, no violet, no beige and brass.

Three voices, no serif.

Clash Display · 500 / 600 · headlines

Every skill is a constellation.

General Sans · 400 / 500 · body

Quiet software asks for quiet body text. General Sans carries the reading line without raising its voice, and leaves the drama to the display face above it.

IBM Plex Mono · 400 / 500 · apparatus

Plate I · Lotus nebula

The cosmos, plainly.

A few thousand points of light live on your graphics card. Each one remembers five homes: a loose nebula, the word KODE, the lotus, the globe, and the star map. Scroll decides which home is pulling; the points drift there on a cushion of noise, so the figure forms the way a crowd settles rather than the way a switch flips.

Two figures are drawn from real sources. KODE is sampled from the display face letter by letter, each letter carrying its own point budget so all four stay crisp. The lotus is traced offline from the Satya plate artwork itself, so the particle flower in that chapter and the painted flower beside it are the same lotus.

Your cursor is a small gravity well. Points near it are drawn in and swept sideways, the way light bends around mass. Walk away and the sky forgets you politely.

Try it: the panel here runs the same engine at a smaller size. Choose a figure, then stir it with your pointer.

Named honestly.

01Instanced point spritesAll particles render as one three.js draw call; nothing is a DOM node.
02Custom GLSL shadersA hand-written vertex and fragment pair; no prebuilt material.
03Simplex noise driftAshima 3D simplex gives every point its slow, unrepeating breath.
04Morph target attributesThe five figures ship as per-vertex attributes, blended by two uniforms.
05Image-traced formationThe particle lotus is sampled offline from the plate artwork; the site ships only its point coordinates.
06Gravitational lensExponential falloff pulls points toward the cursor with a tangential swirl.
07Additive halo spritesEach point is a gaussian glow; overlapping stars brighten like real ones.
08Displacement hoverExhibit plates ripple through a noise displacement and a whisper of chromatic shift.
09A frugal loopPixel ratio is capped, the loop pauses when the tab hides, and idle plates stop rendering.

One kit, one grade.

Every image on this site was generated for it: four exhibit plates in a single cosmic botanical grade, an eight-glyph icon set, the monogram, and the still sky used when motion is reduced.

The mark.

Seven stars joined by hairlines draw the letter K; the junction star flares like a catch of light in the lens. It is the field's KODE formation reduced to its smallest true form, and it stays legible down to a 16 pixel favicon. Pale gold on midnight is the primary; a plain ink cut serves light contexts.

Primary · gold on midnight
Plain ink · for light contexts
16 pixel favicon32 pixel favicon192 pixel app icon
The head kit · 16 to 512
The Kode Company

Rules the motion keeps.

Input first

The Tier-1 mechanic answers scroll and cursor. Nothing autoplays for its own sake.

A still sky on request

Prefers-reduced-motion swaps the engine for a single rendered starfield and static type.

A finger is a lens

On touch screens the field runs 2,200 points and bends around your fingertip while you drag.

Type arrives on mount

Headlines build once, from a clipped rise. Nothing waits invisibly for a scroll trigger.

Transforms only

Scroll effects move and clip; they never fade content from zero opacity.