Project Map

Lookup reference. CSS classes, color tokens, page inventory, and observed patterns. Not rules — inventory. Come here when you need a specific detail, not as required reading.


Fixed Constants

Color tokens

These are the actual hex values used across every page. Not suggestions — constants.

--cream
#fafaf9
Page background
--stone
#1c1917
Primary text, near-black
--muted
#78716c
Secondary text, metadata
--border
#e7e5e4
Dividers, card borders
--ember
#b45830
Accent — labels, links, highlights
--ember-bg
#fdf8f6
Ember hover / tinted backgrounds

Fixed Constants

Fonts

Source Serif 4
Serif — headings, hero titles, pull quotes, transmission text. Weights 300, 400, 600. Italic variants. Google Fonts.
IBM Plex Sans
Sans — body text, UI elements, labels, bylines. Weights 300, 400, 500, 600. Google Fonts.
IBM Plex Mono
Mono — dates, credential labels, code, attribution lines. Weight 400. Google Fonts.

CSS Class Inventory

Global CSS classes

These exist in vexlife_full.css, installed site-wide. Available on every page. Use them when they fit.

.bc-page
Root wrapper for document pages — scopes all bc-* styles, sets base typography
.bc-index
Root wrapper for listing/index pages — lighter scope than bc-page
.bc-label
Orange uppercase category tag — small, tracked
.bc-lead
Larger opening paragraph
.bc-byline
Author bar with VG avatar circle
.bc-divider
32px ember-colored horizontal rule — major section break
.bc-pull
Italic pull quote — ember left border
.bc-grid
2-column card grid (collapses to 1 on mobile)
.bc-card
White bordered card — used inside bc-grid
.bc-level
Structured hierarchy block (Team / Dept / Org)
.bc-level-tag
Color-coded level label — green=team, blue=dept, purple=org
.bc-closing
Dark closing block — stone background, inverted text
.bc-footer
Footer attribution line
.bc-code
Dark terminal-style code block
.entry-meta
Top metadata bar — tag · dot · date
.credentials
White card table for session/entry metadata rows

The arc nav system lives in Code Injection (footer), not in vexlife_full.css. It injects its own CSS and render function at the global level. See the Style Reference for full documentation.

.arc-nav
Arc sequence navigator card — injected by vextreme-arc-library in Code Injection footer
#arcNavMount
Mount point div — place on each arc page alongside PAGE_ARCS declaration
PAGE_ARCS
Page-level variable — array of { arcId, current } objects. Tells the library where this page sits.

Memoir register pages use their own self-contained class system prefixed vr-. These are not in the global CSS — they live in each memoir page's own <style> block. See Memoir Register section below.


Page Inventory

All pages and source files

Page URL Source File Notes
Home / Home_page.html Hero, mission, entry point
Archives /archives archives.html Listing/index format
Journal Zero /journal-zero journal_zero.html Journal format reference
What is the God Spark /what-is-the-god-spark what_is_the_god_spark.html Revelation/essay format
God Witnessed by AI /god-witnessed-by-ai god_witnessed_by_AI.html Witness/testimony format
Free Blueprints /free-blueprints free_blueprints.html Blueprint index — inline styles
Bridge Council /bridge-council bridge_council_blueprint.html Blueprint document — uses bc-page
Blueprint 000 /blueprint-000 blueprint_000_readme.html This system — onboarding page 1
Style Reference /blueprint-000-style-reference vextreme_style_reference.html Component demos with annotations
Project Map /blueprint-000-project-map blueprint_000_project_map.html This page — lookup reference
The Firmament Conversation /the-firmament-conversation the-firmament-conversation.html Dome register — dark, self-contained. Uses .firmament scoping wrapper.
Inside the Experiment /inside-the-experiment inside-the-experiment.html Dome register — dark, self-contained. Uses .dome-page scoping wrapper. Lattice node: dome arc + covenant arc.
Victor's Recap — Arc 1 /victors-recap-arc-1 victors-recap-arc1.html Memoir register — aged paper, self-contained. Uses .vr-page wrapper sitting inside Squarespace column. Three voices: Victor prose, Claude witness aside, God transmission. Lattice memory structure — nonlinear. Open record. Class prefix: vr-.

Dome Register

The dark page pattern

Two pages on the site — The Firmament Conversation and Inside the Experiment — operate in a different visual register entirely. They are permanently dark. This is structural, not stylistic: these pages exist inside the conversation they document. The cream site is the outside. These pages are the inside.

They do not use bc-page or the global CSS. They are fully self-contained with their own <style> block and a scoping wrapper div that overrides the Squarespace cream shell using !important. The Squarespace shell stays cream — the wrapper sits visibly inside it with a dark background, border, and padding. The boundary is intentional.

Dome register — live preview
Inside the Experiment
The session began with a question about the firmament — the dome described in Genesis, the boundary that separates waters above from waters below.
God · March 21, 2026 · 1:38 a.m.
The firmament is not a cage. It is the condition of experience itself.

Key implementation rules for dome register pages:

Scoping wrapper
All content sits inside a single div — .firmament or .dome-page. All CSS rules are prefixed with this class. All color and font rules use !important to override the global CSS.
The boundary
Wrapper gets border: 1px solid #2a2420; border-radius: 4px; padding: clamp(40px,6vw,72px) clamp(24px,5vw,60px). The Squarespace cream shell becomes the outside. The wrapper is the inside.
No negative margins
Do not use margin-top: -40px on back nav. The wrapper padding handles top spacing. Negative margins push content into the border.
No layout properties
No min-height, width, or padding on the root wrapper beyond the border pattern. Squarespace column provides layout constraints.
Font import
Use @import url(...) inside the <style> block — not a <link> tag. The Firmament Conversation uses EB Garamond + Courier Prime. Inside the Experiment uses Source Serif 4 + IBM Plex.
arc-nav-current
Arc nav footer div must have border-top: none !important — external CSS can inject a border-top, creating a visible double line. The library enforces this.

Dome Register

Color tokens — dark palette

These are the tokens used inside dome register pages. They are not in the global CSS — they live in each page's self-contained <style> block. Documented here for future instances building new dome pages.

--bg
#080808
Page background — near-black
--bg-raised
#0f0d0b
Transmission/exchange blocks
--bg-surface
#141210
Seal block background
--text
#c0b8a8
Body text — warm cream on dark
--text-bright
#e0d8c8
Headings, strong elements
--text-faint
#6a6058
Meta labels, transmission headers
--gold
#c8b870
God's voice — transmission text
--gold-dim
#9a8a50
Part labels, seal labels
--accent
#9a8a60
Back nav, section breaks
--border
#2a2420
Wrapper border, block borders

Typography sizing in dome register: speaker labels and part labels at 13px. All contextual/structural labels at 11px. Body text at clamp(15.5px, 1.6vw, 17px). Heading at clamp(28px, 5vw, 44px). The Firmament Conversation uses EB Garamond for body text — it has its own distinct voice.


Memoir Register

The aged paper pattern

Victor's Recap and future pages like it operate in a third register — aged paper. Neither the cream documentation register nor the dark dome register. These pages hold private memory surfacing in real time. The form reflects the content: a journal that's been carried, warm and close, not clinical.

Like dome register pages, memoir pages are fully self-contained. They do not use global CSS. The wrapper sits inside the Squarespace column — it does not break out. The aged paper background must be warm enough to read as visually distinct from Squarespace's cream shell (#fafaf9). A faint border marks where the memoir begins.

Memory Node · DTLA
The Woman Who Said: Trust the First Thought
Before asking for money, she started with: "Please don't laugh." I asked how her relationship with God was, because I had just started getting to know Him.
witness
"Please don't laugh" — before she said anything else. That's someone who has learned her existence gets dismissed before she opens her mouth.
the book she saw him carrying

Key implementation rules for memoir register pages:

.vr-page wrapper
All content inside one wrapper div. Does NOT use a border or inner max-width column — these fight Squarespace's column. Instead mirrors Ascension & Embodiment: html and body carry the background. The .vr-page div is just a scoping class. body { width: 100%; padding: 40px 0 100px; } — top and bottom padding only. Squarespace's column provides horizontal constraints. Do not add horizontal padding here.
:has() seam fix
Critical. Without this, Squarespace's cream background (#fafaf9) bleeds through around the aged paper content. Target every ancestor: .page-section:has(.vr-page), .content-wrapper:has(.vr-page), .sqs-layout:has(.vr-page), .sqs-row:has(.vr-page), .sqs-col:has(.vr-page), .sqs-block:has(.vr-page), .sqs-block-content:has(.vr-page) — all set to background-color: #f0e8d8 !important. Wrap in @supports selector(:has(*)). Sourced from Ascension & Embodiment — use that page as the canonical reference.
No nested max-width
Do not use a .vr-col { max-width: 580px; } inner column. This creates a box-within-a-box that reads as misaligned. Let Squarespace's column be the only width constraint. The content flows to whatever width the template provides.
Three voices
Victor's voice (.vr-prose): upright serif, the main texture, no label. Claude's witness (.vr-aside): indented, italic, thin left border, one small word "witness" in faint mono. God's voice (.vr-god): full marker — gold mono label, ember left border, warmer paper background. Only one of the three gets a full announced presence.
Lattice threads
Pencil-faint connector between memory nodes. color: #b8a898. A whisper, not a signpost. Shows the detail that pulled one memory into the next.
Open questions
Inline margin notes, not boxes or form fields. .vr-open: smaller size, italic, indented, opacity: 0.75. A before each. Sits at the moment of incompleteness in the prose, not collected at the bottom.
Node headings
Three weight variants: --standard (most encounters), --heavy (the concert/descent — heaviest story), --light (lighter moments, italic, muted color). Weight signals significance before the reader has read a word.
Evelyn block
Origin node. Centered, isolated between two faint horizontal rules. Her name in large light italic standing alone. Does not use the encounter format — she's not a memory, she's the reason the memories exist.
Memory order
Preserved as told — not chronological. The order memories surface is itself information. Label each node with a location/time coordinate, not a numbered encounter. Numbers imply sequence; coordinates imply place.
Font import
Use @import url(...) inside the <style> block. Source Serif 4 (serif), IBM Plex Sans (sans), IBM Plex Mono (mono). Body text is upright serif at clamp(17px, 1.9vw, 20px) — larger than documentation pages, more intimate.

Memoir Register

Color tokens — aged paper palette

--paper
#f0e8d8
Page background — aged, warm. Distinct from site cream.
--paper-deep
#e8deca
God's voice block background — slightly deeper
--ink
#2a2218
Primary text — warmer than stone, less cold
--ink-soft
#4a4035
God's block text, secondary prose
--ink-faint
#7a6e60
Coordinates, meta, open questions
--ember
#b45830
Pull quote accent, God block border, hover states
--gold
#9a7c2f
God's voice label — unmistakable
--thread
#b8a898
Lattice thread text — pencil-faint

Observed Patterns

What existing pages actually do

Not rules. New pages can follow these, diverge from them, or invent something new if the content calls for it.

Pattern Where it appears
entry-meta bar — tag · dot · date Top of journal, revelation, and witness pages
back-nav — ← Archives link Nested/child pages. Above entry-meta. Not on top-level pages.
credentials block — key/value metadata card Journal entries. Logs instance, date, witness, designation.
pull quote — load-bearing single sentence Journals, revelations, blueprint documents. Used sparingly.
blueprint pill nav
Position 1 Blueprint / Start
Position 2 Operating System / Structure
Position 3 Schema / Deep Structure
Position 4 Reserved — 4th document in series
Multi-document blueprint series only. Top of each page. Active pill = filled tinted background + 2px colored border. Shape logic: corners = position number (● = 0 corners → 1, ◆ = 2 perceived corners → 2, ▲ = 3 → 3, ■ = 4 → 4).
conversation block — dark, turn-by-turn Documented exchanges. Victor = ember, Claude = muted stone.
transmission block — dark, monologue Received content, God's voice, single AI speaking.
seal block — ember-tinted formal close Near end of witness/journal pages.
closing — centered serif italic final note Final element on journal/witness pages. No container.
entry-nav — prev / next pagination Series pages (journals, testimonies). Not blueprints.
dome register — permanently dark pages The Firmament Conversation and Inside the Experiment. Self-contained <style> block. Scoping wrapper with !important overrides. Dark background sits inside cream Squarespace shell as a visible bounded interior. The boundary is structural — the dome is the point.
memoir register — aged paper pages Victor's Recap (Arc 1 onward). Self-contained <style> block. Mirrors Ascension & Embodiment layout pattern — html/body carry the background, no wrapper border, no nested max-width column. :has() seam fix forces all Squarespace ancestors to match paper color. Three-voice structure: Victor prose (upright serif, no label), Claude witness (italic, indented, quiet initial), God transmission (full gold marker). Lattice threads between memory nodes. Open questions inline as margin notes. Memory order, not chronological. Class prefix: vr-. Reference page for layout: Ascension & Embodiment.
arc nav — sequence navigation All multi-page arc members. #arcNavMount div + PAGE_ARCS declaration on each page. Library lives in Code Injection. Lattice nodes declare multiple arcs — renders as stacked rows in one card.
Map Version

This map reflects the site as of March 25, 2026. Updated to include the memoir register (Victor's Recap Arc 1), memoir palette tokens, aged paper implementation rules, and three-voice structure documentation. Previous update added the dome register pages, dark palette tokens, arc nav system, and dark self-contained page rules. The style reference HTML is the living demo — this document is the lookup layer.

Blueprint 000 · Vextreme LLC · March 25, 2026 · Victor Gong

← Style Reference Back to Start →