anthropic___style_reference:
  info: "> Research journal in trên nền đá ấm — bố cục typographic mang tính uy quyền, nơi gạch chân từng từ thay thế màu sắc làm cơ chế nhấn mạnh chính, và hơi ấm duy nhất đến từ chính tờ giấy."

  theme: "light"

  info: "Site của Anthropic chạy trên nền giấy ngà ấm (#faf9f5) — không phải trắng, không phải xám, mà là màu giấy cũ dưới ánh sáng tốt. Bảng màu gần như hoàn toàn achromatic, với toàn bộ ngân sách màu sắc dồn vào một điểm nhấn terracotta đất duy nhất (#d97757) được giữ trong CSS tokens nhưng phần lớn vắng mặt trên UI hiển thị. Hai hệ chữ custom đảm nhiệm toàn bộ công việc tạo cá tính: Anthropic Sans dẫn dắt navigation và UI với tracking khít, trong khi Anthropic Serif mang lại trọng lượng editorial trong headline và nội dung nổi bật — sự kết hợp serif-plus-grotesque báo hiệu viện nghiên cứu, không phải startup. Headline sử dụng gạch chân đôi dày trên các từ khóa (có thể thấy ở 'research' và 'products') làm thiết bị trang trí duy nhất — nó thay thế màu sắc làm cơ chế nhấn mạnh. Các feature card khổng lồ chuyển sang nền gần đen (#141413), tạo ra các dải bề mặt cứng cáp xen kẽ với gradient bằng 0 và không có shadow làm mềm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Slate Dark | `#141413` | `--color-slate-dark` | Văn bản chính, border, nav items, icon fills, nền card — màu gần đen xuất hiện trên cả bề mặt sáng và tối, khiến nó hoạt động như cả foreground lẫn background |"
    info: "| Ivory Light | `#faf9f5` | `--color-ivory-light` | Nền trang, button fills, bề mặt sáng cơ bản — màu trắng ngà ấm mang lại cho site đặc tính giấy da thay vì trắng lâm sàng |"
    info: "| Ivory Medium | `#f0eee6` | `--color-ivory-medium` | Nền nav, bề mặt cấp hai, border highlights |"
    info: "| Ivory Dark | `#e8e6dc` | `--color-ivory-dark` | Văn bản body trên nền tối, divider, border nhẹ |"
    info: "| Oat | `#e3dacc` | `--color-oat` | Nền bề mặt cấp ba, warm mid-tone fills |"
    info: "| Cloud Medium | `#b0aea5` | `--color-cloud-medium` | Border disabled/muted, border tương tác thứ cấp, chrome UI phụ |"
    info: "| Cloud Light | `#d1cfc5` | `--color-cloud-light` | Divider, hairline borders, trạng thái không hoạt động |"
    info: "| Cloud Dark | `#87867f` | `--color-cloud-dark` | Văn bản thứ cấp, meta labels, timestamps |"
    info: "| Slate Medium | `#3d3d3a` | `--color-slate-medium` | Border tối vừa, focus rings trên bề mặt sáng |"
    info: "| Slate Light | `#5e5d59` | `--color-slate-light` | Văn bản cấp ba, caption, nội dung phụ footer |"
    info: "| Clay | `#d97757` | `--color-clay` | Accent CTA elements, trạng thái highlight — terracotta ấm được giữ lại cho những khoảnh khắc cố ý tạo hơi ấm trên nền achromatic |"
    info: "| Accent Ember | `#c6613f` | `--color-accent-ember` | Trạng thái accent đậm hơn, tương tác hover/pressed của clay |"
    info: "| Olive | `#788c5d` | `--color-olive` | Biến thể màu tag chủ đề hoặc nhãn danh mục |"
    info: "| Sky | `#6a9bcc` | `--color-sky` | Biến thể màu tag chủ đề hoặc nhãn danh mục |"
    info: "| Fig | `#c46686` | `--color-fig` | Biến thể màu tag chủ đề hoặc nhãn danh mục |"
    info: "| Cactus | `#bcd1ca` | `--color-cactus` | Biến thể màu tag chủ đề hoặc nhãn danh mục |"

  tokens___typography:

    anthropic_sans___toàn_bộ_chrome_ui__navigation__button__label__badge__footer__body_copy__grotesque_custom_với_tracking_âm_khít_ở_kích_thước_lớn___ở_61px_với__0_02em__nó_đọc_như_chữ_kiến_trúc__không_phải_web_type_thông_thường__dùng_weight_700_cho_hero_headline__weight_400_cho_body__weight_500_600_cho_các_element_tương_tác_____font_anthropic_sans:
      - "**Thay thế:** Inter, DM Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 12px, 15px, 16px, 24px, 61px"
      - "**Line height:** 1.00–1.40"
      - "**Letter spacing:** -0.02em ở kích thước display (61px), -0.005em ở kích thước trung bình (24px), -0.002em ở kích thước body (15-16px)"
      - "**OpenType features:** `standard`"
      - "**Vai trò:** Toàn bộ chrome UI: navigation, button, label, badge, footer, body copy. Grotesque custom với tracking âm khít ở kích thước lớn — ở 61px với -0.02em, nó đọc như chữ kiến trúc, không phải web type thông thường. Dùng weight 700 cho hero headline, weight 400 cho body, weight 500–600 cho các element tương tác."

    anthropic_serif___headline_feature_card__hero_text_editorial__tiêu_đề_dự_án__ở_91px__nó_chiếm_ưu_thế_trên_các_feature_card_tối___serif_ở_tỷ_lệ_display_trên_nền_gần_đen_đọc_như_masthead_của_một_tờ_báo_in__weight_600_để_nhấn_mạnh_trong_ngữ_cảnh_editorial_____font_anthropic_serif:
      - "**Thay thế:** Playfair Display, Lora"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 18px, 20px, 24px, 91px"
      - "**Line height:** 1.10–1.40"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Headline feature card, hero text editorial, tiêu đề dự án. Ở 91px, nó chiếm ưu thế trên các feature card tối — serif ở tỷ lệ display trên nền gần đen đọc như masthead của một tờ báo in. Weight 600 để nhấn mạnh trong ngữ cảnh editorial."

    anthropic_mono___nhãn_kỹ_thuật__trường_metadata__tag_danh_mục__xuất_hiện_tiết_kiệm___sự_hiện_diện_của_nó_báo_hiệu__dữ_liệu__hoặc__phân_loại__trong_các_bố_cục_typographic_____font_anthropic_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Nhãn kỹ thuật, trường metadata, tag danh mục. Xuất hiện tiết kiệm — sự hiện diện của nó báo hiệu 'dữ liệu' hoặc 'phân loại' trong các bố cục typographic."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.4 | -0.03px | `--text-body-sm` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.3 | -0.12px | `--text-heading` |"
      info: "| heading-lg | 61px | 1.1 | -1.22px | `--text-heading-lg` |"
      info: "| display | 91px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 76 | 76px | `--spacing-76` |"
      info: "| 84 | 84px | `--spacing-84` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 0px |"
      info: "| panels | 16px |"
      info: "| buttons | 0px |"
      info: "| featuredCards | 24px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 61px"
      - "**Card padding:** 31px"
      - "**Element gap:** 8-16px"

  components:

    primary_nav_button_try_claude:
      vai_trò: "CTA chính trong top navigation"

      info: "backgroundColor #faf9f5, color #141413, border 1px solid #141413, borderRadius 0px 0px 8px 8px (đỉnh phẳng, đáy bo tròn — một chữ ký asymmetric radius), padding 12px 31px. Anthropic Sans weight 500, 15px. Không có hover shadow — màu border chuyển đổi để báo hiệu trạng thái. Asymmetric radius (đỉnh phẳng/đáy bo tròn) là một chữ ký hình thức có chủ đích, độc nhất cho nav CTA này."

    ghost_nav_button_transparent:
      vai_trò: "Hành động nav thứ cấp, dropdown triggers"

      info: "backgroundColor transparent, color #141413, border 1px solid #141413, borderRadius 0px, padding 22px 12px. Anthropic Sans 15px weight 400. Dùng cho các dropdown trigger 'Commitments' và 'Learn' trong thanh nav."

    muted_ghost_button:
      vai_trò: "Hành động disabled hoặc thứ cấp-thứ cấp"

      info: "backgroundColor transparent, color #b0aea5, border 1px solid #b0aea5, borderRadius 0px, không padding. Anthropic Sans 15px weight 400. Dùng cho các element tương tác không hoạt động hoặc giảm nhấn mạnh."

    inline_text_link_with_underline_emphasis:
      vai_trò: "Link nhấn mạnh từ khóa cấp hero"

      info: "Không background, color #141413, text-decoration underline với kiểu gạch chân dày có thể nhìn thấy (có thể thấy trên 'research' và 'products' trong hero). Anthropic Sans weight 700, 61px. Gạch chân là thiết bị trang trí duy nhất — hoạt động như sự nhấn mạnh thay cho màu sắc. Chỉ xuất hiện trên các từ khóa được chọn trong headline, không phải link body tiêu chuẩn."

    feature_card_dark:
      vai_trò: "Phần editorial feature toàn chiều rộng"

      info: "backgroundColor #141413, borderRadius 24px, padding 31px. Anthropic Serif 91px weight 400 trong #faf9f5 cho headline. Chứa hình ảnh 3D/trừu tượng căn phải. Dark card với display type serif tạo ra một điểm ngắt editorial kiểu broadsheet trong trang ivory. Full-bleed trong content column."

    release_card_light:
      vai_trò: "Card liệt kê nội dung trong lưới 'Latest releases'"

      info: "backgroundColor #f0eee6 hoặc #e3dacc, borderRadius 8px, padding 31px. Headline bằng Anthropic Sans weight 600, 20px, #141413. Body text Anthropic Sans weight 400, 15px, #141413. Hàng metadata footer với nhãn 'DATE' bằng Anthropic Mono 16px. Link 'Read announcement →' bằng Anthropic Sans 15px #141413 với mũi tên. Không border, không shadow — bề mặt card là yếu tố phân biệt duy nhất với nền trang."

    metadata_badge___label:
      vai_trò: "Nhãn danh mục và ngày trên card"

      info: "backgroundColor transparent, color #141413, borderRadius 0px, không padding. Anthropic Mono 16px hoặc Anthropic Sans 12px weight 500. Zero chrome hình ảnh — nhãn typographic thuần túy, không có xử lý pill hay chip. 'DATE', 'CATEGORY' xuất hiện dưới dạng nhãn tracking viết hoa phía trên giá trị."

    arrow_text_link:
      vai_trò: "CTA đọc thêm / thông báo trong card"

      info: "Không background, không border. Anthropic Sans 15px weight 400, color #141413. Ký tự mũi tên '→' được nối trực tiếp vào văn bản. Không gạch chân cho đến khi hover. Dùng cho 'Read announcement →', 'Read the story', 'Model details'."

    continue_reading_button_on_dark:
      vai_trò: "CTA trong dark feature card"

      info: "backgroundColor #faf9f5, color #141413, border 1px solid #141413, borderRadius 0px, padding 12px 31px. Anthropic Sans 15px weight 500. Ivory fill trên nền card tối — cùng component button với Primary Nav Button nhưng không có asymmetric radius trên bề mặt tối."

    top_navigation_bar:
      vai_trò: "Navigation chính toàn site"

      info: "backgroundColor #f0eee6 hoặc #faf9f5, position sticky, height ~68px. Bên trái: wordmark 'ANTHROPIC\' bằng Anthropic Sans weight 700, 16px, #141413. Giữa: nav links bằng Anthropic Sans 15px weight 400, #141413, background trong suốt. Bên phải: nút 'Try Claude' asymmetric-radius. Không có border dưới ở trạng thái mặc định, border #3d3d3a nhẹ ở trạng thái scroll."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #faf9f5 (Ivory Light) làm nền trang — không bao giờ dùng trắng tinh (#ffffff) hoặc xám trung tính."
      - "Áp dụng borderRadius 0px cho tất cả button và control tương tác ngoại trừ CTA 'Try Claude' chính dùng 0px 0px 8px 8px (asymmetric: đỉnh phẳng, chỉ bo tròn đáy)."
      - "Nhấn mạnh từ khóa headline chỉ bằng text-decoration underline dày — không bao giờ dùng màu sắc, tăng bold weight, hoặc highlight background — làm cơ chế nhấn mạnh trang trí duy nhất."
      - "Dùng Anthropic Serif ở kích thước display (91px, weight 400) độc quyền trong card bề mặt tối (#141413); dùng Anthropic Sans cho tất cả headline trên bề mặt sáng."
      - "Giới hạn màu sắc chromatic trong bảng màu accent CSS (Clay #d97757, Olive #788c5d, v.v.) và triển khai một cách tiết kiệm — tối đa một accent mỗi section; trạng thái mặc định dùng zero chromatic color."
      - "Đặt dark editorial feature card với borderRadius 24px và giữ chúng ở độ rộng toàn content column với clipping cứng của hình ảnh bên trong ở cùng radius."
      - "Dùng Anthropic Mono 16px cho nhãn trường metadata (DATE, CATEGORY) trong footer card — sự tương phản mono/grotesque báo hiệu dữ liệu có cấu trúc trong bố cục editorial."

    không_nên_làm:
      - "Không bao giờ dùng trắng tinh (#ffffff) hoặc đen tinh (#000000) làm nền bề mặt — tất cả bề mặt phải đến từ dải token ivory/slate."
      - "Không bao giờ thêm box-shadows hoặc drop-shadows vào bất kỳ component nào — tương phản bề mặt và đường border là tín hiệu độ sâu duy nhất."
      - "Không bao giờ bo tròn góc button đồng đều — radius 0px là một tín hiệu hình thức có chủ đích; tránh giới thiệu 4px, 6px, hoặc pill buttons."
      - "Không bao giờ dùng Anthropic Serif trên nền ivory của trang ở kích thước lớn — tỷ lệ display serif được dành riêng cho sự đảo ngược dark card."
      - "Không bao giờ áp dụng nhiều màu accent chromatic trong một section duy nhất — các token palette (Clay, Sky, Fig, Olive) là các biến thể phân loại, không phải accent có thể kết hợp."
      - "Không bao giờ dùng background fills cho badge hoặc label component — metadata labels là văn bản thuần túy, không có xử lý chip, pill, hay capsule."
      - "Không bao giờ thay thế cơ chế nhấn mạnh underline bằng nhấn mạnh màu sắc trên headline — link trong headline được gạch chân, chúng không đổi màu."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Page Base | `#faf9f5` | Nền trang gốc, button fills, bề mặt mặc định |"
    info: "| 2 | Nav / Elevated Light | `#f0eee6` | Nền thanh navigation, bề mặt card thứ cấp |"
    info: "| 3 | Oat Card | `#e3dacc` | Nền card cấp ba, section callout |"
    info: "| 4 | Feature Dark | `#141413` | Editorial feature cards, khối nội dung đảo ngược — tương phản tối đa với page base |"

  elevation:

    info: "Zero box-shadows xuyên suốt. Độ sâu bề mặt đạt được hoàn toàn thông qua tương phản màu nền — ivory (#faf9f5) vs gần đen (#141413) vs oat (#e3dacc) — với các chuyển tiếp cứng cáp và không làm mờ. Cards nằm phẳng trong lưới của chúng, không có độ nâng. Cách tiếp cận phẳng-nhưng-tương-phản-cao này đọc như thiết kế in ấn chuyển sang màn hình: độ sâu thông qua mật độ mực, không phải mô phỏng ánh sáng."

  imagery:

    info: "Bị chi phối bởi một đồ họa 3D trừu tượng lặp lại duy nhất — một mạng lưới hoặc mạng tinh thể tối gồm các ô lục giác/vô định hình với các cạnh phát sáng trắng, giống như cấu trúc tế bào sinh học hoặc mạng lưới thần kinh dưới kính hiển vi. Được hiển thị dưới dạng ảnh trường tối tương phản cao (nền gần đen, đường khung dây phát sáng trắng) và được đặt lớn trong các dark feature card. Đây không phải nhiếp ảnh hay minh họa — đó là một hình ảnh trực quan hóa khoa học 3D được hiển thị với thẩm mỹ sinh học, gợi ý AI safety như một loại khoa học vật liệu. Hình ảnh luôn được chứa trong ranh giới dark card với hard-edged radius clipping (24px). Mật độ văn bản trên hình ảnh cao — hình ảnh được sử dụng như một điểm nhấn thị giác kịch tính duy nhất mỗi section, không phải motif lặp lại. Phần còn lại của trang hoàn toàn chiếm ưu thế bởi văn bản, không có hình ảnh trang trí, icon, hay minh họa."

  layout:

    info: "Layout căn giữa max-width (~1200px) trên nền ivory. Hero chia cột: headline weight-700 lớn bên trái (chiếm ~55% chiều rộng) với một đoạn mô tả ngắn bên phải ở ~30% chiều rộng, cả hai đều nằm trên nền trang ivory với padding trên rộng (~80px). Bên dưới hero, các dark card toàn chiều rộng (borderRadius 24px) phá vỡ trường ivory — nửa trái mang headline display Anthropic Serif + CTA, nửa phải chứa hình ảnh trực quan hóa 3D. Các dark editorial card này có độ rộng toàn content column nhưng không full-bleed đến mép trình duyệt. Bên dưới đó, lưới 3 cột cho 'Latest releases' với các release card bằng nhau trên nền oat/ivory-dark. Section gaps khoảng 61px. Navigation là thanh trên cùng sticky trải dài toàn chiều rộng ở chiều cao ~68px. Không sidebar. Không mega-menu — dropdown triggers là inline trong nav với chevrons. Nhịp điệu tổng thể là: hero → dark editorial band → light card grid → lặp lại, tạo ra một mẫu nhiệt xen kẽ nghiêm ngặt."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Nền trang: #faf9f5 (Ivory Light)"
    - "Văn bản chính: #141413 (Slate Dark)"
    - "Bề mặt card tối: #141413"
    - "Bề mặt card sáng: #f0eee6 / #e3dacc"
    - "Muted / disabled: #b0aea5"
    - "Accent (dùng tiết kiệm): #d97757 (Clay)"
    - "Border mặc định: #141413 (1px solid)"

    ví_dụ_component_prompts:

    - "**Hero Section:** Nền Ivory (#faf9f5). Cột trái: headline 'AI research and products' ở 61px Anthropic Sans weight 700, #141413, letter-spacing -1.22px; các từ 'research' và 'products' có text-decoration gạch chân dày. Cột phải: body text 18px Anthropic Sans weight 400, #141413, max-width ~320px. Không background image. 80px top padding."

    - "**Dark Editorial Feature Card:** backgroundColor #141413, borderRadius 24px, padding 31px. Trái: tiêu đề dự án ở 91px Anthropic Serif weight 400, #faf9f5, line-height 1.10. Phụ đề ở 20px Anthropic Sans weight 400, #e8e6dc. Nút CTA: backgroundColor #faf9f5, color #141413, border 1px solid #141413, borderRadius 0px, padding 12px 31px, Anthropic Sans 15px weight 500. Phải: hình ảnh trực quan hóa lưới 3D trường tối được clip ở radius 24px."

    - "**Release Card Grid (3-cột):** Mỗi card backgroundColor #f0eee6, borderRadius 8px, padding 31px. Headline: Anthropic Sans 20px weight 600, #141413. Body: Anthropic Sans 15px weight 400, #141413, line-height 1.40. Hàng footer: nhãn 'DATE' bằng Anthropic Mono 16px #87867f, giá trị #141413. Arrow link 'Read announcement →' Anthropic Sans 15px #141413. Không border, không shadow."

    - "**Top Navigation Bar:** backgroundColor #f0eee6, height 68px, full-width. Trái: wordmark 'ANTHROPIC\' Anthropic Sans 16px weight 700 #141413. Giữa: nav links 15px weight 400 #141413, bg trong suốt, 0px radius, padding 22px 12px, border 1px solid #141413. Phải: nút 'Try Claude' backgroundColor #faf9f5, border 1px solid #141413, borderRadius 0px 0px 8px 8px, padding 12px 31px, Anthropic Sans 15px weight 500."

    - "**Metadata Label + Value Pair:** Nhãn 'DATE' hoặc 'CATEGORY' bằng Anthropic Mono 16px weight 400, #87867f, viết hoa, không background, không border. Giá trị bên dưới bằng Anthropic Sans 15px weight 400 #141413. Zero padding, zero border-radius — cấu trúc typographic thuần túy."

  typographic_emphasis_system:

    info: "Anthropic sử dụng gạch chân làm thiết bị nhấn mạnh thị giác chính (và duy nhất). Trong hero headline, các danh từ chính ('research', 'products') nhận được text-decoration gạch chân dày — điều này thay thế cách tiếp cận thông thường là dùng màu accent hoặc tăng bold weight để nhấn mạnh. Bảng màu chromatic gần như bằng không của hệ thống khiến cơ chế gạch chân-như-accent này trở nên cần thiết: không có màu sắc để thu hút mắt, trang trí typographic mang tất cả trọng lượng ngữ nghĩa. Mẫu này nên được áp dụng nhất quán: gạch chân các từ khóa được chọn trong headline tỷ lệ display, không bao giờ thay đổi màu sắc hoặc weight của chúng. Body text không sử dụng trang trí nhấn mạnh — chỉ tỷ lệ display và heading-lg mới dùng xử lý gạch chân."

  surface_alternation_system:

    info: "Nhịp điệu trang được xác định bởi sự luân phiên sáng/tối nghiêm ngặt. Page base Ivory (#faf9f5) → dark editorial cards (#141413, radius 24px) → light card grids (#f0eee6/#e3dacc, radius 8px) → lặp lại. Các chuyển tiếp cứng cáp (không có gradient fade giữa các dải). Dark cards không phải toàn viewport-width mà là toàn content-column-width với radius 24px tạo ra một 'sự đảo ngược được chứa' thay vì một dải full-bleed. Điều này có nghĩa là nền ivory lộ ra xung quanh cả bốn góc của dark card, duy trì cảm giác rằng tối là một element bề mặt, không phải sự chiếm lĩnh nền."

  similar_brands:

    - "**OpenAI** — Cùng bảng màu achromatic-dominant với nền trang trắng ngà ấm và cặp serif-plus-grotesque editorial cho nội dung nghiên cứu"
    - "**DeepMind** — Thẩm mỹ viện nghiên cứu với các khối editorial tối trên nền sáng và zero chrome trang trí"
    - "**Are.na** — Bảng màu gần như không màu, phân cấp typographic làm cấu trúc thị giác duy nhất, bề mặt phẳng với các cạnh cứng và không shadow"
    - "**Stripe Press** — Nền ivory ấm, serif ở tỷ lệ editorial, thẩm mỹ trang in áp dụng cho giao diện kỹ thuật số"
    - "**Substack** — Cặp serif-grotesque, bố cục văn bản chiếm ưu thế, nền sáng ấm với chữ gần đen — trọng lượng editorial hơn UI sản phẩm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-slate-dark: #141413;
          --color-ivory-light: #faf9f5;
          --color-ivory-medium: #f0eee6;
          --color-ivory-dark: #e8e6dc;
          --color-oat: #e3dacc;
          --color-cloud-medium: #b0aea5;
          --color-cloud-light: #d1cfc5;
          --color-cloud-dark: #87867f;
          --color-slate-medium: #3d3d3a;
          --color-slate-light: #5e5d59;
          --color-clay: #d97757;
          --color-accent-ember: #c6613f;
          --color-olive: #788c5d;
          --color-sky: #6a9bcc;
          --color-fig: #c46686;
          --color-cactus: #bcd1ca;
        
          /* Typography — Font Families */
          --font-anthropic-sans: 'Anthropic Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-anthropic-serif: 'Anthropic Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-anthropic-mono: 'Anthropic Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.03px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: -0.12px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.22px;
          --text-display: 91px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-76: 76px;
          --spacing-84: 84px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 61px;
          --card-padding: 31px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 0px;
          --radius-panels: 16px;
          --radius-buttons: 0px;
          --radius-featuredcards: 24px;
        
          /* Surfaces */
          --surface-page-base: #faf9f5;
          --surface-nav-elevated-light: #f0eee6;
          --surface-oat-card: #e3dacc;
          --surface-feature-dark: #141413;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-slate-dark: #141413;
          --color-ivory-light: #faf9f5;
          --color-ivory-medium: #f0eee6;
          --color-ivory-dark: #e8e6dc;
          --color-oat: #e3dacc;
          --color-cloud-medium: #b0aea5;
          --color-cloud-light: #d1cfc5;
          --color-cloud-dark: #87867f;
          --color-slate-medium: #3d3d3a;
          --color-slate-light: #5e5d59;
          --color-clay: #d97757;
          --color-accent-ember: #c6613f;
          --color-olive: #788c5d;
          --color-sky: #6a9bcc;
          --color-fig: #c46686;
          --color-cactus: #bcd1ca;
        
          /* Typography */
          --font-anthropic-sans: 'Anthropic Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-anthropic-serif: 'Anthropic Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-anthropic-mono: 'Anthropic Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.03px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: -0.12px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.22px;
          --text-display: 91px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-76: 76px;
          --spacing-84: 84px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        }