anwar-pi-website/brand-spec.md

أنور بي آي (AnwarPi) — Brand specification

:root {
  --bg: oklch(16% 0.03 225);      /* deep blue-black canvas */
  --surface: oklch(22% 0.04 220); /* raised blue-black cards */
  --fg: oklch(96% 0.015 210);     /* cool white, matching the beam highlight */
  --muted: oklch(74% 0.03 215);   /* readable cool gray-blue */
  --border: oklch(36% 0.05 215);  /* visible blue-gray hairlines */
  --accent: oklch(78% 0.17 190);  /* vivid cyan-teal action color */
  --font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

• The logo remains the anchor: a black field and silver-white beams, now placed in a cool blue-black environment rather than an all-gray page.
• The mark (assets/anwarpi-logo.jpg) is a light-ray "A": bright near-white at its base fading to dim gray at the apex — mirrored by the WebGL background (rising beams, brighter toward the bottom).
• Dark-first layouts: cool-white text on blue-black, clearly separated surfaces, and visible blue-gray rules.
• The single accent is cyan-teal: primary controls gain an unmistakable action color while white remains reserved for content and the logo beams.
• Inverted panels (demo strips, membership block) flip to --fg background with --surface text; scrims dim with black, never white.
• Latin technical terms and numerics are directionally isolated with bdi.
• Motion layer is shared: assets/anwarpi.css + assets/anwarpi.js (WebGL beam field, IntersectionObserver reveals, light-sweep hovers). Both respect prefers-reduced-motion; append ?static to disable animation for captures.

أنور بي آي هو نظام داكن واضح: خلفية زرقاء سوداء، وأشعة فضية من الشعار، ولمسة سماوية تركوازية توجه العين نحو الأفعال المهمة دون ضوضاء.