Meshal Theme Prompt

Source: meshal-theme-prompt.md (ingested 2026-04-15)

meshal.ai — Implementation Prompt & Design System

Paste this file as context when working on meshal.ai in your IDE or CLI. It contains: implementation intent, design token definitions, component patterns, and the ninja character system.

1 · Implementation Intent

You are implementing the frontend for meshal.ai, the personal portfolio of Meshal Alawein. The site is a portfolio + technical CV hybrid built in React + Vite + TypeScript + Tailwind CSS.

Primary goal: Every design decision should communicate technical precision and editorial calm. The aesthetic is a dark, near-black base with a single warm gold accent, subtle ambient background effects, and Newsreader serif for content. Nothing should feel loud or decorative for its own sake.

What this is not: A SaaS landing page. No hero gradients on the name. No glowing colored pills everywhere. No sections competing for attention with different accent colors.

2 · Design Token System

Define these as CSS custom properties on :root. All components must reference tokens — no raw hex values in component code.

2.1 Color Tokens

:root {
  /* ── Backgrounds (darkest → lightest) ── */
  --color-bg-base:      #0d0c12;   /* page background */
  --color-bg-raised:    #131220;   /* cards, panels */
  --color-bg-elevated:  #1e1c2e;   /* hover states, active */

  /* ── Borders ── */
  --color-border-subtle:  #28273a; /* default card borders */
  --color-border-default: #3c3a52; /* hover borders */

  /* ── Gold (primary accent — ALL interactive chrome) ── */
  --color-gold:         #c9a55a;
  --color-gold-dim:     #a08040;
  --color-gold-muted:   rgba(201, 165, 90, 0.09);   /* bg tint */
  --color-gold-border:  rgba(201, 165, 90, 0.28);   /* border tint */

  /* ── Text ── */
  --color-text-primary:   #f0ece2;  /* headings, primary content */
  --color-text-secondary: #878294;  /* body copy, descriptions */
  --color-text-tertiary:  #4c4960;  /* labels, metadata, dimmed */

  /* ── Semantic status (minimal use) ── */
  --color-status-ok:  #00c870;  /* availability dot, tagline cursor */

  /* ── Category accents (2px borders + 5px dots ONLY — not text) ── */
  --color-cat-a: rgba(74,  136, 155, 0.55);  /* teal   — AI/agent */
  --color-cat-b: rgba(138,  80, 108, 0.55);  /* mauve  — ML/research */
  --color-cat-c: rgba(138, 122,  56, 0.55);  /* amber  — product */
  --color-cat-d: rgba( 74, 120,  90, 0.55);  /* sage   — delivery */

  /* ── Ninja logo colors (fixed — do not theme these) ── */
  --ninja-body:    #1a1a2e;
  --ninja-band:    #ff00ff;
  --ninja-eye:     #00f0ff;
  --ninja-blade:   #f0f000;
}

2.2 Typography Tokens

:root {
  --font-sans:  'DM Sans',       'Helvetica Neue', sans-serif;
  --font-serif: 'Newsreader',    Georgia,           serif;
  --font-mono:  'JetBrains Mono','Courier New',     monospace;

  /* ── Scale ── */
  --text-xs:   0.625rem;   /* 10px — nav links, tags, labels */
  --text-sm:   0.6875rem;  /* 11px — secondary labels */
  --text-base: 0.75rem;    /* 12px — body small, descriptions */
  --text-md:   0.875rem;   /* 14px — body default */
  --text-lg:   1rem;       /* 16px — body large, bios */
  --text-xl:   1.125rem;   /* 18px — card titles */
  --text-2xl:  clamp(1.75rem, 3.5vw, 2.625rem); /* section titles */
  --text-hero: clamp(3rem,  8vw,   5.5rem);     /* hero name */

  /* ── Line heights ── */
  --leading-tight:  0.95;
  --leading-snug:   1.15;
  --leading-normal: 1.6;
  --leading-relaxed:1.88;

  /* ── Letter spacing ── */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.1em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;
}

2.3 Spacing & Radius Tokens

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-18: 72px;

  --radius-sm:  3px;   /* buttons */
  --radius-md:  5px;   /* cards, inputs */
  --radius-lg:  7px;   /* panels, larger cards */
  --radius-xl:  10px;  /* ninja panel */
  --radius-pill:99px;  /* tags, status badges */

  --max-w-content: 1200px;
  --nav-h:         54px;
}

2.4 Effect Tokens

:root {
  --shadow-gold-sm:  0 0 12px rgba(201, 165, 90, 0.12);
  --shadow-gold-md:  0 0 24px rgba(201, 165, 90, 0.18);
  --glow-ninja-logo: drop-shadow(0 0 7px rgba(0, 240, 255, 0.22));
  --blur-nav:        blur(20px) saturate(1.4);
  --transition-fast: all 0.15s ease;
}

3 · Theme Variants

The site supports a single base theme plus two alternate themes switchable via data-theme on <html>. All variants use the same token names — only values change.

3.1 `data-theme="default"` — Gold/Dark (production)

As defined above. Gold primary, Newsreader serif body, near-black base.

3.2 `data-theme="monochrome"` — Platinum

[data-theme="monochrome"] {
  --color-gold:        #d0ccc4;
  --color-gold-dim:    #a0a09a;
  --color-gold-muted:  rgba(208, 204, 196, 0.08);
  --color-gold-border: rgba(208, 204, 196, 0.22);
  --color-bg-base:     #0e0e10;
  --color-bg-raised:   #141416;
  --color-bg-elevated: #1e1e22;
  --color-border-subtle:  #262628;
  --color-border-default: #3a3a3e;
  --color-text-primary:   #f4f0ec;
  --color-text-secondary: #808080;
  --color-text-tertiary:  #484848;
}

3.3 `data-theme="cold"` — Cyan/Dark

[data-theme="cold"] {
  --color-gold:        #00c8d4;
  --color-gold-dim:    #008a94;
  --color-gold-muted:  rgba(0, 200, 212, 0.08);
  --color-gold-border: rgba(0, 200, 212, 0.25);
  --color-bg-base:     #080d12;
  --color-bg-raised:   #0e141c;
  --color-bg-elevated: #181f2a;
  --color-border-subtle:  #1a2030;
  --color-border-default: #283040;
  --color-text-primary:   #e4eef4;
  --color-text-secondary: #7a8898;
  --color-text-tertiary:  #485060;
}

4 · Component Patterns

Button system (three tiers, gold-only)

// Primary — filled gold
<button className="btn btn-fill">View Project Index</button>

// Secondary — gold outline
<button className="btn btn-line">Explore Services</button>

// Tertiary — neutral ghost
<button className="btn btn-ghost">Start a Conversation</button>

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  transition: var(--transition-fast);
}
.btn-fill  { color: var(--color-bg-base); background: var(--color-gold); border-color: var(--color-gold); }
.btn-line  { color: var(--color-gold); background: transparent; border-color: var(--color-gold-border); }
.btn-ghost { color: var(--color-text-secondary); background: transparent; border-color: var(--color-border-subtle); }

Section anatomy

Every section follows this structure:

<section id="slug" className="csec">
  <p className="s-tag">01 · Label</p>          {/* mono, gold, uppercase */}
  <h2 className="s-title">Heading<br /><em>italic subline</em></h2>
  {/* content */}
</section>

Card hover pattern

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
}
.card:hover {
  border-color: var(--color-gold-border);
  transform: translateY(-2px);
}

5 · Ninja Character System

The nav logo and arena ninjas share the same 8×12 pixel grid. Characters differ only in their color map. The pixel value keys are fixed:

| Value | Semantic role | |---|---| | 0 | transparent | | 1 | body | | 2 | headband / accent band | | 3 | eyes | | 4 | katana / weapon |

The arena uses two opposing ninjas: A faces right (original grid), B faces left (mirrored). Choose one character per slot from the table below, or use the defaults.

5.1 Character Roster

| ID | Name | Headband [2] | Eyes [3] | Blade [4] | Body [1] | Personality | |---|---|---|---|---|---|---| | shogun | Shogun (default logo) | #ff00ff magenta | #00f0ff cyan | #f0f000 yellow | #1a1a2e | Balanced. The original. Named after a math concept. | | crimson | Crimson | #cc1500 blood red | #ff3535 flame | #ff7a00 molten | #1e1c32 | Aggressive. Deploys pain to prod. | | void | Void | #6600bb purple | #99ff28 acid green | #44aaff ice | #141220 | Cold and calculating. Returns errors, doesn't throw. | | gold | Aurum | #c9a55a gold | #f0e080 warm | #e8e8e8 silver | #1a1620 | Morphism-aligned. Governance-first. | | ghost | Ghost | #888899 slate | #ffffff white | #aabbdd pale blue | #28283a | Silent. No banter. Just converges. | | oni | Oni | #00c870 green | #ff4488 pink | #ffaa00 amber | #1a0e14 | Chaotic good. Prefers dark mode. Light attracts bugs. | | rust | Rust | #dd6622 rust | #ffcc44 yellow | #cc3344 crimson | #1c1410 | Memory-safe. Owns everything by move. | | teal | Ghost Protocol | #22bbaa teal | #88ffee mint | #ffffff white | #0e1818 | Recon only. Never fights first. |

5.2 Usage

// In your arena config — pick two characters
const arenaA: NinjaCharacter = NINJA_CHARS['crimson'];  // faces right
const arenaB: NinjaCharacter = NINJA_CHARS['void'];     // faces left (mirrored)

// Nav logo is always 'shogun' — do not change

// types
type NinjaColors = { body: string; band: string; eyes: string; blade: string };
type NinjaCharacter = { id: string; name: string; colors: NinjaColors };

const NINJA_CHARS: Record<string, NinjaCharacter> = {
  shogun:  { id:'shogun',  name:'Shogun',         colors:{ body:'#1a1a2e', band:'#ff00ff', eyes:'#00f0ff', blade:'#f0f000' }},
  crimson: { id:'crimson', name:'Crimson',         colors:{ body:'#1e1c32', band:'#cc1500', eyes:'#ff3535', blade:'#ff7a00' }},
  void:    { id:'void',    name:'Void',            colors:{ body:'#141220', band:'#6600bb', eyes:'#99ff28', blade:'#44aaff' }},
  gold:    { id:'gold',    name:'Aurum',           colors:{ body:'#1a1620', band:'#c9a55a', eyes:'#f0e080', blade:'#e8e8e8' }},
  ghost:   { id:'ghost',   name:'Ghost',           colors:{ body:'#28283a', band:'#888899', eyes:'#ffffff', blade:'#aabbdd' }},
  oni:     { id:'oni',     name:'Oni',             colors:{ body:'#1a0e14', band:'#00c870', eyes:'#ff4488', blade:'#ffaa00' }},
  rust:    { id:'rust',    name:'Rust',            colors:{ body:'#1c1410', band:'#dd6622', eyes:'#ffcc44', blade:'#cc3344' }},
  teal:    { id:'teal',    name:'Ghost Protocol',  colors:{ body:'#0e1818', band:'#22bbaa', eyes:'#88ffee', blade:'#ffffff' }},
};

5.3 Banter personality guide

Each character has a default banter style. When implementing the speech bubble system, pull lines from the character's pool:

| Character | Tone | Sample lines | |---|---|---| | Shogun | Dry / precise | "I converge. You diverge." · "DFT converged. ur move." | | Crimson | Aggressive / hot | "deploying pain to prod." · "Skill issue. (╯°□°）╯" | | Void | Cold / calculated | "try { win() } catch(e) {}" · "undefined behavior incoming" | | Aurum | Formal / governance | "READ → VERIFY → EXECUTE." · "κ < 1. you lose." | | Ghost | Silent | (no speech bubbles — just floats) | | Oni | Chaotic | "light attracts bugs." · "¯\\_(ツ)_/¯" | | Rust | Ownership metaphors | "I own this fight. By move." · "borrow checker says no." | | Ghost Protocol | Tactical | "recon complete." · "exfiltrating." |

6 · Page Structure (canonical routes)

| Route | Title | Sections | |---|---|---| | / | Home | Hero · Background · Experience · Capabilities · Selected Work · Services · Work with Me · Contact | | /projects | Projects | Index header · stats · project grid · CTA to services | | /services | AI Systems Services | 6-card service grid · CTA to engagements | | /engagements | Engagement Models | 3-tier pricing · FAQ · custom scope CTA | | /cv | CV | Summary · Experience timeline · Education · Technical Skills · Publications |

The homepage consolidates all pages into one scrollable document. Sub-pages (/projects, /services, /engagements, /cv) are standalone deep-links for sharing and direct access. They should share nav, footer, and all design tokens. Do not duplicate content — each sub-page should expand its section with more detail than the homepage snapshot.

7 · Background System

Three layered canvases, all pointer-events:none, stacked under z-index:3 content:

| Layer | z-index | Opacity | Description | |---|---|---|---| | city-bg | 0 | 0.065 | Procedural Tokyo skyline: 3 building depth layers, twinkling amber windows, moon, horizon glow | | bg-rain | 1 | 0.10 | Sparse gold-dominant code rain (λ Σ ∫ ∂ ∇ …) with slow large ambient floaters rising upward | | (CSS) | 2 | — | body::before film grain (SVG feTurbulence, 0.028 opacity) + body::after edge vignette |

The city background uses pixel-art image-rendering:pixelated. Window flicker is driven by per-window tick counters, not CSS animations.

8 · Copy Rules (enforced in all components)

Section number prefix: 01 ·, 02 · etc — mono, gold, uppercase
Section titles: Newsreader 300, sentence case, never all-caps
All labels, tags, metadata: JetBrains Mono
Avoid: "passionate about", "leveraging", "innovative", "I'm excited to"
Tagline rotation prefix: // in --color-text-tertiary, text in --color-status-ok
Inline comments (CV timeline notes): // lowercase. dry. in --color-text-tertiary
Hero bio: Newsreader italic. Max 2 sentences. First-person. No fluff.

Meshal Theme Prompt

Meshal Theme Prompt

meshal.ai — Implementation Prompt & Design System

1 · Implementation Intent

2 · Design Token System

2.1 Color Tokens

2.2 Typography Tokens

2.3 Spacing & Radius Tokens

2.4 Effect Tokens

3 · Theme Variants

3.1 data-theme="default" — Gold/Dark (production)

3.2 data-theme="monochrome" — Platinum

3.3 data-theme="cold" — Cyan/Dark

4 · Component Patterns

Button system (three tiers, gold-only)

Section anatomy

Card hover pattern

5 · Ninja Character System

5.1 Character Roster

5.2 Usage

5.3 Banter personality guide

6 · Page Structure (canonical routes)

7 · Background System

8 · Copy Rules (enforced in all components)

3.1 `data-theme="default"` — Gold/Dark (production)

3.2 `data-theme="monochrome"` — Platinum

3.3 `data-theme="cold"` — Cyan/Dark