ingmar_coenen___style_reference:
  info: "> Oversized masthead trên nền trắng — một chữ cái hình học 295px đặt trên một khoảng trắng rộng lớn, với chú thích serif nhỏ và navigation hình pill nổi bên dưới."

  theme: "light"

  info: "Portfolio của Ingmar Coenen vận hành như một bức tường gallery biên tập: một wordmark Megazoid khổng lồ chiếm phần đầu trang như masthead tạp chí, sau đó hệ thống lùi vào khoảng trắng tối giản và UI Swiss-type nhỏ xíu. Toàn bộ bảng màu là nhị phân — đen tuyền trên trắng tinh với một màu xám ấm duy nhất cho ghost controls — bởi vì bản thân tác phẩm phải mang màu sắc. Typography chính là thương hiệu: một display face hình học 295px (Megazoid) cho heading hoành tráng, ITC Garamond Light Condensed cho body copy serif mang chất suy tư, và Neue Haas Unica Pro cỡ 12-13px với negative tracking cho toàn bộ interface chrome. Các component tối giản và bo tròn — pill buttons 100px, cards 12px — tạo ra sự căng thẳng giữa giọng display nặng và bán kính bo tròn mềm mại, gần như hoạt hình. Mật độ dày đặc ở cấp UI (khoảng cách 4-14px) nhưng thoáng đãng ở layout (khoảng thở section 80-120px)."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Primary text, logo wordmark, filled pill buttons, hairline borders — mực cấu trúc giữ mọi element lại với nhau |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text trên nền tối — tờ giấy mà mọi thứ nằm trên đó |"
    info: "| Charcoal Slate | `#3a4042` | `--color-charcoal-slate` | Secondary text, link color, body copy, subtle borders — màu đen hơi mềm để tạo hierarchy dưới primary text |"
    info: "| Pale Stone | `#f2f2f2` | `--color-pale-stone` | Ghost button và segmented toggle background — surface không trắng duy nhất, dùng cho inactive controls như Grid/List switcher |"
    info: "| Mid Gray | `#919191` | `--color-mid-gray` | Muted helper text, low-emphasis borders, disabled states |"
    info: "| Silver | `#cccccc` | `--color-silver` | Lightest border tone, placeholder outlines, decorative strokes |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    megazoid___wordmark_display_hoành_tráng_cho_site_title_và_bất_kỳ_project_level_hero_heading_nào__chữ_cái_hình_học_siêu_nặng_với_line_height_gần_như_bằng_0__được_dùng_tiết_kiệm_như_một_full_bleed_statement_duy_nhất_tràn_ra_ngoài_container_edges__biến_thể_fill_dùng_cho_phiên_bản_filled_knockout_của_cùng_glyph_____font_megazoid:
      - "**Thay thế:** Druk Wide, Antonio Bold, hoặc một geometric display nặng như Objektiv Blk"
      - "**Weights:** 400"
      - "**Sizes:** 295px"
      - "**Line height:** 0.90"
      - "**Vai trò:** Wordmark display hoành tráng cho site title và bất kỳ project-level hero heading nào. Chữ cái hình học siêu nặng với line-height gần như bằng 0, được dùng tiết kiệm như một full-bleed statement duy nhất tràn ra ngoài container edges. Biến thể Fill dùng cho phiên bản filled/knockout của cùng glyph."

    itc_garamond_std_light_condensed___serif_biên_tập_cho_about_bio_paragraphs_mang_chất_suy_tư_và_bất_kỳ_long_form_copy_nào_cần_giọng_văn_chương__light_condensed_cut_cố_tình_phản_corporate___nó_đọc_như_một_ghi_chú_bên_lề_sâu_sắc_bên_cạnh_masthead_megazoid_khổng_lồ__chứ_không_phải_văn_xuôi_marketing_____font_itc_garamond_std_light_condensed:
      - "**Thay thế:** Cormorant Garamond Light, EB Garamond Light, hoặc Playfair Display"
      - "**Weights:** 400"
      - "**Sizes:** 36px"
      - "**Line height:** 0.94"
      - "**Vai trò:** Serif biên tập cho about/bio paragraphs mang chất suy tư và bất kỳ long-form copy nào cần giọng văn chương. Light Condensed cut cố tình phản-corporate — nó đọc như một ghi chú bên lề sâu sắc bên cạnh masthead Megazoid khổng lồ, chứ không phải văn xuôi marketing."

    neue_haas_unica_pro___primary_ui_và_body_typeface___con_ngựa_thồ_cho_navigation_labels__project_metadata__links__và_inline_annotations__được_set_cực_kỳ_chặt_ở__0_02em_letter_spacing_và_1_1_line_height__tạo_cho_label_mật_độ_compact_kiểu_swiss_catalog_____font_neue_haas_unica_pro:
      - "**Thay thế:** Inter, Neue Haas Grotesk, hoặc Helvetica Neue Medium"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.02em"
      - "**Vai trò:** Primary UI và body typeface — con ngựa thồ cho navigation labels, project metadata, links, và inline annotations. Được set cực kỳ chặt ở -0.02em letter-spacing và 1.1 line-height, tạo cho label mật độ compact kiểu Swiss-catalog."

    megazoid_regular___megazoid_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_megazoid_regular:
      - "**Weights:** 400"
      - "**Sizes:** 295px"
      - "**Line height:** 0.9"
      - "**Vai trò:** Megazoid Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| heading | 36px | 0.94 | — | `--text-heading` |"
      info: "| display | 295px | 0.9 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| images | 12px |"
      info: "| buttons | 100px |"
      info: "| smallElements | 4px |"

    layout:

      - "**Section gap:** 80px"
      - "**Card padding:** 14px"
      - "**Element gap:** 10px"

  components:

    sticky_navigation_bar:
      vai_trò: "Persistent top header với rounded pill nav items và một CTA"

      info: "Thanh trắng full-width không có border nhìn thấy được, nổi cách mép trên 8px. Cụm trái: ba nav links hình pill ('Work', 'About', 'Capabilities') với radius 100px, top padding 9px, horizontal padding 14px, text Neue Haas Unica Pro Medium 12px màu #000000. Cụm phải: một filled pill button đen 'Start a project' với text trắng. Thanh nằm như một hòn đảo nổi khi scroll, có shadow nhẹ hoặc chỉ tiếp giáp với mép."

    filled_pill_button:
      vai_trò: "Primary action — CTA có độ mạnh màu duy nhất trong hệ thống"

      info: "border-radius 100px, background #000000, text #ffffff. Horizontal padding 14px, vertical padding 9px. Neue Haas Unica Pro 12px medium, letter-spacing -0.02em. Không border. Hình dạng bo tròn hoàn toàn làm mềm một khối đen vốn có vẻ hung hăng — một quyết định signature khiến CTA trông thân thiện dù đơn sắc khắc nghiệt."

    ghost_nav_pill:
      vai_trò: "Nav link inactive hoặc mặc định"

      info: "Cùng radius 100px và text Neue Haas Unica Pro 12px như filled button, nhưng background trong suốt và text #000000. Khi hover hoặc active, background chuyển thành #000000 với text đảo thành #ffffff — một toggle đơn sắc thay vì đưa vào bất kỳ sắc màu mới nào."

    segmented_view_toggle:
      vai_trò: "Grid/List layout switcher ở cuối trang"

      info: "Hai pill segments ('Grid' và 'List') kề nhau trong một capsule chung. Active segment: background #000000 với text #ffffff. Inactive segment: background #f2f2f2 với text #000000. Radius 100px trên outer container, gap nội bộ 4px. Labels Neue Haas Unica Pro 12px."

    work_card___image:
      vai_trò: "Project tile với khu vực sản phẩm/ảnh chụp"

      info: "Ảnh full-bleed bên trong container radius 12px, không có card border nhìn thấy được. Metadata (project name, client, number) được overlay bằng text Neue Haas Unica Pro 12px màu trắng ở góc dưới-trái của ảnh, set với -0.02em tracking. Aspect ratio thay đổi theo project nhưng luôn crop sát — đối tượng là hero, không có decorative framing."

    work_card___typographic:
      vai_trò: "Project tile thể hiện dưới dạng type-only artwork"

      info: "Bề mặt background kem/trắng ấm bên trong card radius 12px. Nội dung trung tâm là một sắp xếp vòng tròn của text lặp lại (ví dụ 'Haven-1' xoay quanh một vòng tròn) với center label chữ nhỏ ('MICROGRAVITY RESEARCH LAB') set bằng Neue Haas Unica Pro 12px. Không có yếu tố ảnh chụp — bản thân typography là project artifact."

    about_paragraph_block:
      vai_trò: "Long-form bio copy"

      info: "Text block canh phải hoặc neo phải set bằng ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000. Không có max-width constraint — text nằm như một cột hẹp canh theo lề phải. Line-height cực kỳ chặt ở cỡ display tạo cho paragraph một trọng lượng nén, gần như headline dù là body copy."

    masthead_wordmark:
      vai_trò: "Site identity — một display heading full-bleed"

      info: "Megazoid Regular ở 295px, line-height 0.9, #000000, set flush-left và tràn ra ngoài viewport edges. Một dòng duy nhất. Không margin trên hoặc dưới — nó CHÍNH LÀ trang. Biến thể Megazoid Fill có thể được dùng cho knock-out hoặc reversed treatments trên bề mặt tối."

    link_with_underline:
      vai_trò: "Inline link trong body hoặc nav context"

      info: "Neue Haas Unica Pro 12px, text #3a4042, underline 1px solid #3a4042 cách baseline ~4px. Không có hover state đổi màu — chỉ weight hoặc underline thickness thay đổi. Underline hoạt động như một hairline divider hơn là decorative emphasis."

    card_metadata_label:
      vai_trò: "Small caps project metadata overlay trên ảnh"

      info: "Neue Haas Unica Pro 12px, letter-spacing -0.02em, uppercase, #ffffff trên ảnh tối hoặc #3a4042 trên bề mặt sáng. Set trong một stack hai dòng chặt (name ở dòng 1, detail ở dòng 2) với row gap ~4px."

  do_s_and_don_ts:

    nên:
      - "Dùng Megazoid ở 295px với line-height 0.9 cho bất kỳ site-level display heading nào — đây là element duy nhất xứng đáng full-bleed real estate"
      - "Set tất cả UI text bằng Neue Haas Unica Pro 12-13px với letter-spacing -0.02em và line-height 1.1"
      - "Dùng border-radius 100px trên mọi interactive element (buttons, nav pills, toggles) để làm mềm sự đơn sắc khắc nghiệt"
      - "Dùng ITC Garamond Light Condensed 36px cho bất kỳ reflective hoặc editorial paragraph nào dài hơn hai dòng"
      - "Duy trì khoảng thở dọc 80-120px giữa các major layout sections"
      - "Giữ toàn bộ palette ở đen, trắng, charcoal, và pale stone — để project imagery cung cấp bất kỳ màu sắc nào"
      - "Dùng radius 12px cho tất cả cards và image containers, 4px cho inline elements và hairline details"

    không_nên:
      - "Không bao giờ đưa vào một chromatic color — độ 0% colorfulness là cấu trúc của thương hiệu"
      - "Không bao giờ set body copy dưới 12px hoặc trên 36px (type system cố tình là hệ hai scale: tiny UI và monumental display)"
      - "Không bao giờ dùng box-shadows cho elevation — dựa vào tương phản đen/trắng rõ rệt và corner radius 12px để phân tách bề mặt"
      - "Không bao giờ canh giữa Garamond about paragraph — nó sống neo phải như một quyết định biên tập có chủ đích"
      - "Không bao giờ dùng system font cho body hoặc nav — tight tracking của Neue Haas Unica Pro là signature, không phải fallback"
      - "Không bao giờ thêm decorative gradients, textures, hoặc background patterns vào cards hoặc surfaces"
      - "Không bao giờ dùng line-height trên 1.2 cho Neue Haas Unica Pro — tight 1.1 là một phần của tính cách Swiss-catalog"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Default page background, trường thị giác chiếm ưu thế |"
    info: "| 2 | Stone Fill | `#f2f2f2` | Ghost controls và inactive toggle segments |"
    info: "| 3 | Ink Surface | `#000000` | Filled pill buttons và inverted logo zone |"

  elevation:

    - "**Floating Navigation Bar:** `0 2px 12px rgba(0,0,0,0.06)`"

  imagery:

    info: "Nhiếp ảnh tập trung vào sản phẩm và crop chặt — đối tượng lấp đầy khung hình không có lifestyle context hoặc environmental staging. Món đồ nội thất gỗ trong work grid được chụp trên nền studio trung tính với bóng đổ kịch tính, xử lý đối tượng như tác phẩm điêu khắc. Không có ảnh người, không có color-grading ngoài tông màu tự nhiên, và không có decorative illustration. Type-only project cards (như bố cục vòng tròn 'Haven-1') thay thế imagery khi project CHÍNH LÀ typography. Mật độ thị giác chủ yếu là text-and-object — không có atmospheric hoặc environmental photography xuất hiện ở bất kỳ đâu."

  layout:

    info: "Trang mở đầu bằng một wordmark monumental full-bleed (INGMAR ở 295px) tràn ra ngoài cả hai mép viewport, thiết lập hierarchy kiểu magazine-cover. Bên dưới masthead, một floating sticky nav bar nằm như một hòn đảo ngang. About paragraph được neo phải vào lề phải, tạo ra sự bất đối xứng có chủ đích so với logo canh trái. Work section dùng grid 2 cột gồm project cards với aspect ratio khác nhau — image cards một bên, typographic cards một bên — tạo nhịp điệu bàn cờ. Cards dùng radius 12px và không có border nhìn thấy được; sự phân tách đạt được chỉ qua white space. Ở cuối trang, một Grid/List toggle nhỏ gọn neo layout. Section gaps là 80-120px, đủ rộng để type khổng lồ thở trong khi giữ UI compact. Navigation là một sticky top bar duy nhất không có sidebar, không mega-menu, không footer ngoài view toggle."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #3a4042"
    - "accent: #000000 (dùng cho filled pill buttons — 'accent' duy nhất trong hệ nhị phân này)"
    - "muted text: #919191"
    - "ghost surface: #f2f2f2"
    - "primary action: #000000 (filled action)"

    example_component_prompts:

    - "Tạo một sticky navigation bar: background trắng #ffffff, nav links hình pill radius 100px bên trái bằng Neue Haas Unica Pro 12px #000000 với horizontal padding 14px và vertical padding 9px. Bên phải, một filled pill button đen (bg #000000, text #ffffff, radius 100px, cùng padding) ghi 'Start a project'. Thanh nổi cách mép trên 8px với shadow nhẹ 0 2px 12px rgba(0,0,0,0.06)."

    - "Tạo một monumental masthead: Megazoid Regular 295px, line-height 0.9, #000000, set flush-left tràn ra ngoài viewport edges, chiếm toàn bộ phần đầu trang không có margin."

    - "Tạo một work grid card: container border-radius 12px, ảnh sản phẩm full-bleed bên trong, với metadata overlay bằng Neue Haas Unica Pro 12px #ffffff, letter-spacing -0.02em, uppercase, đặt ở góc dưới-trái với padding 14px."

    - "Tạo một about paragraph: ITC Garamond Std Light Condensed 36px, line-height 0.94, #000000, neo phải vào lề phải, không có max-width constraint, đọc như một editorial column hẹp."

    - "Tạo một Grid/List toggle: hai pill segments kề nhau trong một capsule chung radius 100px, gap 4px giữa chúng. Active segment bg #000000 với text #ffffff, inactive segment bg #f2f2f2 với text #000000. Labels bằng Neue Haas Unica Pro 12px."

  typographic_philosophy:

    info: "Hệ thống vận hành trên một hierarchy ba giọng type tạo ra sự căng thẳng có chủ đích: Megazoid hét ở 295px như một masthead mỗi trang một lần, Garamond Light Condensed thì thầm ở 36px trong editorial paragraphs, và Neue Haas Unica Pro ở 12px với -0.02em tracking xử lý tất cả functional UI. Không có font nào cầu nối ba scale này — không có intermediate 40px hay 60px. Điều này có nghĩa bất kỳ trang mới nào hoặc cam kết với register monumental (Megazoid) hoặc register micro-catalog (Unica), và Garamond chỉ xuất hiện cho human-voiced, reflective copy. Negative letter-spacing trên UI font và độ chặt cực đoan của display line-heights (0.9-0.94) là signature: type cảm giác nén và tự tin thay vì thoáng và thân thiện."

  similar_brands:

    - "**Pentagram** — Cùng cách tiếp cận editorial-portfolio: type khổng lồ làm identity, đơn sắc khắc nghiệt, work được trình bày dưới dạng generous full-bleed case study cards"
    - "**Rauno Freiberg** — Cùng Swiss-grid minimalism với oversized display type chiếm ưu thế trên canvas trắng và tiny UI labels trong tight sans-serif"
    - "**Locomotive (locomotive.ca)** — Cùng kỷ luật dark-text-on-white với large custom wordmark, navigation hình pill, và project-grid card layouts"
    - "**Manuel Bortoletti** — Cùng monolithic typographic identity — một oversized display letterform duy nhất ở đầu trang trên vast white field"
    - "**Haus** — Cùng pill-button navigation trên minimal white portfolio layout với tight Swiss sans-serif UI labels"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-black: #000000;
          --color-canvas-white: #ffffff;
          --color-charcoal-slate: #3a4042;
          --color-pale-stone: #f2f2f2;
          --color-mid-gray: #919191;
          --color-silver: #cccccc;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-heading: 36px;
          --leading-heading: 0.94;
          --text-display: 295px;
          --leading-display: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --section-gap: 80px;
          --card-padding: 14px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-images: 12px;
          --radius-buttons: 100px;
          --radius-smallelements: 4px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-stone-fill: #f2f2f2;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-black: #000000;
          --color-canvas-white: #ffffff;
          --color-charcoal-slate: #3a4042;
          --color-pale-stone: #f2f2f2;
          --color-mid-gray: #919191;
          --color-silver: #cccccc;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid: 'Megazoid', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-std-light-condensed: 'ITC Garamond Std Light Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-megazoid-regular: 'Megazoid Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-heading: 36px;
          --leading-heading: 0.94;
          --text-display: 295px;
          --leading-display: 0.9;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 200px;
        }