akash_tyagi___style_reference:
  info: "> midnight gallery wall with hot pink markers"

  theme: "dark"

  info: "Akash Tyagi is a dark editorial portfolio rendered as a midnight canvas with warm parchment text and a single vivid pink accent that acts as functional punctuation rather than decoration. The layout breathes — 200px section gaps, generous asymmetric two-column compositions, and display labels set in Geist Pixel Triangle create a gallery-wall rhythm where each project is given the silence it needs. Every neutral carries a warm sepia undertone, deliberately steering away from the cool blue-grays of typical tech portfolios. Components are minimal and flat: pill CTAs, hairline dividers, status dots, and large unfettered project imagery — there is no elevation, no gradients, no ornamentation beyond typography and a single chromatic accent."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | Page background, card surfaces, inverted text on pink fills |"
    info: "| Parchment | `#efe6d8` | `--color-parchment` | Primary body and heading text — warm near-white with sepia undertone, replaces the typical cool white of dark UIs |"
    info: "| Bone | `#aca69c` | `--color-bone` | Secondary text, button borders, metadata — mid-tone warm gray |"
    info: "| Ash | `#736e68` | `--color-ash` | Muted body text, subtle link borders, inactive labels |"
    info: "| Charcoal | `#605c56` | `--color-charcoal` | Hairline dividers, low-emphasis borders, heading underlines on dark |"
    info: "| Neon Petal | `#ffa1f7` | `--color-neon-petal` | Primary action buttons, active nav states, selected markers, occasional heading accents — the single chromatic punctuation in the system |"
    info: "| Acid Lime | `#4dff00` | `--color-acid-lime` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    geist___primary_ui_and_body_typeface___medium_and_semibold_weights__tight_negative_tracking_at__0_013em_to__0_031em__used_for_body_copy__links__navigation__and_small_headings_____font_geist:
      - "**Substitute:** Inter, Satoshi"
      - "**Weights:** 500, 600"
      - "**Sizes:** 13px, 14px, 15px"
      - "**Line height:** 1.14, 1.23, 1.33"
      - "**Letter spacing:** -0.031em at 13px, -0.029em at 14px, -0.013em at 15px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Role:** Primary UI and body typeface — medium and semibold weights, tight negative tracking at -0.013em to -0.031em. Used for body copy, links, navigation, and small headings."

    geist_pixel_triangle___display_and_section_label_typeface___pixel_decorative_variant_used_for_all_caps_section_headers_like__selected_work__and_the_year_range__2015___2026__the_pixel_treatment_gives_editorial_weight_without_serifs_____font_geist_pixel_triangle:
      - "**Substitute:** Space Mono Bold, Departure Mono"
      - "**Weights:** 400"
      - "**Sizes:** 30px"
      - "**Line height:** 1.33"
      - "**Letter spacing:** -0.033em at 30px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Role:** Display and section-label typeface — pixel/decorative variant used for all-caps section headers like 'SELECTED WORK' and the year range '2015 — 2026'. The pixel treatment gives editorial weight without serifs."

    geist_mono___metadata_typeface___timestamps__email__technical_labels__year_stamps__the_monospace_signals_system_data_language_against_the_proportional_body_____font_geist_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 13px"
      - "**Line height:** 1.23, 1.54"
      - "**Letter spacing:** -0.031em at 13px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Role:** Metadata typeface — timestamps, email, technical labels, year stamps. The monospace signals system/data language against the proportional body."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-lg | 15px | 1.4 | -0.2px | `--text-body-lg` |"
      info: "| display | 30px | 1.33 | -1px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| pills | 1000px |"
      info: "| buttons | 40px |"
      info: "| indicators | 1000px |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 200px"
      - "**Card padding:** 0px"
      - "**Element gap:** 16px"

  components:

    pill_cta_button:
      role: "Primary action trigger"

      info: "Filled pill button, #ffa1f7 background, Obsidian (#000000) text, 40px border-radius, 12px vertical padding × 24px horizontal padding. Geist 500 at 13px. Used for the single most important action on screen (e.g. 'Book an intro call')."

    ghost_text_link:
      role: "Secondary navigation and inline links"

      info: "No background, Parchment (#efe6d8) text with 1px Ash (#736e68) or Bone (#aca69c) border-bottom underline. Geist 500 at 13–14px. Underline appears only on hover, not at rest."

    status_availability_indicator:
      role: "Live availability signal"

      info: "8px Acid Lime (#4dff00) circle with 1000px border-radius, paired with Parchment (#efe6d8) text 'Available for work' at 13px Geist 500. The green dot is the only green element in the entire system."

    section_header_with_date_range:
      role: "Editorial section divider"

      two_part_label: "section name left, date range right. Set in Geist Pixel Triangle 400 at 30px, Parchment (#efe6d8) for the label, Ash (#736e68) for the date range. Tight -0.033em letter-spacing. Separated from content by 104px of vertical space."

    project_showcase_card:
      role: "Portfolio project entry"

      info: "Full-width project image displayed edge-to-edge on the Obsidian canvas with no card chrome. No border, no shadow, no radius — the image IS the card. Caption/description appears below in Geist 500, 14px, Parchment text."

    minimal_header_bar:
      role: "Identity and time stamp"

      single_row_layout: "designer name left ('Akash Tyagi' in Geist 600, Parchment), current time and email right (Geist Mono 400, Ash). No logo, no nav links, no hamburger — the header is identity + clock, nothing more."

    two_column_intro_block:
      role: "Personal statement"

      info: "Asymmetric two-column text block. Left column: condensed bio (2–3 short paragraphs). Right column: left empty or holds the CTA + status. Column gap 24–48px. Body text in Geist 500, 14px, Parchment with 16px paragraph spacing."

    footer_social_link:
      role: "External profile references"

      info: "Plain text links — 'X.com', 'LinkedIn', 'Dribbble' — set in Geist Mono 400, 13px, Ash (#736e68) color. No icons, no badges. Separated by consistent 24px gaps."

  do_s_and_don_ts:

    do:
      - "Use #000000 as the universal background for every screen — never introduce a lighter or colored canvas"
      - "Apply #ffa1f7 only to the single primary action per view; treat it as the system's only chromatic voice"
      - "Set section labels in Geist Pixel Triangle 30px with -0.033em tracking for editorial weight"
      - "Maintain 200px vertical gaps between major sections to preserve the gallery-wall rhythm"
      - "Use warm neutrals (#efe6d8 → #aca69c → #736e68 → #605c56) in descending tonal order for text hierarchy"
      - "Use the green dot (#4dff00) exclusively for live status/availability — never as a generic accent or button color"
      - "Render all project imagery edge-to-edge with no card chrome, radius, or shadow"

    don_t:
      - "Never introduce box-shadows, gradients, or glow effects — flatness is the point"
      - "Never use #ffa1f7 for body text, backgrounds, or decorative purposes — it is an action color only"
      - "Never round image corners on project showcases — images must meet the canvas edge"
      - "Never add more than one filled CTA per screen — the system is single-action"
      - "Never use cool blue-grays or pure whites for text — the warm sepia palette is the identity"
      - "Never use icons in the header or footer — plain text links only"
      - "Never reduce section gaps below 104px — the generous whitespace is structural, not optional"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Full-bleed page background — true black for maximum contrast against warm text |"
    info: "| 1 | Project Surface | `#000000` | Project image and content frames sit directly on canvas without card elevation |"
    info: "| 2 | Accent Surface | `#ffa1f7` | Inverted pill buttons and selected markers — the only chromatic surface |"

  elevation:

    info: "No shadows. Surfaces are separated purely by tone and whitespace. Elevation is expressed through typographic scale and generous spacing, not box-shadow stacks. This flatness is deliberate — shadows would introduce visual noise on a portfolio that treats each project as a gallery frame."

  imagery:

    info: "Product photography dominates — large, high-fidelity device mockups (tablets, phones) shot in lifestyle or twilight contexts with dramatic sky gradients. Images are full-bleed, occupying the full viewport width within the project showcase cards. No rounded corners, no masks, no frames — images meet the dark canvas edge-to-edge. No illustration or iconography beyond a single green status dot. The visual rhythm is: text block → silence → massive product photograph → silence → text block. Photography is the only visual content; UI screenshots inside product shots show dark UIs with warm text, mirroring the portfolio's own aesthetic."

  layout:

    info: "Full-bleed dark canvas with max-width 1400px centered content. The page reads as a vertical scroll of alternating text and image bands with extreme vertical breathing room (200px between sections). No sidebar, no sticky nav, no mega-menu — the header is a single static line. Hero pattern: two-column asymmetric text block (bio left, CTA right) on pure black, no hero image. Content arrangement alternates between text-only sections and full-bleed project images, creating a gallery-wall rhythm. Section labels ('SELECTED WORK 2015 — 2026') act as horizontal typographic dividers. The grid is implicit — no visible columns or gutters, content flows in max-width containers with generous margins. Navigation is reduced to name + time + email in the header and three text links in the footer."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #efe6d8 (Parchment)"
    - "background: #000000 (Obsidian)"
    - "border: #605c56 (Charcoal) / #736e68 (Ash)"
    - "accent: #ffa1f7 (Neon Petal)"
    - "status: #4dff00 (Acid Lime) — availability dot only"
    - "primary action: #ffa1f7 (filled action)"

    info: "Example Component Prompts:"

    - "Create a section header: 200px top padding. Left-aligned label 'SELECTED WORK' in Geist Pixel Triangle 30px, #efe6d8, letter-spacing -1px. Right-aligned date range '2015 — 2026' in Geist Mono 13px, #736e68."

    - "Create a status row: 8px green circle (#4dff00, 1000px radius) followed by 'Available for work' in Geist 500, 14px, #efe6d8, separated by 8px gap."

    - "Create a pill CTA: 40px border-radius, #ffa1f7 background, 12px 24px padding, 'Book an intro call' in Geist 500 13px, #000000 text, no border."

    - "Create a footer link row: three text links 'X.com', 'LinkedIn', 'Dribbble' in Geist Mono 400, 13px, #736e68, 24px gap between each, left-aligned."

    - "Create a project showcase: full-width image edge-to-edge on #000000 canvas, no border or radius, 104px top padding, caption below in Geist 500 14px #efe6d8."

  similar_brands:

    - "**Brittany Chiang** — Dark portfolio canvas with single accent color, all-caps section labels, generous vertical spacing, and minimal navigation reduced to name and contact"
    - "**Rauno Freiberg** — Dark, near-black background with tight tracking, monospace metadata, and an editorial single-column scroll rhythm"
    - "**Linear** — Same flat-on-black surface treatment with no shadows or gradients, and tight negative letter-spacing on small body text"
    - "**Cobe (Pieter Levels)** — Personal portfolio with extreme whitespace, monospace timestamps, and text-only footer links without icons"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-canvas: #000000;
          --color-parchment: #efe6d8;
          --color-bone: #aca69c;
          --color-ash: #736e68;
          --color-charcoal: #605c56;
          --color-neon-petal: #ffa1f7;
          --color-acid-lime: #4dff00;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-pixel-triangle: 'Geist Pixel Triangle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-lg: 15px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.2px;
          --text-display: 30px;
          --leading-display: 1.33;
          --tracking-display: -1px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-104: 104px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 200px;
          --card-padding: 0px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-pills: 1000px;
          --radius-buttons: 40px;
          --radius-indicators: 1000px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-project-surface: #000000;
          --surface-accent-surface: #ffa1f7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-canvas: #000000;
          --color-parchment: #efe6d8;
          --color-bone: #aca69c;
          --color-ash: #736e68;
          --color-charcoal: #605c56;
          --color-neon-petal: #ffa1f7;
          --color-acid-lime: #4dff00;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-pixel-triangle: 'Geist Pixel Triangle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-lg: 15px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.2px;
          --text-display: 30px;
          --leading-display: 1.33;
          --tracking-display: -1px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-104: 104px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 1000px;
        }