style_reference: info: "> Tuyên ngôn typographic trên nền bê tông. Một press kit đen-trên-trắng, nơi Helvetica cỡ lớn đảm nhiệm vai trò của nhiếp ảnh, và kết cấu duy nhất là một tờ giấy nhàu duy nhất nằm dưới body type." theme: "light" info: "Bigpicture Company là một hệ thống editorial đơn sắc, xử lý trang web như một press kit in ấn được trải trên giấy thô. Giao diện loại bỏ mọi màu sắc và hoàn toàn dựa vào mực đen, khoảng trắng, đường kẻ mảnh (hairline rules) và một kết cấu giấy nhàu duy nhất để tạo bầu không khí. Typography chính là sản phẩm: display headlines đạt tới 274px với Helvetica Neue 700 và negative tracking mạnh, biến chữ thành khối thị giác chủ đạo trên mọi màn hình. Monospace labels ([01-N INTRODUCTION], CREATIVE/AGENCY) hoạt động như caption kiểu in ấn, trong khi các biểu tượng sparkle bốn cánh là vật trang trí duy nhất giữa các section. Layout rộng rãi, mang phong cách zine — section gap 72px, horizontal padding 144–250px, và các khối ảnh full-bleed với góc bo 288px giúp trang thở như một bức tường gallery thay vì một sản phẩm phần mềm." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Press Ink | `#121212` | `--color-press-ink` | Primary text, hairlines, section borders, icon strokes, footer text — sắc thái tối duy nhất mang 95% toàn bộ thông tin foreground |" info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav pill background, heading-bordered surfaces |" info: "| Newsprint | `#f1f1f1` | `--color-newsprint` | Surface fills nhẹ, soft borders, hairline dividers, tông màu nền cho kết cấu giấy nhàu |" info: "| Foil Gray | `#e1e1e1` | `--color-foil-gray` | Light borders, icon stroke accents, secondary dividers |" info: "| Mute Gray | `#c5c5c5` | `--color-mute-gray` | Tertiary text, disabled state, low-contrast surface lines |" tokens___typography: helvetica_neue___workhorse_đa_năng___body_copy_ở_17px_1_29__display_headlines_ở_75_274px_với__0_04em_tracking_ở_kích_thước_lớn_nhất__nav_labels_ở_15px____font_helvetica_neue: - "**Thay thế:** Inter, Neue Haas Grotesk, hoặc system-ui với optical tracking chặt" - "**Weights:** 400, 500, 700" - "**Kích thước:** 14, 15, 16, 17, 20, 75, 274" - "**Line height:** 1.00–1.60" - "**Letter spacing:** -0.0400em, -0.0100em" - "**Vai trò:** Workhorse đa năng — body copy ở 17px/1.29, display headlines ở 75–274px với -0.04em tracking ở kích thước lớn nhất, nav labels ở 15px" ppsupplymono___meta_labels_và_caption_trong_ngoặc_vuông_như_01_n_introduction_và_section_tags_advertisements__creative_agency__offline_marketing___đây_là_những_điểm_nhấn_typographic_duy_nhất_phá_vỡ_sự_đơn_điệu_của_helvetica____font_ppsupplymono: - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono" - "**Weights:** 400" - "**Kích thước:** 13, 16, 17" - "**Line height:** 1.00–2.00" - "**Vai trò:** Meta labels và caption trong ngoặc vuông như [01-N INTRODUCTION] và section tags (ADVERTISEMENTS, CREATIVE/AGENCY, OFFLINE MARKETING) — đây là những điểm nhấn typographic duy nhất phá vỡ sự đơn điệu của Helvetica" ppsupplysans___secondary_nav_và_footer_micro_text_khi_cần_một_giọng_sans_khác____font_ppsupplysans: - "**Thay thế:** Inter, Söhne, ABC Diatype" - "**Weights:** 400" - "**Kích thước:** 17, 22" - "**Line height:** 1.00–1.20" - "**Vai trò:** Secondary nav và footer micro-text khi cần một giọng sans khác" rock_salt___chữ_ký_viết_tay_hiếm_hoi_cho_một_hoặc_hai_từ_mỗi_trang_ví_dụ__chú_thích__pleasure__được_khoanh_tròn___dùng_như_một_con_dấu__không_bao_giờ_dùng_cho_nội_dung____font_rock_salt: - "**Thay thế:** Caveat, Permanent Marker, hoặc custom handwritten font" - "**Weights:** 400" - "**Kích thước:** 17" - "**Line height:** 1.47" - "**Letter spacing:** -0.0200em" - "**Vai trò:** Chữ ký viết tay hiếm hoi cho một hoặc hai từ mỗi trang (ví dụ: chú thích 'pleasure' được khoanh tròn) — dùng như một con dấu, không bao giờ dùng cho nội dung" type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| caption | 13px | 2 | — | `--text-caption` |" info: "| body | 17px | 1.29 | — | `--text-body` |" info: "| subheading | 20px | 1.2 | — | `--text-subheading` |" info: "| heading-sm | 22px | 1.2 | — | `--text-heading-sm` |" info: "| heading | 75px | 1.05 | -1.68px | `--text-heading` |" info: "| display | 274px | 1 | -10.96px | `--text-display` |" tokens___spacing___shapes: density: "spacious" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 10 | 10px | `--spacing-10` |" info: "| 17 | 17px | `--spacing-17` |" info: "| 20 | 20px | `--spacing-20` |" info: "| 30 | 30px | `--spacing-30` |" info: "| 40 | 40px | `--spacing-40` |" info: "| 48 | 48px | `--spacing-48` |" info: "| 50 | 50px | `--spacing-50` |" info: "| 72 | 72px | `--spacing-72` |" info: "| 81 | 81px | `--spacing-81` |" info: "| 144 | 144px | `--spacing-144` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| tags | 20px |" info: "| cards | 20px |" info: "| images | 288px |" info: "| nav-item | 28px |" info: "| nav-pill | 40px |" layout: - "**Page max-width:** 1440px" - "**Section gap:** 72px" - "**Card padding:** 40px" - "**Element gap:** 50px" components: navigation_pill: vai_trò: "Sticky top-center nav container" info: "Floating pill màu trắng với outer radius 40px, inner item radius 28px, border 1px solid #121212, horizontal padding 20px, vertical padding 10px. Chứa HOME (active state với subtle inset fill) + PROJECTS + CONTACT bằng Helvetica Neue 15px/500 #121212, cách nhau bởi các divider mảnh." logo_wordmark: vai_trò: "Top-left brand identifier" ba_dòng_xếp_chồng: "'Bigpicture Company / We share / Our pleasure' bằng Helvetica Neue 15px/500 #121212, căn trái, không có mark — chữ chính là logo." display_headline: vai_trò: "Khối typographic hero-scale" info: "Helvetica Neue 700 ở 274px, line-height 1.0, letter-spacing -0.04em (#121212). Viết hoa toàn bộ, các dòng nhiều từ lấp đầy chiều rộng viewport — dùng cho các câu như 'PEOPLE BRAND' và 'PLEASURE'. Không gradient, không shadow, không trang trí — chỉ riêng kích thước đã là sự kiện thị giác." section_heading: vai_trò: "Editorial headline giữa trang" info: "Helvetica Neue 700 ở 75px, line-height 1.05, letter-spacing -0.01em (#121212). Viết hoa toàn bộ, thường được theo sau bởi sparkle divider." monospace_meta_tag: vai_trò: "Label kiểu caption" info: "PPSupplyMono 16px/400, uppercase, letter-spacing normal, #121212. Được đặt trong ngoặc vuông như [01-N INTRODUCTION]. Dùng để đánh số section và gắn thẻ danh mục (ADVERTISEMENTS / CREATIVE/AGENCY / OFFLINE MARKETING) — hoạt động như một running header trong zine in ấn." body_manifesto_block: vai_trò: "Đoạn editorial căn giữa" info: "Helvetica Neue 400 ở 17px, line-height 1.6, max-width ~720px, căn giữa. #121212 trên nền trắng. Dùng cho mô tả công ty ở đầu trang — cảm giác kiềm chế, căn đều (justified), không drop cap, không nhấn mạnh." sparkle_divider: vai_trò: "Section separator" info: "Biểu tượng ngôi sao/sparkle bốn cánh màu #121212, ~20px, lặp lại theo chiều ngang với khoảng cách 72px để tạo một dải thị giác giữa các section lớn. Vật trang trí duy nhất xuất hiện định kỳ trên trang." rounded_image_block: vai_trò: "Ảnh hero full-bleed" info: "Ảnh kiến trúc/quảng cáo ngoài trời với border-radius 288px, full viewport width, không caption. Độ bo tròn cực lớn làm mềm đi hình ảnh công nghiệp vốn sắc cạnh." address_block: vai_trò: "Caption liên hệ / địa điểm" info: "Helvetica Neue 400 ở 17px/1.2, #121212, ba dòng xếp chồng (floor/address/country) đặt chồng lên ảnh — được typeset trực tiếp lên ảnh hero, không có background plate." handwritten_annotation: vai_trò: "Dấu ấn editorial" info: "Rock Salt 17px #121212 khoanh tròn một từ (ví dụ: 'pleasure') — dấu bút đỏ của biên tập viên in ấn được chuyển thành chữ viết tay. Chỉ dùng tối đa một lần mỗi trang." footer_strip: vai_trò: "Meta cuối trang" info: "Top border 1px solid #121212, vertical padding 30–40px, grid ba cột: logo wordmark bên trái, '© Seoul, Korea' bên phải, monospace tag ở giữa. Text #121212 trên nền trắng." nav_indicator_globe: vai_trò: "Điểm nhấn iconographic inline" info: "Biểu tượng quả địa cầu vẽ nét nhỏ màu #121212 stroke, dùng trong văn bản mô tả công ty và trong dòng manifesto 'WHEN SOMEONE ELSE IS NEED THAT JOY COMES BACK TO' — quả địa cầu thay thế từ 'need' như một phép ẩn dụ thị giác." do_s_and_don_ts: do: - "Đặt display headlines ở 75–274px bằng Helvetica Neue 700 với -0.04em tracking — kích thước chữ là khối thị giác chính, không phải hình ảnh" - "Chỉ dùng #121212 làm foreground color duy nhất; không bao giờ đưa điểm nhấn màu sắc vào" - "Áp dụng border-radius 288px cho tất cả ảnh full-bleed để làm mềm ảnh kiến trúc/nhiếp ảnh ngoài trời" - "Bọc meta labels trong ngoặc vuông bằng PPSupplyMono 16px: [TÊN SECTION]" - "Dùng radius 40px cho navigation pill và 28px cho từng nav item bên trong" - "Duy trì 72px giữa các section lớn và 50px giữa các khối nội dung trong một section" - "Đặt biểu tượng sparkle bốn cánh thành một hàng ngang 4–5 cái làm section divider tiêu chuẩn" don_t: - "Không thêm bất kỳ màu nào ngoài năm màu trung tính (#121212, #ffffff, #f1f1f1, #e1e1e1, #c5c5c5) — zero chroma là thương hiệu" - "Không dùng box-shadows; chiều sâu chỉ đến từ hairline borders và kết cấu giấy" - "Không phá vỡ quy tắc viết hoa toàn bộ trên display headlines; chữ hoa/thường chỉ dành cho Rock Salt annotation" - "Không dùng pill radii 9999px trên button hoặc tag — radius tiêu chuẩn lớn nhất là 40px trên nav" - "Không nén line-height dưới 1.0 trên display type, và không vượt quá 1.6 trên body" - "Không đặt body copy trong cột rộng hơn ~720px — editorial measure phải giữ được tính dễ đọc" - "Không thêm hover-lift hoặc transition effects vào cards; thẩm mỹ là print tĩnh, không phải UI tương tác" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 0 | Canvas | `#ffffff` | Nền toàn trang, nền cho mọi nội dung |" info: "| 1 | Paper | `#f1f1f1` | Fills nhẹ phía sau body type và lớp kết cấu giấy nhàu |" info: "| 2 | Elevated Pill | `#ffffff` | Floating navigation container, các khối card độc lập |" elevation: info: "Không có shadow. Hệ thống dùng hairline borders 1px màu #121212 và khoảng trắng rộng rãi để tạo cấu trúc. Chiều sâu đến từ lớp phủ kết cấu giấy nhàu và kích thước chữ cực lớn, không phải từ cast shadows hay z-axis elevation." imagery: info: "Nhiếp ảnh chiếm ưu thế ở hero — các shot kiến trúc và quảng cáo ngoài trời lớn (billboard, building wraps, quảng cáo đặt ở vỉa hè) được trình bày full-bleed với bo góc 288px. Kết cấu giấy nhàu phủ lên các section phía dưới trang như một lớp xử lý bề mặt xúc giác, mang lại cho giao diện cảm giác của một zine in ấn. Một biểu tượng quả địa cầu vẽ nét nhỏ xuất hiện như yếu tố minh họa duy nhất. Không 3D, không abstract gradients, không product mockups — hình ảnh mang tính tài liệu, công nghiệp, bắt nguồn từ portfolio quảng cáo ngoài trời của agency." layout: info: "Max-width ~1440px căn giữa với horizontal padding 40–144px tùy mật độ section. Hero là ảnh full-bleed với type chồng lên. Bên dưới ảnh, nội dung xen kẽ giữa các khối text căn giữa và display typography edge-to-edge. 60% phía dưới trang là một manifesto cuộn dài, nơi display type cỡ lớn lấp đầy chiều rộng viewport từng dòng một, cách nhau bởi các hàng sparkle divider. Navigation là một pill nổi căn giữa ở đầu viewport, không phải thanh full-width. Footer là một dải đơn với hairline border." agent_prompt_guide: quick_color_reference: - "text: #121212" - "background: #ffffff" - "surface/soft: #f1f1f1" - "border: #e1e1e1" - "muted: #c5c5c5" - "primary action: không có màu CTA riêng biệt" example_component_prompts: - "*Navigation Pill*: Container nổi căn giữa, outer radius 40px, item radius 28px, border 1px solid #121212, background trắng #ffffff, horizontal padding 20px, vertical padding 10px. Ba mục text bằng Helvetica Neue 15px/500 #121212: HOME (active, với subtle inset fill), PROJECTS, CONTACT." - "*Display Headline*: Khối full-width, text 'PEOPLE BRAND' bằng Helvetica Neue 700 ở 274px, line-height 1.0, letter-spacing -10.96px, color #121212, trên nền #ffffff. Hai dòng, mỗi dòng lấp đầy chiều rộng viewport." - "*Monospace Meta Tag*: Một dòng '[01-N INTRODUCTION]' bằng PPSupplyMono 16px/400, uppercase, letter-spacing normal, color #121212, căn giữa phía trên một section." - "*Full-Bleed Image Block*: Ảnh (kiến trúc/quảng cáo ngoài trời) ở 100% viewport width, border-radius 288px ở mọi góc, không caption, không border. Đặt caption địa chỉ ba dòng bằng Helvetica Neue 17px/1.2 #121212 chồng lên ảnh, khu vực trên cùng bên phải, không có background plate." - "*Sparkle Divider Row*: Năm biểu tượng sparkle bốn cánh màu #121212, mỗi cái 20px, sắp xếp theo chiều ngang với khoảng cách 72px, căn giữa trang. Đóng vai trò là section break giữa các khối nội dung lớn." texture___surface_treatment: info: "Kết cấu giấy nhàu là một lớp noise duy nhất với độ mờ thấp, được áp dụng phía sau 60% phía dưới trang (khoảng từ section PLEASANCE trở xuống). Nó nên đọc như một hạt xúc giác tinh tế, không phải một pattern — mục tiêu là làm cho bề mặt kỹ thuật số có cảm giác như một artifact in ấn vật lý. Không tile nó, không animate nó, không áp dụng nó vào cards hoặc components. Kết cấu là một xử lý ở cấp độ trang, không phải cấp độ component." typographic_voice: ba_giọng_nói_cùng_tồn_tại: "Helvetica Neue (workhorse, dùng cho 95% nội dung bao gồm tất cả display headlines), PPSupplyMono (caption in ấn, dùng cho meta labels trong ngoặc vuông), và Rock Salt (bút của biên tập viên, dùng một lần mỗi trang để khoanh tròn một từ duy nhất). Mono font mang siêu dữ liệu editorial; handwritten font mang chú thích của con người. Không bao giờ thay thế bằng serif cho bất kỳ font nào trong số này — hệ thống hoàn toàn là neo-grotesque + monospace + handwritten, không cho phép các font kiểu Garamond hoặc Times." similar_brands: - "**Studio Daidai** — Cùng cách kết hợp monochrome neo-grotesque + monospace label với oversized display headlines và editorial spacing rộng rãi" - "**Bureau Cool** — Cùng cảm giác print-zine với white canvas, hairline rules, all-caps display type ở 100–250px, và zero chromatic color" - "**Apartamento Magazine** — Cùng sự kiềm chế editorial, typography chú thích viết tay, và xử lý bề mặt giấy trắng với grain tinh tế" - "**AnOther Magazine digital** — Cùng cấu trúc Helvetica display cỡ lớn + monospace caption và bầu không khí press-kit trên white canvas" - "**Werkplaats Typografie archive** — Cùng cách tiếp cận tuyên ngôn typographic brutalist: một họ typeface ở kích thước cực lớn, monospace metadata, không có hình ảnh trang trí" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-press-ink: #121212; --color-paper-white: #ffffff; --color-newsprint: #f1f1f1; --color-foil-gray: #e1e1e1; --color-mute-gray: #c5c5c5; /* Typography — Font Families */ --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ppsupplymono: 'PPSupplyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-ppsupplysans: 'PPSupplySans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-rock-salt: 'Rock Salt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 2; --text-body: 17px; --leading-body: 1.29; --text-subheading: 20px; --leading-subheading: 1.2; --text-heading-sm: 22px; --leading-heading-sm: 1.2; --text-heading: 75px; --leading-heading: 1.05; --tracking-heading: -1.68px; --text-display: 274px; --leading-display: 1; --tracking-display: -10.96px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-10: 10px; --spacing-17: 17px; --spacing-20: 20px; --spacing-30: 30px; --spacing-40: 40px; --spacing-48: 48px; --spacing-50: 50px; --spacing-72: 72px; --spacing-81: 81px; --spacing-144: 144px; /* Layout */ --page-max-width: 1440px; --section-gap: 72px; --card-padding: 40px; --element-gap: 50px; /* Border Radius */ --radius-2xl: 20px; --radius-3xl: 28px; --radius-3xl-2: 40px; --radius-full: 288px; /* Named Radii */ --radius-tags: 20px; --radius-cards: 20px; --radius-images: 288px; --radius-nav-item: 28px; --radius-nav-pill: 40px; /* Surfaces */ --surface-canvas: #ffffff; --surface-paper: #f1f1f1; --surface-elevated-pill: #ffffff; } tailwind_v4: css: | @theme { /* Colors */ --color-press-ink: #121212; --color-paper-white: #ffffff; --color-newsprint: #f1f1f1; --color-foil-gray: #e1e1e1; --color-mute-gray: #c5c5c5; /* Typography */ --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-ppsupplymono: 'PPSupplyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-ppsupplysans: 'PPSupplySans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-rock-salt: 'Rock Salt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 2; --text-body: 17px; --leading-body: 1.29; --text-subheading: 20px; --leading-subheading: 1.2; --text-heading-sm: 22px; --leading-heading-sm: 1.2; --text-heading: 75px; --leading-heading: 1.05; --tracking-heading: -1.68px; --text-display: 274px; --leading-display: 1; --tracking-display: -10.96px; /* Spacing */ --spacing-10: 10px; --spacing-17: 17px; --spacing-20: 20px; --spacing-30: 30px; --spacing-40: 40px; --spacing-48: 48px; --spacing-50: 50px; --spacing-72: 72px; --spacing-81: 81px; --spacing-144: 144px; /* Border Radius */ --radius-2xl: 20px; --radius-3xl: 28px; --radius-3xl-2: 40px; --radius-full: 288px; }