Design system catalog

Tokens from Shared/DesignSystem/tokens.css, patterns aligned with the marketing site. Remote Config keys match Shared/RemoteConfig/KEYS.md.

Multi-Platform Feedback & Product Branching Interactive Demo Simulate Web, iOS (iPhone 16 Pro), and Android (Pixel 9 Pro) over-the-air product updates in real-time.

Open Live 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)

Deterministic spine

Contracts and automation carry truth so judgment goes to product.

Creative perimeter

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

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)

Coremark Identity v1.0 & Subtle App Integration

Canonical identity system based on an open current and a stable core. Apps retain their native identity while anchoring to PragCore with a subtle micro-footer badge.

01 OPEN ORBIT Independent Intelligence A system that stays receptive, adaptive, and free.

02 RISING CURRENT Caribbean Creativity Movement, optimism, invention, and personal freedom.

03 STABLE CORE Pragmatic Truth Ideas are tested against useful, observable reality.

Vector Marks & Lockups

Icon (48px)

Horizontal Lockup

Social Avatar

Coremark Color Palette

Cobalt#1552D6

Caribbean#27D4C8

Deep Ocean#071B3A

White#FFFFFF

Black#000000

Subtle Monorepo App Badge

Apps preserve their existing visual theme while displaying a subtle floating anchor in footers or navigation bars:


  
  Powered by PragCore

PragCore Philosophical Continuity Guarantee Coremark Identity v1.0 expands the visual language without altering PragCore's void-first dark aesthetic, Syne + JetBrains Mono typography, signal triad (cyan, magenta, lime), or engineering philosophy.

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)

← Marketing site