The approved values and components for the Cognitive3D marketing site, rendered live rather than described. Specimens are the real components wherever possible — if one disagrees with a page, one of them is a bug.
Viewport 1280px — showing the desktop curve values
Attaching a page to this system
Pages join one at a time, each on its own branch. This is the order that works — steps 1 and 2 are where every past mistake happened.
Inherit, never copy. Give the wrapper both classes: bodyWrapperClass="frontpage <pagename>". Every rule in _front-page.scss is a descendant selector, so the page picks up the whole system for free. Hand-copying those rules into a page partial produced ~860 lines that had to be deleted again.
Delete the page's old hero and section CSS before writing new. Leftover rules out-specify the inherited ones and you'll spend a day chasing why a wash won't apply.
Write the new partial against tokens, not literals — var(--c3d-purple-wash), not #ede6f8. A page joining the system gets this for free; there is no separate migration step.
Wire the reveal hook — usePageReveal with the page's selectors and bodyClass: 'fp-enhanced', plus the fp-scrolled toggle. Copy from track.tsx.
Pick the pillar and use it everywhere — hero spotlight, CTA glows, section washes, card accents. A mismatched CTA glow is the most common drift.
Mark the last CTAhome-cta-section--straight-bottom so it runs flat into whatever follows.
Check desktop and mobile before calling it done. The curve values differ across the ≤1024px boundary and the two mechanisms are independent — see Curves.
Pages that predate the tokens — homepage, the three pillars, pricing, the demo funnel — still carry literals. That is deliberate. They get migrated when next touched for another reason, never as a bulk sweep; there is no upside to editing an approved page just to move where its numbers come from.
What's global vs what's opt-in
The single most confusing thing about this system: some of the July-2026 tightening was pushed into the shared base and applies to EVERY page including ones nobody has touched. The rest only arrives when a page opts in. Knowing which is which saves an afternoon.
Global — every page already has this
Pushed into _base.scss, _navigation.scss and _footer.scss. An untouched page like /about or /partners is already using these, which is why those pages look tighter than they did.
type scaleheadings + bodythe "sharpened" sizes, weights and letter-spacing
header / navredesignedincl. dropdown panel and mobile menu
footerredesigned
focus ringssite-wide
--c3d-* tokensdeclared on :rootavailable everywhere, consumed only where written
Opt-in — only with the frontpage class
Scoped to .frontpage in _front-page.scss. A page without that class gets none of it, and the nav even behaves differently — the solid dark nav rule is .app-shell:not(.frontpage), so opting in is what makes the nav transparent over a dark hero.
hero dome + glowcurves, aurora, horizon
CTA bandsmask, grain, constellation
testimonial straddle+ white logo inversion
section rhythmtucks and overlapsthe negative margins — see Rhythm
reveal choreographybody.fp-enhanced
kicker icons hiddenv13, intentional
So an untouched page has the new type and chrome but the old spacing and structure. That mismatch is expected mid-rollout — it is not a bug to chase. When you bring a page onto the system, the spacing arrives with the frontpage class; you do not hand-set margins to imitate it.
Pillar colour map
Every hero spotlight, CTA glow and section wash must match its page's pillar. Mixing them is the most common drift.
Purple
Track — record app activity
Section wash#ede6f8
Accent
#a443f0
Card title
#b877f3
Learn-more
#c5a3ff
Card border
rgba(164,67,240,0.38)
Blue
Explore — individual behaviour
Section wash#e3edf9
Accent
#0087f6
Card title
#51b8f5
Learn-more
#8ecdfb
Card border
rgba(0,135,246,0.38)
Teal
Analyze — aggregate insights
Section wash#ebf8fa
Accent
#09bab8
Card title
#6fd0c6
Learn-more
#8fe6df
Card border
rgba(9,186,184,0.38)
Core colours
The dark-mode ladder from nav to footer. The footer tone doubles as the seam target — a CTA fading to anything else shows a visible line.
Dark purple#0f0e2f$dark-purplenav + hero top
Hero mid#241a5chero gradient 58%
Hero base#25116aproduct hero base
CTA band#1c1758dark band + cards
Footer#0c0b26footer + seam target
Deep blue#002942$deep-blueheadings on light
Body ink#40394bfeature paragraphs
Hero link#dcc6ffinline, NO underline
Type scale
Onest throughout. The two numbers are a fluid floor and ceiling via the fluid-type mixin, not breakpoint steps.
padding0 80px desktopeats into max-width — account for it
target1280pxmost users; must look perfect here
The post-CTA tuck (desktop) — why sections overlap
A CTA band's bottom arc is transparent below the curve. If the next section starts flush, that transparency reveals the white page body as a pale sliver. So the section below is pulled under the band and pads its content back down.
Read this before changing any curve. Heroes and CTA bands use different mechanisms, so changing one does nothing to the other — and they must be matched in pixels of sag, not percentages.
Heroes curve via clip-path: ellipse(Rx% 100% at 50% 0%) on ::before. CTA bands curve via an SVG mask path — the clip-path has no effect there.
Three layers carry the band mask and all must move together: ::before (fill), .home-cta-section__field (constellation), and ::after (grain).
hero sag = height × (1 − √(1 − (0.5 ÷ Rx)²)) — width cancels, so sag tracks height only band sag = height × 0.75 × (controlY − edgeY) ÷ 100 — a cubic reaches 0.75 of its control offset
Hero domeellipse(160% 100% at 50% 0%)sag 51.9px on a 1280×1036 hero — true proportionsCTA bandM0 0L100 0L100 91C66 98 34 98 0 91Zsag 39.2px on a 1280×747 band — true proportions
Breakpoint
Hero ellipse
Band edge Y
Band control Y
Hero sag
Band sag
desktop ← you are here
160%
91
98
51.9px
39.2px
mobile
340%
91
93
11.3px
11.2px
Desktop hero and band are deliberately not matched — the deep dome is the approved look there. On mobile they are matched to ~11px, which is why the mobile control point is 93 and not 98. The mobile menu keeps its own 320% and is not part of this group.
Constellation field
The spatial data-field canvas behind every hero and CTA band. Four tints, live below — the tint must match its section's pillar or the band reads as the wrong colour.
clamp(44, round(width ÷ 16), 78)scales with width, never sparse or busy
Link distance
152pxalpha = (1 − d ÷ 152) × 0.17 — fades with distance
Packet count
max(3, round(width ÷ 260))slow dots drifting straight down
Plain node
r = 0.9 + depth × 2alpha 0.32 + depth × 0.46
Captured node
r = 1.8 + depth × 2.6alpha 0.55 + depth × 0.4, plus a pulsing halo
Perspective
2.2 ÷ (2.7 + z)yaw follows the pointer; slow autorotate
DPR cap
min(devicePixelRatio, 2)stops 3× retina from tanking framerate
Canvas opacity
0.55v47 — was 0.42
Props
tint
'purple' | 'blue' | 'teal' | 'multi'must match the section pillar
wide
booleanwider spread for full-bleed bands
speed
number (default 1)global motion multiplier — demo pages use 0.06
packets
boolean (default true)the drifting dots; off on the demo funnel
Motion is scaled in three places — the time step, the pointer easing, and the autorotate. A speed change that only touches one of them leaves the field still drifting at full pace, which is why the demo page felt jarring twice.
Hero fields are masked transparent 0 → 8% → #000 34% so the strip directly under the nav stays clean. Reduced-motion and low-power devices get a single still frame, not a paused animation.
Z-index ladder
Measured from the live homepage. This is invisible until it breaks, and it broke twice — the testimonial card must float on top of the band it straddles, and the tucked section must stay beneath.
Layer
z-index
Why
Header / nav
100003
must clear the mobile menu overlay
Testimonial box
16
floats ON TOP of the CTA band it straddles
Testimonial section
15
above the band, below its own card
CTA band
2
draws over the tucked section below it
Map section
2
overlaps the feature section beneath
Feature section
1
tucked under the CTA/map above
Constellation field
0
inside the band, behind the copy
Hero dome ::before
−1
behind hero content, above the section background
Vertical rhythm & overlaps
Measured on the live homepage at 1535px. The negative margins are load-bearing — they pull a section under the masked arc above it so the transparent part of that arc reveals a pillar wash instead of white.
Section
Spacing
Note
Hero
padding 176px / 150px
min-height 960px, content vertically centred
Brands strip
padding 8px / 4px
sits tight under the hero curve
Map section
padding 120px, margin-bottom −250px
overlaps the feature section below
Feature section
padding-top 230px, margin-top −120px
110px visual + 120px hidden
Testimonial
wash #ede6f8, no padding
card is translated, not padded
Testimonial card
translateY(50% of its own height)
134px at 269px tall — always exactly half
CTA band
padding 232px / 200px
232px top clears the straddling card
Post-CTA section
padding-top 310px, margin-top −120px
190px visual + 120px hidden
Footer
padding-top 132px
flat dark top, flush with the last CTA
Container
max 1512px, padding 0 80px
padding eats into the max-width
The testimonial straddle is expressed as 50% of the card's own height, never a pixel value — the card's height changes with quote length, and a fixed offset stops landing on the band's flat top.
Texture & effects
The small things that make the dark surfaces read as lit volumes rather than flat fills.
Grain overlay
An SVG feTurbulence fractal noise tile on every CTA band's ::after, masked to the same band shape.
baseFrequency0.82, 2 octaves
background-size220px
opacity0.05
mix-blend-modeoverlayde-bands the gradient; must stay barely-there
Lit-volume backgrounds
Dark surfaces are never a single flat colour. Two off-centre radials — purple upper-left, teal lower-right — sit over a deep navy base so the surface reads as a lit volume.
Testimonial cards use the same treatment at a whisper (0.2 and 0.14 alpha instead of 0.5 and 0.32).
Focus rings
Keyboard focus is never removed. Every interactive element gets a visible ring via :focus-visible — tab through this page to check. Pricing buttons use 2px rgba(164,67,240,0.85) with a 3px offset.
Everything decorative is wrapped in prefers-reduced-motion. Reveals collapse to their final state, the constellation renders one still frame, and the horizon glow stops drifting.
Crucially, opacity stays at 1 throughout — copy is never gated on JS or motion, so nothing can ship blank.
Demo funnel — a separate system
/demo, /demo/calendar and /demo/confirm use .demo-dark, not .frontpage. Values measured live. The legacy .demo-hero block must stay: seven call/* pages depend on it.
Surface & spotlight
page gradient#0f0e2f → #150f3d 46% → #0b0a24
spotlightradial, 2533 × 1197pxblur(120px), rises from the bottom edge
animationhue-rotate 0 → −80deg, 22s alternaterotate the hue — gradient stops do not interpolate
constellationspeed 0.06, packets offnear-still; full speed reads as jarring here
Form card & fields
cardwhite, 448pxtri-colour gradient rim + box-shadow underglow
field bg#faf9fe
field border0.8px #e5e1f0
field radius10px, height 50px
labelsplaceholder-onlylabels + placeholders made it too tall; order is fixed
The card background is plain white — no gradient. A faint wash on the card was tried and rejected; only the fields carry any tint.
Buttons
Shine sweep plus a 2px lift. No hover glows anywhere — that was removed deliberately. Hover each specimen to check the sweep direction and that nothing flips to a dark fill.
Product hero CTAslive component
ProductCtaButtons — the pair used in every product hero.
CTA band buttons, all three pillarsclass-name replica
Real class names inside a .frontpage wrapper, so the themed gradients and hover sweeps are the genuine CSS. Rendered here without the surrounding band so you can compare the three side by side.
Primary is the purple shine with a tracking arrow. Secondary and contact are the light counterpart — a neutral grey sweep on white. At rest the sweep band sits fully outside the button; if you see a purple smudge on the left edge, the band position has regressed.
Content components
Section headers and statistics, live, in all three pillar themes. Kicker icons are hidden under .frontpage on purpose.
SectionHeader + Statistics — purplelive component
Purple pillar
Record What Happens in XR Apps
Track what happens inside your XR application. Cognitive3D captures scenes, sessions, objects, goals, and feedback without added complexity.
1,400+companies
290Mminutes analysed
SectionHeader + Statistics — bluelive component
Blue pillar
Record What Happens in XR Apps
Track what happens inside your XR application. Cognitive3D captures scenes, sessions, objects, goals, and feedback without added complexity.
1,400+companies
290Mminutes analysed
SectionHeader + Statistics — teallive component
Teal pillar
Record What Happens in XR Apps
Track what happens inside your XR application. Cognitive3D captures scenes, sessions, objects, goals, and feedback without added complexity.
1,400+companies
290Mminutes analysed
Surfaces & cards
The card family. Note that the recommended pricing card's rim and glow are two separate elements — a single masked element cannot do both without a visible wash.
PricingCard — standard and recommendedlive component
Starter
For teams validating a first XR build
Sessions per month
Scene Explorer + replay
Objectives & goals
SSO and audit log
RECOMMENDED
Growth
For teams shipping continuously
Sessions per month
Scene Explorer + replay
Objectives & goals
SSO and audit log
Dark pillar cardclass-name replica
The homepage journey cards and the 'Continue Exploring' cards share this treatment: dark fill, pillar-tinted border, and a 5px accent bar on the top edge.
Purple pillar
Capture what happens, replay it in 3D, and compare across sessions.
Learn more →
Blue pillar
Capture what happens, replay it in 3D, and compare across sessions.
Learn more →
Teal pillar
Capture what happens, replay it in 3D, and compare across sessions.
Learn more →
Testimonial cardclass-name replica
HomeTestimonial needs IGatsbyImageData, so this is markup-only. The card fill, border and quote glyph are the real CSS. On a live page the company logo is inverted to white via filter: brightness(0) invert(1) — a colour logo here means that filter was lost.
“If you're developing for Meta Quest and not using spatial analytics like Cognitive3D, it's borderline negligent.”
James Senior
Product Manager Lead, Metaverse Apps
CTA bands
The real component, all three pillars plus the straight-bottom variant. These are tall, so they are collapsed by default. Each carries the band mask on three layers and the constellation canvas at 0.55 opacity.
HomeCTASection — purpletoggle
Ready To See Inside Your XR App?
Start capturing real user behaviour, app activity, and device inputs in full 3D.
Live FormRow in every input type. The demo form is placeholder-only by design — labels plus placeholders made it too tall and cluttered. Field order on the live form must not change.
FormRow — all input typeslive component
Motion
All motion is subtle and slow. Every effect below is wrapped in prefers-reduced-motion on the live site — if you have reduced motion enabled, these will be still, which is correct.
Durations & easing
reveal0.7–0.8scubic-bezier(0.22, 0.61, 0.36, 1)
shine sweep0.5s background-position
lifttranslateY(−2px), 0.3s
horizon drift18s alternate
demo spotlighthue-rotate 0 → −80degrotate the hue; gradient stops do not interpolate
Reveal states
Elements start offset and settle to transform: none when .is-revealed is added by usePageReveal. Opacity stays at 1 throughout — copy is never gated on JS, so nothing can ship blank.
section-headertranslateY(24px)
journey cardstranslateY(28px), staggered 0.12s
feature imagerytranslateX(±28px) from its own side
testimonialscale(0.97)
Anti-patterns
Each of these was shipped once and had to be undone. They are settled — don't reintroduce them.
No hover glows on CTA buttons. Shine sweep and a 2px lift only. Removed with !important; re-adding a box-shadow reverses a deliberate decision.
Constellation opacity is 0.55. Not 0.42 — that was an early iteration.
Never hand-copy .frontpage rules into a page partial. Add the frontpage class to the wrapper and inherit. Hand-copying produced ~860 lines that had to be deleted again.
No inline style backgrounds on testimonials or heroes — they beat every stylesheet rule and break the wash.
Avoid z-index: -1 for glows. It paints above the parent's background when the parent is a stacking context, and below in-flow ancestor backgrounds otherwise. Use box-shadow.
mask-composite: exclude only cancels at alpha 0 or 1. Two partial alphas leave a visible wash. Split into two elements.
Match arcs in pixels, not percentages. Equal percentages leave the shorter element visibly flatter, because sag scales with element height.
Invalid CSS values fail silently.justify-content: justify-between did nothing for a while — check computed styles, not the source.