The TerraMar Collection
The complete visual language of the site in one place: what it is, why it exists, the mark, the palette and the reasoning behind every color, the full type scale, and the design logic of all three pages. Read this before building anything new, and hold anything new against it.
The intent
TerraMar is a private natural-history registry built as a family legacy: fossils, minerals, and in time meteorites, each placed in deep time and on the Earth, cataloged under TMC accession numbers. The ambition is plain and large. It is meant to be the most complete, story-driven personal collection registry on the internet.
The name is the whole thesis. TerraMar means land and sea, and every object either lived in the water or died beside it. The dark ground of every page is that phrase made visual: the deep sea and deep space at once, the two places the collection lives.
A thing built to outlive its maker
TerraMar was built by Julio Lucas out of love for his family and a wish to keep their wonder. It began with his daughter's fascination and grew into something with three jobs at once: to collect, to document, and to make an archive that can outlast the person who made it.
That last job is the point. Most collections go dark when their collector does. The objects survive and the stories vanish, and a shelf of fossils becomes a shelf of unexplained things. This one is built the other way around, so the stories stay. Whether his daughters open it next year or a stranger opens it in fifty, the record and the wonder are both still here. It is a father saying, in the most durable medium he can reach for, that these things mattered and here is why.
Words before pictures
The collection is described, not shown, on purpose. A tooth is a tooth until you know that three inches is near the ceiling for its kind. The registry answers what a thing was before it asks you to look at anything, because imagination creates ownership and a picture only confirms it. Every visual decision in this colophon serves that idea. It is why the mark is abstract, why there are no specimen photographs, and why the type and color work so hard: the words carry the weight, and the design gets out of their way.
Three surfaces, one experience
The site is three pages that share one frame, one palette, one voice, and one source of truth. Each takes the same collection and asks a different question of it, and each uses color to a specific end.
The Registry
Words first. A dual-scale deep-time timeline, an interactive globe of where each object was found, eleven hand-drawn reconstructed worlds, the full record for every specimen, a list of what is deliberately absent, and a glossary that teaches the language. This is the archive, and the only place color is ever used at full strength, on the modern globe.
From Orbit
A WebGL planet where scrolling is time, from the birth of the Earth to now. Eleven worlds wrap the sphere and flow into one another; the sky changes with real events; you can descend to the surface, and once the Moon is made you can stand on it. It renders like a camera: light that blooms and settles, rock carved rather than painted, debris that flies past the lens. Color here is the reconstruction palette on the sphere and gold only on the pins. This is the collection felt as deep time.
Scale
One continuous camera carries each specimen from the whole animal beside a person, in to the part of the body the object came from, to the object itself at true size. Reconstructions are shown as bone-white holograms; the measuring references are flat gray. This is the collection understood as size.
Honesty and deep time
Every page states how an age is known and what has been restored, says "not documented" where that is true, and never talks an object down. The clock behind all of it is deep time, three billion years held in one home, with the family as the point it arrives at, marked in gold.
Bone at rest (left), gold as the favicon and on hover (right). One weight, no outline, no container.
Five bands, finished in the mind
Five horizontal bands with widening gaps. Read them as strata, as the sea's surface, as rolling ground, as a timeline. It is left deliberately open, because the whole collection argues that a picture only confirms while imagination creates ownership. The mark is that thesis as a logo.
Its private truth: five bands, one for each member of the family.
The core palette
Nine tokens carry the whole site, and the discipline is as important as the values. The ground is always dark, the ink is warm, gold is the only accent and is spent rarely, and full-strength color appears in exactly one place. The result is a site that reads as one quiet, deliberate object rather than a page of decoration.
Working text tints
Between bone and slate sits a small family of tints the site leans on. Cool blue-grays carry structure and metadata; warm grays carry names and reading. Reach for these before inventing new ones, because the restraint is the point.
The taxonomy
Five colors classify the collection into its natural groups. They are used with restraint on purpose: they appear only as small legend chips and as the markers on the globe, never as area fills or backgrounds. They exist to sort, not to decorate, so a glance tells you what kind of thing an object is without the color ever taking over the page.
The color for "us" is the brand accent itself. The family is the point the whole timeline arrives at, so the taxonomy's human color and the interaction color are deliberately one and the same. Blue for the sea and green for the land are the two halves of the name, TerraMar, standing where a legend can hold them.
The reconstruction palette
The eight ancient worlds on the Registry and Orbit are colored by Earth history, not by taste. This is the clearest example of how color on this site is always carrying information. Two real transitions tell the whole story: the sea rusts from green to blue once oxygen arrives, and the land turns from bare rock to living green once plants come ashore. Read left to right, these four pairs are three billion years of the planet changing color.
Two typefaces
Archivo carries the voice; IBM Plex Sans carries the information. Both are served from this domain, subset to the characters the site uses, and fall back to the system sans. Everything is sentence case; the wordmark is the only exception, and small labels are the only uppercase.
The wordmark, mastheads, and section titles (700), record and sub-headings (600). A tight contemporary grotesque: confident, present, never soft. Negative tracking at large sizes.
A tooth is a tooth until you know that three inches is near the ceiling for its kind. A rock is a rock until you know it was once alive.
Body, records, labels, metadata, controls. Humanist and highly legible, with a faint technical character that suits a registry. Numbers use tabular figures where they align.
The type scale
The working index, pulled from the site's own stylesheet. Heading sizes use a clamp() range so they scale with the viewport; the values below are min and max.
| Role | Typeface · weight | Size | Tracking | Leading | Sample |
|---|---|---|---|---|---|
| Wordmark / H1 | Archivo 700 | 32–56px | -.022em | 1.06 | Aa |
| Section title / H2 | Archivo 700 | 24–36px | -.018em | 1.10 | Aa |
| Record title | Archivo 600 | 22px | -.012em | 1.15 | Aa |
| Sub-heading / H3 | Archivo 600 | 17–19px | -.008em | 1.2 | Aa |
| Lede / standfirst | Plex 400 | 16.5px | 0 | 1.6 | Aa |
| Body prose | Plex 400 | 14–15px | 0 | 1.6 | Aa |
| Specimen name | Plex 400 | 14.5px | 0 | 1.35 | Aa |
| Age / figure | Plex 500 | 13.5px | .02em | 1.4 | 150 Ma |
| Accession code | Plex 500 | 13px | .04em | 1.4 | TMC-26-010 |
| Eyebrow / stat label | Plex 500 | 12.5px | .06–.14em | 1.6 | Built for wonder |
| Pronunciation | Plex 500 · gold | 14px | .03em | 1.4 | AL-oh-SORE-us |
One detail worth protecting: species pronunciations sit under every animal in gold, as plain respelling in capitals, never a phonetic alphabet, because the names are hard enough and everyone can read capitals. Reading measure for prose is held at roughly 62 to 78 characters even though the frame runs full width.
Words first, and four ways to place a thing in time
The Registry is the archive and the heart of the whole project. Its four visual systems all answer the same question from different angles: where does this object sit in three billion years, and where on the Earth did it come from. Each is drawn in the shared dark frame, in the palette above, and each makes a specific color decision worth understanding.
Two scales, one truth
A dual-scale timeline runs the top of the page. "Real time" gives every year equal width, so four hundred million years of animals collapses against the right edge into a single mark, which is what deep time actually looks like. "Stretched" divides by ten at each step so the recent past can be told apart. Nothing else changes between them. Color choice: the era bands are drawn in the reconstruction palette so the timeline and the worlds agree, and the human mark at the very end is the lone stroke of gold, because the gold is us and we are where it arrives.
Where the Earth gave them up
An interactive globe of modern coastlines, drawn from the Natural Earth dataset, with a marker at every documented find-site, pinned from each specimen's own verified locality. It has two states: where the objects were found, and where you can go to see them. Color choice: this is the single place on the site color runs at full strength, water in taxonomy blue #2C5F94 and land in green #5DA36A, because it is the one true, present-day map. Markers carry the category colors so a glance reads the kind of thing at each site.
The worlds they lived in
Eleven hand-drawn paleogeographic reconstructions, each placing the collection's objects on the Earth of their moment. Color choice: these use the reconstruction palette, never the modern one, so the sea reads green then blue and the land bare then living, and the viewer is looking at the actual color of that age, not a stylized guess. A note on each says what is known and what is schematic, because positions before about 540 million years ago are not reliably known. These same eleven worlds are what Orbit wraps around its sphere. Pangaea and the Ediacaran were each drawn before there was anything from them in the collection; a world may stand on the planet ahead of its first object, and joins the registry when that object's record is written.
How the archive teaches
Every specimen opens to a full record, headed by a darker bar that holds where it lived on one side and the ways out, to the globe, Orbit, Scale or a link, on the other: what the object is, where it came from, the animal, its connections, and how its age is known. "What is not here" lists the deliberate absences with state tags, Now, Waiting, Never, Closed. A glossary defines the language and auto-links the first use of each term. Named, not held does the same for the animals and plants the records mention but the collection cannot hold: protected, public, too rare, not here yet, or gone within recorded history. Each entry says why it is not on a shelf and measures how far in time it stood from the objects that are. An animal is named there only when something in the collection gives it a reason to be. Two kinds of link in the running text, told apart by line: a dotted underline opens a definition in the glossary; a dashed one opens an animal in Named, not held. Each says which it is when you hover, and each goes to one place only. Trails walk a visitor through several records in order, with a gold guide bar inside each record saying why it is on the path and where the path goes next. Gold, because a trail is the visitor’s own way through. Category chips, food-web links in blue, and the gold pronunciations run through all of it. The record is the point; every visual system on the page exists to set the stage for it.
Scrolling is time
Orbit is the collection felt rather than read. A WebGL planet built with Three.js, every texture generated in code, nothing loaded from any other server. You scroll down and the Earth moves through deep time from its birth to now; the eleven worlds wrap the sphere and the land slides from each to the next; the sky overhead changes with events that actually happened. Tap the Moon once it is made and you land on it: the same globe hangs in that sky, lit by the same Sun, and time still runs while you stand there. It runs on the same dark ground and the same reconstruction palette as the worlds on the Registry, and its restraint with color is deliberate: the planet is allowed to be vivid, everything around it is not.
Eleven Earths on one sphere
The eleven reconstructions become sphere textures as time passes, sea and land shifting through the reconstruction palette. Where the plates are known, the continents do not fade from one map to the next: the land travels. Everywhere else one image dissolves into the next and nothing is cut, and the first crust cools in patches, never along a line. Each world turns to face the objects that lived in it.
Semantic zoom to the surface
At 1x and 2x you see the original globe. Past 2x the camera descends toward the surface, north-facing with zero roll, and generates ground beneath itself from the globe's own sea and land mask plus procedural relief, rivers, coasts, and per-world biomes. The zero-roll descent is achieved by blending the look-target directly, not by rotating the camera, so the horizon never tilts.
Real events, honestly labeled
The changes overhead are real ones: the Moon starts close and drifts out, the young Sun is fainter and warmer and sweeps its path, the stars slide so no constellation lasts, rock falls constantly in the early years, and the Chicxulub asteroid strikes at 66 million years with ejecta, fire, and dust. A lunar eclipse, a swelling meteor shower, a comet with a Sun-directed tail, and a small alien visitor appear in their moments. Notices name their own category, dated, evidence-based, illustrative, or not science, so the viewer always knows what they are looking at. The asteroid and its sound are locked and are not to be changed.
Standing on the Moon, the sky is the real one: 5,044 stars, every one the naked eye can reach, from the Yale Bright Star Catalogue by way of d3-celestial, with the constellation figures, the five naked-eye planets placed from their orbits, the Sun and the Milky Way on the true plane of the galaxy, all carried inside the page. A map of the whole sky turns you to anything in it.
Your own ground, in every world
Pick a place on today's Earth, by tapping the planet or with your location, and a gold pin rides the continents through every world back to the Ediacaran, saying whether that ground was ocean, shallow sea, ice or dry land, and which continent it belonged to. The place is turned back with the same plate model the worlds are drawn after, reduced to the eleven worlds and carried inside the page as 55 KB of data, so nothing is fetched and the coordinates never leave the browser. While time moves, the camera travels round the planet with the pin, a couple of seconds behind it, the stars turning with it, so the ground stays in view without the planet ever being turned back. Names: every world names its continents and seas with the names geologists use for that age, from Laurentia and the Iapetus Ocean to Pangaea, Panthalassa, Laramidia and Appalachia, each over the land it is part of today, carried on the same plate rotations as the pin. Credit: plate reconstruction after the PALEOMAP PaleoAtlas for GPlates (C. R. Scotese, 2016), licensed CC BY 4.0, reduced to the eleven worlds of this page.
Four beds, and a bar that stays out of the way
An opt-in soundscape, synthesized entirely in code, offers four procedural beds, space, deep ocean, forest, and river, behind a volume slider, and starts muted. Color choice: the top bar is deliberately quiet, resting in slate and hovering to bone rather than gold, so the accent stays off Orbit's chrome and the planet leads. Gold appears only on the specimen pins. Every pinned object rises into the hand as a hologram of its own drawing, the same drawing Scale uses. The object leads; where a film exists it waits one tap beneath, served from this domain and fetched only on play, and the object is always one tap back.
The specimen as a hologram, at true size
Scale answers one question: how big was it, really. One continuous camera carries each specimen through three stages, the whole animal beside a person or a coin, in to the part of the body the object came from, then the object itself at true size. Reconstructions are rendered as holograms, a cold technology-side treatment that keeps faith with words-first: a projection is honestly a projection, never a photograph pretending the animal is here. The hologram idea came from Blair.
The line says how the thing is known
Every drawn line carries its own certainty, classified from the record's own words. This is the honesty principle turned into a visual system: you can see, in the linework alone, how much of what you are looking at is fact.
One emission, an intensity ladder
Color choice: bone-white linework, with blue arriving only as light hints that fade in and out, never a wash, and the site's gold crossing faintly now and then. The treatment is one emission for every specimen, never tinted by category, because here the animal is the subject and category color would only confuse it. How inferred a thing is sets how strongly it glows: the living animal glows most, the reconstructed head less, the real object least. Scanlines are slow, soft, and warped so they bend through the body; a slight double-image drift, rising motes, and a soft projected light pool complete it. The whole hologram floats gently, as a real projection would.
Glowing thing is the animal, gray thing is the ruler
The measuring references, the 5 foot 7 person, the school bus, the US quarter, are flat slate-gray diagrams, not projections. No body tone, no bloom, no particles. Color choice: this single decision, gray for the ruler and glowing bone for the specimen, is what lets the eye sort the two instantly with no label at all. The meshes are illustrative, not anatomical, and the page says so.
A lab, not a world
Scale's sound is a quiet low hum and nothing more, no world beds carried over from Orbit, nothing shrill. The idea is a lab, not a place: the instrument is running, the specimen is under the light. A soft cue plays as a specimen resolves into view. The sound design for the whole site is being refined deliberately rather than tuned by feel.
Where it lived, drawn in motion
Beside every record, on all three pages, sits a small moving mark: in the corner of Scale, at the top of each registry entry, and under the name in Orbit’s hand. The name is the registry’s category, what the thing is. The mark is a different question: where it lived. There are three, and each moves at its own pace so none of them ever feels mechanical.
Two waves, drifting at different speeds, five seconds and six, so they never fall into step. For everything that swam or grew under the sea.
A volcano, quiet for most of its cycle, then it goes: the summit glows, a plume rises and embers fly, every eleven seconds. For everything that walked, flew or grew on land. The land was never still.
Layers of rock, settling so slowly you may not see it, one breath every fourteen seconds, with a gold line dropped through them like a core drawn up from the ground. For the minerals, which were never alive and came out of the rock itself.
Why the category and the mark can disagree: the stromatolite is filed as rock and mineral, and its mark is the waves. That is not an error. It is rock now, but it was built in shallow sea by living mats of microbes three billion years ago, so where it lived was water. The same rule gives a shelled ammonite the waves and a dinosaur the volcano: the color says what a thing is, the mark says where it was.
An object shown as light
Not every object is shown by a drawing. Where there is none, neither page uses a gray box, a file name or a stand-in shape. Both show the same projection: a ring, an arc turning inside it, and a line of light passing through, with the object’s own name beneath it. The object is known, and the projection is how the site shows it.
Both are live: the same code the pages run, set here on their own. Press a state to see it.
Three ideas the site already had
The projection is not a new style. It is three things already on the site, drawn together. The scan: the line of light moves through the ring the way a scanner passes over an object. The globe: the ring is the planet as Orbit shows it, a sphere seen from space, and the arc inside it turns the way the Earth turns under the camera. The hologram: the color is Scale’s projection language, bone-white line with blue only as light it gives off, never as a fill, so an object shown this way is drawn in the same light as a thing that was reconstructed. The gold stays out of it. Gold on this site means us and what you can touch, and this is neither.
Two states, told apart by pace
In Orbit’s hand the projection has two states, and the speed of the arc tells them apart before the words do. Projecting: a drawing is loading, and the arc turns fast, once every second and a half, because it will be over in a moment. Projected: the object is shown as the projection itself, under its own name, and the arc slows to a full turn every seven seconds and dims, steady rather than busy. The label flickers once every nine seconds, the way a projection catches, so it reads as light rather than print. Where a film exists it waits beneath the object, never in its place.
The same light, drawn by the ruler
On Scale the projection is not a layer laid on the page. It is drawn into the stage itself, frame by frame, in the same SVG as the animal and the ruler, so it sits where a drawing would sit and at the object’s own size. The ring is sized from the longer side of the space it stands in, so a tall, narrow specimen still gets a ring you can see. The line of light swings through it on a slow curve rather than a sweep, which is how the rest of Scale moves: breathing, not scanning. Each of the three stages says what it shows: the animal at life size, where the piece sat in the body, or the specimen itself. The cards along the side carry a still version, so the list reads the same as the stage.
One language on both pages
Before this, an object without a drawing on Scale was a gray box with a file name in it, and in Orbit a shape stood in for the object. The projection is more accurate: the collection knows what it has, and shows each object in the same light whether it is drawn or projected. Because it is the same on both pages, a visitor who meets it once understands it everywhere. And because the pages read the manifest, a drawing added to a record takes the projection’s place on its own, and nothing else changes.
What governs everything
The visual choices exist to serve these. When a new page or feature is in doubt, this is the tie-breaker.
"Imagination creates ownership. A picture only confirms it."
Rights and use
© 2024–2026 TerraMar Collection. The writing, the records, and the code are original work.
Copyright holds from the moment a work is made, stated or not; this line only says so plainly. Cite the collection for teaching or study, with attribution and a link. Do not reproduce it commercially, and do not harvest it wholesale, by hand or by machine, for training, redistribution, or resale. The specimens have their own provenance, kept in private records; what is protected here is the work of describing them and building the room around them.