AI memory: Golden Portfolios - May 13, 2026

  1. Overview
  2. AI
  3. AI Memory Notes
  4. AI memory: Golden Portfolios - May 13, 2026

May 14, 2026 updates

This is the complete, master documentation for the Golden Portfolios project. Use this to update your Open Brain AI memory to ensure 100% consistency in all future design and development phases.

1. Brand Identity & Visual Language

  • Core Aesthetic: "Premium Editorial." The site should feel like a high-end luxury magazine or a top-tier consultancy firm (e.g., McKinsey/MoMA).

  • Palette:

    • Primary Backgrounds: Deep Zinc/Black (#0a0a0a, #121212) for dark mode and clean White (#ffffff) for light mode profiles.

    • The Golden Standard: Unified brand gold #da8d0f. This specific deep, saturated gold is the only color used for branding, verified badges, icons, and interactive highlights to avoid a "neon" or cheap look.

  • Typography: High-contrast Serif (e.g., Georgia or Times New Roman) for headers to convey authority, and modern Sans-serif for UI elements and body text to ensure readability.

  • Shape Language: High border-radius for a modern feel (Pill-style rounded-full for search/buttons and rounded-3xl for image cards).

2. Homepage & Discovery Strategy

  • Hero Section: A dark-themed, authoritative area with the headline "Discover Exceptional Professional Portfolios".

  • Search Hierarchy: A single, large white pill-style search bar with a category dropdown and a high-contrast search button.

  • Navigation: Secondary CTAs like "Apply for Inclusion" are placed in the header to keep the hero section airy and focused.

  • Tab Behavior: Every professional profile card must open in a new browser tab (target="_blank") to allow users to compare multiple professionals without losing their search context.

3. Single-Page Profile Architecture

Profiles are designed as comprehensive destinations following a specific "Editorial Spine" (center-aligned vertical axis):

  1. Hero Header: Displays identity with a high-quality portrait (rounded-3xl), a "Verified" badge in brand gold, and a grayscale location map.

  2. Dual-Action Logic: Two prominent primary buttons: "Book Consultation" (Solid Black) and "View Work" (Ghost/Outline).

  3. Expertise Bar: Pill-style tags for immediate scannability of core skills placed above the narrative.

  4. The Professional Narrative: A centered biography titled "The Professional Narrative" in italicized serif small-caps.

  5. Services Offered: A 2-column centered grid listing specific deliverables with brand-gold checkmarks to act as a "Menu of Value".

  6. Selected Portfolio: A 3-column grid of work samples (rounded-2xl).

  7. Closing the Loop: A final centered CTA section at the bottom: "Ready to collaborate with [Name]?" with a "Book Consultation" button to prevent unnecessary scrolling.

4. Portfolio "Spacious Law" & Interaction

  • Contextual Overlays: Images feature dark charcoal overlays (bg-zinc-900/80) that reveal the "Project Brief" (Challenge/Result) on hover or via an info icon.

  • Vertical Rhythm: Overlays must use a Spacious Stack:

    • 24px gap between blocks (Challenge vs. Result).

    • 6px gap between the gold labels and their descriptions.

  • Metric Animations: Key results (e.g., 40% increase) must animate (count-up effect) when the overlay is revealed to draw the eye to tangible impact.

5. Scaling & Design Principles

  • Spine Alignment: All major headers (Narrative, Services, Portfolio) must be Center-Aligned for a balanced, high-end feel.

  • Whitespace: Prioritize "air" over features; use generous vertical padding (py-24 to py-32) between sections.

  • Simplicity: Eliminate redundant buttons and keep containers at a readable max-width (e.g., max-w-2xl for bios).

Master Documentation: Golden Portfolios Project

1. Brand Identity & Visual Language

  • Core Aesthetic: "Premium Editorial." A high-end, luxury feel using Dark Mode and ample whitespace.

  • Palette: Primary Zinc/Black (#0a0a0a, #121212) with Brand Gold (#D4AF37) for accents, verified badges, and primary actions.

  • Typography: High-contrast Serif for headers (authority/elegance) and modern Sans-serif for UI elements (readability).

  • Shape Language: High border-radius (Pill-style rounded-full for search/buttons and rounded-3xl for image cards).

2. Homepage & Navigation

  • Search Hierarchy: A single pill-style primary search bar. On mobile, this stacks vertically with a "Bottom Sheet" for category selection.

  • Secondary CTAs: Actions like "Explore" or "Apply" are moved to the Nav Bar as ghost buttons to keep the Hero section focused and airy.

  • Tab Behavior: To allow users to compare talent easily, all profile links must open in a new browser tab (target="_blank").

3. Single-Page Profile Architecture

  • The Hero Header: Includes the professional's name, title, grayscale map, and the correctly mapped portrait.

  • Dual-Action Logic: Two primary buttons: "Book Consultation" (Solid Black) and "View Work" (Ghost/Outline).

  • The "Spacious" Narrative: The bio and skill tags are moved below the hero into a dedicated section to reduce header clutter and improve scanning.

  • Internal Navigation: The "View Work" button acts as an anchor link that smooth-scrolls the user down to the portfolio grid on the same page.

4. Portfolio & "The Space Law"

  • Visual Proof: A 3-column grid of labeled work samples (rounded-2xl).

  • Contextual Overlays: Each image features a dark charcoal overlay (bg-zinc-900/80) that reveals a "Project Brief" on hover (or via an info icon on mobile).

  • Vertical Rhythm (The Fix): To prevent text collisions, overlays must follow a Spacious Stack:

    • 24px (gap-y-6) between Title, Challenge, and Result blocks.

    • 6px (gap-y-1.5) between Gold Labels (CHALLENGE/RESULT) and their descriptions.

  • Metric Highlighting: Key results (e.g., 40% increase) must be bolded to provide 100% practical clarity for visitors.

5. Scaling & Design Principles

  • Simplicity Over Features: If a section feels busy, remove borders and increase whitespace (py-24 between major sections).

  • Redundancy Check: Eliminate secondary floating buttons if the primary action is already visible in the header.

  • Comparison Mode: Always prioritize a layout that allows recruiters to flip between tabs and compare the "Narrative" and "Results" of different experts.

This is a comprehensive Master Documentation Memory for your "Golden Portfolios" project. It captures every design decision, strategic pivot, and visual rule we’ve established to ensure your AI collaborator (and your code) maintains a consistent, premium, and practical aesthetic.

## 1. Brand Identity & Visual Language

  • Core Aesthetic: "Premium Editorial." A blend of high-end luxury (Dark Mode, Gold accents) and clean functionality (Whitespace, Minimalist components).

  • Color Palette:

    • Primary: Deep Zinc/Black (#0a0a0a, #121212).

    • Accent: Brand Gold (#D4AF37) for highlights, "Verified" status, and primary calls to action.

    • Secondary: Muted Gray (text-zinc-400/500) for secondary text and descriptions.

  • Typography:

    • Headers: High-contrast Serif (e.g., Playfair Display) for names and section titles to convey authority and elegance.

    • Body/UI: Modern Sans-serif (e.g., Urbanist or Inter) for search fields, buttons, and descriptions to ensure readability.

  • Shape Language: "Pill-style" and rounded. Everything from search bars to buttons uses a high border-radius (rounded-2xl or rounded-full).

## 2. Homepage & Hero Section

  • Search Hierarchy: The search bar is the single primary action.

    • Mobile: Stacked vertically (Input -> Dropdown -> Button) with the "Explore" and "Apply" buttons removed to avoid clutter.

    • Desktop: A streamlined horizontal "Pill" search.

  • Secondary CTAs: "Explore Portfolios" and "Apply for Inclusion" are moved to the Navigation Bar as ghost buttons to keep the Hero section focused and "airy."

  • Category Dropdown: * Desktop: Features tiny muted versions of category icons for visual recognition.

    • Mobile: Transforms into a "Bottom Sheet" (sliding up from the bottom) for better thumb-reachability.

## 3. Feature & Trust Sections

  • Why Golden Portfolios: Uses a 3-column grid with rounded-square orange icons.

    • Polish: Added "Spotlight" hover effects and subtle "lifts" on cards to make the site feel interactive and expensive.

  • Final CTA (Bottom): A high-contrast dark charcoal card on a white background. It uses the "Join the Directory" pill as a micro-header to create a "VIP club" feel.

## 4. Professional Profile Pages (The "Standard")

  • Structure: Full separate pages (not modals) for better SEO and comparison.

  • The Header:

    • Portrait: Large vertical image with rounded-3xl and a floating "Verified" badge.

    • Layout: Two-column split (Portrait left, Stats/Contact right).

    • Map: Minimalist grayscale (no Google Map colors) to maintain the dark/gold theme.

    • Actions: "Book Consultation" (Primary Black Pill) and "View Portfolio" (Secondary Ghost Pill) sit side-by-side.

  • Body Content (Philosophy & Services):

    • Philosophy: Uses gold icons (Leaf, Sun, Award) to break up text and convey a "methodology."

    • Services: A clean 2-column list with gold checkmarks.

    • Whitespace: Generous vertical padding (py-24) between sections to keep the "Editorial" feel.

## 5. Design Principles for Scaling

  1. Eliminate Redundancy: If a button is in the Nav, it shouldn't be floating in the middle of the page unless it’s the only goal of that section.

  2. Visual Weight: Solid backgrounds = Primary. Ghost/Outline = Secondary. Plain text = Tertiary.

  3. Global Consistency: Use the rounded-3xl radius and the gold/zinc color scheme on every new page created.

  4. Practicality First: On mobile, prioritize "The Thumb Zone" (Bottom Sheet dropdowns, centered buttons, reduced text density).

Memory Note for AI: When generating code or design for Golden Portfolios, always prioritize "Simplicity" over "Features." If a section feels busy, remove borders, mute the text colors, or increase the whitespace. The goal is to make the user feel like they are in a high-end art gallery, not a crowded marketplace.