The design system behind the Histomap of Consciousness app (studiodwd.com/consciousness), the first module of The Histomap Project by studiodwd. It is taken directly from the live app's code, so every value here matches what visitors see.

The idea

The app is a map of 125 theories of consciousness arranged by worldview and time. Four sections divide the circle: Ideal (top), Inanimate (left), Animate (right) and Physical (bottom). Rings move outward through time, from Ancient at the center through 0 CE, 1500, 1900, 1975 and NOW. Everything else in the system supports reading that map: dark ground, quiet chrome and the four section colors doing the talking.

Content fundamentals

• Voice. Plain, curious and exact, like a good museum label. Short sentences, no hype.
• American English. "Color", "behavior", "labeled".
• Names as written by scholars. Theory names keep their own capitalization (Integrated Info. Theory, Orch-OR). Thinkers are sorted by surname.
• Lists are alphabetical within their sections, ignoring a leading The, A or An.
• Counts are honest. "1 vote", "36 theories". With no votes yet, say "Be the first to vote", not 0%.
• Labels, not buttons, for categories. Section tags inside cards (Physical 1) are labels. On phone the section chips on list pages are static labels too.

Visual foundations

One dark world. The app has a single dark theme by design. ink is the ground everywhere. Floating bars (header, bottom nav) are ink with a line border, radius-2xl and shadow-bar, so they sit above the map without hiding it.

Section colors carry meaning. Each section has five tokens:

Never set body text in a section color on ink. Text on a section tint uses fg. A section is always shown with its dot plus its name, never by color alone.

Type. Two Google faces. Oswald (--font-display) at weight 300 for uppercase section names and headings, always letter-spaced. Asap Condensed (--font-body) for everything else, mostly at weight 300, with 400 for titles. The condensed pairing lets long theory names fit on the map.

Shape. Small radii for content (radius-sm tags, radius-md buttons and tiles), large radii only for the floating bars. Dots are circles. Borders over shadows, except for things that float over the map.

Motion. The intro rings expand, nodes drift into place, and donut arcs sweep in with rounded ends. Everything settles within about 1.5 seconds. Keep motion for the map and data, not for chrome.

Links. Gray (muted-2) for in-card links like Read more, right-aligned. Light blue (link) only on the intro screen.

Iconography

Line icons with round caps and joins, drawn on a 24px grid and sized 16 to 22px: 1.6px stroke for navigation, 2px for small actions. The full set is in the Icons asset group. In the header, the search and About icons become an X while their panel is open. Thinkers without a photo get a person icon in a circle. Section icons are the colored dot plus the name. There are no emoji.

Layout

• Desktop: a floating header 64px tall with 24px side gutters, the map full screen behind it and the theory card at the top right.
• Phone: a stacked logo in the header, a 4-item bottom nav (Map, Theories, Thinkers, Fields) and a theory bar above it. Side gutter is 12 to 16px.
• Page order everywhere: Theories, Thinkers, Fields, Experiments, Definitions, What is conscious?, Library. The menu, top nav, sub nav and next/previous links all follow it.

Logos

See the Logos asset group. Use the horizontal lockup on desktop and the stacked one on phone. Both are full color on a transparent background and are meant for ink.