nezam-token-matched-dummy-renderer

skill_id	token-matched-dummy-renderer
name	nezam-Token-Matched Dummy Renderer
tier	2
description	Generates locale-aware dummy content (copy, logos, illustrations) that picks up the live --ds-* token theme. Output adapts color, radius, and typography to whichever DESIGN.md profile is active.
version	1.0.0
updated	"2026-05-28T00:00:00.000Z"
changelog	["1.0.0 — Initial release. Backs the Design Hub preview pane content layer."]
references	["DESIGN.md",".cursor/design/references/masri-design-assets/",".cursor/design/references/typeui-main/"]
breaking_changes	false

Token-Matched Dummy Renderer

Charter

Produce realistic dummy content for wireframes that visually inherits the current theme. Color, radius, type, and motion all come from the active token set — never hardcoded.

What the dummy set provides

Slot	Latin (en-US)	Masri (ar-EG)
names[]	"Alex Rivera", "Priya Nair"	"سارة محمود", "أحمد فاروق"
companies[]	"Acme Corp", "Globex"	"شركة النيل", "مصر التقنية"
prices[]	"$19" / "$79"	"٤٩٠ ج.م" / "١٢٩٠ ج.م"
headings[]	"Build faster. Ship smarter."	"ابني أسرع. اطلق بثقة."
dates[]	"Mar 15, 2026"	"١٥ مارس ٢٠٢٦" / "٢٧ رمضان ١٤٤٧"
chartData[]	numeric series	identical

Token-driven SVG primitives

Every illustration (IllusHero, IllusFeatures, IllusDashboard, IllusChart, IllusAvatar, IllusProduct, IllusEmpty) takes a brand prop and computes shades inline:

export function IllusHero({ brand }: { brand: string }) {
  return (
    <svg viewBox="0 0 400 300">
      <rect fill={`${brand}15`} /* 15% opacity */ />
      <rect fill={`${brand}40`} />
      <rect fill={brand} />
    </svg>
  )
}

brand MUST be passed via var(--ds-accent) (resolved at parent), never as a hardcoded hex.

Wireframe → dummy slot binding

Block	Dummy slot consumed
Hero_Centered	headings[0], descriptions[1], primary CTA label
Content_Features	features[0..5] (title + desc) + per-card icon
Content_Logos	real PNGs from /public/logos/*.png (no text labels)
Content_CTA	static "Ready to launch your project?" + button label
Nav_Footer	column titles ('Product', 'Company', 'Resources', 'Legal')

Locale switch

const dummy = locale === 'ar-EG' ? DUMMY_MASRI : DUMMY_LATIN

DUMMY_MASRI lives in .cursor/design/references/masri-design-assets/ (currently a manifest — payload pending Phase 03 curation).

Anti-patterns

• ❌ Hardcoding a color in an illustration SVG (use brand prop + suffix alpha)
• ❌ Using Latin numerals in Masri price slots when region = EG
• ❌ Showing "Lorem ipsum" — dummy must be production-realistic
• ❌ Rendering company logo names as text fallback (use the actual logo PNG; if missing, render a neutral placeholder card)

Outputs

• src/components/preview/dummy-content.tsx (shipped)
• src/components/preview/dummy-content-masri.tsx (Phase 03 curation)
• public/logos/*.png (real assets, no text)

Validation

pnpm run check:tokens
pnpm --filter design-hub test -- --testPathPattern=dummy