spacelab___style_reference: info: "> Swiss editorial grid trên nền giấy thô. Một gallery tĩnh lặng, nơi Helvetica nằm trên baseline và một nút slate-violet duy nhất là thứ ồn ào nhất trong phòng." theme: "light" info: "Spacelab là studio kiến trúc theo phong cách Swiss-editorial, xây dựng trên sự kiềm chế gần như đơn sắc tuyệt đối: một typeface, một điểm nhấn màu, và hầu như không có trang trí bề mặt. Trang web hoạt động như một monograph in ấn — canvas trắng, ảnh kiến trúc cỡ lớn, và navigation index cột trái gợi nhớ đến sidebar catalogue bảo tàng. Type đảm nhận toàn bộ giọng điệu: HelveticaNeue weight 400 với line-height nén ở 1.0–1.2 nằm sát baseline hơn so với web type thông thường, khiến mọi đoạn văn có cảm giác được \"sắp chữ\" (set) chứ không phải \"gõ chữ\" (typed). Màu slate-violet nhẹ (#495472) chỉ xuất hiện trên filled buttons và một số card surface hiếm hoi, hoạt động như một tín hiệu navigation nhẹ nhàng thay vì một tuyên ngôn thương hiệu. Các component được rút gọn đến bộ xương: hairline borders, 4px corners, không shadow, không gradient — mọi element đều có trọng lượng nhờ chiếm dụng negative space thay vì lấp đầy nó." tokens___colors: info: "| Name | Value | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, card surfaces, body text inversion, button labels. Nền chủ đạo; mọi thứ khác đều nằm trên nó |" info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, logo wordmark. Dùng cho hầu hết divider và đường kẻ cấu trúc (border frequency 1,156) |" info: "| Charcoal | `#2c2222` | `--color-charcoal` | Secondary text và màu border đậm nhất trong hệ thống (freq 3,104). Màu gần đen pha ấm, làm mềm độ tương phản gay gắt khi đọc dài |" info: "| Fossil | `#b2b4b1` | `--color-fossil` | Muted link color, inactive nav items, tertiary text. Xanh-xám bão hòa thấp, lùi lại khi đặt cạnh paper white và ink black |" info: "| Slate Iris | `#495472` | `--color-slate-iris` | Nền filled button và một số card surface — giọng màu duy nhất trong hệ thống. Màu violet-slate nhẹ, đọc như xanh-xám kiến trúc hơn là màu thương hiệu, nên không bao giờ lấn át ảnh |" tokens___typography: helveticaneue___typeface_duy_nhất__dùng_cho_mọi_thứ_từ_logo__spacelab__viết_thường_đến_display_headline_62px__section_heading_19_21px__body_17px__và_caption_15px_____font_helveticaneue: - "**Thay thế:** Helvetica, Inter, Neue Haas Grotesk, Arial" - "**Weights:** 400" - "**Kích cỡ:** 15px, 17px, 19px, 21px, 30px, 62px" - "**Line height:** 1.00–1.20 (tight; display ở 1.0, body ở 1.20)" - "**Letter spacing:** 0.0110em (0.165px ở 15px, 0.682px ở 62px — tracking dương nhất quán trên mọi kích cỡ)" - "**Vai trò:** Typeface duy nhất. Dùng cho mọi thứ từ logo 'spacelab_' viết thường đến display headline 62px, section heading 19–21px, body 17px, và caption 15px." helveticaneue_light___body_copy_và_đoạn_văn_hỗ_trợ_khi_cần_giọng_nhẹ_nhàng_hơn__light_cut_tạo_sự_đa_dạng_về_typography_mà_không_cần_đổi_họ_typeface___một_hệ_thống_single_typeface_thở_qua_weight__không_qua_sự_đa_dạng_____font_helveticaneue_light: - "**Thay thế:** Helvetica Neue Light, Inter Light, Neue Haas Grotesk Light" - "**Weights:** 300 (rendered as 400 in data — light weight optical)" - "**Kích cỡ:** 17px" - "**Line height:** 1.20" - "**Letter spacing:** 0.0110em" - "**Vai trò:** Body copy và đoạn văn hỗ trợ khi cần giọng nhẹ nhàng hơn. Light cut tạo sự đa dạng về typography mà không cần đổi họ typeface — một hệ thống single-typeface thở qua weight, không qua sự đa dạng." type_scale: info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |" info: "|---------|---------|-------------|----------------|-------|" info: "| caption | 15px | 1.2 | 0.165px | `--text-caption` |" info: "| body | 17px | 1.2 | 0.187px | `--text-body` |" info: "| subheading | 19px | 1.15 | 0.209px | `--text-subheading` |" info: "| heading-sm | 21px | 1.15 | 0.231px | `--text-heading-sm` |" info: "| heading | 30px | 1.1 | 0.33px | `--text-heading` |" info: "| display | 62px | 1 | 0.682px | `--text-display` |" tokens___spacing___shapes: density: "comfortable" spacing_scale: info: "| Name | Giá trị | Token |" info: "|------|---------|-------|" info: "| 5 | 5px | `--spacing-5` |" info: "| 10 | 10px | `--spacing-10` |" info: "| 21 | 21px | `--spacing-21` |" info: "| 42 | 42px | `--spacing-42` |" info: "| 84 | 84px | `--spacing-84` |" info: "| 147 | 147px | `--spacing-147` |" border_radius: info: "| Element | Giá trị |" info: "|---------|---------|" info: "| tags | 0px |" info: "| cards | 0px |" info: "| other | 4px |" info: "| images | 0px |" info: "| buttons | 0px |" layout: - "**Page max-width:** 1200px" - "**Section gap:** 84px" - "**Card padding:** 21px" - "**Element gap:** 21px" components: sidebar_logo_wordmark: vai_trò: "Nhận diện thương hiệu, ghim ở góc trên bên trái mọi trang" info: "'spacelab_' viết thường bằng HelveticaNeue 21px, weight 400, màu #000000, letter-spacing 0.231px. Dấu gạch dưới ở cuối là signature — nó đọc như một artifact của code-syntax và là gimmick hình ảnh duy nhất của logo." vertical_section_index: vai_trò: "Primary navigation — luôn hiển thị ở rail trái" info: "Danh sách xếp chồng ở 17px HelveticaNeue weight 400. Mục active ('All stories') hiển thị bằng #000000 weight 400; mục inactive ('Work', 'News', 'Exploration', 'About', 'Contact') hiển thị bằng #b2b4b1 weight 400. Khoảng cách 10px giữa các mục. Không bullet, không icon, không separator — một index typography thuần túy." filled_accent_button: vai_trò: "Primary interactive element — filled button duy nhất trong hệ thống" info: "Nền #495472, chữ #ffffff, 15px HelveticaNeue weight 400, letter-spacing 0.165px, padding 21px ngang / 21px dọc, border-radius 0. Không có hover state deviation được chỉ định — button vốn đã yên tĩnh, nên state change là tối thiểu." ghost_text_link: vai_trò: "Inline links và secondary navigation" info: "Màu #b2b4b1 mặc định, #000000 khi hover. 17px HelveticaNeue weight 400, margin-bottom 5px cho paragraph spacing. Không underline mặc định — link affordance đến từ sự thay đổi màu sắc và hairline border-bottom 1px #000000 áp dụng trong body context." accent_card_surface: vai_trò: "Featured content card — surface màu sắc duy nhất" info: "Nền #495472, padding 21px, border-radius 0. Dùng để làm nổi bật một dự án hoặc câu chuyện; card chứa chữ #ffffff. Hoạt động như một 'pull-quote panel' typography hơn là một content container — nó ngắt quãng canvas trắng thay vì tổ chức nội dung." full_bleed_image_block: vai_trò: "Đơn vị hình ảnh chính cho project và editorial pages" info: "Ảnh kiến trúc ở tỷ lệ khung hình gốc, không border, không radius, không caption. Căn chỉnh vào cột phải của asymmetric grid. Có thể trải rộng toàn bộ chiều rộng content area." body_paragraph: vai_trò: "Long-form editorial copy" info: "17px HelveticaNeue-Light ở line-height 1.20, màu #000000, letter-spacing 0.187px. Paragraph spacing 21px. Căn trái, ragged right. Không có max-width constraint — text theo cột." display_headline: vai_trò: "Page titles và editorial section openers" info: "62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, màu #000000. Line-height 1.0 chặt chẽ khiến headline nằm trên baseline như một masthead in ấn — không leading thoáng, không decorative space." section_heading: vai_trò: "Mid-level headings cho content sections" info: "21–30px HelveticaNeue weight 400, line-height 1.10–1.15, màu #000000. margin-bottom 42px để tách biệt khỏi body content." hairline_divider: vai_trò: "Structural separator giữa các content blocks" info: "1px solid #000000 hoặc #2c2222, không styling khác. Element phổ biến nhất trong hệ thống (hơn 1.100 instances trong data) — Spacelab dùng đường kẻ, không phải spacing, để tổ chức nội dung." do_s_and_don_ts: do: - "Chỉ dùng HelveticaNeue (hoặc HelveticaNeue-Light) cho mọi text element — không display fonts, không serifs, không monospaced accents." - "Giữ line-heights ở 1.00 cho display sizes (30–62px) và không bao giờ trên 1.20 cho body — nhịp điệu chặt chẽ là signature." - "Dùng #495472 độc quyền cho filled buttons và accent card surfaces; coi nó như một công tắc (switch), không phải trang trí." - "Phân tách content blocks bằng hairline borders 1px màu #000000 hoặc #2c2222 thay vì padding hoặc background fills." - "Giữ border-radius ở 0px trên mọi cards, buttons, tags, và images; token 4px dành riêng cho utility element hiếm hoi." - "Duy trì 21px làm đơn vị cơ sở cho element gaps và card padding; tăng lên 42px và 84px cho section-level separation." - "Hiển thị logo dưới dạng 'spacelab_' viết thường với dấu gạch dưới ở cuối — dấu gạch dưới là brand grammar bất di bất dịch." don_t: - "Không giới thiệu typeface thứ hai, kể cả để nhấn mạnh — thay vào đó, thay đổi weight (400 vs Light) trong HelveticaNeue." - "Không thêm drop shadows, inner glows, hoặc blur effects — hệ thống chỉ dùng flat surfaces và hairline borders." - "Không dùng #495472 cho body text, icons, borders, hoặc decorative accents — nó chỉ dành cho filled interactive surfaces." - "Không bo tròn góc trên images, cards, hoặc buttons; radius 0px là lựa chọn editorial có chủ đích." - "Không vượt quá 62px cho headlines hoặc xuống dưới 15px cho text — scale được thu hẹp có chủ ý." - "Không căn giữa body paragraphs; ragged-right text căn chỉnh với Swiss editorial baseline." - "Không áp dụng gradients, duotone effects, hoặc color overlays lên ảnh — images được hiển thị nguyên bản." surfaces: info: "| Cấp độ | Name | Giá trị | Mục đích |" info: "|--------|------|---------|----------|" info: "| 1 | Paper | `#ffffff` | Base canvas — toàn bộ nền trang |" info: "| 2 | Slate Iris Surface | `#495472` | Accent card và filled button surface — dùng tiết kiệm như dấu câu chức năng |" elevation: info: "Thiết kế tránh hoàn toàn shadows. Các surface được phân tách bằng hairline borders (1px, #000000 hoặc #2c2222) hoặc bằng white space đơn thuần. Elevation được truyền đạt qua z-order và màu accent surface duy nhất, không qua blur hoặc drop shadow. Điều này giữ cho ngôn ngữ thị giác đồng nhất với thiết kế editorial in ấn — phẳng, trung thực, vật chất." imagery: info: "Ảnh kiến trúc và nội thất là nội dung hình ảnh chính. Các shot là full-bleed, không cắt xén theo editorial dimensions, và không được stylize — không overlays, không duotone treatments, không rounded corners. Hình ảnh CHÍNH LÀ bố cục: tài liệu khổ lớn về môi trường xây dựng (atria, workspaces, public buildings) được hiển thị với độ rõ ràng tài liệu. Con người xuất hiện như scale figures, không phải chân dung. Ảnh màu được dùng nguyên bản — ánh sáng tự nhiên, bảng màu tự nhiên. Không có illustration, không có iconography ngoài simple line glyphs, và không có decorative graphics." layout: info: "Cấu trúc hai cột bất đối xứng: một left rail cố định (~20% chiều rộng) chứa logo và vertical navigation, trong khi ~80% bên phải chứa nội dung trang hiện tại. Nav là một danh sách phẳng các section labels (All stories, Work, News, Exploration, About, Contact) xếp chồng theo chiều dọc với vertical rhythm rộng rãi. Hero là một ảnh kiến trúc full-bleed chiếm cột phải, không caption hoặc overlay. Nhịp điệu trang dựa trên section gap 84px và card padding 21px để tạo khoảng thở giữa các block. Grid ngầm dựa trên cột hơn là dựa trên card — images và text blocks căn chỉnh theo cấu trúc cột dọc thay vì hệ thống card đồng nhất." agent_prompt_guide: quick_color_reference: - "text: #000000 (primary), #2c2222 (secondary), #b2b4b1 (muted/inactive)" - "background: #ffffff" - "border: #000000 hoặc #2c2222 (hairline 1px)" - "accent surface: #495472 (Slate Iris)" - "primary action: #495472 (filled action)" example_component_prompts: - "*Display Headline*: 62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, màu #000000, căn trái, không margin-top, margin-bottom 84px đến element tiếp theo." - "*Filled Accent Button*: 15px HelveticaNeue weight 400, letter-spacing 0.165px, màu #ffffff trên nền #495472, padding 21px 21px, border-radius 0, không border, không shadow, inline-block." - "*Vertical Sidebar Nav*: Danh sách link xếp chồng, 17px HelveticaNeue weight 400, row-gap 10px, màu #b2b4b1 cho mục inactive, màu #000000 cho mục active, không bullets, không underlines, căn trái trong left rail rộng 200px." - "*Body Paragraph*: 17px HelveticaNeue-Light, line-height 1.20, letter-spacing 0.187px, màu #000000, margin-bottom 21px giữa các đoạn, căn trái, ragged right, không max-width." - "*Full-Bleed Architectural Image*: Tỷ lệ khung hình gốc, không border, border-radius 0, không caption, không overlay, căn chỉnh vào cột phải của asymmetric grid, không decorative treatment." similar_brands: - "**Vitsoe** — Cùng sự kiềm chế Swiss-editorial, một accent dùng tiết kiệm, typography nằm trên baseline với line-heights chặt chẽ, ảnh kiến trúc làm hình ảnh chính." - "**Aesop** — Editorial grid layout với whitespace rộng rãi, bảng màu đơn sắc nhẹ với một accent yên tĩnh duy nhất, hệ thống typography không serif ưu tiên nội dung hơn chrome." - "**Frieze** — Information architecture kiểu gallery-catalogue với left-rail section index, ảnh unstyled khổ lớn, và hệ thống phân cấp type driven by Helvetica ở line-heights nén." - "**Studio Ma** — Site studio kiến trúc với ảnh tài liệu, trang trí bề mặt tối thiểu, hệ thống single-typeface, và bảng màu gần đơn sắc với một chromatic accent nhẹ duy nhất." quick_start: css_custom_properties: css: | :root { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-charcoal: #2c2222; --color-fossil: #b2b4b1; --color-slate-iris: #495472; /* Typography — Font Families */ --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 15px; --leading-caption: 1.2; --tracking-caption: 0.165px; --text-body: 17px; --leading-body: 1.2; --tracking-body: 0.187px; --text-subheading: 19px; --leading-subheading: 1.15; --tracking-subheading: 0.209px; --text-heading-sm: 21px; --leading-heading-sm: 1.15; --tracking-heading-sm: 0.231px; --text-heading: 30px; --leading-heading: 1.1; --tracking-heading: 0.33px; --text-display: 62px; --leading-display: 1; --tracking-display: 0.682px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-5: 5px; --spacing-10: 10px; --spacing-21: 21px; --spacing-42: 42px; --spacing-84: 84px; --spacing-147: 147px; /* Layout */ --page-max-width: 1200px; --section-gap: 84px; --card-padding: 21px; --element-gap: 21px; /* Border Radius */ --radius-md: 4px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-other: 4px; --radius-images: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-paper: #ffffff; --surface-slate-iris-surface: #495472; } tailwind_v4: css: | @theme { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-charcoal: #2c2222; --color-fossil: #b2b4b1; --color-slate-iris: #495472; /* Typography */ --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 15px; --leading-caption: 1.2; --tracking-caption: 0.165px; --text-body: 17px; --leading-body: 1.2; --tracking-body: 0.187px; --text-subheading: 19px; --leading-subheading: 1.15; --tracking-subheading: 0.209px; --text-heading-sm: 21px; --leading-heading-sm: 1.15; --tracking-heading-sm: 0.231px; --text-heading: 30px; --leading-heading: 1.1; --tracking-heading: 0.33px; --text-display: 62px; --leading-display: 1; --tracking-display: 0.682px; /* Spacing */ --spacing-5: 5px; --spacing-10: 10px; --spacing-21: 21px; --spacing-42: 42px; --spacing-84: 84px; --spacing-147: 147px; /* Border Radius */ --radius-md: 4px; }