PragCore — Shared design demo

Color tokens

--voidpage void

--inknear-black fills

--cyanprimary accent

--magentaemphasis

--limetertiary accent

--textbody copy

--text-displayheadlines

--surfaceglass overlay

Typography

Syne · display

Future is compiled

Syne 600 — section title

Syne 400 — lighter display

JetBrains Mono · UI / body

Body default: pragmatic software, structured shipping, workspace discipline.

Medium weight for emphasis in running copy.

PROJECTS.md inline code chip

Logo pattern (header)

PragCore

CSS glyph (gradient square) + Syne 800 wordmark — same as .brand on the marketing site.

Pillar cards (components.css)

01

Deterministic spine

Contracts and automation carry truth so judgment goes to product.

02

Creative perimeter

AI and intuition at the edges—intent and narrative, not file layout.

03

Ship in slices

Small complete cuts beat cathedral roadmaps.

Chrome samples

Primary link Second link

Primary Ghost Quiet

import { loadPragcoreRemoteConfig } from "./pragcore-remote-config.js";
const rc = await loadPragcoreRemoteConfig(); // features, shaderRgb, designSystemApplied

Panel with legibility shadow — copy over busy backgrounds / WebGL should use --text-legibility family.

Firebase Remote Config keys

Deploy with ./scripts/deploy-remoteconfig.sh (remoteconfig.template.json). Full contract: KEYS.md and design-system.example.json.

Key	Default	Purpose
`pragcore_schema_version`	`2`	RC contract version
`pragcore_design_system_json`	`""`	Optional validated JSON: colors, legibility, typography, motion, layout, `shaderRgb`, bundled `features`
`pragcore_feature_scroll_audio`	`true`	Scroll audio control
`pragcore_feature_webgl`	`true`	Animated 3D hero (break-glass `false` only)
`pragcore_feature_scroll_choreography`	`true`	GSAP scroll reveals / hero lines / panel motion
`pragcore_feature_hero_pointer_parallax`	`true`	Pointer-driven GL parallax (desktop)
`pragcore_feature_loader`	`true`	Branded loader bar
`pragcore_style_tokens_json`	`""`	Legacy flat `{"--cyan":"#..."}` map (whitelisted vars)

Shared folder map

PragCore/Shared/
├── README.md
├── DesignSystem/   ← tokens.css, tokens.json, components.css (canonical)
├── Brand/          ← favicon / OG masters (placeholders)
├── RemoteConfig/   ← KEYS.md, design-system.example.json, RC README
└── Demo/           ← this page (source)