superhi_basic_income___style_reference: info: "> Cột tím đậm bên cạnh khung trắng rộng" theme: "light" info: "SuperHi Basic Income là một hệ thống editorial hai màu: một cột tím điện cố định neo bên trái, và một khung trắng rộng với typography thoáng đãng cuộn bên phải. Bảng màu cực kỳ nhị phân — `#2727e6` và `#ffffff` — không có bóng đổ, gradient hay bề mặt phụ nào làm loãng thông điệp. Typography đảm nhận toàn bộ cá tính: Basis (một geometric sans) xử lý mọi vai trò chức năng, DDC (một display face nhân văn hơn) chỉ xuất hiện ở nơi cần chất riêng, và line height thoáng đãng (1.46–1.67 cho body text). Các component phẳng và được định hình bằng bo góc — pill tags với radius 50px, button bo tròn nhẹ 16px, một minh họa địa cầu chấm tròn là đồ họa duy nhất. Tinh thần là sự tự tin của poster chiến dịch: một màu nổi bật, không trang trí, và text làm tất cả công việc nặng nhọc." tokens___màu_sắc: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Electric Iris | `#2727e6` | `--color-electric-iris` | Điểm nhấn tím cho viền action dạng outline, label có link, và nhấn mạnh tương tác nhẹ. Không nâng lên thành màu CTA chính |" info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas nội dung bên phải, bề mặt card và elevated, text sidebar và minh họa trên panel tím |" tokens___typography: basis_grotesque___ngựa_thồ___body__buttons__links__hầu_hết_heading__sidebar_labels__và_numbered_list_markers__weight_500_dùng_cho_buttons_và_inline_text_được_nhấn_mạnh__700_dành_cho_nhấn_mạnh_mạnh_trong_body_copy__tính_trung_lập_hình_học_của_nó_để_màu_nhấn_duy_nhất_lên_tiếng_____font_basis_grotesque: - "**Thay thế:** Basis Grotesque (miễn phí, Indian Type Foundry) → Inter, Söhne, hoặc IBM Plex Sans" - "**Weights:** 400, 500, 700" - "**Cỡ chữ:** 13, 14, 16, 21, 24, 32, 48px" - "**Line height:** 1.14–1.67" - "**Letter spacing:** normal ở mọi cỡ" - "**Vai trò:** Ngựa thồ — body, buttons, links, hầu hết heading, sidebar labels, và numbered list markers. Weight 500 dùng cho buttons và inline text được nhấn mạnh, 700 dành cho nhấn mạnh mạnh trong body copy. Tính trung lập hình học của nó để màu nhấn duy nhất lên tiếng." ddc___một_display_face_nhân_văn_hơn__dùng_có_chọn_lọc_cho_một_số_heading_cần_giọng_điệu_mềm_mại__bớt_hình_học__line_height_chặt_1_00_1_14_là_điểm_nhận_diện__ddc_đảm_nhận_cả_vai_trò_chữ_và_khối_đồ_họa__thay_thế_bằng_một_humanist_sans_có_cá_tính_mạnh_hơn_basis___s_hne_breit__abc_diatype_mono__hoặc_tiempos_headline_ở_weight_thấp_____font_ddc: - "**Thay thế:** ABC Diatype, Söhne Breit, hoặc PP Neue Montreal" - "**Weights:** 400" - "**Cỡ chữ:** 21, 24px" - "**Line height:** 1.00–1.14" - "**Vai trò:** Một display face nhân văn hơn, dùng có chọn lọc cho một số heading cần giọng điệu mềm mại, bớt hình học. Line height chặt (1.00–1.14) là điểm nhận diện: DDC đảm nhận cả vai trò chữ và khối đồ họa. Thay thế bằng một humanist sans có cá tính mạnh hơn Basis — Söhne Breit, ABC Diatype Mono, hoặc Tiempos Headline ở weight thấp." type_scale: info: "| Vai trò | Cỡ | Line Height | Letter Spacing | Token |" info: "|---------|-----|-------------|----------------|-------|" info: "| caption | 13px | 1.46 | — | `--text-caption` |" info: "| body | 16px | 1.67 | — | `--text-body` |" info: "| subheading | 21px | 1.33 | — | `--text-subheading` |" info: "| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |" info: "| heading | 32px | 1.17 | — | `--text-heading` |" info: "| display | 48px | 1.14 | — | `--text-display` |" tokens___spacing___hình_dạng: đơn_vị_cơ_bản: "8px" mật_độ: "thoải mái" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|-----|---------|-------|" info: "| 4 | 4px | `--spacing-4` |" info: "| 8 | 8px | `--spacing-8` |" info: "| 16 | 16px | `--spacing-16` |" info: "| 24 | 24px | `--spacing-24` |" info: "| 32 | 32px | `--spacing-32` |" border_radius: info: "| Element | Giá trị |" info: "|---------|--------|" info: "| tags | 50px |" info: "| cards | 0px |" info: "| buttons | 16px |" layout: - "**Khoảng cách section:** 64px" - "**Padding card:** 32px" - "**Khoảng cách element:** 8-16px" components: fixed_violet_sidebar: vai_trò: "Brand panel" info: "Cột trái cố định full-height (~33% viewport width), nền `#2727e6`, chứa minh họa địa cầu chấm tròn căn giữa theo chiều dọc, brand wordmark 'SUPERHI BASIC INCOME' ở trên cùng dạng chữ hoa trắng, và status label 'APPLICATIONS CLOSED' ở dưới cùng — tất cả chữ trắng trên nền tím. Không có padding bên trong, nhưng các element căn chỉnh theo trục dọc trung tâm." sidebar_wordmark: vai_trò: "Brand label" info: "Chữ hoa trắng trên nền `#2727e6`, Basis 14px weight 500, căn giữa ngang trong sidebar, với một đường kẻ ngang trắng 1px bên dưới làm divider. Nằm ở đầu sidebar." sidebar_status_label: vai_trò: "Chỉ báo trạng thái" info: "Chữ hoa trắng trên nền `#2727e6`, Basis 14px weight 500, căn giữa ngang ở cuối sidebar, có các đường kẻ ngang trắng ngắn ở trước và sau — hoạt động như một con dấu 'đã đóng'." dotted_globe_illustration: vai_trò: "Yếu tố đồ họa duy nhất" info: "Hình cầu ma trận chấm trắng trên sidebar `#2727e6`, chiếm ~60% chiều cao sidebar, căn giữa. Một số chấm trắng đặc lớn hơn rải rác trên bề mặt hình cầu đóng vai trò điểm đánh dấu vị trí. Không animation, không label — thuần texture." display_heading: vai_trò: "Mở đầu section" info: "Basis 48px weight 400, `#2727e6`, line-height 1.14, letter-spacing chặt. Dùng cho câu hero ở cấp độ trang. Có thể dài 2–4 dòng, căn trái trong cột nội dung bên phải." section_heading: vai_trò: "Label section nội dung" info: "Basis 32px weight 400, `#2727e6`, line-height 1.17, nằm ở cột phụ bên trái của vùng nội dung bên phải. Đóng vai trò 'tiêu đề' cho mỗi khối nội dung, kết hợp với body dài hơn ở cột phụ bên phải." subheading_ddc_variant: vai_trò: "Heading có cá tính" info: "DDC 21–24px weight 400, `#2727e6`, line-height 1.00–1.14. Dành riêng cho những khoảnh khắc cần hơi ấm typographic — dùng tối đa 1–2 lần mỗi trang. Leading chặt khiến nó đọc gần như một khối hình." body_text: vai_trò: "Copy dài" info: "Basis 16px weight 400, `#2727e6`, line-height 1.67 (thoáng nhất trong hệ thống). Khuyến khích đoạn văn dài — leading thoáng báo hiệu sự tự tin editorial thay vì mật độ UI." underlined_inline_link: vai_trò: "Text link" info: "Basis 14–16px weight 500, `#2727e6`, với underline `#2727e6` 1px ở baseline. Không cần thay đổi hover state — toàn bộ hệ thống là tĩnh. Underline luôn hiện diện, không bao giờ bỏ khi hover." outlined_action_button: vai_trò: "Element tương tác chính" info: "Nền trắng, viền `#2727e6` solid 1.5px, border-radius 16px, padding 8px 16px (hoặc 16px 32px cho phiên bản lớn hơn), Basis 14–16px weight 500, text `#2727e6`. Đây là button variant duy nhất — hệ thống không bao giờ dùng filled buttons. ACTION_BORDER=176 xác nhận đây là xử lý tương tác chính." pill_tag___status_pill: vai_trò: "Label nhỏ gọn" info: "Nền `#2727e6`, border-radius 50px (bo tròn hoàn toàn), chữ trắng, Basis 13px weight 500, padding 4px 8px. Dùng có chọn lọc cho inline metadata hoặc status label nhỏ." numbered_list_item: vai_trò: "Danh sách có thứ tự" info: "Mỗi item mở đầu bằng số tròn (① ② ③) màu `#2727e6`, tiếp theo là Basis 16px weight 500 text heading `#2727e6`, sau đó là mô tả Basis 16px weight 400 bên dưới. Khoảng cách giữa các item: 24px." arrow_bullet_list_faq: vai_trò: "Danh sách tiết lộ / câu hỏi" info: "Mỗi item có tiền tố là marker hình tam giác chỉ phải (▸) màu `#2727e6`, text là Basis 16px weight 500 `#2727e6`, cách nhau theo chiều dọc 8px. Dùng cho danh sách câu hỏi kiểu FAQ." two_column_content_block: vai_trò: "Layout primitive" info: "Vùng nội dung bên phải được chia bên trong: cột phụ hẹp bên trái (~40%) chứa section heading bằng Basis 32px, cột phụ rộng bên phải (~60%) chứa body text và links. Khoảng cách cột là 32–48px. Mẫu hai cột lồng nhau này lặp lại dọc trang." nên_và_không_nên: nên: - "Chỉ dùng `#2727e6` và `#ffffff` — không bao giờ thêm màu thứ ba, gradient hay bóng đổ" - "Đặt body line-height là 1.67 và display line-height là 1.14 — khoảng thở CHÍNH LÀ hệ thống typographic" - "Làm sidebar trái thành panel `#2727e6` cố định full-height với địa cầu chấm tròn và sidebar text trắng; xem nó như bề mặt brand vĩnh viễn, không phải widget điều hướng" - "Dùng outlined button (viền `#2727e6` 1.5px, radius 16px, fill trắng) làm action variant duy nhất — không bao giờ tạo filled button" - "Dùng Basis cho mọi thứ chức năng và dành DDC cho 1–2 khoảnh khắc display mỗi trang nơi cần cá tính nhân văn" - "Dùng radius 50px cho tags và 16px cho buttons — hệ thống radius hai giá trị là ngôn ngữ hình dạng hoàn chỉnh" - "Gạch chân mọi link bằng đường kẻ `#2727e6` 1px ở baseline; không bao giờ bỏ underline khi hover vì hệ thống là tĩnh" không_nên: - "Không thêm màu thứ ba, xám trung tính nhạt cho secondary text, hay nền pha màu — mọi bề mặt không phải trắng phải là `#2727e6` hoặc trắng tinh" - "Không thêm drop shadows, inner shadows, hay glow effects — hệ thống hoàn toàn phẳng và bất kỳ elevation nào cũng sẽ lạc lõng" - "Không fill buttons với `#2727e6` — hệ thống chỉ dùng outline; một filled button sẽ phá vỡ sự kiềm chế editorial" - "Không dùng DDC cho body text, buttons, hay UI chức năng — nó là display face cho tối đa 1–2 khoảnh khắc mỗi trang" - "Không dùng border-radius ngoài 0, 16px và 50px — có đúng hai hình dạng bo tròn trong hệ thống và mọi thứ khác đều vuông" - "Không phá vỡ layout split-screen bằng thanh điều hướng trên cùng, hamburger menu, hay sidebar collapse — cột tím là vĩnh viễn" - "Không đặt body line-height dưới 1.46 hay display line-height trên 1.25 — nhịp display-chặt / body-lỏng định nghĩa giọng typographic" bề_mặt: info: "| Cấp | Tên | Giá trị | Mục đích |" info: "|-----|-----|---------|----------|" info: "| 0 | Violet Column | `#2727e6` | Sidebar trái cố định full-height — bề mặt brand neo giữ layout |" info: "| 1 | Paper Canvas | `#ffffff` | Vùng nội dung chính bên phải sidebar; nơi duy nhất body copy, links và headings tồn tại |" elevation: info: "Không có bóng đổ. Hệ thống hoàn toàn phẳng — phân cấp thị giác đến từ tương phản hai màu, thang typographic và khoảng trắng rộng rãi, không bao giờ từ elevation. Bất kỳ bóng đổ nào cũng sẽ phá vỡ ẩn dụ broadsheet." hình_ảnh: info: "Hầu như không có hình ảnh. Tài sản thị giác duy nhất là minh họa địa cầu chấm tròn vẽ tay bằng chấm trắng trên sidebar tím — một hình cầu ma trận chấm chiếm toàn bộ cột trái. Không photography, không product screenshots, không icon trang trí, không avatar. Nơi icon xuất hiện (checklist circles, arrow markers, circled numbers) chúng là ký tự Unicode typographic thuần túy màu `#2727e6`, không phải tài sản đồ họa. Trang áp đảo bởi text; địa cầu là dấu câu thị giác." layout: split_screen: "sidebar trái cố định (~33% viewport width) luôn khóa trên màn hình với nền `#2727e6` đặc, trong khi ~67% bên phải cuộn độc lập như một canvas nội dung trắng. Trong canvas bên phải, nội dung được tổ chức thành lưới hai cột lồng nhau — cột phụ heading hẹp bên trái và cột phụ body rộng bên phải, cách nhau 32–48px. Các section chính (hero, 'Free money', 'Got a question?', 'Further reading') xếp chồng theo chiều dọc với khoảng cách 64px giữa chúng. Sidebar không bao giờ thay đổi — nó mang brand wordmark, minh họa địa cầu và status label từ trên xuống dưới. Điều hướng tối thiểu: không top bar, không hamburger, không breadcrumbs — sidebar CHÍNH LÀ điều hướng. Mật độ nội dung thoải mái: đoạn văn dài nhưng khoảng thở giữa các khối rộng rãi, tạo cho trang nhịp broadsheet editorial thay vì cảm giác UI sản phẩm dày đặc." agent_prompt_guide: quick_color_reference: - "text: #2727e6" - "background: #ffffff" - "sidebar / brand surface: #2727e6" - "border (outlined actions, link underlines): #2727e6" - "primary action: #2727e6 (outlined action border)" example_component_prompts: - "**Tạo một hero section**: Sidebar `#2727e6` cố định (~33% width) bên trái với minh họa địa cầu chấm tròn trắng căn giữa theo chiều dọc và wordmark 'SUPERHI BASIC INCOME' chữ hoa trắng ở trên cùng. Canvas trắng bên phải với display heading: Basis 48px weight 400, `#2727e6`, line-height 1.14. Subhead: Basis 21px weight 500, `#2727e6`, line-height 1.33." - "**Tạo một outlined action button**: Fill trắng, viền `#2727e6` solid 1.5px, border-radius 16px, padding 8px 16px, Basis 14px weight 500, text `#2727e6`. Không hover state, không shadow. Đây là button variant duy nhất trong hệ thống." - "**Tạo một pill tag**: Nền `#2727e6`, border-radius 50px, chữ trắng, Basis 13px weight 500, padding 4px 8px. Chỉ dùng cho inline label nhỏ gọn." - "**Tạo một two-column content block**: Cột phụ trái (~40% width) với Basis 32px weight 400 heading `#2727e6`, line-height 1.17. Cột phụ phải (~60% width) với Basis 16px weight 400 body `#2727e6`, line-height 1.67. Khoảng cách 48px giữa các cột. Khoảng cách 64px giữa block này và block tiếp theo." - "**Tạo một numbered list**: Mỗi item bắt đầu bằng số Unicode tròn (① ② ③) màu `#2727e6`, sau đó là dòng heading Basis 16px weight 500, sau đó là dòng mô tả Basis 16px weight 400. Khoảng cách dọc 24px giữa các item." similar_brands: - "**Stripe Press** — Cùng cách tiếp cận editorial broadsheet — canvas trắng, một màu nhấn, typography thoáng đãng, trang trí tối thiểu, text gánh toàn bộ trọng lượng thị giác" - "**Substack** — Layout newsletter hai cột tương tự với cột brand trái cố định và vùng đọc nội dung trắng, cộng với sự kiềm chế bảng màu hai màu" - "**Kickstarter campaign pages** — Cùng năng lượng poster chiến dịch một màu nhấn với layout phẳng, display text lớn, và nhấn mạnh vào đề xuất thay vì UI chrome" - "**Mubi** — Kỷ luật một màu nhấn editorial với giọng typographic mạnh và không có hình ảnh trang trí ngoài một vài yếu tố đồ họa đặc trưng" - "**Notion** — Sự đơn giản hai màu triệt để và bề mặt phẳng không bóng đổ; cả hai hệ thống chứng minh rằng một màu sắc cộng với trắng là đủ để mang một brand" quick_start: css_custom_properties: css: | :root { /* Màu sắc */ --color-electric-iris: #2727e6; --color-paper-white: #ffffff; /* Typography — Font Families */ --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.46; --text-body: 16px; --leading-body: 1.67; --text-subheading: 21px; --leading-subheading: 1.33; --text-heading-sm: 24px; --leading-heading-sm: 1.25; --text-heading: 32px; --leading-heading: 1.17; --text-display: 48px; --leading-display: 1.14; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 8px; --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; /* Layout */ --section-gap: 64px; --card-padding: 32px; --element-gap: 8-16px; /* Border Radius */ --radius-2xl: 16px; --radius-full: 50px; /* Named Radii */ --radius-tags: 50px; --radius-cards: 0px; --radius-buttons: 16px; /* Bề mặt */ --surface-violet-column: #2727e6; --surface-paper-canvas: #ffffff; } tailwind_v4: css: | @theme { /* Màu sắc */ --color-electric-iris: #2727e6; --color-paper-white: #ffffff; /* Typography */ --font-basis-grotesque: 'Basis Grotesque', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ddc: 'DDC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.46; --text-body: 16px; --leading-body: 1.67; --text-subheading: 21px; --leading-subheading: 1.33; --text-heading-sm: 24px; --leading-heading-sm: 1.25; --text-heading: 32px; --leading-heading: 1.17; --text-display: 48px; --leading-display: 1.14; /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; /* Border Radius */ --radius-2xl: 16px; --radius-full: 50px; }