Master Prompt — Brand Realignment for abubakarriaz.com.pk

How to use this file: Drop it into the portfolio site repo and prompt: “Use the impeccable design skill to execute the brand realignment described in this file. Audit the current site first, propose the token + component plan, then work through the tasks in order — verifying every change in both light and dark themes.” This brief is self-contained — everything the design work needs (brand system, decisions, constraints, tasks, definition of done) is below. No external files required.

Mission

Strip the generic, AI-generated look off the portfolio and rebuild its visual layer on the owner’s real brand system. The site should read as deliberately designed — a credible technical-authority hub for an Azure / DevOps / cloud-native engineer — not a default template.

The “AI slop” to remove (concrete tells on the current site):

Decisions already made (do not re-litigate)

  1. Brand-light is the DEFAULT theme; a brand-derived dark variant is kept. The existing dark/light toggle stays — re-skin both themes in brand colors, and flip the default from dark to light.
  2. Re-spec to brand, cut the slop. Keep the useful structure (hero, skills, footer, mobile, a11y) and rebuild it on the brand system. Drop the gradient clip-text, the heavy scroll-stagger, all emoji, Inter, and the Azure palette.

The brand system (single source of truth)

Define these once as CSS custom properties and reference them everywhere. Brand-light = :root (default); brand-dark = [data-theme="dark"]. Light values are canonical (from the brand guidelines); dark values are derived to keep the same hues legible on Midnight — verify their contrast and tune if needed.

Color + type tokens

/* ========== BRAND LIGHT (default) ========== */
:root {
  /* Surfaces */
  --color-bg-primary:   #FFFFFF;   /* White — page background */
  --color-bg-surface:   #F4F7FC;   /* Mist — section bands */
  --color-bg-elevated:  #EEF3FB;   /* Frost — cards, raised surfaces */
  --color-border:       #E3EAF6;   /* Border */

  /* Text */
  --color-text-primary:   #10306B; /* Navy — headings */
  --color-text-body:      #33415C; /* Ink — body copy */
  --color-text-secondary: #5A6B8C; /* Slate — metadata, captions */

  /* Brand accents */
  --color-accent:        #1550B8;  /* Royal — links, primary buttons */
  --color-accent-hover:  #10306B;  /* Navy — button/link hover */
  --color-accent-bright: #3D8BF2;  /* Sky — highlights, gradient top */
  --color-accent-orange: #F5871F;  /* Orange — eyebrow, signature period; ≤10% of any view */

  /* Type */
  --font-sans:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --fw-body:     400;   /* body 15–16px */
  --fw-medium:   500;   /* emphasis / secondary body */
  --fw-label:    600;   /* labels */
  --fw-heading:  700;   /* headings */
  --fw-display:  800;   /* display / wordmarks */
  --leading-body: 1.7;

  /* Spacing scale (4px base) */
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem;  --space-xl: 2rem;   --space-2xl: 3rem; --space-3xl: 4rem;

  /* Shape + depth */
  --radius-card: 20px;
  --radius-sm:   8px;
  --radius-full: 9999px;
  --shadow-card: 0 8px 30px rgba(16,48,107,.08);

  /* Brand gradients */
  --gradient-mark: linear-gradient(135deg, #3D8BF2, #1550B8);
  --gradient-hero: linear-gradient(160deg, #4D95F5, #2568D6 55%, #123C8F);
  /* + a soft orange radial glow layered over the hero at low opacity (stays within the ≤10% budget) */

  --transition-base: 250ms ease;
}

/* ========== BRAND DARK (derived variant) ========== */
[data-theme="dark"] {
  --color-bg-primary:   #0B1526;   /* Midnight */
  --color-bg-surface:   #101E38;   /* derived */
  --color-bg-elevated:  #15264A;   /* derived */
  --color-border:       #24365C;   /* derived */

  --color-text-primary:   #EEF3FB; /* Frost */
  --color-text-body:      #C6D2E8; /* derived */
  --color-text-secondary: #8DA0C4; /* derived */

  --color-accent:        #3D8BF2;  /* Sky reads better than Royal on Midnight */
  --color-accent-hover:  #6FA9F6;  /* derived lighter */
  --color-accent-bright: #4D95F5;
  --color-accent-orange: #F5871F;

  --shadow-card: 0 8px 30px rgba(0,0,0,.35);
}

Typography scale (Poppins)

--text-display: clamp(2.5rem, 5vw + 1rem, 4.25rem); /* hero headline, fw 800 */
--text-h1:      clamp(2rem, 3vw + .5rem, 3rem);      /* fw 700 */
--text-h2:      clamp(1.5rem, 2vw + .5rem, 2.25rem); /* fw 700 */
--text-h3:      clamp(1.125rem, 1.5vw + .25rem, 1.5rem); /* fw 600 */
--text-body:    1rem;       /* 16px, line-height 1.7, fw 400/500 */
--text-small:   0.875rem;   /* 14px */
--text-eyebrow: 0.75rem;    /* 12px — uppercase, +2.5px tracking, orange, fw 600 */

Signature components

Hard rules (non-negotiable)

Tech constraints

Current site inventory (what exists to work with)

The work — ordered tasks (each with acceptance criteria)

Do them in this order. Task 1 is the keystone — every later task references the migrated tokens.

1 · Brand token migration (MIT — do first)

2 · De-slop pass

3 · Hero, on brand

4 · Skills + section headers

5 · Footer + full-site brand QA

Definition of Done

Guardrails