egstad___style_reference:
  info: "> editorial broadside in warm ink — monumental type, one paper color, zero decoration"

  theme: "light"

  info: "Egstad hoạt động như một editorial broadside một màu: mực ấm (#252422) in trên nền giấy kem ấm (#e2e0d9), không có màu trang trí, không gradient, và gần như không có UI chrome. Toàn bộ nhận diện thị giác được gánh bởi ba typeface — một custom monumental display face (EG Metaphor) phủ kín trang từ mép này sang mép kia, system Times cho body copy, và một micro-display tracking rộng (S85) cho navigation. Các component được tước bỏ đến tận xương: một navigation bar hình pill tối màu, hairline horizontal rules, và circular image masks đè lên type mà không có container. Kết quả mang phong cách giống một tấm poster in hoặc magazine masthead hơn là một portfolio site điển hình — sự tiết chế chính là bản sắc, typography chính là kiến trúc."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Press Ink | `#252422` | `--color-press-ink` | Primary text, heading strokes, borders, dark surface cho navigation bar và các khối tối — warm near-black với undertone nâu, mềm hơn pure black trên nền cream canvas |"
    info: "| Bone Paper | `#e2e0d9` | `--color-bone-paper` | Page canvas, card và container backgrounds, inverted text trên dark surface — warm off-white với chút sắc olive/khaki, khiến mực tối trông như in chứ không phải digital |"
    info: "| Pure Carbon | `#000000` | `--color-pure-carbon` | Hairline borders và các điểm nhấn đen tuyền hiếm hoi khi cần độ tương phản cạnh tối đa trên nền cream canvas |"

  tokens___typography:

    eg_metaphor___signature_display_và_wordmark_face_dùng_trên_toàn_bộ_type_scale_từ_12px_captions_đến_399px_headlines_phủ_kín_trang__single_weight_400_là_có_chủ_đích___face_này_mang_toàn_bộ_cá_tính_qua_custom_letterforms__không_qua_weight_contrast__wide_stylistic_alternates_ss04_ss07_đang_hoạt_động_và_có_thể_hoán_đổi_letterforms_cho_headline_compositions_____font_eg_metaphor:
      - "**Substitute:** GT Sectra Display, Tiempos Headline, hoặc Reckless Neue"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 15px, 59px, 399px"
      - "**Line height:** 0.97–1.34 tùy kích thước — tight 0.97 ở display scale, generous 1.33 ở mid scale"
      - "**Letter spacing:** -0.055em ở display sizes (≈-22px ở 399px, ≈-3.2px ở 59px); +0.02em ở small sizes (12–15px)"
      - "**OpenType features:** `\"kern\" on, \"liga\" on, \"pnum\" on, \"ss04\" on, \"ss05\" on, \"ss06\" on, \"ss07\" on`"
      - "**Role:** Signature display và wordmark face dùng trên toàn bộ type scale từ 12px captions đến 399px headlines phủ kín trang. Single weight (400) là có chủ đích — face này mang toàn bộ cá tính qua custom letterforms, không qua weight contrast. Wide stylistic alternates (ss04–ss07) đang hoạt động và có thể hoán đổi letterforms cho headline compositions."

    times___body_copy_only___system_times_ở_single_size_16px_1_2_cho_toàn_bộ_paragraph_text__được_chọn_như_một_sự_tương_phản_có_chủ_đích_với_custom_display_face__serif_quen_thuộc__trung_tính__không_mang_thương_hiệu__để_display_type_làm_chủ_trang_____font_times:
      - "**Substitute:** Times New Roman, system-ui serif"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"kern\" on, \"liga\" on, \"pnum\" on`"
      - "**Role:** Body copy only — system Times ở single size 16px/1.2 cho toàn bộ paragraph text. Được chọn như một sự tương phản có chủ đích với custom display face: serif quen thuộc, trung tính, không mang thương hiệu, để display type làm chủ trang."

    s85___navigation_micro_labels_đặt_ở_12px_với_0_1em_tracking_và_line_height_3_0_tạo_khoảng_không_dọc_rộng_rãi_quanh_mỗi_nav_item__nằm_bên_trong_dark_pill_nav_bar_dưới_dạng_uppercase_hoặc_small_caps_category_labels_egstad__work__email_____font_s85:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, hoặc Söhne Mono ở 12px với 0.1em tracking"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 3.00"
      - "**Letter spacing:** 0.1em (1.2px)"
      - "**OpenType features:** `\"ss04\" on, \"ss05\" on, \"ss06\" on, \"ss07\" on`"
      - "**Role:** Navigation micro-labels đặt ở 12px với 0.1em tracking và line-height 3.0 tạo khoảng không dọc rộng rãi quanh mỗi nav item. Nằm bên trong dark pill nav bar dưới dạng uppercase hoặc small-caps category labels (EGSTAD, WORK, EMAIL)."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.24px | `--text-caption` |"
      info: "| body-sm | 15px | 1.34 | 0.3px | `--text-body-sm` |"
      info: "| heading | 59px | 1.33 | -3.245px | `--text-heading` |"
      info: "| display | 399px | 0.97 | -21.945px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 30 | 30px | `--spacing-30` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| navPill | 1440px |"
      info: "| navInner | 36px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 16px"
      - "**Element gap:** 16px"

  components:

    pill_navigation_bar:
      role: "Primary site navigation"

      info: "Dark bar hình pill hoàn chỉnh (1440px border-radius) tô màu Press Ink (#252422), chứa tên site và nav links. Internal padding khoảng 7px right margin giữa các item, 16px vertical padding. Chứa S85 12px labels với 0.1em tracking, text màu Bone Paper (#e2e0d9). Nằm ở góc trên cùng bên trái viewport, nhỏ gọn và theo hướng ngang."

    nav_tab_item:
      role: "Individual navigation link"

      info: "S85 ở 12px, 0.1em letter-spacing, line-height 3.0 để tạo khoảng không dọc. Text màu Bone Paper (#e2e0d9) trên nền dark pill. Không có hover state — phẳng, chỉ label, không gạch chân hay icon. Cách nhau bởi khoảng cách 7–16px trong pill."

    display_wordmark:
      role: "Hero-scale brand identifier"

      info: "EG Metaphor ở 399px, weight 400, line-height 0.97, letter-spacing -0.055em (≈-22px). Gần như lấp đầy toàn bộ chiều rộng viewport. Màu Press Ink (#252422) trên nền Bone Paper (#e2e0d9). Thường bị che phủ bởi circular image masks mà không có xung đột z-index. Đây là signature element — nó không phải heading, nó là kiến trúc."

    mid_scale_heading:
      role: "Section-level headline"

      info: "EG Metaphor ở 59px, weight 400, line-height 1.33, letter-spacing -0.055em (≈-3.2px). Màu Press Ink. Dùng cho secondary headlines cần cùng cá tính với display wordmark nhưng ở kích thước dễ đọc hơn."

    body_paragraph:
      role: "Readable paragraph copy"

      info: "System Times ở 16px, line-height 1.2, weight 400, normal letter-spacing. Màu Press Ink (#252422). Không có paragraph spacing ngoài line-height multiplier 1.2 — text nằm trong các khối liên tục, chặt chẽ. Nằm trực tiếp bên dưới display type mà không có label hay eyebrow xen giữa."

    circular_image_mask:
      role: "Portrait hoặc visual insert"

      info: "Ảnh được cắt thành hình tròn hoàn hảo, không border, không shadow, không padding ring. Đè trực tiếp lên display type và body text, với nội dung ảnh hiện ra phía trước các letterforms. Không có border-radius được chỉ định nhưng được render dưới dạng 50% hoặc một fixed value lớn. Màu sắc và nội dung ảnh mang biến thể màu sắc duy nhất trong hệ thống."

    hairline_divider:
      role: "Section hoặc content separator"

      info: "1px horizontal rule màu Press Ink (#252422) hoặc Pure Carbon (#000000). Full-width hoặc giới hạn theo content width tùy ngữ cảnh. Không có decorative styling — chỉ là một đường line. Dùng để phân cách body paragraphs khỏi links hoặc đóng sections."

    footer_block:
      role: "Page-bottom content area"

      info: "Footer tối giản với 22px vertical padding trên và dưới content. Dùng cùng Times 16px body type. Không thay đổi background color, không border — chảy trực tiếp từ page canvas."

  do_s_and_don_ts:

    do:
      - "Dùng Press Ink (#252422) trên Bone Paper (#e2e0d9) cho toàn bộ text — không bao giờ thêm màu thứ hai"
      - "Đặt display headlines bằng EG Metaphor ở 399px với -0.055em letter-spacing và 0.97 line-height để các chữ cái chạm nhau và lấp đầy viewport"
      - "Dùng system Times ở 16px/1.2 cho toàn bộ body copy — không thay thế bằng serif khác"
      - "Đặt nav labels bằng S85 (hoặc mono fallback) ở 12px với 0.1em tracking và 3.0 line-height để tạo khoảng không dọc bên trong pill bar"
      - "Dùng 1440px border-radius cho main navigation pill để nó trông như một viên nang hoàn hảo"
      - "Phân cách content bằng 1px hairline rules màu Press Ink hoặc Pure Carbon — không bao giờ dùng background color blocks"
      - "Để circular image masks đè lên display type mà không có borders, shadows, hay padding rings"

    don_t:
      - "Không thêm accent colors, gradients, hoặc chromatic buttons — hệ thống là monochrome theo thiết kế"
      - "Không áp dụng box-shadows cho bất kỳ element nào — sự phân cách đến từ ink contrast, không phải elevation"
      - "Không dùng bold hoặc semibold weights của EG Metaphor hay Times — toàn bộ hệ thống chạy ở weight 400"
      - "Không ngắt display headline thành nhiều dòng bằng manual line-breaks — để nó chạy từ mép này sang mép kia như một composition duy nhất"
      - "Không dùng small radii (4px, 8px, 12px) trên containers — radii duy nhất trong hệ thống là 1440px (pill) và 36px (nav inner)"
      - "Không thêm icons, badges, tags, hoặc pill labels bên trong body content — navigation và labeling chỉ là text"
      - "Không đặt body copy bằng EG Metaphor — chỉ dùng face đó cho display và heading scales"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper Canvas | `#e2e0d9` | Base page background — warm cream mà tất cả element khác nằm trên |"
    info: "| 1 | Ink Surface | `#252422` | Dark filled blocks (navigation bar pill, footer nếu có) — warm near-black với brown undertone |"

  elevation:

    info: "Không có shadows. Mọi sự phân cách không gian đều đạt được qua độ tương phản warm dark-on-cream, hairline borders màu Pure Carbon hoặc Press Ink, và khoảng trống âm bản rộng rãi. Elevation được truyền tải bằng mật độ mực, không bằng blur hay offset."

  imagery:

    info: "Imagery cực kỳ thưa thớt và chỉ được dùng dưới dạng một circular portrait mask duy nhất đè lên display wordmark. Ảnh là một tight face crop, màu sắc tự nhiên, không filter hay duotone treatment, không background context. Không product photography, không illustration, không abstract graphics. Ngôn ngữ thị giác chủ yếu dựa trên text: typography CHÍNH LÀ imagery, và ảnh chỉ tồn tại để nhân tính hóa trang web dẫn dắt bằng type. Không có icon system nào ngoài text-based nav labels."

  layout:

    info: "Full-bleed editorial layout không có max-width constraint rõ ràng ở display scale — wordmark 399px lấp đầy từ mép này sang mép kia. Bên dưới hero, content được căn trái với generous left margin và chảy trong một cột hẹp duy nhất (giới hạn khoảng 700–900px để dễ đọc). Pill nav bar nằm absolute hoặc fixed ở góc trên cùng bên trái viewport, nhỏ gọn và ngang. Trang đọc như một vertical scroll gồm các khối type hoành tráng được phân cách bởi hairline rules và các vòng tròn ảnh nhỏ xen kẽ — không có card grids, không multi-column feature sections, không alternating dark/light bands. Navigation là một top bar tối giản; không sidebar, không mega-menu, không footer navigation system ngoài các text links đơn giản."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #252422"
    - "background: #e2e0d9"
    - "dark surface (nav bar): #252422"
    - "border: #000000 hoặc #252422"
    - "primary action: không có distinct CTA color"

    example_component_prompts:

    - "Tạo một pill navigation bar: 1440px border-radius, background #252422, padding 16px vertical, positioned top-left. Bên trong, đặt nav labels bằng S85 (hoặc JetBrains Mono) ở 12px, weight 400, 0.1em letter-spacing, line-height 3.0, color #e2e0d9, với khoảng cách 7–16px giữa các item."

    - "Tạo một display wordmark hero: full-bleed EG Metaphor (hoặc GT Sectra Display) ở 399px, weight 400, line-height 0.97, letter-spacing -0.055em, color #252422 trên nền #e2e0d9. Một circular portrait image (50% border-radius, không border, không shadow) đè lên phần dưới bên phải của wordmark."

    - "Tạo một body text block: Times ở 16px, weight 400, line-height 1.2, color #252422 trên nền #e2e0d9. Giới hạn width khoảng ~800px, căn trái với generous left margin. Đóng block bằng 1px hairline rule màu #252422."

    - "Tạo một mid-scale section heading: EG Metaphor ở 59px, weight 400, line-height 1.33, letter-spacing -0.055em, color #252422. Nằm phía trên body copy với khoảng cách ~40px, không có eyebrow label hay decorative element."

    - "Tạo một footer: 22px padding trên và dưới, Times 16px body text màu #252422 trên nền #e2e0d9, không thay đổi background, không border, không icons — chỉ text links cách nhau bằng khoảng trắng."

  similar_brands:

    - "**Pentagram partner sites** — Cùng editorial broadside treatment — một custom display face ở extreme scale, nền giấy ấm, không decorative UI, typography là toàn bộ hệ thống thị giác"
    - "**It's Nice That features** — Large-format serif display type lấp đầy viewport, palette monochrome tối giản, circular portrait crops đè lên headlines"
    - "**Manual (manualcreative.jp)** — Pill-shaped dark navigation bar, oversized custom display wordmark, warm off-white canvas, zero chromatic accents"
    - "**Locomotive (locomotive.ca)** — Monumental serif display type, palette monochrome tiết chế, editorial magazine-masthead feel thay vì SaaS product UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-press-ink: #252422;
          --color-bone-paper: #e2e0d9;
          --color-pure-carbon: #000000;
        
          /* Typography — Font Families */
          --font-eg-metaphor: 'EG Metaphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-s85: 'S85', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.24px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.34;
          --tracking-body-sm: 0.3px;
          --text-heading: 59px;
          --leading-heading: 1.33;
          --tracking-heading: -3.245px;
          --text-display: 399px;
          --leading-display: 0.97;
          --tracking-display: -21.945px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-22: 22px;
          --spacing-30: 30px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80-120px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 36px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-navpill: 1440px;
          --radius-navinner: 36px;
        
          /* Surfaces */
          --surface-paper-canvas: #e2e0d9;
          --surface-ink-surface: #252422;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-press-ink: #252422;
          --color-bone-paper: #e2e0d9;
          --color-pure-carbon: #000000;
        
          /* Typography */
          --font-eg-metaphor: 'EG Metaphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-s85: 'S85', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.24px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.34;
          --tracking-body-sm: 0.3px;
          --text-heading: 59px;
          --leading-heading: 1.33;
          --tracking-heading: -3.245px;
          --text-display: 399px;
          --leading-display: 0.97;
          --tracking-display: -21.945px;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-22: 22px;
          --spacing-30: 30px;
        
          /* Border Radius */
          --radius-3xl: 36px;
          --radius-full: 1440px;
        }