freelance_frontend_ui_developer_và_designer__rou_hun_fan___style_reference:
  info: "> Zine in Riso trên giấy construction đen"

  theme: "dark"

  info: "Một portfolio editorial brutalism dành cho frontend developer độc lập: nền gần như đen, display type condensed cỡ lớn, và một khối accent bão hòa cao duy nhất bùng nổ giữa khoảng không. Layout hoạt động như một trang tạp chí in — text trải dài qua các cột bất đối xứng, type tiếp xúc với ảnh ở các cạnh cứng, và whitespace được dùng như một yếu tố cấu trúc thay vì padding. Điểm nhấn đặc trưng là card cyan với display text magenta trông như được dán lên trang giống một sticker, phá vỡ kỷ luật đơn sắc. Typography gánh toàn bộ trọng lượng: một monospaced geometric cho giọng hệ thống, một condensed sans nặng để \"hét\", và một script calligraphic cho các điểm nhấn editorial nhằm nhân tính hóa thẩm mỹ máy móc."

  tokens___màu_sắc:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Carbon | `#0a0a0a` | `--color-carbon` | Nền trang và các section background — gần như đen thật giúp tối đa độ tương phản của white type và các khối accent bão hòa |"
    info: "| Bone | `#ffffff` | `--color-bone` | Text chính, display headlines, border, và link strokes — giọng duy nhất cho phần lớn trang |"
    info: "| Voltage Cyan | `#1ef0e4` | `--color-voltage-cyan` | Nền accent card, highlight panels — cyan phẳng bão hòa nổi bật trên nền tối, dành riêng cho project cards và editorial callout blocks |"
    info: "| Plasma Magenta | `#e91e8c` | `--color-plasma-magenta` | Display text trên cyan cards, decorative script flourishes — hồng/magenta nóng chỉ dùng làm ink-on-cyan contrast hoặc editorial accent |"
    info: "| Ember | `#ff3a1a` | `--color-ember` | Màu hỗ trợ cho các decorative accents nhỏ khi palette chính cần tương phản. |"

  tokens___typography:

    azeret_mono___giọng_monospace_hệ_thống___navigation__metadata__ui_labels__footer_text__mang_bản_sắc_developer_terminal_phù_hợp_với_định_vị_frontend_developer____font_azeret_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 100px"
      - "**Line height:** 1.4–1.5"
      - "**OpenType features:** `\"aalt\" on`"
      - "**Vai trò:** Giọng monospace hệ thống — navigation, metadata, UI labels, footer text. Mang bản sắc developer-terminal phù hợp với định vị frontend-developer"

    azeretmono_display_variant___display_headlines_condensed_cỡ_lớn_rou_hun_fan__ui_dev__design__motion___frontend__tỷ_lệ_cực_đại_và_bold_weight_biến_trang_thành_một_poster_typographic___type_chính_là_design____font_azeretmono_display_variant:
      - "**Thay thế:** Bebas Neue, Anton, Tungsten Bold"
      - "**Weights:** 700, 900"
      - "**Kích thước:**"
      - "**Line height:** 1.0–1.2"
      - "**Vai trò:** Display headlines condensed cỡ lớn (ROU HUN FAN, UI DEV, DESIGN, MOTION & FRONTEND). Tỷ lệ cực đại và bold weight biến trang thành một poster typographic — type CHÍNH LÀ design"

    ephidona___script_editorial_calligraphic_cho_section_labels_projects__counter_typography_phá_vỡ_kỷ_luật_geometric_mono_bằng_chữ_viết_tay___điểm_nhấn_anti_machine_báo_hiệu_sự_thủ_công_cá_nhân_thay_vì_đầu_ra_tự_động____font_ephidona:
      - "**Thay thế:** Pinyon Script, Allura, Tangerine"
      - "**Weights:** 400"
      - "**Kích thước:** 100px, 108px"
      - "**Line height:** 1.2"
      - "**OpenType features:** `\"aalt\" on`"
      - "**Vai trò:** Script editorial calligraphic cho section labels (PROJECTS). Counter-typography phá vỡ kỷ luật geometric/mono bằng chữ viết tay — điểm nhấn anti-machine báo hiệu sự thủ công cá nhân thay vì đầu ra tự động"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | — | `--text-subheading` |"
      info: "| heading | 56px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 72px | 1.05 | — | `--text-heading-lg` |"
      info: "| display | 100px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 9 | 9px | `--spacing-9` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 32-48px"
      - "**Element gap:** 8-16px"

  components:

    display_headline:
      vai_trò: "Yếu tố typographic chính — thiết lập tông poster/tạp chí"

      info: "AzeretMono 700/900 ở 72–100px, trắng (#ffffff) trên Carbon (#0a0a0a), line-height 1.0–1.2, không letter-spacing. Text trải dài qua các cột bất đối xứng. Đây là UI element chiếm ưu thế — lớn hơn bất kỳ component nào khác trên trang."

    editorial_script_label:
      vai_trò: "Section divider và điểm nhấn nhân tính hóa"

      info: "Ephidona 400 ở 72–108px, Ember (#ff3a1a) trên Carbon, chồng lên cạnh của một Voltage Cyan card. Dùng làm overlay chéo/xoay trên project cards để thêm năng lượng editorial. Chỉ 1–2 instance mỗi trang."

    voltage_project_card:
      vai_trò: "Khối showcase dự án nổi bật"

      info: "Nền Voltage Cyan (#1ef0e4), display text Plasma Magenta (#e91e8c) (PROBLEM STUDIO) ở 48–72px AzeretMono bold, body text nhỏ Plasma Magenta bên dưới. Zero border-radius. Cạnh hình chữ nhật cứng. Thường có hình dạng torn-paper hoặc organic decorative shape bằng Plasma Magenta ở cạnh dưới."

    monospace_navigation:
      vai_trò: "Nav đầu trang và link section"

      info: "Azeret Mono 400 ở 14–16px, trắng, uppercase, tracking hơi giãn. Không background fill — chỉ text, đặt trực tiếp trên Carbon. Tối giản: tối đa 3–5 items. Phân cách bằng whitespace rộng, không dùng divider."

    photo_plate:
      vai_trò: "Ảnh cá nhân và ảnh dự án"

      info: "Full-bleed hoặc gần full-bleed trên Carbon, zero border-radius, không border. Ảnh tiếp xúc trực tiếp với display text — không padding gutters. Ảnh có tông ấm, chân thực, cảm giác medium-format."

    metadata_tag:
      vai_trò: "Label nhỏ cho project categories, năm, kỹ năng"

      info: "Azeret Mono 400 ở 12–14px, trắng hoặc trắng mờ trên Carbon. Không background. Uppercase. Xếp dọc với khoảng cách 9px (elementGap token đã phát hiện). Không pill shape, không border."

    footer:
      vai_trò: "Link liên hệ và mạng xã hội"

      info: "Azeret Mono 400 ở 12–14px trắng trên Carbon, full-width, căn trái. Bao gồm email, social handles, và copyright. Không divider. Tối đa 3–4 dòng."

    decorative_organic_shape:
      vai_trò: "Điểm nhấn đồ họa trên Voltage cards"

      info: "Hình blob/torn-paper bất quy tắc màu Plasma Magenta (#e91e8c) ở đáy Voltage Cyan cards. Flat fill, không gradient, không border. Tạo friction thị giác giữa card hình học và điểm nhấn hữu cơ."

  do_s_and_don_ts:

    do:
      - "Dùng AzeretMono 700/900 ở 72–100px cho tất cả primary headlines — type scale nên cảm giác quá khổ, không bao giờ thoải mái"
      - "Áp dụng Voltage Cyan (#1ef0e4) làm nền panel phẳng — không bao giờ dùng gradient, không bao giờ dùng semi-transparent overlays"
      - "Giữ tất cả border-radius ở 0px — cards, buttons, images, tags đều là hình chữ nhật cứng"
      - "Dùng Ephidona script một cách tiết kiệm (1–2 instance mỗi trang) làm editorial flourishes trên Voltage cards, không dùng cho functional text"
      - "Đặt elementGap ở 8–16px và dùng whitespace làm phân cách cấu trúc giữa các content blocks"
      - "Để display text trải dài qua các cột tự nhiên — layout bất đối xứng, magazine-grid là có chủ đích"
      - "Ghép Plasma Magenta text độc quyền với nền Voltage Cyan — không bao giờ dùng magenta trên nền tối hoặc làm body text"

    don_t:
      - "Không thêm box-shadows, drop-shadows, hoặc bất kỳ dạng mô phỏng chiều sâu nào — design phẳng triệt để"
      - "Không bo tròn góc trên bất kỳ element nào — hard edges định nghĩa ngôn ngữ editorial brutalism"
      - "Không dùng brand accent colors cho buttons hoặc CTAs — không có CTA truyền thống; navigation chỉ là text"
      - "Không đưa vào weight display thứ ba giữa 56px và 100px — scale nhảy từ readable lên poster-sized, không có middle ground thoải mái"
      - "Không áp gradient lên bất kỳ surface nào — palette là 100% flat fills"
      - "Không dùng Ephidona script cho body copy, navigation, hoặc functional labels — nó chỉ mang tính trang trí"
      - "Không làm mềm white text với opacity dưới 80% cho body content — nếu cần hierarchy, giảm size và weight thay vì opacity"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Carbon Canvas | `#0a0a0a` | Nền trang full-bleed, section bands |"
    info: "| 1 | Voltage Card | `#1ef0e4` | Featured project cards, editorial callout panels |"
    info: "| 2 | Image Plate | `#1a1a1a` | Photo containers, embedded media blocks |"

  elevation:

    info: "Không shadow, không depth, không glassmorphism. Design phẳng có chủ đích — mọi element nằm trên cùng một mặt phẳng. Ấn tượng về hierarchy đến từ scale contrast (100px display so với 12px caption) và color contrast (trắng trên đen, magenta trên cyan), không phải từ elevation. Đây là tư duy print-design, không phải UI-design áp dụng lên web."

  imagery:

    info: "Ảnh có tông ấm, chân thực, hơi giảm bão hòa — thẩm mỹ film medium-format thay vì thương mại bóng bẩy. Ảnh được trình bày full-bleed hoặc gần full-bleed, không bo tròn góc, không border, không khung trang trí. Một điểm đối trọng nhân tính hóa với typography máy móc: người chụp được thể hiện đang hành động, mỉm cười, trong không gian thực với ánh sáng tự nhiên. Sự kết hợp giữa con người + ảnh hữu cơ với type hình học + cyan panels phẳng tạo ra tension thị giác cốt lõi của brand."

  layout:

    info: "Full-bleed dark canvas không có page margins hữu hình ràng buộc nội dung — elements vươn ra đến mép viewport. Hero là một poster typographic: white text cỡ lớn (ROU HUN FAN, UI DEV, DESIGN, MOTION & FRONTEND) bao quanh bất đối xứng qua nhiều cột, với một Voltage Cyan project card dán chồng lên ở vị trí lệch. Bên dưới, một ảnh chân thực full-width nằm cạnh khối stat '10+ YEARS' serif/script lớn. Nhịp trang luân phiên giữa các section poster text-dominant và section ảnh image-dominant, phân cách bằng khoảng cách dọc 80–120px rộng. Không sidebar, không sticky header, không max-width constraint — layout cố tình không bị giới hạn, như một trang zine."

  agent_prompt_guide:

  quick_color_reference:
    - "Background: #0a0a0a (Carbon)"
    - "Text: #ffffff (Bone)"
    - "Accent surface: #1ef0e4 (Voltage Cyan)"
    - "Accent text: #e91e8c (Plasma Magenta)"
    - "Decorative script: #ff3a1a (Ember)"
    - "Border: #ffffff"
    - "primary action: không có màu CTA riêng"

  example_component_prompts:

    - "**Display Headline Block**: Section full-width trên nền #0a0a0a. Ba dòng text trong AzeretMono weight 900 ở 100px, line-height 1.0, color #ffffff, text-transform uppercase. Text bao quanh bất đối xứng — dòng đầu căn trái ở 0px, dòng thứ hai lệch 40px từ trái, dòng thứ ba full-width. Letter-spacing normal. Không border, không padding, không margin xung quanh block."

    - "**Voltage Project Card**: Khối hình chữ nhật 600px × 400px, background #1ef0e4, border-radius 0. Display text 'PROJECT TITLE' trong AzeretMono weight 700 ở 48px, color #e91e8c, căn giữa ngang, đặt cách top 60px. Body text nhỏ 14px AzeretMono weight 400 #e91e8c bên dưới tiêu đề. Một hình dạng hữu cơ bất quy tắc fill phẳng #e91e8c ở cạnh dưới, rộng 200px, chồng lên ranh giới card 20px."

    - "**Script Overlay Label**: Ephidona weight 400 ở 80px, color #ff3a1a, đặt absolute trên góc dưới-trái của một Voltage Cyan card, xoay -8 độ. Một từ hoặc cụm từ ngắn, không tracking adjustment."

    - "**Full-Bleed Photo Section**: Image container 100vw × 70vh, không border-radius, không border, không padding. Image object-fit cover. Ngay sau đó là một text block trong AzeretMono weight 400 ở 16px #ffffff, max-width 600px, trên nền #0a0a0a, với margin-top 80px từ ảnh."

    - "**Monospace Navigation Bar**: Dải full-width trên #0a0a0a, cao 60px, padding 0 48px. Navigation items trong AzeretMono weight 400 ở 14px, #ffffff, uppercase, cách nhau 32px gap, căn trái. Không background fill trên items, không borders, không hover background change — chỉ chuyển màu sang #1ef0e4 khi hover."

  similar_brands:

    - "**Locomotive** — Cùng layout editorial web-magazine với display type cỡ lớn, asymmetric column breaks, và dark canvas được nhấn bởi một accent color bão hòa duy nhất"
    - "**Pentagram** — Brutalist typographic-poster hero treatments nơi type chính là design, kết hợp với full-bleed candid photography và zero decorative chrome"
    - "**Rauno Freiberg** — Portfolio developer độc lập dùng monospaced system type ở tỷ lệ cực đại trên nền tối, với flat saturated accent panels cảm giác như được dán lên trang"
    - "**Tobias van Schneider** — Portfolio cá nhân dùng oversized condensed display type làm yếu tố thị giác chính, với accent color blocks và editorial spacing rhythm"
    - "**Active Theory** — Site creative studio dark-canvas với flat saturated accent panels, oversized type, và tư duy print-poster thay vì app-UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon: #0a0a0a;
          --color-bone: #ffffff;
          --color-voltage-cyan: #1ef0e4;
          --color-plasma-magenta: #e91e8c;
          --color-ember: #ff3a1a;
        
          /* Typography — Font Families */
          --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-azeretmono-display-variant: 'AzeretMono (display variant)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ephidona: 'Ephidona', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1.05;
          --text-display: 100px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-9: 9px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 80-120px;
          --card-padding: 32-48px;
          --element-gap: 8-16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-carbon-canvas: #0a0a0a;
          --surface-voltage-card: #1ef0e4;
          --surface-image-plate: #1a1a1a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon: #0a0a0a;
          --color-bone: #ffffff;
          --color-voltage-cyan: #1ef0e4;
          --color-plasma-magenta: #e91e8c;
          --color-ember: #ff3a1a;
        
          /* Typography */
          --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-azeretmono-display-variant: 'AzeretMono (display variant)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ephidona: 'Ephidona', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1.05;
          --text-display: 100px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-9: 9px;
        }