feat(portal): sovereign visual identity for Sankofa Nexus

Replace the generic S wordmark with geometric Sankofa, Phoenix, and PanTel marks, institutional palette tokens, IBM Plex Sans, ecosystem trinity homepage, /brand reference page, corporate graphics, and portal shell refresh. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 04:47:55 -07:00
parent 456cc613b7
commit e3e71d95e4
39 changed files with 1613 additions and 279 deletions
--- a/portal/docs/BRAND_IDENTITY_SANKOFA_NEXUS.md
+++ b/portal/docs/BRAND_IDENTITY_SANKOFA_NEXUS.md
@@ -0,0 +1,46 @@
+# Sankofa Nexus — Visual Identity Rationale
+
+**Version:** 1.0 · **Scope:** Sankofa, Phoenix, PanTel public marks and web shell
+
+## Symbolism
+
+### Sankofa master mark
+
+The geometric Sankofa bird faces backward while the body advances — *return, retrieve, preserve, move forward*. The protective circular ring denotes sovereign jurisdiction and institutional continuity. Tail geometry resolves into network paths (data streams, orbital lines) rather than decorative plumage.
+
+An optional eight-point grid references Hospitaller order geometry (precision, protection, service) without religious iconography — used at ≤8% opacity as structural scaffolding only.
+
+### Phoenix sub-mark
+
+Derived from the Sankofa bird ascending: horizontal wing strata imply cloud compute layers; a central core reads as continuity / rebirth / uptime. Meaning: restoration, resilience, sovereign cloud.
+
+### PanTel sub-mark
+
+Derived from the Sankofa central node with signal arcs and orbital paths — telecommunications, secure connectivity, propagation across distributed infrastructure.
+
+## Tone
+
+Institutional, sovereign, resilient, precise, civilizational — not startup SaaS, not DeFi meme aesthetics, not cartoon mascots.
+
+## Palette
+
+| Token | Hex | Use |
+|-------|-----|-----|
+| Obsidian | `#111111` | Primary surfaces |
+| Deep Midnight | `#0D1B2A` | Depth, headers, panels |
+| Sovereign Gold | `#D4A64A` | Primary accent, marks |
+| Bronze | `#8B6A3E` | Secondary accent, borders |
+| Signal Copper | `#C56B2C` | CTAs, signal / network emphasis |
+| Cloud Ivory | `#F5F1E8` | Primary text on dark |
+
+Gradients are used sparingly — prefer flat gold/copper on obsidian.
+
+## Typography
+
+**IBM Plex Sans** — institutional sans with engineering clarity (IBM-grade durability). Fallback: system-ui.
+
+## Implementation
+
+- SVG React components: `src/components/brand/logos/`
+- Tokens: `src/lib/brand/tokens.ts`, CSS vars in `globals.css`, Tailwind `sovereign.*`
+- Brand reference page: `/brand`
--- a/portal/pnpm-workspace.yaml
+++ b/portal/pnpm-workspace.yaml
@@ -1,2 +0,0 @@
-allowBuilds:
-  unrs-resolver: set this to true or false
--- a/portal/postcss.config.js
+++ b/portal/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/portal/src/app/ClientRootLayout.tsx
+++ b/portal/src/app/ClientRootLayout.tsx
@@ -1,18 +1,23 @@
 'use client';

-import { Inter } from 'next/font/google';
+import { IBM_Plex_Sans } from 'next/font/google';

 import { AppShell } from '@/components/layout/AppShell';

 import { Providers } from './providers';
-import './globals.css';

-const inter = Inter({ subsets: ['latin'] });
+const ibmPlexSans = IBM_Plex_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-ibm-plex',
+});

 export function ClientRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
-      <body className={`${inter.className} min-h-screen bg-gray-950 text-gray-100 antialiased`}>
+      <body
+        className={`${ibmPlexSans.variable} ${ibmPlexSans.className} min-h-screen bg-sovereign-obsidian text-sovereign-ivory antialiased`}
+      >
        <Providers>
          <AppShell>{children}</AppShell>
        </Providers>
--- a/portal/src/app/apple-icon.tsx
+++ b/portal/src/app/apple-icon.tsx
@@ -13,14 +13,32 @@ export default function AppleIcon() {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
-          background: 'linear-gradient(135deg, #f97316 0%, #fbbf24 100%)',
+          background: '#0D1B2A',
          borderRadius: 36,
-          color: '#0a0a0a',
-          fontSize: 96,
-          fontWeight: 700,
        }}
      >
-        S
+        <div
+          style={{
+            width: 120,
+            height: 120,
+            borderRadius: '50%',
+            border: '6px solid #D4A64A',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            style={{
+              width: 0,
+              height: 0,
+              borderLeft: '28px solid transparent',
+              borderRight: '28px solid transparent',
+              borderBottom: '48px solid #D4A64A',
+              transform: 'rotate(90deg)',
+            }}
+          />
+        </div>
      </div>
    ),
    { ...size }
--- a/portal/src/app/brand/page.tsx
+++ b/portal/src/app/brand/page.tsx
@@ -0,0 +1,140 @@
+import type { Metadata } from 'next';
+
+import {
+  BrandLockup,
+  EightPointGrid,
+  InstitutionalPanel,
+  PanTelMark,
+  PhoenixMark,
+  SankofaMark,
+} from '@/components/brand';
+import { CorporateFooter } from '@/components/corporate/CorporateFooter';
+import { CorporateHeader } from '@/components/corporate/CorporateHeader';
+import { brandColors } from '@/lib/brand/tokens';
+
+export const metadata: Metadata = {
+  title: 'Visual Identity — Sankofa Nexus',
+  description:
+    'Sovereign institutional brand system for Sankofa, Phoenix, and PanTel — geometric marks, palette, and typography.',
+};
+
+const swatches = [
+  { name: 'Obsidian', token: 'obsidian', hex: brandColors.obsidian },
+  { name: 'Deep Midnight', token: 'midnight', hex: brandColors.midnight },
+  { name: 'Sovereign Gold', token: 'gold', hex: brandColors.sovereignGold },
+  { name: 'Bronze', token: 'bronze', hex: brandColors.bronze },
+  { name: 'Signal Copper', token: 'copper', hex: brandColors.signalCopper },
+  { name: 'Cloud Ivory', token: 'ivory', hex: brandColors.cloudIvory },
+];
+
+export default function BrandPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
+      <CorporateHeader />
+
+      <main className="relative flex-1">
+        <EightPointGrid className="opacity-[0.04]" />
+
+        <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold">
+            Internal reference
+          </p>
+          <h1 className="mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
+            Sankofa Nexus visual identity
+          </h1>
+          <p className="mt-4 max-w-3xl text-lg text-sovereign-ivory/65">
+            Geometric Sankofa symbolism inside a sovereign protection ring — extended to Phoenix (cloud
+            resilience) and PanTel (secure connectivity). Institutional tone: durable, precise,
+            civilizational.
+          </p>
+
+          <section className="mt-16">
+            <h2 className="text-2xl font-semibold">Master marks</h2>
+            <div className="mt-8 grid gap-6 md:grid-cols-3">
+              {[
+                { Mark: SankofaMark, label: 'Sankofa', sub: 'Sovereign technology · trust · continuity' },
+                { Mark: PhoenixMark, label: 'Phoenix', sub: 'Cloud · recovery · uptime' },
+                { Mark: PanTelMark, label: 'PanTel', sub: 'Telecom · signal · connectivity' },
+              ].map(({ Mark, label, sub }) => (
+                <InstitutionalPanel key={label} title={label} eyebrow={sub}>
+                  <div className="flex flex-col items-center gap-6 py-4">
+                    <Mark size={96} />
+                    <Mark size={48} />
+                    <Mark size={24} />
+                  </div>
+                </InstitutionalPanel>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-16">
+            <h2 className="text-2xl font-semibold">Lockup</h2>
+            <InstitutionalPanel className="mt-6">
+              <div className="flex flex-wrap items-center gap-10 py-4">
+                <BrandLockup size="lg" />
+                <BrandLockup size="md" subtitle="Sovereign Technologies" />
+                <BrandLockup size="sm" />
+              </div>
+            </InstitutionalPanel>
+          </section>
+
+          <section className="mt-16">
+            <h2 className="text-2xl font-semibold">Color palette</h2>
+            <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {swatches.map((s) => (
+                <div
+                  key={s.token}
+                  className="overflow-hidden rounded-xl border border-sovereign-bronze/25"
+                >
+                  <div className="h-20" style={{ backgroundColor: s.hex }} />
+                  <div className="bg-sovereign-midnight/60 px-4 py-3">
+                    <p className="font-medium">{s.name}</p>
+                    <p className="font-mono text-sm text-sovereign-ivory/60">{s.hex}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-16">
+            <h2 className="text-2xl font-semibold">Typography</h2>
+            <InstitutionalPanel className="mt-6">
+              <p className="text-sm text-sovereign-bronze">Primary — IBM Plex Sans</p>
+              <p className="mt-4 text-4xl font-bold">Sovereign technology infrastructure</p>
+              <p className="mt-2 text-lg font-medium text-sovereign-ivory/80">
+                Institutional sans-serif for governments, orders, and critical systems operators.
+              </p>
+              <p className="mt-4 text-sm leading-relaxed text-sovereign-ivory/60">
+                ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
+              </p>
+            </InstitutionalPanel>
+          </section>
+
+          <section className="mt-16 pb-8">
+            <h2 className="text-2xl font-semibold">Symbolism</h2>
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+              <InstitutionalPanel title="Sankofa bird" eyebrow="Return · preserve · advance">
+                <p className="text-sm leading-relaxed text-sovereign-ivory/65">
+                  The geometric bird glances backward while the body advances. The protection ring denotes
+                  sovereign jurisdiction. Tail paths resolve into network continuity — not decorative
+                  plumage.
+                </p>
+              </InstitutionalPanel>
+              <InstitutionalPanel title="Eight-point grid" eyebrow="Structural · not religious">
+                <p className="text-sm leading-relaxed text-sovereign-ivory/65">
+                  Hospitaller-inspired geometry at low opacity — precision, protection, service — without
+                  overt religious iconography.
+                </p>
+              </InstitutionalPanel>
+            </div>
+            <p className="mt-6 text-sm text-sovereign-ivory/45">
+              Full rationale: <code className="text-sovereign-gold">docs/BRAND_IDENTITY_SANKOFA_NEXUS.md</code>
+            </p>
+          </section>
+        </div>
+      </main>
+
+      <CorporateFooter />
+    </div>
+  );
+}
--- a/portal/src/app/globals.css
+++ b/portal/src/app/globals.css
@@ -2,14 +2,21 @@
@tailwind components;
@tailwind utilities;

-/* Portal is dark-first; avoid prefers-color-scheme body rules that fight Tailwind and
-   leave bare <a> tags as low-contrast browser default blue on black. */
+:root {
+  --sovereign-obsidian: #111111;
+  --sovereign-midnight: #0d1b2a;
+  --sovereign-gold: #d4a64a;
+  --sovereign-bronze: #8b6a3e;
+  --sovereign-copper: #c56b2c;
+  --sovereign-ivory: #f5f1e8;
+}
+
@layer base {
  body {
-    @apply bg-gray-950 text-gray-100;
+    @apply bg-sovereign-obsidian text-sovereign-ivory;
  }
  a {
-    @apply text-orange-300 underline-offset-2 transition-colors hover:text-orange-200;
+    @apply text-sovereign-gold underline-offset-2 transition-colors hover:text-sovereign-ivory;
  }
 }

@@ -18,4 +25,3 @@
    text-wrap: balance;
  }
 }
-
--- a/portal/src/app/icon.tsx
+++ b/portal/src/app/icon.tsx
@@ -3,6 +3,7 @@ import { ImageResponse } from 'next/og';
 export const size = { width: 32, height: 32 };
 export const contentType = 'image/png';

+/** Favicon — simplified Sankofa sovereign ring mark */
 export default function Icon() {
  return new ImageResponse(
    (
@@ -13,14 +14,33 @@ export default function Icon() {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
-          background: 'linear-gradient(135deg, #f97316 0%, #fbbf24 100%)',
-          borderRadius: 8,
-          color: '#0a0a0a',
-          fontSize: 20,
-          fontWeight: 700,
+          background: '#0D1B2A',
+          borderRadius: 6,
        }}
      >
-        S
+        <div
+          style={{
+            width: 26,
+            height: 26,
+            borderRadius: '50%',
+            border: '2px solid #D4A64A',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+          }}
+        >
+          <div
+            style={{
+              width: 0,
+              height: 0,
+              borderLeft: '6px solid transparent',
+              borderRight: '6px solid transparent',
+              borderBottom: '10px solid #D4A64A',
+              transform: 'rotate(90deg)',
+            }}
+          />
+        </div>
      </div>
    ),
    { ...size }
--- a/portal/src/app/layout.tsx
+++ b/portal/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';

 import { ClientRootLayout } from './ClientRootLayout';
+import './globals.css';

 export const metadata: Metadata = {
  metadataBase: new URL('https://sankofa.nexus'),
--- a/portal/src/components/brand/BrandLockup.tsx
+++ b/portal/src/components/brand/BrandLockup.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils';
+
+import { SankofaMark } from './logos/SankofaMark';
+
+type BrandLockupProps = {
+  size?: 'sm' | 'md' | 'lg';
+  showWordmark?: boolean;
+  subtitle?: string;
+  className?: string;
+};
+
+const sizes = {
+  sm: { mark: 28, title: 'text-base', sub: 'text-[10px]' },
+  md: { mark: 36, title: 'text-lg', sub: 'text-xs' },
+  lg: { mark: 48, title: 'text-xl', sub: 'text-sm' },
+};
+
+/** Logo mark + institutional wordmark lockup */
+export function BrandLockup({
+  size = 'md',
+  showWordmark = true,
+  subtitle,
+  className,
+}: BrandLockupProps) {
+  const s = sizes[size];
+
+  return (
+    <div className={cn('flex items-center gap-2.5', className)}>
+      <SankofaMark size={s.mark} />
+      {showWordmark && (
+        <div className="flex flex-col leading-none">
+          <span className={cn('font-semibold tracking-tight text-sovereign-ivory', s.title)}>
+            Sankofa
+          </span>
+          {subtitle ? (
+            <span className={cn('mt-0.5 font-medium uppercase tracking-[0.12em] text-sovereign-gold/80', s.sub)}>
+              {subtitle}
+            </span>
+          ) : (
+            <span className={cn('mt-0.5 font-medium uppercase tracking-[0.12em] text-sovereign-bronze/90', s.sub)}>
+              Nexus
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/portal/src/components/brand/DashboardCard.tsx
+++ b/portal/src/components/brand/DashboardCard.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+type DashboardCardProps = {
+  title: string;
+  value?: string | number;
+  description?: string;
+  icon?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  accent?: 'gold' | 'copper' | 'bronze';
+};
+
+const accentBorder = {
+  gold: 'border-sovereign-gold/30 hover:border-sovereign-gold/50',
+  copper: 'border-sovereign-copper/30 hover:border-sovereign-copper/50',
+  bronze: 'border-sovereign-bronze/30 hover:border-sovereign-bronze/50',
+};
+
+/** Explorer / console metric card with institutional styling */
+export function DashboardCard({
+  title,
+  value,
+  description,
+  icon,
+  footer,
+  className,
+  accent = 'gold',
+}: DashboardCardProps) {
+  return (
+    <article
+      className={cn(
+        'rounded-xl border bg-sovereign-midnight/60 p-4 transition-colors',
+        accentBorder[accent],
+        className
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-wide text-sovereign-bronze">{title}</p>
+          {value !== undefined && (
+            <p className="mt-1 text-2xl font-bold tabular-nums text-sovereign-ivory">{value}</p>
+          )}
+        </div>
+        {icon && (
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-sovereign-bronze/30 bg-sovereign-obsidian text-sovereign-gold">
+            {icon}
+          </div>
+        )}
+      </div>
+      {description && <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">{description}</p>}
+      {footer && <div className="mt-3 border-t border-sovereign-bronze/15 pt-3">{footer}</div>}
+    </article>
+  );
+}
--- a/portal/src/components/brand/EcosystemTrinitySection.tsx
+++ b/portal/src/components/brand/EcosystemTrinitySection.tsx
@@ -0,0 +1,36 @@
+import { EightPointGrid } from './EightPointGrid';
+import { NetworkMeshDiagram } from './NetworkMeshDiagram';
+import { ProductCard } from './ProductCard';
+
+/** Homepage ecosystem trinity — Sankofa · Phoenix · PanTel */
+export function EcosystemTrinitySection() {
+  return (
+    <section id="ecosystem" className="relative scroll-mt-20 border-y border-sovereign-bronze/20 py-20">
+      <EightPointGrid className="opacity-[0.06]" />
+      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-20" aria-hidden>
+        <NetworkMeshDiagram variant="hero" className="mx-auto max-w-4xl translate-y-8" />
+      </div>
+
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="max-w-2xl">
+          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold">
+            Sovereign product ecosystem
+          </p>
+          <h2 className="mt-2 text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
+            One institution. Three pillars.
+          </h2>
+          <p className="mt-4 text-lg text-sovereign-ivory/65">
+            Sankofa governs trust and continuity. Phoenix delivers sovereign cloud. PanTel carries secure
+            telecommunications — unified under Hospitaller-grade institutional standards.
+          </p>
+        </div>
+
+        <div className="mt-12 grid gap-6 lg:grid-cols-3">
+          <ProductCard division="sankofa" />
+          <ProductCard division="phoenix" />
+          <ProductCard division="pantel" />
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/portal/src/components/brand/EightPointGrid.tsx
+++ b/portal/src/components/brand/EightPointGrid.tsx
@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+
+type EightPointGridProps = {
+  className?: string;
+  opacity?: number;
+};
+
+/** Subtle Hospitaller-inspired eight-point structural grid (decorative) */
+export function EightPointGrid({ className, opacity = 0.08 }: EightPointGridProps) {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      className={cn('pointer-events-none absolute inset-0 h-full w-full text-sovereign-gold', className)}
+      aria-hidden
+      style={{ opacity }}
+    >
+      <polygon
+        points="50,4 58,22 96,26 66,42 74,78 50,62 26,78 34,42 4,26 42,22"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={0.5}
+      />
+      <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth={0.35} />
+      {[0, 45, 90, 135].map((deg) => (
+        <line
+          key={deg}
+          x1={50}
+          y1={50}
+          x2={50 + 46 * Math.cos((deg * Math.PI) / 180)}
+          y2={50 + 46 * Math.sin((deg * Math.PI) / 180)}
+          stroke="currentColor"
+          strokeWidth={0.3}
+        />
+      ))}
+    </svg>
+  );
+}
--- a/portal/src/components/brand/InstitutionalPanel.tsx
+++ b/portal/src/components/brand/InstitutionalPanel.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+type InstitutionalPanelProps = {
+  title?: string;
+  eyebrow?: string;
+  children: ReactNode;
+  className?: string;
+  variant?: 'default' | 'elevated' | 'inset';
+};
+
+/** Institutional content panel with sovereign border treatment */
+export function InstitutionalPanel({
+  title,
+  eyebrow,
+  children,
+  className,
+  variant = 'default',
+}: InstitutionalPanelProps) {
+  return (
+    <section
+      className={cn(
+        'relative overflow-hidden rounded-xl border border-sovereign-bronze/25',
+        variant === 'elevated' && 'bg-sovereign-midnight/80 shadow-lg shadow-black/30',
+        variant === 'inset' && 'bg-sovereign-obsidian/60',
+        variant === 'default' && 'bg-sovereign-midnight/50',
+        className
+      )}
+    >
+      <div
+        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-sovereign-gold/40 to-transparent"
+        aria-hidden
+      />
+      {(eyebrow || title) && (
+        <header className="border-b border-sovereign-bronze/15 px-5 py-4 sm:px-6">
+          {eyebrow && (
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold/90">
+              {eyebrow}
+            </p>
+          )}
+          {title && <h3 className="mt-1 text-lg font-semibold text-sovereign-ivory">{title}</h3>}
+        </header>
+      )}
+      <div className="px-5 py-5 sm:px-6">{children}</div>
+    </section>
+  );
+}
--- a/portal/src/components/brand/NetworkMeshDiagram.tsx
+++ b/portal/src/components/brand/NetworkMeshDiagram.tsx
@@ -0,0 +1,88 @@
+import { cn } from '@/lib/utils';
+
+type NetworkMeshDiagramProps = {
+  className?: string;
+  variant?: 'full' | 'compact' | 'hero';
+};
+
+/** Protected node mesh — sovereign network topology visual */
+export function NetworkMeshDiagram({ className, variant = 'full' }: NetworkMeshDiagramProps) {
+  const viewBox = variant === 'compact' ? '0 0 200 80' : '0 0 400 240';
+
+  return (
+    <svg
+      viewBox={viewBox}
+      className={cn('h-full w-full text-sovereign-gold', className)}
+      role="img"
+      aria-label="Sovereign protected node mesh diagram"
+    >
+      <defs>
+        <pattern id="mesh-grid" width="20" height="20" patternUnits="userSpaceOnUse">
+          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth={0.25} opacity={0.15} />
+        </pattern>
+      </defs>
+
+      {variant !== 'compact' && (
+        <rect width="100%" height="100%" fill="url(#mesh-grid)" opacity={0.5} />
+      )}
+
+      {/* Protection ring */}
+      <circle
+        cx={variant === 'compact' ? 100 : 200}
+        cy={variant === 'compact' ? 40 : 120}
+        r={variant === 'compact' ? 28 : 72}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1}
+        opacity={0.35}
+      />
+
+      {/* Hub node */}
+      <circle
+        cx={variant === 'compact' ? 100 : 200}
+        cy={variant === 'compact' ? 40 : 120}
+        r={variant === 'compact' ? 6 : 10}
+        fill="currentColor"
+        opacity={0.9}
+      />
+
+      {/* Satellite nodes + links */}
+      {(variant === 'compact'
+        ? [
+            [30, 20],
+            [170, 20],
+            [30, 60],
+            [170, 60],
+          ]
+        : [
+            [80, 60],
+            [320, 60],
+            [60, 180],
+            [340, 180],
+            [200, 30],
+            [200, 210],
+          ]
+      ).map(([x, y]) => (
+        <g key={`${x}-${y}`}>
+          <line
+            x1={variant === 'compact' ? 100 : 200}
+            y1={variant === 'compact' ? 40 : 120}
+            x2={x}
+            y2={y}
+            stroke="currentColor"
+            strokeWidth={0.75}
+            opacity={0.4}
+          />
+          <circle cx={x} cy={y} r={variant === 'compact' ? 3 : 5} fill="currentColor" opacity={0.65} />
+        </g>
+      ))}
+
+      {variant === 'hero' && (
+        <g stroke="currentColor" strokeWidth={0.5} fill="none" opacity={0.25}>
+          <path d="M200 48 Q240 80 200 120 Q160 160 200 192" />
+          <path d="M168 120 Q200 100 232 120" />
+        </g>
+      )}
+    </svg>
+  );
+}
--- a/portal/src/components/brand/ProductCard.tsx
+++ b/portal/src/components/brand/ProductCard.tsx
@@ -0,0 +1,67 @@
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+import { divisionMeta, type BrandDivision } from '@/lib/brand/tokens';
+import { cn } from '@/lib/utils';
+
+import { PanTelMark, PhoenixMark, SankofaMark } from './logos';
+import { NetworkMeshDiagram } from './NetworkMeshDiagram';
+
+type ProductCardProps = {
+  division: BrandDivision;
+  className?: string;
+  children?: ReactNode;
+};
+
+const marks = {
+  sankofa: SankofaMark,
+  phoenix: PhoenixMark,
+  pantel: PanTelMark,
+};
+
+const markColors = {
+  sankofa: 'text-sovereign-gold',
+  phoenix: 'text-sovereign-gold',
+  pantel: 'text-sovereign-copper',
+};
+
+/** Trinity pillar card — Sankofa / Phoenix / PanTel */
+export function ProductCard({ division, className, children }: ProductCardProps) {
+  const meta = divisionMeta[division];
+  const Mark = marks[division];
+
+  return (
+    <article
+      className={cn(
+        'group relative flex flex-col overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 transition hover:border-sovereign-gold/35 hover:bg-sovereign-midnight/60',
+        className
+      )}
+    >
+      <div className="relative border-b border-sovereign-bronze/15 bg-sovereign-obsidian/50 px-6 py-8">
+        <Mark size={56} className={markColors[division]} />
+        <div
+          className="pointer-events-none absolute inset-0 opacity-[0.06]"
+          aria-hidden
+        >
+          <NetworkMeshDiagram variant="compact" />
+        </div>
+      </div>
+      <div className="flex flex-1 flex-col px-6 py-5">
+        <p className="text-xs font-semibold uppercase tracking-[0.12em] text-sovereign-gold/90">
+          {meta.tagline}
+        </p>
+        <h3 className="mt-1 text-xl font-semibold text-sovereign-ivory">{meta.name}</h3>
+        <p className="mt-3 flex-1 text-sm leading-relaxed text-sovereign-ivory/65">{meta.description}</p>
+        {children}
+        <Link
+          href={meta.href}
+          className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
+        >
+          Explore {meta.name}
+          <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
+        </Link>
+      </div>
+    </article>
+  );
+}
--- a/portal/src/components/brand/index.ts
+++ b/portal/src/components/brand/index.ts
@@ -0,0 +1,8 @@
+export { BrandLockup } from './BrandLockup';
+export { InstitutionalPanel } from './InstitutionalPanel';
+export { DashboardCard } from './DashboardCard';
+export { ProductCard } from './ProductCard';
+export { NetworkMeshDiagram } from './NetworkMeshDiagram';
+export { EightPointGrid } from './EightPointGrid';
+export { EcosystemTrinitySection } from './EcosystemTrinitySection';
+export * from './logos';
--- a/portal/src/components/brand/logos/PanTelMark.tsx
+++ b/portal/src/components/brand/logos/PanTelMark.tsx
@@ -0,0 +1,80 @@
+import { cn } from '@/lib/utils';
+
+type MarkProps = {
+  size?: number;
+  className?: string;
+  title?: string;
+};
+
+/**
+ * PanTel sub-mark — central node with signal arcs and orbital network paths.
+ */
+export function PanTelMark({ size = 48, className, title = 'PanTel' }: MarkProps) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      width={size}
+      height={size}
+      className={cn('shrink-0 text-sovereign-copper', className)}
+      role="img"
+      aria-label={title}
+    >
+      {/* Orbital paths */}
+      <ellipse
+        cx={32}
+        cy={32}
+        rx={24}
+        ry={10}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={0.75}
+        opacity={0.35}
+        transform="rotate(-20 32 32)"
+      />
+      <ellipse
+        cx={32}
+        cy={32}
+        rx={24}
+        ry={10}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={0.75}
+        opacity={0.35}
+        transform="rotate(25 32 32)"
+      />
+
+      {/* Signal arcs — propagation */}
+      <g fill="none" stroke="currentColor" strokeWidth={1.25} strokeLinecap="round">
+        <path d="M32 32 m-8 0 a8 8 0 0 1 16 0" opacity={0.5} />
+        <path d="M32 32 m-14 0 a14 14 0 0 1 28 0" opacity={0.65} />
+        <path d="M32 32 m-20 0 a20 20 0 0 1 40 0" opacity={0.8} />
+      </g>
+
+      {/* Central node — derived Sankofa body geometry */}
+      <circle cx={32} cy={32} r={5} fill="currentColor" />
+      <path
+        d="M32 27 L36 32 L32 37 L28 32 Z"
+        fill="#0D1B2A"
+        opacity={0.5}
+      />
+
+      {/* Distributed access nodes */}
+      {[
+        [12, 20],
+        [52, 20],
+        [10, 44],
+        [54, 44],
+      ].map(([x, y]) => (
+        <circle key={`${x}-${y}`} cx={x} cy={y} r={2} fill="currentColor" opacity={0.7} />
+      ))}
+
+      {/* Topology links */}
+      <g stroke="currentColor" strokeWidth={0.6} opacity={0.4}>
+        <line x1={32} y1={32} x2={12} y2={20} />
+        <line x1={32} y1={32} x2={52} y2={20} />
+        <line x1={32} y1={32} x2={10} y2={44} />
+        <line x1={32} y1={32} x2={54} y2={44} />
+      </g>
+    </svg>
+  );
+}
--- a/portal/src/components/brand/logos/PhoenixMark.tsx
+++ b/portal/src/components/brand/logos/PhoenixMark.tsx
@@ -0,0 +1,61 @@
+import { cn } from '@/lib/utils';
+
+type MarkProps = {
+  size?: number;
+  className?: string;
+  title?: string;
+};
+
+/**
+ * Phoenix sub-mark — ascending bird; wing strata as cloud compute layers;
+ * central core as continuity / rebirth.
+ */
+export function PhoenixMark({ size = 48, className, title = 'Phoenix' }: MarkProps) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      width={size}
+      height={size}
+      className={cn('shrink-0 text-sovereign-gold', className)}
+      role="img"
+      aria-label={title}
+    >
+      {/* Cloud strata — horizontal compute layers */}
+      <g stroke="currentColor" strokeWidth={1} fill="none" opacity={0.5}>
+        <path d="M8 44 H56" />
+        <path d="M12 48 H52" />
+        <path d="M16 52 H48" />
+      </g>
+
+      {/* Rising bird silhouette */}
+      <path
+        d="M32 54 L32 26 M32 26 L22 36 M32 26 L42 36"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+
+      {/* Wing layers — cloud strata */}
+      <g fill="currentColor" opacity={0.65}>
+        <path d="M14 38 L32 30 L50 38 L32 34 Z" />
+        <path d="M18 32 L32 24 L46 32 L32 28 Z" opacity={0.8} />
+        <path d="M22 26 L32 18 L42 26 L32 22 Z" opacity={0.95} />
+      </g>
+
+      {/* Sun / fire core — uptime continuity */}
+      <circle cx={32} cy={14} r={6} fill="currentColor" opacity={0.9} />
+      <circle cx={32} cy={14} r={3.5} fill="#0D1B2A" opacity={0.35} />
+
+      {/* Ascent vector */}
+      <path
+        d="M32 8 V4"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        opacity={0.6}
+      />
+    </svg>
+  );
+}
--- a/portal/src/components/brand/logos/SankofaMark.tsx
+++ b/portal/src/components/brand/logos/SankofaMark.tsx
@@ -0,0 +1,93 @@
+import { cn } from '@/lib/utils';
+
+type MarkProps = {
+  size?: number;
+  className?: string;
+  title?: string;
+  /** Show subtle eight-point Hospitaller-inspired grid */
+  showGrid?: boolean;
+};
+
+/**
+ * Master Sankofa mark — geometric bird (backward glance, forward motion)
+ * inside a sovereign protection ring. Tail resolves to network path streams.
+ */
+export function SankofaMark({
+  size = 48,
+  className,
+  title = 'Sankofa',
+  showGrid = true,
+}: MarkProps) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      width={size}
+      height={size}
+      className={cn('shrink-0 text-sovereign-gold', className)}
+      role="img"
+      aria-label={title}
+    >
+      {showGrid && (
+        <g opacity={0.12} stroke="currentColor" strokeWidth={0.5} fill="none">
+          {[0, 45, 90, 135].map((deg) => (
+            <line
+              key={deg}
+              x1={32}
+              y1={32}
+              x2={32 + 28 * Math.cos((deg * Math.PI) / 180)}
+              y2={32 + 28 * Math.sin((deg * Math.PI) / 180)}
+            />
+          ))}
+          <polygon
+            points="32,6 38,26 58,32 38,38 32,58 26,38 6,32 26,26"
+            strokeWidth={0.4}
+          />
+        </g>
+      )}
+
+      {/* Sovereign protection ring */}
+      <circle
+        cx={32}
+        cy={32}
+        r={29}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        opacity={0.85}
+      />
+      <circle cx={32} cy={32} r={26.5} fill="none" stroke="currentColor" strokeWidth={0.5} opacity={0.35} />
+
+      {/* Forward body — angular chevron advancing right */}
+      <path
+        d="M18 34 L32 28 L46 34 L32 40 Z"
+        fill="currentColor"
+        opacity={0.95}
+      />
+
+      {/* Neck + head looking backward (left) */}
+      <path
+        d="M20 32 C16 28 14 22 18 18 C22 16 24 20 22 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx={17.5} cy={19} r={1.75} fill="currentColor" />
+
+      {/* Leading wing — forward motion */}
+      <path
+        d="M32 28 L38 22 L42 28 L32 32 Z"
+        fill="currentColor"
+        opacity={0.7}
+      />
+
+      {/* Tail / data streams — network paths trailing backward */}
+      <g stroke="currentColor" strokeWidth={1} fill="none" opacity={0.75} strokeLinecap="round">
+        <path d="M18 34 C12 36 8 40 6 46" />
+        <path d="M18 36 C10 38 6 44 4 52" />
+        <path d="M20 38 C14 42 10 48 8 56" />
+      </g>
+    </svg>
+  );
+}
--- a/portal/src/components/brand/logos/index.ts
+++ b/portal/src/components/brand/logos/index.ts
@@ -0,0 +1,3 @@
+export { SankofaMark } from './SankofaMark';
+export { PhoenixMark } from './PhoenixMark';
+export { PanTelMark } from './PanTelMark';
--- a/portal/src/components/corporate/CorporateFooter.tsx
+++ b/portal/src/components/corporate/CorporateFooter.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';

+import { BrandLockup } from '@/components/brand';
 import { ECOSYSTEM_SIGN_IN_PATH } from '@/lib/corporate-site-data';

 function isExternalHref(href: string) {
@@ -8,12 +9,12 @@ function isExternalHref(href: string) {

 const footerColumns = [
  {
-    title: 'Products',
+    title: 'Ecosystem',
    links: [
-      { label: 'Phoenix Cloud', href: 'https://phoenix.sankofa.nexus' },
-      { label: 'Complete Credential', href: 'https://cc.sankofa.nexus' },
-      { label: 'Sankofa Studio', href: 'https://studio.sankofa.nexus/studio/' },
-      { label: 'Client Portal', href: 'https://portal.sankofa.nexus' },
+      { label: 'Sankofa — Sovereign Technology', href: 'https://sankofa.nexus' },
+      { label: 'Phoenix — Cloud Services', href: 'https://phoenix.sankofa.nexus' },
+      { label: 'PanTel — Telecommunications', href: 'https://portal.sankofa.nexus' },
+      { label: 'Visual identity', href: '/brand' },
    ],
  },
  {
@@ -47,12 +48,12 @@ const footerColumns = [

 export function CorporateFooter() {
  return (
-    <footer className="border-t border-gray-800 bg-gray-950">
+    <footer className="border-t border-sovereign-bronze/20 bg-sovereign-obsidian">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:gap-12">
          {footerColumns.map((column) => (
            <div key={column.title}>
-              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-400">
+              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-sovereign-bronze">
                {column.title}
              </h3>
              <ul className="space-y-2.5">
@@ -60,7 +61,7 @@ export function CorporateFooter() {
                  <li key={link.label}>
                    <Link
                      href={link.href}
-                      className="text-sm text-gray-400 no-underline transition-colors hover:text-orange-300"
+                      className="text-sm text-sovereign-ivory/60 no-underline transition-colors hover:text-sovereign-gold"
                      {...(isExternalHref(link.href)
                        ? { target: '_blank', rel: 'noopener noreferrer' }
                        : {})}
@@ -74,18 +75,10 @@ export function CorporateFooter() {
          ))}
        </div>

-        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-gray-800 pt-8 sm:flex-row sm:items-center">
-          <div className="flex items-center gap-3">
-            <span className="flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-orange-500 to-amber-400 text-xs font-bold text-gray-950">
-              S
-            </span>
-            <div>
-              <p className="text-sm font-medium text-white">Sankofa — Sovereign Technologies</p>
-              <p className="text-xs text-gray-500">Remember · Retrieve · Restore · Rise</p>
-            </div>
-          </div>
-          <p className="text-xs text-gray-500">
-            © {new Date().getFullYear()} Sankofa Ltd. All rights reserved.
+        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-sovereign-bronze/20 pt-8 sm:flex-row sm:items-center">
+          <BrandLockup size="sm" subtitle="Sovereign Technologies" />
+          <p className="text-xs text-sovereign-ivory/45">
+            © {new Date().getFullYear()} Sankofa Ltd. Remember · Retrieve · Restore · Rise
          </p>
        </div>
      </div>
--- a/portal/src/components/corporate/CorporateHeader.tsx
+++ b/portal/src/components/corporate/CorporateHeader.tsx
@@ -4,6 +4,7 @@ import { ChevronDown, LogIn, Menu, X } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';

+import { BrandLockup } from '@/components/brand';
 import { corporateNav, ECOSYSTEM_SIGN_IN_PATH } from '@/lib/corporate-site-data';
 import { cn } from '@/lib/utils';

@@ -11,66 +12,60 @@ export function CorporateHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
-    <header className="sticky top-0 z-50 border-b border-gray-800/80 bg-gray-950/95 backdrop-blur-md">
+    <header className="sticky top-0 z-50 border-b border-sovereign-bronze/20 bg-sovereign-obsidian/95 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
-        {/* Top-left: brand + ecosystem sign-in (AWS / Microsoft pattern) */}
        <div className="flex shrink-0 items-center gap-3 sm:gap-4">
-          <Link href="/" className="group flex items-center gap-2 no-underline">
-            <span
-              className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-400 text-sm font-bold text-gray-950 shadow-lg shadow-orange-500/20"
-              aria-hidden
-            >
-              S
-            </span>
-            <span className="hidden bg-gradient-to-r from-orange-300 to-amber-200 bg-clip-text text-lg font-semibold tracking-tight text-transparent sm:inline">
-              Sankofa
-            </span>
+          <Link href="/" className="group no-underline">
+            <BrandLockup size="sm" />
          </Link>

-          <span className="hidden h-5 w-px bg-gray-700 sm:block" aria-hidden />
+          <span className="hidden h-5 w-px bg-sovereign-bronze/40 sm:block" aria-hidden />

          <Link
            href={ECOSYSTEM_SIGN_IN_PATH}
-            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-orange-300 no-underline transition-colors hover:bg-orange-500/10 hover:text-orange-200"
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-sovereign-gold no-underline transition-colors hover:bg-sovereign-gold/10 hover:text-sovereign-ivory"
          >
            <LogIn className="h-4 w-4" aria-hidden />
            <span>Sign in</span>
          </Link>
        </div>

-        {/* Desktop nav */}
        <nav className="hidden flex-1 items-center justify-center gap-1 lg:flex" aria-label="Primary">
          {corporateNav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
-              className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 no-underline transition-colors hover:bg-gray-800/60 hover:text-white"
+              className="rounded-md px-3 py-2 text-sm font-medium text-sovereign-ivory/70 no-underline transition-colors hover:bg-sovereign-midnight hover:text-sovereign-ivory"
            >
              {item.label}
            </Link>
          ))}
        </nav>

-        {/* Desktop CTAs */}
        <div className="ml-auto hidden items-center gap-2 lg:flex">
+          <Link
+            href="/brand"
+            className="rounded-md px-3 py-2 text-sm font-medium text-sovereign-ivory/70 no-underline transition-colors hover:text-sovereign-ivory"
+          >
+            Brand
+          </Link>
          <Link
            href="https://portal.sankofa.nexus"
-            className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 no-underline transition-colors hover:text-white"
+            className="rounded-md px-3 py-2 text-sm font-medium text-sovereign-ivory/70 no-underline transition-colors hover:text-sovereign-ivory"
          >
            Contact sales
          </Link>
          <Link
            href="https://phoenix.sankofa.nexus"
-            className="rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-2 text-sm font-semibold text-gray-950 no-underline shadow-md shadow-orange-500/25 transition hover:from-orange-400 hover:to-amber-400"
+            className="rounded-lg border border-sovereign-gold/40 bg-sovereign-gold px-4 py-2 text-sm font-semibold text-sovereign-obsidian no-underline transition hover:bg-sovereign-ivory"
          >
            Get started
          </Link>
        </div>

-        {/* Mobile menu toggle */}
        <button
          type="button"
-          className="ml-auto inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-800 hover:text-white lg:hidden"
+          className="ml-auto inline-flex items-center justify-center rounded-md p-2 text-sovereign-ivory/60 hover:bg-sovereign-midnight hover:text-sovereign-ivory lg:hidden"
          aria-expanded={mobileOpen}
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          onClick={() => setMobileOpen((open) => !open)}
@@ -79,11 +74,10 @@ export function CorporateHeader() {
        </button>
      </div>

-      {/* Mobile drawer */}
      <div
        className={cn(
-          'overflow-hidden border-t border-gray-800/80 bg-gray-950 lg:hidden',
-          mobileOpen ? 'max-h-[28rem] opacity-100' : 'max-h-0 opacity-0'
+          'border-t border-sovereign-bronze/20 bg-sovereign-obsidian lg:hidden',
+          mobileOpen ? 'block' : 'hidden'
        )}
      >
        <nav className="flex flex-col gap-1 px-4 py-3" aria-label="Mobile primary">
@@ -91,17 +85,17 @@ export function CorporateHeader() {
            <Link
              key={item.href}
              href={item.href}
-              className="flex items-center justify-between rounded-md px-3 py-2.5 text-sm font-medium text-gray-200 no-underline hover:bg-gray-800"
+              className="flex items-center justify-between rounded-md px-3 py-2.5 text-sm font-medium text-sovereign-ivory no-underline hover:bg-sovereign-midnight"
              onClick={() => setMobileOpen(false)}
            >
              {item.label}
-              <ChevronDown className="-rotate-90 h-4 w-4 text-gray-500" aria-hidden />
+              <ChevronDown className="-rotate-90 h-4 w-4 text-sovereign-bronze" aria-hidden />
            </Link>
          ))}
-          <div className="mt-2 flex flex-col gap-2 border-t border-gray-800 pt-3">
+          <div className="mt-2 flex flex-col gap-2 border-t border-sovereign-bronze/20 pt-3">
            <Link
              href={ECOSYSTEM_SIGN_IN_PATH}
-              className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm font-medium text-white no-underline hover:bg-gray-800"
+              className="inline-flex items-center justify-center gap-2 rounded-lg border border-sovereign-bronze/40 px-4 py-2.5 text-sm font-medium text-sovereign-ivory no-underline hover:bg-sovereign-midnight"
              onClick={() => setMobileOpen(false)}
            >
              <LogIn className="h-4 w-4" />
@@ -109,7 +103,7 @@ export function CorporateHeader() {
            </Link>
            <Link
              href="https://phoenix.sankofa.nexus"
-              className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-2.5 text-sm font-semibold text-gray-950 no-underline"
+              className="inline-flex items-center justify-center rounded-lg bg-sovereign-gold px-4 py-2.5 text-sm font-semibold text-sovereign-obsidian no-underline"
              onClick={() => setMobileOpen(false)}
            >
              Get started with Phoenix
--- a/portal/src/components/corporate/CorporateLandingPage.tsx
+++ b/portal/src/components/corporate/CorporateLandingPage.tsx
@@ -3,8 +3,17 @@
 import { ArrowRight, ExternalLink } from 'lucide-react';
 import Link from 'next/link';

+import { EcosystemTrinitySection } from '@/components/brand';
 import { CorporateFooter } from '@/components/corporate/CorporateFooter';
 import { CorporateHeader } from '@/components/corporate/CorporateHeader';
+import {
+  HeroEcosystemGraphic,
+  PhilosophyStepGraphic,
+  PlatformStackGraphic,
+  ProductCardBanner,
+  SovereignBackdrop,
+  TrustComplianceGraphic,
+} from '@/components/corporate/graphics';
 import { InstitutionalGradeSection } from '@/components/corporate/InstitutionalGradeSection';
 import {
  ECOSYSTEM_SIGN_IN_PATH,
@@ -14,61 +23,100 @@ import {
  solutionVerticals,
 } from '@/lib/corporate-site-data';

+const heroStats = [
+  { value: 'A−', label: 'Chain 138 L1', accent: 'text-emerald-400' },
+  { value: '90', label: 'Sovereign cloud score', accent: 'text-sky-400' },
+  { value: '3', label: 'Core pillars', accent: 'text-sovereign-gold' },
+  { value: '8', label: 'Live PMM pools', accent: 'text-sovereign-copper' },
+];
+
 export function CorporateLandingPage() {
  return (
-    <div className="flex min-h-screen flex-col bg-gray-950 text-gray-100">
+    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
      <CorporateHeader />

      <main className="flex-1">
        {/* Hero */}
-        <section className="relative overflow-hidden border-b border-gray-800/60">
-          <div
-            className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-20%,rgba(251,146,60,0.18),transparent)]"
-            aria-hidden
-          />
-          <div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8">
-            <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-orange-400">
-              Sovereign Technologies
-            </p>
-            <h1 className="max-w-4xl text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
-              Build on infrastructure you{' '}
-              <span className="bg-gradient-to-r from-orange-300 to-amber-200 bg-clip-text text-transparent">
-                own and control
-              </span>
-            </h1>
-            <p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-400">
-              Sankofa delivers sovereign cloud, identity, financial rails, and credential infrastructure —
-              the complete ecosystem for institutions that cannot depend on hyperscaler public cloud.
-            </p>
-            <div className="mt-10 flex flex-wrap items-center gap-4">
-              <Link
-                href="https://phoenix.sankofa.nexus"
-                className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-6 py-3 text-sm font-semibold text-gray-950 no-underline shadow-lg shadow-orange-500/25 transition hover:from-orange-400 hover:to-amber-400"
-              >
-                Explore Phoenix Cloud
-                <ArrowRight className="h-4 w-4" aria-hidden />
-              </Link>
-              <Link
-                href={ECOSYSTEM_SIGN_IN_PATH}
-                className="inline-flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/50 px-6 py-3 text-sm font-semibold text-white no-underline transition hover:border-gray-600 hover:bg-gray-800"
-              >
-                Sign in to ecosystem
-              </Link>
+        <section className="relative overflow-hidden border-b border-sovereign-bronze/20">
+          <SovereignBackdrop variant="grid" />
+          <SovereignBackdrop variant="mesh" className="opacity-80" />
+
+          <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
+            <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+              <div>
+                <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-sovereign-gold/30 bg-sovereign-gold/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-sovereign-gold">
+                  <span className="h-1.5 w-1.5 rounded-full bg-sovereign-gold" aria-hidden />
+                  Sovereign Technology Institution
+                </p>
+                <h1 className="max-w-4xl text-4xl font-bold tracking-tight text-sovereign-ivory sm:text-5xl lg:text-6xl">
+                  Sovereign technology infrastructure for{' '}
+                  <span className="text-sovereign-gold">trust, cloud, telecom,</span> and digital
+                  continuity
+                </h1>
+                <p className="mt-6 max-w-2xl text-lg leading-relaxed text-sovereign-ivory/70">
+                  Sankofa Nexus operates critical identity, blockchain, cloud, and telecommunications
+                  infrastructure — institutional-grade systems for governments, orders, and partners who
+                  cannot depend on hyperscaler public cloud.
+                </p>
+                <div className="mt-10 flex flex-wrap items-center gap-4">
+                  <Link
+                    href="#ecosystem"
+                    className="inline-flex items-center gap-2 rounded-lg bg-sovereign-gold px-6 py-3 text-sm font-semibold text-sovereign-obsidian no-underline transition hover:bg-sovereign-ivory"
+                  >
+                    Explore the ecosystem
+                    <ArrowRight className="h-4 w-4" aria-hidden />
+                  </Link>
+                  <Link
+                    href={ECOSYSTEM_SIGN_IN_PATH}
+                    className="inline-flex items-center gap-2 rounded-lg border border-sovereign-bronze/40 bg-sovereign-midnight/50 px-6 py-3 text-sm font-semibold text-sovereign-ivory no-underline transition hover:border-sovereign-gold/40 hover:bg-sovereign-midnight"
+                  >
+                    Sign in to console
+                  </Link>
+                </div>
+
+                <dl className="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-4">
+                  {heroStats.map((stat) => (
+                    <div
+                      key={stat.label}
+                      className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/50 px-4 py-3 backdrop-blur-sm"
+                    >
+                      <dt className="sr-only">{stat.label}</dt>
+                      <dd className={`text-2xl font-bold tabular-nums ${stat.accent}`}>{stat.value}</dd>
+                      <dd className="mt-1 text-xs text-sovereign-ivory/45">{stat.label}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+
+              <HeroEcosystemGraphic className="hidden lg:block" />
            </div>
          </div>
        </section>

+        <EcosystemTrinitySection />
+
        {/* Philosophy */}
-        <section className="border-b border-gray-800/60 bg-gray-900/30 py-14">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <section className="relative border-b border-sovereign-bronze/20 bg-sovereign-midnight/30 py-14">
+          <SovereignBackdrop variant="nodes" className="opacity-60" />
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="mb-10 max-w-2xl">
+              <h2 className="text-2xl font-bold text-sovereign-ivory sm:text-3xl">
+                Remember · Retrieve · Restore · Rise
+              </h2>
+              <p className="mt-3 text-sovereign-ivory/60">
+                The Sankofa philosophy — institutional continuity from ancestral wisdom to sovereign
+                infrastructure.
+              </p>
+            </div>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {philosophySteps.map((step, index) => (
-                <div key={step.verb} className="relative rounded-xl border border-gray-800/80 bg-gray-900/40 p-5">
-                  <span className="text-xs font-medium uppercase tracking-wider text-orange-500/80">
-                    {String(index + 1).padStart(2, '0')}
-                  </span>
-                  <h2 className="mt-2 text-xl font-semibold text-white">{step.verb}</h2>
-                  <p className="mt-2 text-sm leading-relaxed text-gray-400">{step.detail}</p>
+                <div
+                  key={step.verb}
+                  className="group relative overflow-hidden rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 p-5 transition hover:border-sovereign-gold/30 hover:bg-sovereign-midnight/60"
+                >
+                  <PhilosophyStepGraphic verb={step.verb} index={index} />
+                  <h3 className="text-xl font-semibold text-sovereign-ivory">{step.verb}</h3>
+                  <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">{step.detail}</p>
                </div>
              ))}
            </div>
@@ -76,11 +124,12 @@ export function CorporateLandingPage() {
        </section>

        {/* Product divisions */}
-        <section id="products" className="scroll-mt-20 py-20">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <section id="products" className="relative scroll-mt-20 py-20">
+          <SovereignBackdrop variant="grid" className="opacity-50" />
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
-              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Products</h2>
-              <p className="mt-4 text-lg text-gray-400">
+              <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">Products</h2>
+              <p className="mt-4 text-lg text-sovereign-ivory/60">
                From sovereign cloud to verifiable credentials — integrated products under one ecosystem,
                modeled for institutional scale.
              </p>
@@ -92,37 +141,45 @@ export function CorporateLandingPage() {
                return (
                  <article
                    key={product.id}
-                    className="group flex flex-col rounded-2xl border border-gray-800 bg-gray-900/40 p-6 transition hover:border-orange-500/40 hover:bg-gray-900/70"
+                    className="group relative flex flex-col overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 transition hover:border-sovereign-gold/35 hover:bg-sovereign-midnight/60"
                  >
-                    <div className="mb-4 flex items-start justify-between gap-3">
-                      <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20">
-                        <Icon className="h-5 w-5" aria-hidden />
+                    <ProductCardBanner productId={product.id} />
+                    <div className="flex flex-1 flex-col px-6 pb-6">
+                      <div className="mb-4 flex items-start justify-between gap-3">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-sovereign-gold/25 bg-sovereign-gold/10 text-sovereign-gold">
+                          <Icon className="h-6 w-6" aria-hidden />
+                        </div>
+                        {product.external ? (
+                          <ExternalLink
+                            className="h-4 w-4 shrink-0 text-sovereign-ivory/30 group-hover:text-sovereign-gold"
+                            aria-hidden
+                          />
+                        ) : null}
                      </div>
-                      {product.external ? (
-                        <ExternalLink className="h-4 w-4 shrink-0 text-gray-600 group-hover:text-orange-400" aria-hidden />
-                      ) : null}
+                      <p className="text-xs font-semibold uppercase tracking-wider text-sovereign-gold/90">
+                        {product.tagline}
+                      </p>
+                      <h3 className="mt-1 text-xl font-semibold text-sovereign-ivory">{product.name}</h3>
+                      <p className="mt-3 flex-1 text-sm leading-relaxed text-sovereign-ivory/60">
+                        {product.description}
+                      </p>
+                      <ul className="mt-4 space-y-1.5">
+                        {product.highlights.map((item) => (
+                          <li key={item} className="flex items-center gap-2 text-sm text-sovereign-ivory/75">
+                            <span className="h-1.5 w-1.5 rounded-full bg-sovereign-gold" aria-hidden />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                      <Link
+                        href={product.href}
+                        className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
+                        {...(product.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                      >
+                        Learn more
+                        <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
+                      </Link>
                    </div>
-                    <p className="text-xs font-semibold uppercase tracking-wider text-orange-400/90">
-                      {product.tagline}
-                    </p>
-                    <h3 className="mt-1 text-xl font-semibold text-white">{product.name}</h3>
-                    <p className="mt-3 flex-1 text-sm leading-relaxed text-gray-400">{product.description}</p>
-                    <ul className="mt-4 space-y-1.5">
-                      {product.highlights.map((item) => (
-                        <li key={item} className="flex items-center gap-2 text-sm text-gray-300">
-                          <span className="h-1 w-1 rounded-full bg-orange-500" aria-hidden />
-                          {item}
-                        </li>
-                      ))}
-                    </ul>
-                    <Link
-                      href={product.href}
-                      className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-orange-300 no-underline hover:text-orange-200"
-                      {...(product.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-                    >
-                      Learn more
-                      <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
-                    </Link>
                  </article>
                );
              })}
@@ -131,58 +188,75 @@ export function CorporateLandingPage() {
        </section>

        {/* Platform services */}
-        <section id="services" className="scroll-mt-20 border-y border-gray-800/60 bg-gray-900/20 py-20">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-            <div className="max-w-2xl">
-              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Platform services</h2>
-              <p className="mt-4 text-lg text-gray-400">
-                Owned core primitives — ledger, identity, wallet, orchestration — available through the
-                Phoenix marketplace without third-party platform lock-in.
-              </p>
-            </div>
+        <section id="services" className="relative scroll-mt-20 border-y border-sovereign-bronze/20 bg-sovereign-midnight/20 py-20">
+          <SovereignBackdrop variant="mesh" className="opacity-40" />
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="grid gap-12 lg:grid-cols-[1fr_minmax(0,280px)] lg:items-start">
+              <div>
+                <div className="max-w-2xl">
+                  <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
+                    Platform services
+                  </h2>
+                  <p className="mt-4 text-lg text-sovereign-ivory/60">
+                    Owned core primitives — ledger, identity, wallet, orchestration — available through the
+                    Phoenix marketplace without third-party platform lock-in.
+                  </p>
+                </div>

-            <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {platformServices.map((service) => {
-                const Icon = service.icon;
-                return (
-                  <div
-                    key={service.name}
-                    className="rounded-xl border border-gray-800 bg-gray-950/60 p-5 transition hover:border-gray-700"
+                <div className="mt-12 grid gap-4 sm:grid-cols-2">
+                  {platformServices.map((service) => {
+                    const Icon = service.icon;
+                    return (
+                      <div
+                        key={service.name}
+                        className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-obsidian/60 p-5 transition hover:border-sovereign-gold/25 hover:bg-sovereign-midnight/40"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-sovereign-bronze/30 bg-sovereign-midnight text-sovereign-gold">
+                            <Icon className="h-5 w-5" aria-hidden />
+                          </div>
+                          <div>
+                            <p className="text-xs font-medium uppercase tracking-wide text-sovereign-bronze">
+                              {service.category}
+                            </p>
+                            <h3 className="text-base font-semibold text-sovereign-ivory">{service.name}</h3>
+                          </div>
+                        </div>
+                        <p className="mt-3 text-sm leading-relaxed text-sovereign-ivory/60">
+                          {service.description}
+                        </p>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                <div className="mt-10">
+                  <Link
+                    href="https://portal.sankofa.nexus"
+                    className="inline-flex items-center gap-2 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
                  >
-                    <div className="flex items-center gap-3">
-                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-800 text-orange-400">
-                        <Icon className="h-4 w-4" aria-hidden />
-                      </div>
-                      <div>
-                        <p className="text-xs font-medium uppercase tracking-wide text-gray-500">{service.category}</p>
-                        <h3 className="text-base font-semibold text-white">{service.name}</h3>
-                      </div>
-                    </div>
-                    <p className="mt-3 text-sm leading-relaxed text-gray-400">{service.description}</p>
-                  </div>
-                );
-              })}
-            </div>
+                    Browse full marketplace catalog
+                    <ArrowRight className="h-4 w-4" aria-hidden />
+                  </Link>
+                </div>
+              </div>

-            <div className="mt-10">
-              <Link
-                href="https://portal.sankofa.nexus"
-                className="inline-flex items-center gap-2 text-sm font-medium text-orange-300 no-underline hover:text-orange-200"
-              >
-                Browse full marketplace catalog
-                <ArrowRight className="h-4 w-4" aria-hidden />
-              </Link>
+              <PlatformStackGraphic className="mx-auto hidden lg:block lg:sticky lg:top-24" />
            </div>
          </div>
        </section>

        {/* Solutions */}
-        <section id="solutions" className="scroll-mt-20 py-20">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <section id="solutions" className="relative scroll-mt-20 py-20">
+          <SovereignBackdrop variant="nodes" className="opacity-30" />
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
-              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Industry solutions</h2>
-              <p className="mt-4 text-lg text-gray-400">
-                Purpose-built stacks for regulated industries — public sector, finance, healthcare, and telecom.
+              <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
+                Industry solutions
+              </h2>
+              <p className="mt-4 text-lg text-sovereign-ivory/60">
+                Purpose-built stacks for regulated industries — public sector, finance, healthcare, and
+                telecom.
              </p>
            </div>

@@ -192,14 +266,16 @@ export function CorporateLandingPage() {
                return (
                  <div
                    key={vertical.name}
-                    className="flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/30 p-6"
+                    className="relative flex gap-4 overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/30 p-6"
                  >
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/10 text-orange-400">
-                      <Icon className="h-6 w-6" aria-hidden />
+                    <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-sovereign-gold/20 bg-sovereign-gold/10 text-sovereign-gold">
+                      <Icon className="h-7 w-7" aria-hidden />
                    </div>
-                    <div>
-                      <h3 className="text-lg font-semibold text-white">{vertical.name}</h3>
-                      <p className="mt-2 text-sm leading-relaxed text-gray-400">{vertical.description}</p>
+                    <div className="relative">
+                      <h3 className="text-lg font-semibold text-sovereign-ivory">{vertical.name}</h3>
+                      <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">
+                        {vertical.description}
+                      </p>
                    </div>
                  </div>
                );
@@ -211,52 +287,64 @@ export function CorporateLandingPage() {
        <InstitutionalGradeSection />

        {/* Resources / trust */}
-        <section id="resources" className="scroll-mt-20 border-t border-gray-800/60 bg-gray-900/30 py-20">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <section id="resources" className="relative scroll-mt-20 border-t border-sovereign-bronze/20 bg-sovereign-midnight/30 py-20">
+          <SovereignBackdrop variant="mesh" className="opacity-50" />
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
              <div>
-                <h2 className="text-3xl font-bold tracking-tight text-white">Built for institutional trust</h2>
-                <p className="mt-4 text-lg leading-relaxed text-gray-400">
+                <TrustComplianceGraphic className="mb-8 lg:hidden" />
+                <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory">
+                  Built for institutional trust
+                </h2>
+                <p className="mt-4 text-lg leading-relaxed text-sovereign-ivory/75">
                  Sankofa Phoenix operates under sovereign governance with SOC 2, GDPR, and sector-specific
                  compliance pathways. Identity, ledger, and credential services are designed for operators
                  who need auditability without outsourcing control.
                </p>
-                <ul className="mt-6 space-y-3 text-sm text-gray-300">
-                  <li className="flex items-center gap-2">
-                    <span className="text-orange-500">✓</span> Sovereign Keycloak identity — no Azure AD dependency
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <span className="text-orange-500">✓</span> Multi-tenant Proxmox orchestration with GitOps
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <span className="text-orange-500">✓</span> Chain 138 DeFi Oracle Meta Mainnet & cross-chain mesh
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <span className="text-orange-500">✓</span> Complete Credential eIDAS-aligned issuance
-                  </li>
+                <ul className="mt-6 space-y-3 text-sm text-sovereign-ivory/75">
+                  {[
+                    'Sovereign Keycloak identity — no Azure AD dependency',
+                    'Multi-tenant Proxmox orchestration with GitOps',
+                    'Chain 138 DeFi Oracle Meta Mainnet & cross-chain mesh',
+                    'Complete Credential eIDAS-aligned issuance',
+                  ].map((item) => (
+                    <li key={item} className="flex items-center gap-3">
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-400">
+                        ✓
+                      </span>
+                      {item}
+                    </li>
+                  ))}
                </ul>
              </div>

-              <div className="rounded-2xl border border-gray-800 bg-gradient-to-br from-gray-900 to-gray-950 p-8 shadow-xl">
-                <p className="text-sm font-semibold uppercase tracking-wider text-orange-400">Get started</p>
-                <h3 className="mt-2 text-2xl font-bold text-white">Join the Sankofa ecosystem</h3>
-                <p className="mt-3 text-sm leading-relaxed text-gray-400">
-                  Sign in to access Phoenix Cloud, marketplace subscriptions, partner tools, and client
-                  workspaces — one identity across the platform.
-                </p>
-                <div className="mt-6 flex flex-col gap-3 sm:flex-row">
-                  <Link
-                    href={ECOSYSTEM_SIGN_IN_PATH}
-                    className="inline-flex flex-1 items-center justify-center rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-5 py-3 text-sm font-semibold text-gray-950 no-underline hover:from-orange-400 hover:to-amber-400"
-                  >
-                    Sign in to ecosystem
-                  </Link>
-                  <Link
-                    href="https://phoenix.sankofa.nexus"
-                    className="inline-flex flex-1 items-center justify-center rounded-lg border border-gray-700 px-5 py-3 text-sm font-semibold text-white no-underline hover:bg-gray-800"
-                  >
-                    Phoenix Cloud
-                  </Link>
+              <div className="space-y-6">
+                <TrustComplianceGraphic className="hidden lg:block" />
+                <div className="rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/60 p-8 shadow-xl">
+                  <p className="text-sm font-semibold uppercase tracking-wider text-sovereign-gold">
+                    Get started
+                  </p>
+                  <h3 className="mt-2 text-2xl font-bold text-sovereign-ivory">
+                    Join the Sankofa ecosystem
+                  </h3>
+                  <p className="mt-3 text-sm leading-relaxed text-sovereign-ivory/60">
+                    Sign in to access Phoenix Cloud, marketplace subscriptions, partner tools, and client
+                    workspaces — one identity across the platform.
+                  </p>
+                  <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+                    <Link
+                      href={ECOSYSTEM_SIGN_IN_PATH}
+                      className="inline-flex flex-1 items-center justify-center rounded-lg bg-sovereign-gold px-5 py-3 text-sm font-semibold text-sovereign-obsidian no-underline hover:bg-sovereign-ivory"
+                    >
+                      Sign in to ecosystem
+                    </Link>
+                    <Link
+                      href="https://phoenix.sankofa.nexus"
+                      className="inline-flex flex-1 items-center justify-center rounded-lg border border-sovereign-bronze/40 px-5 py-3 text-sm font-semibold text-sovereign-ivory no-underline hover:bg-sovereign-midnight"
+                    >
+                      Phoenix Cloud
+                    </Link>
+                  </div>
                </div>
              </div>
            </div>
--- a/portal/src/components/corporate/InstitutionalGradeSection.tsx
+++ b/portal/src/components/corporate/InstitutionalGradeSection.tsx
@@ -19,11 +19,17 @@ export function InstitutionalGradeSection() {
  const otherRows = sovereignInstitutionGrades.filter((e) => e.audience !== 'sovereign');

  return (
-    <section id="institutional-grade" className="scroll-mt-20 border-y border-gray-800/60 bg-gray-950 py-20">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <section id="institutional-grade" className="relative scroll-mt-20 border-y border-sovereign-bronze/20 bg-sovereign-obsidian py-20">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-30" aria-hidden>
+        <svg className="absolute right-0 top-0 h-64 w-64 text-sovereign-gold/10" viewBox="0 0 200 200">
+          <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" strokeWidth="0.5" strokeDasharray="4 8" />
+          <circle cx="100" cy="100" r="50" fill="none" stroke="currentColor" strokeWidth="0.5" />
+        </svg>
+      </div>
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="max-w-2xl">
-            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-orange-500/30 bg-orange-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-orange-300">
+            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-sovereign-gold/30 bg-sovereign-gold/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-sovereign-gold">
              <ShieldCheck className="h-3.5 w-3.5" aria-hidden />
              Institutional readiness
            </div>
--- a/portal/src/components/corporate/graphics/HeroEcosystemGraphic.tsx
+++ b/portal/src/components/corporate/graphics/HeroEcosystemGraphic.tsx
@@ -0,0 +1,76 @@
+import { SankofaMark } from '@/components/brand';
+
+const GOLD = '#D4A64A';
+const MIDNIGHT = '#0D1B2A';
+const IVORY = '#F5F1E8';
+
+/** Hero illustration: sovereign trinity stack with protected node mesh. */
+export function HeroEcosystemGraphic({ className = '' }: { className?: string }) {
+  return (
+    <div
+      className={`relative mx-auto aspect-square w-full max-w-lg ${className}`}
+      aria-hidden
+    >
+      <div className="absolute inset-4 rounded-3xl border border-sovereign-gold/20 bg-sovereign-midnight/80 shadow-2xl backdrop-blur-sm" />
+
+      <div className="relative flex h-full flex-col items-center justify-center p-8">
+        <SankofaMark size={72} className="relative z-10" />
+
+        <svg
+          viewBox="0 0 360 200"
+          className="absolute inset-x-6 bottom-16 h-auto w-[calc(100%-3rem)]"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-label="Sovereign ecosystem stack"
+        >
+          {/* Protection ring */}
+          <circle cx="180" cy="100" r="78" fill="none" stroke={GOLD} strokeOpacity="0.25" strokeWidth="1" />
+
+          {/* Phoenix layer */}
+          <g transform="translate(180 36)">
+            <rect x="-64" y="-18" width="128" height="36" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.35" strokeWidth="1" />
+            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="10" fontWeight="600">
+              Phoenix Cloud
+            </text>
+          </g>
+
+          {/* PanTel layer */}
+          <g transform="translate(72 100)">
+            <rect x="-52" y="-16" width="104" height="32" rx="8" fill={MIDNIGHT} stroke="#C56B2C" strokeOpacity="0.45" strokeWidth="1" />
+            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="9" fontWeight="600">
+              PanTel
+            </text>
+          </g>
+
+          {/* Chain hub */}
+          <g transform="translate(288 100)">
+            <rect x="-52" y="-16" width="104" height="32" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.35" strokeWidth="1" />
+            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="9" fontWeight="600">
+              Chain 138
+            </text>
+          </g>
+
+          {/* Settlement rail */}
+          <g transform="translate(180 164)">
+            <rect x="-72" y="-14" width="144" height="28" rx="8" fill={MIDNIGHT} stroke={GOLD} strokeOpacity="0.25" strokeWidth="1" />
+            <text x="0" y="4" textAnchor="middle" fill={IVORY} fontSize="8" fontWeight="500" opacity="0.8">
+              Trust · Ledger · CCIP
+            </text>
+          </g>
+
+          {/* Topology links */}
+          <path d="M180 54 L180 82 M108 100 L132 100 M228 100 L252 100 M180 118 L180 150" stroke={GOLD} strokeOpacity="0.3" strokeWidth="1" strokeDasharray="3 3" />
+        </svg>
+      </div>
+
+      <div className="absolute -left-2 top-1/4 rounded-lg border border-emerald-500/30 bg-sovereign-midnight/90 px-3 py-2 text-xs shadow-lg backdrop-blur">
+        <span className="font-bold text-emerald-400">A−</span>
+        <span className="ml-1 text-sovereign-ivory/50">L1 health</span>
+      </div>
+      <div className="absolute -right-2 bottom-1/3 rounded-lg border border-sovereign-gold/30 bg-sovereign-midnight/90 px-3 py-2 text-xs shadow-lg backdrop-blur">
+        <span className="font-bold text-sovereign-gold">3</span>
+        <span className="ml-1 text-sovereign-ivory/50">sovereign pillars</span>
+      </div>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/PhilosophyStepGraphic.tsx
+++ b/portal/src/components/corporate/graphics/PhilosophyStepGraphic.tsx
@@ -0,0 +1,46 @@
+const STEP_ART: Record<string, { paths: string; accent: string }> = {
+  Remember: {
+    accent: '#f97316',
+    paths: 'M32 8 C20 8 12 18 12 28 C12 38 20 48 32 52 C44 48 52 38 52 28 C52 18 44 8 32 8 M32 20 v16 M24 28 h16',
+  },
+  Retrieve: {
+    accent: '#fb923c',
+    paths: 'M16 28 L32 12 L48 28 M24 28 v16 h16 v-16',
+  },
+  Restore: {
+    accent: '#fbbf24',
+    paths: 'M12 32 C12 20 20 12 32 12 C44 12 52 20 52 32 M20 32 h24 M32 20 v24',
+  },
+  Rise: {
+    accent: '#f97316',
+    paths: 'M32 48 L16 28 L24 28 L24 12 L40 12 L40 28 L48 28 Z',
+  },
+};
+
+export function PhilosophyStepGraphic({ verb, index }: { verb: string; index: number }) {
+  const art = STEP_ART[verb] ?? STEP_ART.Remember;
+
+  return (
+    <div className="relative mb-4 flex h-16 w-16 items-center justify-center" aria-hidden>
+      <div
+        className="absolute inset-0 rounded-2xl opacity-20"
+        style={{ background: `radial-gradient(circle at 30% 30%, ${art.accent}, transparent 70%)` }}
+      />
+      <svg viewBox="0 0 64 64" className="h-14 w-14" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="4" width="56" height="56" rx="14" fill="#111827" stroke="#374151" strokeWidth="1" />
+        <path
+          d={art.paths}
+          fill="none"
+          stroke={art.accent}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          transform="translate(0 4)"
+        />
+        <text x="32" y="58" textAnchor="middle" fill="#6b7280" fontSize="8" fontWeight="600">
+          {String(index + 1).padStart(2, '0')}
+        </text>
+      </svg>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/PlatformStackGraphic.tsx
+++ b/portal/src/components/corporate/graphics/PlatformStackGraphic.tsx
@@ -0,0 +1,49 @@
+/** Side illustration for platform services — marketplace + orchestration layers. */
+export function PlatformStackGraphic({ className = '' }: { className?: string }) {
+  const layers = [
+    { label: 'Voice & messaging', color: '#fbbf24' },
+    { label: 'Transaction orchestrator', color: '#fb923c' },
+    { label: 'Wallet registry', color: '#f97316' },
+    { label: 'Identity service', color: '#ea580c' },
+    { label: 'Phoenix ledger', color: '#c2410c' },
+  ];
+
+  return (
+    <div className={`relative ${className}`} aria-hidden>
+      <svg viewBox="0 0 280 320" className="h-auto w-full max-w-xs" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="stack-shine" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stopColor="#fff" stopOpacity="0.08" />
+            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        {layers.map((layer, i) => {
+          const y = 24 + i * 52;
+          const width = 200 - i * 12;
+          const x = (280 - width) / 2;
+          return (
+            <g key={layer.label} transform={`translate(${x} ${y})`}>
+              <rect
+                width={width}
+                height={40}
+                rx="8"
+                fill="#111827"
+                stroke={layer.color}
+                strokeOpacity="0.5"
+                strokeWidth="1"
+              />
+              <rect width={width} height={40} rx="8" fill="url(#stack-shine)" />
+              <rect x="0" y="0" width={width} height="3" rx="1.5" fill={layer.color} opacity="0.8" />
+              <text x={width / 2} y="24" textAnchor="middle" fill="#e5e7eb" fontSize="10" fontWeight="500">
+                {layer.label}
+              </text>
+            </g>
+          );
+        })}
+        <text x="140" y="310" textAnchor="middle" fill="#6b7280" fontSize="9">
+          Phoenix marketplace stack
+        </text>
+      </svg>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/ProductCardBanner.tsx
+++ b/portal/src/components/corporate/graphics/ProductCardBanner.tsx
@@ -0,0 +1,33 @@
+const BANNERS: Record<string, string> = {
+  phoenix:
+    'M0 48 L120 48 L120 0 Q90 24 60 8 Q30 24 0 0 Z',
+  'complete-credential':
+    'M0 48 L120 48 L120 0 L96 16 L72 0 L48 20 L24 0 L0 16 Z',
+  studio:
+    'M0 48 L120 48 L120 0 C100 32 80 12 60 28 C40 12 20 32 0 0 Z',
+  blockchain:
+    'M0 48 L120 48 L120 0 L100 12 L80 0 L60 16 L40 0 L20 12 L0 0 Z',
+  identity:
+    'M0 48 L120 48 L120 0 Q60 36 0 0 Z',
+  treasury:
+    'M0 48 L120 48 L120 0 L0 24 Z',
+};
+
+export function ProductCardBanner({ productId }: { productId: string }) {
+  const d = BANNERS[productId] ?? BANNERS.phoenix;
+
+  return (
+    <div className="-mx-6 -mt-6 mb-4 overflow-hidden rounded-t-2xl" aria-hidden>
+      <svg viewBox="0 0 120 48" className="h-12 w-full" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id={`banner-${productId}`} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#D4A64A" stopOpacity="0.35" />
+            <stop offset="100%" stopColor="#8B6A3E" stopOpacity="0.15" />
+          </linearGradient>
+        </defs>
+        <path d={d} fill={`url(#banner-${productId})`} />
+        <path d={d} fill="none" stroke="#D4A64A" strokeOpacity="0.2" strokeWidth="0.5" />
+      </svg>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/SovereignBackdrop.tsx
+++ b/portal/src/components/corporate/graphics/SovereignBackdrop.tsx
@@ -0,0 +1,72 @@
+interface SovereignBackdropProps {
+  variant?: 'grid' | 'mesh' | 'nodes';
+  className?: string;
+}
+
+const GOLD = '#D4A64A';
+const BRONZE = '#8B6A3E';
+const COPPER = '#C56B2C';
+
+/** Decorative full-bleed backgrounds — pointer-events-none, aria-hidden. */
+export function SovereignBackdrop({ variant = 'grid', className = '' }: SovereignBackdropProps) {
+  if (variant === 'mesh') {
+    return (
+      <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
+        <div className="absolute -left-1/4 top-0 h-[480px] w-[480px] rounded-full bg-sovereign-gold/8 blur-3xl" />
+        <div className="absolute -right-1/4 bottom-0 h-[400px] w-[400px] rounded-full bg-sovereign-bronze/6 blur-3xl" />
+        <svg className="absolute inset-0 h-full w-full opacity-[0.06]" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="mesh-dots" width="32" height="32" patternUnits="userSpaceOnUse">
+              <circle cx="2" cy="2" r="1" fill={GOLD} />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#mesh-dots)" />
+        </svg>
+      </div>
+    );
+  }
+
+  if (variant === 'nodes') {
+    return (
+      <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
+        <svg
+          className="absolute inset-0 h-full w-full opacity-20"
+          viewBox="0 0 800 400"
+          preserveAspectRatio="xMidYMid slice"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M80 200 Q200 80 320 200 T560 200 T720 120"
+            fill="none"
+            stroke={GOLD}
+            strokeOpacity="0.4"
+            strokeWidth="1"
+          />
+          <path
+            d="M80 280 Q240 360 400 280 T720 320"
+            fill="none"
+            stroke={BRONZE}
+            strokeOpacity="0.35"
+            strokeWidth="0.75"
+          />
+          <circle cx="320" cy="200" r="6" fill={GOLD} opacity="0.7" />
+          <circle cx="560" cy="200" r="4" fill={COPPER} opacity="0.6" />
+          <circle cx="720" cy="120" r="5" fill={GOLD} opacity="0.65" />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`} aria-hidden>
+      <svg className="absolute inset-0 h-full w-full opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="sovereign-grid" width="48" height="48" patternUnits="userSpaceOnUse">
+            <path d="M 48 0 L 0 0 0 48" fill="none" stroke={GOLD} strokeWidth="0.5" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#sovereign-grid)" />
+      </svg>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/TrustComplianceGraphic.tsx
+++ b/portal/src/components/corporate/graphics/TrustComplianceGraphic.tsx
@@ -0,0 +1,52 @@
+/** Trust / compliance visual for resources CTA column. */
+export function TrustComplianceGraphic({ className = '' }: { className?: string }) {
+  return (
+    <div className={`relative ${className}`} aria-hidden>
+      <svg viewBox="0 0 360 280" className="h-auto w-full" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="shield-fill" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#f97316" stopOpacity="0.25" />
+            <stop offset="100%" stopColor="#fbbf24" stopOpacity="0.05" />
+          </linearGradient>
+        </defs>
+
+        {/* Shield */}
+        <path
+          d="M180 24 L280 64 L280 140 C280 196 230 236 180 256 C130 236 80 196 80 140 L80 64 Z"
+          fill="url(#shield-fill)"
+          stroke="#f97316"
+          strokeOpacity="0.6"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M180 56 L240 80 L240 132 C240 172 210 200 180 212 C150 200 120 172 120 132 L120 80 Z"
+          fill="#111827"
+          stroke="#374151"
+          strokeWidth="1"
+        />
+        <path
+          d="M156 132 L172 148 L204 108"
+          fill="none"
+          stroke="#34d399"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Compliance badges */}
+        {[
+          { x: 48, y: 200, label: 'SOC 2' },
+          { x: 140, y: 228, label: 'GDPR' },
+          { x: 232, y: 200, label: 'eIDAS' },
+        ].map((badge) => (
+          <g key={badge.label} transform={`translate(${badge.x} ${badge.y})`}>
+            <rect x="-28" y="-12" width="56" height="24" rx="12" fill="#1f2937" stroke="#4b5563" strokeWidth="1" />
+            <text x="0" y="4" textAnchor="middle" fill="#fb923c" fontSize="9" fontWeight="700">
+              {badge.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}
--- a/portal/src/components/corporate/graphics/index.ts
+++ b/portal/src/components/corporate/graphics/index.ts
@@ -0,0 +1,6 @@
+export { HeroEcosystemGraphic } from './HeroEcosystemGraphic';
+export { PhilosophyStepGraphic } from './PhilosophyStepGraphic';
+export { PlatformStackGraphic } from './PlatformStackGraphic';
+export { ProductCardBanner } from './ProductCardBanner';
+export { SovereignBackdrop } from './SovereignBackdrop';
+export { TrustComplianceGraphic } from './TrustComplianceGraphic';
--- a/portal/src/components/layout/AppShell.tsx
+++ b/portal/src/components/layout/AppShell.tsx
@@ -21,7 +21,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {

  return (
    <KeyboardShortcutsProvider>
-      <div className="flex min-h-screen flex-col bg-gray-950 text-gray-100 antialiased">
+      <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory antialiased">
        <PortalHeader />
        <PortalBreadcrumbs />
        <div className="flex min-h-0 flex-1">
--- a/portal/src/components/layout/PortalHeader.tsx
+++ b/portal/src/components/layout/PortalHeader.tsx
@@ -1,70 +1,70 @@
-'use client'
+'use client';

-import { Search, Bell, Settings, User, LogOut } from 'lucide-react'
-import Link from 'next/link'
-import { useSession } from 'next-auth/react'
-import { signOut } from 'next-auth/react'
+import { Search, Bell, Settings, User, LogOut } from 'lucide-react';
+import Link from 'next/link';
+import { useSession } from 'next-auth/react';
+import { signOut } from 'next-auth/react';
+
+import { BrandLockup } from '@/components/brand';

 export function PortalHeader() {
-  const { data: session } = useSession()
+  const { data: session } = useSession();

  return (
-    <header className="sticky top-0 z-50 w-full border-b border-gray-800 bg-gray-900/95 backdrop-blur supports-[backdrop-filter]:bg-gray-900/60">
+    <header className="sticky top-0 z-50 w-full border-b border-sovereign-bronze/25 bg-sovereign-midnight/95 backdrop-blur supports-[backdrop-filter]:bg-sovereign-midnight/80">
      <div className="mx-auto flex h-auto min-h-16 w-full max-w-[1920px] flex-wrap items-center gap-3 px-4 py-2 sm:px-6 lg:h-16 lg:flex-nowrap lg:py-0">
        <Link
          href="/"
          className="order-1 flex shrink-0 items-center no-underline hover:opacity-90"
        >
-          <span className="bg-gradient-to-r from-orange-400 to-amber-400 bg-clip-text text-xl font-bold text-transparent">
-            Nexus Console
-          </span>
+          <BrandLockup size="sm" subtitle="Sovereign Console" />
        </Link>

        <div className="order-3 flex min-w-0 flex-1 basis-full items-center lg:order-2 lg:mx-6 lg:max-w-2xl lg:basis-auto">
          <div className="relative w-full">
            <Search
-              className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+              className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-sovereign-bronze"
              aria-hidden
            />
            <input
              type="search"
-              placeholder="Search resources, settings, docs…"
-              aria-label="Search resources and settings"
-              className="w-full rounded-md border border-gray-700 bg-gray-800 py-2 pl-10 pr-4 text-sm text-white placeholder-gray-400 focus:border-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
+              placeholder="Search blocks, transactions, addresses…"
+              aria-label="Search blockchain resources"
+              className="w-full rounded-md border border-sovereign-bronze/30 bg-sovereign-obsidian py-2 pl-10 pr-4 text-sm text-sovereign-ivory placeholder-sovereign-ivory/40 focus:border-sovereign-gold focus:outline-none focus:ring-2 focus:ring-sovereign-gold/30"
            />
          </div>
        </div>

        <nav className="order-2 flex shrink-0 items-center gap-1 sm:gap-2 lg:order-3 lg:ml-auto">
-          <button className="relative p-2 text-gray-400 hover:text-white transition-colors">
+          <button className="relative p-2 text-sovereign-ivory/60 transition-colors hover:text-sovereign-ivory">
            <Bell className="h-5 w-5" />
-            <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-orange-500" />
+            <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-sovereign-copper" />
          </button>
-          
+
          <Link
            href="/settings"
-            className="p-2 text-gray-400 no-underline transition-colors hover:text-white"
+            className="p-2 text-sovereign-ivory/60 no-underline transition-colors hover:text-sovereign-ivory"
          >
            <Settings className="h-5 w-5" />
          </Link>

-          <div className="flex items-center space-x-2 border-l border-gray-700 pl-4">
+          <div className="flex items-center space-x-2 border-l border-sovereign-bronze/25 pl-4">
            <div className="flex items-center space-x-2">
-              <div className="h-8 w-8 rounded-full bg-gradient-to-br from-orange-500 to-yellow-500 flex items-center justify-center">
-                <User className="h-4 w-4 text-white" />
+              <div className="flex h-8 w-8 items-center justify-center rounded-full border border-sovereign-gold/40 bg-sovereign-midnight">
+                <User className="h-4 w-4 text-sovereign-gold" />
              </div>
-              <div className="hidden md:block text-sm">
-                <div className="text-white font-medium">
+              <div className="hidden text-sm md:block">
+                <div className="font-medium text-sovereign-ivory">
                  {session?.user?.name || session?.user?.email || 'User'}
                </div>
-                <div className="text-xs text-gray-400">
+                <div className="text-xs text-sovereign-ivory/50">
                  {session?.user?.role || 'Admin'}
                </div>
              </div>
            </div>
            <button
              onClick={() => signOut()}
-              className="p-2 text-gray-400 hover:text-white transition-colors"
+              className="p-2 text-sovereign-ivory/60 transition-colors hover:text-sovereign-ivory"
              title="Sign out"
            >
              <LogOut className="h-5 w-5" />
@@ -73,6 +73,5 @@ export function PortalHeader() {
        </nav>
      </div>
    </header>
-  )
+  );
 }
-
--- a/portal/src/components/layout/PortalSidebar.tsx
+++ b/portal/src/components/layout/PortalSidebar.tsx
@@ -10,8 +10,8 @@ export function PortalSidebar() {
  const pathname = usePathname()

  return (
-    <aside className="fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 border-r border-gray-800 bg-gray-900 overflow-y-auto">
-      <nav className="p-4 space-y-1">
+    <aside className="fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 overflow-y-auto border-r border-sovereign-bronze/25 bg-sovereign-midnight">
+      <nav className="space-y-1 p-4">
        {primaryNavigation.map((item) => {
          const isActive = pathname === item.href || pathname?.startsWith(item.href + '/')
          return (
@@ -21,8 +21,8 @@ export function PortalSidebar() {
              className={cn(
                'flex items-center space-x-3 rounded-lg px-3 py-2 text-sm font-medium no-underline transition-colors',
                isActive
-                  ? 'bg-orange-500/10 text-orange-500 border border-orange-500/20'
-                  : 'text-gray-400 hover:bg-gray-800 hover:text-white'
+                  ? 'border border-sovereign-gold/25 bg-sovereign-gold/10 text-sovereign-gold'
+                  : 'text-sovereign-ivory/55 hover:bg-sovereign-obsidian hover:text-sovereign-ivory'
              )}
            >
              <item.icon className="h-5 w-5" />
--- a/portal/src/data/institutional-grades.generated.json
+++ b/portal/src/data/institutional-grades.generated.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-11T08:18:45.004140+00:00",
+  "generatedAt": "2026-06-11T09:42:49.998990+00:00",
  "source": "config/institutional-a-plus-readiness.v1.json",
  "rubric": [
    {
--- a/portal/src/lib/brand/tokens.ts
+++ b/portal/src/lib/brand/tokens.ts
@@ -0,0 +1,44 @@
+/** Sovereign institutional palette — Sankofa Nexus visual identity v1 */
+export const brandColors = {
+  obsidian: '#111111',
+  midnight: '#0D1B2A',
+  sovereignGold: '#D4A64A',
+  bronze: '#8B6A3E',
+  signalCopper: '#C56B2C',
+  cloudIvory: '#F5F1E8',
+} as const;
+
+export const brandCssVars = {
+  '--sovereign-obsidian': brandColors.obsidian,
+  '--sovereign-midnight': brandColors.midnight,
+  '--sovereign-gold': brandColors.sovereignGold,
+  '--sovereign-bronze': brandColors.bronze,
+  '--sovereign-copper': brandColors.signalCopper,
+  '--sovereign-ivory': brandColors.cloudIvory,
+} as const;
+
+export type BrandDivision = 'sankofa' | 'phoenix' | 'pantel';
+
+export const divisionMeta = {
+  sankofa: {
+    name: 'Sankofa',
+    tagline: 'Sovereign Technology',
+    description:
+      'Trust infrastructure, governance, institutional memory, and resilient digital continuity for critical systems.',
+    href: 'https://sankofa.nexus',
+  },
+  phoenix: {
+    name: 'Phoenix',
+    tagline: 'Sovereign Cloud Services',
+    description:
+      'Compute, recovery, orchestration, and uptime — cloud layers built for restoration and operational resilience.',
+    href: 'https://phoenix.sankofa.nexus',
+  },
+  pantel: {
+    name: 'PanTel',
+    tagline: 'Sovereign Telecommunications',
+    description:
+      'Secure connectivity, signal propagation, and distributed network access across sovereign edge infrastructure.',
+    href: 'https://portal.sankofa.nexus',
+  },
+} as const;
--- a/portal/src/lib/corporate-site-data.ts
+++ b/portal/src/lib/corporate-site-data.ts
@@ -49,6 +49,7 @@ export interface SolutionVertical {
 export const ECOSYSTEM_SIGN_IN_PATH = '/api/auth/signin?callbackUrl=/dashboard';

 export const corporateNav: CorporateNavItem[] = [
+  { label: 'Ecosystem', href: '#ecosystem' },
  { label: 'Products', href: '#products' },
  { label: 'Services', href: '#services' },
  { label: 'Solutions', href: '#solutions' },
--- a/portal/tailwind.config.js
+++ b/portal/tailwind.config.js
@@ -8,21 +8,31 @@ module.exports = {
  theme: {
    extend: {
      colors: {
-        primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
+        sovereign: {
+          obsidian: '#111111',
+          midnight: '#0D1B2A',
+          gold: '#D4A64A',
+          bronze: '#8B6A3E',
+          copper: '#C56B2C',
+          ivory: '#F5F1E8',
        },
+        primary: {
+          50: '#faf6ed',
+          100: '#f5eed9',
+          200: '#e8d4a8',
+          300: '#d4a64a',
+          400: '#c9923a',
+          500: '#8b6a3e',
+          600: '#6b5230',
+          700: '#4a3821',
+          800: '#2a2012',
+          900: '#111111',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-ibm-plex)', 'IBM Plex Sans', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [],
 };
-