# Bang & Olufsen > # Bang & Olufsen — Style Reference ## Prompt Content ``` # Bang & Olufsen — Style Reference > Scandinavian gallery trên nền sứ. Khi một trang B&O chuyển tối, sản phẩm được chiếu sáng như một tác phẩm điêu khắc trong hốc tường lúc nửa đêm; khi chuyển sáng, sản phẩm nổi trên lụa trắng, không có gì khác cạnh tranh sự chú ý. **Theme:** light Bang & Olufsen vận hành theo logic gallery-museum: những canvas sứ trắng gần như tinh khiết với sản phẩm nổi lên như các vật thể điêu khắc, bị ngắt quãng bởi những khoang màu full-bleed hiếm hoi — một màu tím ultramarine đậm nuốt chửng màn hình, thỉnh thoảng là một khoảnh khắc đỏ terracotta bão hòa — để tạo điểm nhấn cảm xúc. Typography là một neo-grotesque tùy chỉnh duy nhất (BeoSupreme) làm tất cả công việc kể chuyện: siêu khít ở kích thước display, uppercase với tracking rộng ở micro-labels, không cần typeface nào khác. Các component được tước bỏ đến tận xương: ghost controls hình pill, đường viền mảnh như sợi tóc, không bóng trang trí, không gradient button, không icon cầu kỳ. Grid rộng rãi, negative space là sự xa hoa. Mỗi sản phẩm có bệ đỡ nổi riêng; khoảng trắng xung quanh chính là căn phòng. Màu sắc được phân bổ như một vật liệu quý — khi xuất hiện, nó chiếm toàn bộ khung hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Porcelain Canvas | `#ffffff` | `--color-porcelain-canvas` | Nền trang, bề mặt product card, navigation bar — nền chủ đạo mà mọi sản phẩm nổi lên trên đó | | Bone | `#fcfaee` | `--color-bone` | Bề mặt phụ cho các khối ấm trung tính, chữ trên nền tối, canvas thay thế khi màu trắng có vẻ vô trùng | | Obsidian | `#191817` | `--color-obsidian` | Văn bản chính và thân sản phẩm — màu gần đen ấm, đọc mềm hơn #000000 thuần trên nền trắng | | Pure Ink | `#000000` | `--color-pure-ink` | Đường nét icon, micro-labels, đường viền mảnh, và những khoảnh khắc tương phản văn bản mạnh nhất | | Graphite | `#555555` | `--color-graphite` | Body copy phụ, metadata, nhãn giá, helper text mờ | | Mist | `#e5e5e5` | `--color-mist` | Đường viền input mảnh và divider cấu trúc duy nhất trong hệ thống | | Ultramarine Velvet | `#060daa` | `--color-ultramarine-velvet` | Nền hero, khoang section full-bleed ấn tượng, footer washes — màu tím bão hòa, gần như đen-xanh dùng để nuốt chửng toàn bộ khung hình và làm một sản phẩm duy nhất trở nên kịch tính | ## Tokens — Typography ### BeoSupreme — Typeface duy nhất mang toàn bộ giọng điệu thương hiệu. Display và headings: weight 500–700 ở 24–36px với tracking khít (-0.056em → -0.014em) cho headline tự tin, nén gọn. Body và UI: weight 400 ở 14–16px, tracking bình thường, line-height 1.5–1.7. Micro-labels (nav, badges, tagline 'Est. 1925'): weight 500 ở 9–12px với tracking rộng lên đến +0.143em, hiển thị uppercase để hoạt động như những chú thích kiến trúc yên tĩnh. Không có typeface thứ hai cạnh tranh. · `--font-beosupreme` - **Thay thế:** Neue Haas Grotesk Display Pro (gần nhất), với Inter hoặc Söhne làm lựa chọn miễn phí - **Weights:** 400, 500, 700 - **Kích thước:** 9, 12, 14, 16, 24, 36 - **Line height:** 1.15–2.19 - **Letter spacing:** -2.0px ở 36px display → -0.2px ở 14px body → +1.3px ở 9px micro-label (tracking đảo ngược: càng khít khi kích thước càng lớn) - **OpenType features:** `"kern" 1, "liga" 1` - **Vai trò:** Typeface duy nhất mang toàn bộ giọng điệu thương hiệu. Display và headings: weight 500–700 ở 24–36px với tracking khít (-0.056em → -0.014em) cho headline tự tin, nén gọn. Body và UI: weight 400 ở 14–16px, tracking bình thường, line-height 1.5–1.7. Micro-labels (nav, badges, tagline 'Est. 1925'): weight 500 ở 9–12px với tracking rộng lên đến +0.143em, hiển thị uppercase để hoạt động như những chú thích kiến trúc yên tĩnh. Không có typeface thứ hai cạnh tranh. ### object-fit: cover; object-position: center; — object-fit: cover; object-position: center; — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-object-fit-cover-object-position-center` - **Weights:** 400 - **Kích thước:** 16px - **Line height:** 1.15 - **Vai trò:** object-fit: cover; object-position: center; — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.67 | 0.288px | `--text-caption` | | body-sm | 14px | 1.43 | -0.196px | `--text-body-sm` | | body | 16px | 1.5 | -0.224px | `--text-body` | | subheading | 24px | 1.25 | -0.336px | `--text-subheading` | | heading | 36px | 1.15 | -2.016px | `--text-heading` | ## Tokens — Spacing & Shapes **Đơn vị cơ bản:** 4px **Mật độ:** thoải mái ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 4 | 4px | `--spacing-4` | | 8 | 8px | `--spacing-8` | | 12 | 12px | `--spacing-12` | | 16 | 16px | `--spacing-16` | | 20 | 20px | `--spacing-20` | | 24 | 24px | `--spacing-24` | | 32 | 32px | `--spacing-32` | | 36 | 36px | `--spacing-36` | | 40 | 40px | `--spacing-40` | | 48 | 48px | `--spacing-48` | | 56 | 56px | `--spacing-56` | | 60 | 60px | `--spacing-60` | | 80 | 80px | `--spacing-80` | | 236 | 236px | `--spacing-236` | ### Border Radius | Element | Giá trị | |---------|-------| | cards | 0px | | badges | 2px | | inputs | 0px | | buttons | 40px | ### Layout - **Page max-width:** 1440px - **Section gap:** 60-80px - **Card padding:** 0px - **Element gap:** 8-16px ## Components ### Ghost Pill Button **Vai trò:** Interactive control chính trong các section sáng 40px border-radius, 1px hairline border màu #000000, fill trong suốt, 14px BeoSupreme weight 500, text #000000, padding 12px 28px. Hover: fill chuyển thành #000000 với text #ffffff. Không drop shadow, không fill ở trạng thái mặc định — đường viền CHÍNH LÀ affordance. ### Inverted Pill Button (Dark Chamber) **Vai trò:** Interactive control chính trên nền ultramarine hoặc obsidian 40px border-radius, 1px border màu #ffffff, fill trong suốt, 14px BeoSupreme weight 500, text #ffffff. Ghost treatment vẫn tồn tại ngay cả trên bề mặt tối — button không bao giờ trở thành khối đặc, giữ nguyên thẩm mỹ gallery wall. ### Product Card (White Surface) **Vai trò:** Product grid item trong trang danh sách và danh mục Zero padding, zero border, zero shadow. Nền #ffffff thuần. Ảnh sản phẩm nổi ở giữa với 25px gutter trái/phải ở phía trên, sau đó gap dọc 16px đến tên sản phẩm (16px weight 500, #191817), sau đó 8px gap đến giá (14px weight 400, #555555). Card vô hình — chỉ có sản phẩm và nhãn của nó tồn tại. ### Product Showcase Card (Dramatic Chamber) **Vai trò:** Spotlight sản phẩm hero trên nền ultramarine Bề mặt full-bleed #060daa, ảnh sản phẩm căn giữa và phóng to, tên sản phẩm và micro-description màu #ffffff ở góc dưới bên trái, body 16px weight 400 và headline 24px weight 500, padding rộng rãi 80px+ ở tất cả các cạnh. Không card chrome — mặt phẳng màu CHÍNH LÀ card. ### Top Navigation Bar **Vai trò:** Global header Thanh trên cùng fixed/sticky, nền #ffffff, 1px bottom hairline màu #e5e5e5 (tùy chọn, thường vô hình). Bố cục ba vùng: cụm trái (icon hamburger 'Menú' + icon search 'Buscar' với micro-labels 9–12px), trung tâm wordmark ('BANG & OLUFSEN' ở 16px weight 500 với phụ đề 'Est. 1925' ở 9px tracked), cụm phải (icon account, location pin, cart). Cao 64px, padding ngang 25px. ### Search Input **Vai trò:** Trường tìm kiếm inline 1px bottom border màu #e5e5e5 (hoặc #000000 khi nhấn mạnh), không có border hai bên, 14px BeoSupreme weight 400, text #000000, placeholder #555555, padding dọc 12px. Chỉ underline, không có input dạng hộp. ### Micro-Label Annotation **Vai trò:** Tags, nhãn danh mục, badge 'New', metadata 2px border-radius, uppercase, 9–12px BeoSupreme weight 500, letter-spacing +0.025em đến +0.143em, text #000000 hoặc #ffffff. Nền trong suốt hoặc khối #191817 phẳng. Hoạt động như chú thích kiến trúc, không phải trang trí. ### Footer Wash **Vai trò:** Global footer Nền #060daa (khớp với hero chamber), text #ffffff, multi-column link grid với 9–14px BeoSupreme. Cùng một mặt phẳng ultramarine lặp lại từ hero đến footer, tạo nhịp điệu bookend trên toàn trang. ### Price Tag **Vai trò:** Hiển thị giá sản phẩm 14px BeoSupreme weight 400, #555555. Ký hiệu tiền tệ cách nhau 4px, không có định dạng trang trí, không gạch ngang, không xử lý sale badge. Giá là một sự thật, không phải sự kiện tiếp thị. ### Color Variant Swatch **Vai trò:** Bộ chọn tùy chọn màu sản phẩm Swatch tròn nhỏ (không có border nhìn thấy trong trích xuất, nhưng pattern điển hình: vòng tròn 16-20px được tô màu sản phẩm, tùy chọn vòng #000000 1px khi được chọn). Không có text label — màu sắc tự nói lên. ### Section Heading **Vai trò:** Tiêu đề section biên tập trong trang (ví dụ: 'Explore nuestros superventas') 36px BeoSupreme weight 500, #191817, letter-spacing -0.056em, căn giữa hoặc căn trái với top margin 60-80px. Tracking khít trên kích thước lớn tạo ra display text nén gọn, tự tin — tiếng thì thầm của sự xa hoa, không phải tiếng la hét. ### Product Grid Row **Vai trò:** Carousel sản phẩm ngang hoặc hàng grid Grid 4-5 cột trên desktop, gutter đều 25px, không có divider giữa các card, không có nền card. Mỗi ô chiếm 25% container max-width. Ảnh có kích thước ~200px vuông, căn giữa trong ô với text bên dưới. ## Do's and Don'ts ### Nên - Sử dụng BeoSupreme ở mọi kích thước; không bao giờ đưa typeface thứ hai vào - Sử dụng 40px border-radius cho tất cả button và interactive pills - Chỉ sử dụng #060daa làm nền full-bleed — không bao giờ dùng làm màu text, icon hoặc điểm nhấn nhỏ - Sử dụng 0px border-radius cho tất cả card, input và container; card nên vô hình - Áp dụng tight letter-spacing (-0.056em) ở 36px display và nới lỏng tracking (+0.143em) ở 9px micro-labels — tracking đảo ngược là signature - Đặt ảnh sản phẩm trên nền #ffffff hoặc #060daa thuần; không bao giờ ghép trên nền rối - Duy trì nhịp điệu dọc 60-80px giữa các section; để sản phẩm có không gian thở ### Không nên - Không sử dụng drop shadow trên card, button hoặc popover — hệ thống không có bóng - Không sử dụng #060daa làm CTA fill hoặc màu link — nó là một mặt phẳng, không phải button - Không sử dụng bất kỳ màu sắc nào cho text ngoài việc làm nền đầy đủ - Không đưa gradient vào UI elements — chỉ trên hero photography nếu có - Không tô button bằng màu đặc ở trạng thái mặc định — outline/ghost là xử lý duy nhất - Không sử dụng bán kính 2px hoặc nhỏ trên button; pills (40px) là hình dạng button duy nhất - Không làm đầy ô sản phẩm với badge, xếp hạng hoặc sale tag — giá và tên là đủ ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|---------|---------| | 1 | Porcelain | `#ffffff` | Canvas mặc định cho trang và danh sách sản phẩm | | 2 | Bone | `#fcfaee` | Bề mặt phụ ấm cho các section biên tập | | 3 | Ultramarine Chamber | `#060daa` | Khoảnh khắc hero và showcase ấn tượng full-bleed | | 4 | Obsidian | `#191817` | Bề mặt tương phản tối, nền ảnh sản phẩm | ## Elevation Bang & Olufsen cố tình không sử dụng drop shadow. Chiều sâu được tạo ra thông qua tương phản màu sắc (card trắng trên trang trắng → không có card, mặt phẳng màu → sản phẩm nổi), tỷ lệ (ảnh sản phẩm phóng to lấn át văn bản) và negative space rộng rãi. Elevation được truyền đạt bằng sự vắng mặt của đường viền, không phải bằng bóng. ## Imagery Product photography là tài sản hình ảnh duy nhất — không có lifestyle, không người mẫu, không bối cảnh môi trường. Sản phẩm được chụp trên nền trung tính thuần (trắng, đen, gradient navy) với ánh sáng studio được kiểm soát, nhấn mạnh chất liệu: nhôm chải, da hạt, đồng anodized, silicone mờ. Xử lý là tight-crop, căn giữa, hero-isolated. Xử lý màu sắc là desaturated và trung thực với chất liệu — đồng đọc là đồng, không phải 'golden hour'. Mô típ hình ảnh phụ: hiếm khi có full-bleed product silhouettes trên nền màu đơn bão hòa (ultramarine, terracotta-red) cho các khoảnh khắc biên tập. Iconography: hairline 1px stroke, monochrome đen trên trắng hoặc trắng trên tối, hình học, không fill, không nhiều màu. ## Layout Container căn giữa max-width 1440px với padding ngang 25px ở các cạnh. Hero là full-bleed (phá vỡ container) với ultramarine chamber kéo dài từ mép này sang mép kia. Product grids là bố cục đều 4-5 cột với gutter 25px, có thể cuộn ngang trên mobile. Các section xen kẽ giữa nền trắng và full-bleed colored chambers — nhịp điệu là: white product grid → ultramarine hero → white product grid → editorial banner đỏ bão hòa → white product grid → ultramarine footer. Navigation là top bar tối giản nổi trên cả section trắng và màu (text chuyển thành trắng trên nền tối). Trang thở — section gaps là 60-80px, từng sản phẩm có không gian riêng trong ô, không có mật độ thông tin. ## Agent Prompt Guide **Tham chiếu màu nhanh** - text primary: #191817 (Obsidian) - text secondary: #555555 (Graphite) - text on dark: #ffffff (Porcelain) - background canvas: #ffffff (Porcelain) - background warm alternative: #fcfaee (Bone) - background dramatic chamber: #060daa (Ultramarine Velvet) - border hairline: #e5e5e5 (Mist) - primary action: không có màu CTA riêng biệt **Ví dụ Component Prompts** 1. *Ghost Pill Button*: 40px border-radius, 1px solid #000000 border, fill trong suốt, text 14px BeoSupreme weight 500 màu #000000, padding 12px 28px, không shadow. Hover: fill thành #000000, text thành #ffffff. 2. *Product Card on White*: Nền #ffffff, zero padding, zero border, zero shadow. Ảnh sản phẩm căn giữa (200px vuông) với 25px gutter ngang. Bên dưới: gap 16px, tên sản phẩm ở 16px BeoSupreme weight 500 #191817. Gap 8px, giá ở 14px BeoSupreme weight 400 #555555. 3. *Ultramarine Hero Chamber*: Nền full-bleed #060daa, padding 80px tất cả các cạnh, ảnh sản phẩm phóng to căn giữa (60% viewport height), tên sản phẩm ở 36px BeoSupreme weight 500 #ffffff ở góc dưới bên trái với letter-spacing -0.056em, micro-description ở 16px BeoSupreme weight 400 #ffffff bên dưới. 4. *Top Navigation*: Cao 64px, nền #ffffff, padding ngang 25px. Trái: hamburger + 'Menú' ở 12px BeoSupreme weight 500 #000000 tracked +0.025em, sau đó gap 16px, icon search + 'Buscar' cùng style. Trung tâm: 'BANG & OLUFSEN' ở 16px BeoSupreme weight 500 #000000 với phụ đề 'Est. 1925' ở 9px tracked +0.143em bên dưới. Phải: icon account/location/cart, mỗi icon cách nhau 16px, màu #000000. 5. *Section Heading*: 36px BeoSupreme weight 500 #191817, letter-spacing -0.056em, line-height 1.15, top margin 60-80px, căn giữa hoặc căn trái trên canvas #ffffff. Tracking khít tạo ra display text nén gọn, tự tin — quyền lực qua sự kiềm chế, không phải âm lượng. ## Nguyên tắc Tracking Đảo ngược Hành vi type signature là tracking đảo ngược với kích thước: -0.056em ở 36px display, -0.014em ở 24px, bình thường ở 16px, +0.025em ở 12px, +0.143em ở 9px. Text lớn thắt chặt; text nhỏ mở rộng. Điều này tạo ra headline cảm giác nén gọn và tự tin trong khi micro-labels cảm giác thoáng đãng và mang tính kiến trúc. Bất kỳ kích thước mới nào được thêm vào hệ thống phải tuân theo đường cong này — không bao giờ áp dụng display tracking cho body, không bao giờ áp dụng micro-label tracking cho headline. ## Phân bổ Màu sắc Màu sắc được xử lý như một vật liệu quý. Trang này ~99% achromatic tại bất kỳ thời điểm nào. Khi #060daa xuất hiện, nó chiếm toàn bộ khung hình. Khi terracotta-red xuất hiện trong editorial banners, nó cũng chiếm toàn bộ full bleed. Không bao giờ sử dụng màu sắc cho UI elements nhỏ, icon hoặc text accents — điều đó giống như tiêu tiền lẻ trong một hệ thống giao dịch bằng các khối canvas đầy đủ. Nếu cần một màu chức năng nhỏ, hãy sử dụng Obsidian #191817 hoặc Pure Ink #000000. ## Các Thương hiệu Tương tự - **Apple** — Cùng product cards zero-chrome trên nền trắng, product photography căn giữa phóng to làm hero, không shadow, display type siêu khít, hệ thống single-typeface - **Bose** — Tương tự ecommerce âm thanh cao cấp với dark hero chambers full-bleed ngắt quãng white product grids, nhưng B&O khắc khổ và giống gallery hơn - **Loewe (loewe.tv)** — Điện tử cao cấp châu Âu tương tự với editorial product-as-sculpture photography trên nền màu bão hòa và type tối giản - **Teenage Engineering** — Cùng sự kiềm chế thiết kế Scandinavian, sản phẩm nổi trên nền thuần, single neo-grotesque typeface mang toàn bộ hệ thống - **Vitra** — Xử lý gallery-museum giống hệt cho đồ vật, negative space rộng rãi, card chrome vô hình, không shadow trang trí ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-porcelain-canvas: #ffffff; --color-bone: #fcfaee; --color-obsidian: #191817; --color-pure-ink: #000000; --color-graphite: #555555; --color-mist: #e5e5e5; --color-ultramarine-velvet: #060daa; /* Typography — Font Families */ --font-beosupreme: 'BeoSupreme', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-object-fit-cover-object-position-center: 'object-fit: cover; object-position: center;', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.67; --tracking-caption: 0.288px; --text-body-sm: 14px; --leading-body-sm: 1.43; --tracking-body-sm: -0.196px; --text-body: 16px; --leading-body: 1.5; --tracking-body: -0.224px; --text-subheading: 24px; --leading-subheading: 1.25; --tracking-subheading: -0.336px; --text-heading: 36px; --leading-heading: 1.15; --tracking-heading: -2.016px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-36: 36px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-60: 60px; --spacing-80: 80px; --spacing-236: 236px; /* Layout */ --page-max-width: 1440px; --section-gap: 60-80px; --card-padding: 0px; --element-gap: 8-16px; /* Border Radius */ --radius-sm: 2px; --radius-3xl: 40px; /* Named Radii */ --radius-cards: 0px; --radius-badges: 2px; --radius-inputs: 0px; --radius-buttons: 40px; /* Surfaces */ --surface-porcelain: #ffffff; --surface-bone: #fcfaee; --surface-ultramarine-chamber: #060daa; --surface-obsidian: #191817; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-porcelain-canvas: #ffffff; --color-bone: #fcfaee; --color-obsidian: #191817; --color-pure-ink: #000000; --color-graphite: #555555; --color-mist: #e5e5e5; --color-ultramarine-velvet: #060daa; /* Typography */ --font-beosupreme: 'BeoSupreme', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-object-fit-cover-object-position-center: 'object-fit: cover; object-position: center;', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.67; --tracking-caption: 0.288px; --text-body-sm: 14px; --leading-body-sm: 1.43; --tracking-body-sm: -0.196px; --text-body: 16px; --leading-body: 1.5; --tracking-body: -0.224px; --text-subheading: 24px; --leading-subheading: 1.25; --tracking-subheading: -0.336px; --text-heading: 36px; --leading-heading: 1.15; --tracking-heading: -2.016px; /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-36: 36px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-60: 60px; --spacing-80: 80px; --spacing-236: 236px; /* Border Radius */ --radius-sm: 2px; --radius-3xl: 40px; } ```