--surface-page
var(--color-paper)King Luxury · Design System
Hệ typo và component dùng chung cho homepage, product và các trang sau này.
Trang này gom các quyết định typography, màu sắc và component đang dùng trên website thành một nguồn tham chiếu duy nhất. Mục tiêu là giữ cảm giác sang, nhất quán và dễ mở rộng khi thêm trang mới.
Foundations
Token nền tảng trước khi tạo component
Dùng semantic token thay vì gọi trực tiếp mã màu hoặc giá trị rời rạc. Cách này giúp toàn bộ website đổi theme, tinh chỉnh độ tương phản và giữ nhịp thiết kế dễ hơn.
--surface-soft
var(--color-cream)--surface-inverse
var(--color-dark)--accent
var(--color-gold)--text-heading
var(--color-navy)--text-body
var(--color-ink)--border-default
var(--color-line)--shadow-md
Cards / floating UIQuy tắc đặt tên: primitive token mô tả giá trị như --color-navy; semantic token mô tả vai trò như --text-heading. Component chỉ nên dùng semantic token.
Typography
Một thang chữ rõ ràng cho toàn website
Mục tiêu là giữ các heading đủ sang nhưng không bị phóng đại. Các mức dưới đây map gần nhất với homepage và product hiện tại, nên dễ tái dùng cho trang mới.
Display
Dùng cho hero hoặc banner lớn
Những lựa chọn tốt nhất
cho phòng ngủ
H1
Trang product / trang sâu
Nệm cao su Dunlopillo Latex Serenity Luxe
H2
Section title, landing nội dung
Từng lớp vật liệu đều phục vụ một cảm giác nằm cụ thể
H3
Card title, module title
Nền đỡ giữ trải nghiệm ổn định qua thời gian
Body
Mô tả, nội dung dài
Bề mặt vải cao cấp được xử lý để tăng độ thoáng khí, hạn chế tích nhiệt và tạo cảm giác mịn nhẹ. Đây là lựa chọn phù hợp cho phòng ngủ cao cấp.
Body XL
20 / 33 · Lead paragraph
Một đoạn mở đầu có nhịp đọc rộng, dùng để đưa người xem vào câu chuyện trước khi đi sâu vào chi tiết.
Body Large
17 / 29 · Intro quan trọng
Dùng cho nội dung cần nổi bật hơn body thông thường nhưng không cạnh tranh với heading.
Body Medium
15 / 26 · Body mặc định
Dùng cho phần lớn nội dung website, mô tả sản phẩm và nội dung giải thích theo đoạn.
Body Small
13 / 22 · Card description
Dùng trong card, bảng thông tin và mô tả ngắn. Không dùng cho bài viết dài.
Caption
11 / 17 · Chú thích, metadata
Hình ảnh minh họa · Bộ sưu tập phòng ngủ cao cấp 2026
Overline
10 / 14 · Category, system label
Natural latex · Made in UK
Eyebrow
Dẫn section / nhãn ngắn
Chapter 01 · Feel
Small
Meta, labels, utility text
Thông số kỹ thuật · Spec sheet
Điểm cần giữ trên homepage và product: heading chính nên dừng ở ngưỡng 400-500, không dùng 300 cho tiêu đề lớn vì làm cảm giác bị mỏng và lệch khỏi chất liệu sang trọng của hệ font hiện tại.
Section intro components
Cụm heading phân cấp để tái sử dụng nhất quán
Mỗi component dùng cùng một anatomy, chỉ thay đổi cấp typography và khoảng cách theo vai trò. Chọn semantic heading theo cấu trúc trang; không chọn cấp chỉ vì muốn chữ lớn hoặc nhỏ.
Signature collection
Giấc ngủ được kiến tạo như một trải nghiệm sống
Dành cho phần mở đầu cấp trang, nơi thông điệp thương hiệu cần rõ nhất.
Giữ phần giải thích ngắn, tập trung vào một giá trị chính và có thể đi kèm một hoặc hai hành động.
Chapter 02 · Comfort
Mỗi lớp vật liệu phục vụ một cảm giác nằm cụ thể
Một câu dẫn làm rõ giá trị chính của section trước khi đi vào chi tiết.
Component mặc định cho các section chính trên landing page. CTA có thể bỏ đi hoặc đặt cùng cụm khi hành động liên quan trực tiếp đến nội dung.
Inside the mattress
Nền đỡ ổn định qua thời gian
Dùng để chia nhóm nội dung bên trong một section lớn, mở đầu grid card, danh sách tính năng hoặc nhóm thông số.
Natural latex
Thông thoáng và nâng đỡ tự nhiên
Dùng trong card lớn, panel, accordion hoặc một cụm nội dung độc lập. Không thêm CTA nếu toàn bộ card đã là liên kết.
<header class="section-intro section-intro--section">
<div class="eyebrow">Chapter label</div>
<h2 class="section-intro__heading">Section heading</h2>
<p class="section-intro__subheading">Optional lead statement...</p>
<p class="section-intro__text">Description...</p>
<div class="section-intro__actions">...</div>
</header>Trong trang thật, Hero intro dùng h1. Showcase này dùng h2 để trang Design System vẫn chỉ có một h1. Modifier được phép: --hero, --section, --subsection, --content, --center và --inverse.
Navigation & listing patterns
Các khối UI cấp trang thường xuyên tái sử dụng
Chuẩn hóa cấu trúc và trạng thái trước khi đưa vào Bricks, để breadcrumb, listing nhân viên và các block điều hướng không bị tạo lại theo từng trang.
Breadcrumb
nav.breadcrumb → link → separator → current
Current item dùng text, không dùng link.
Current item dùng text, không dùng link.
Staff listing / advisor card
Nguyễn Minh AnhChuyên viên tư vấn · TP.HCM
Trần Hoàng NamChuyên viên tư vấn · Hà Nội
Section header
Chapter 03 · Material
Chất liệu tạo nên trải nghiệm
Eyebrow, heading và mô tả luôn đi theo cùng thứ tự. CTA tùy chọn đặt cuối hoặc căn đối diện trên desktop.
Pagination & filters
Filter là trạng thái chọn; pagination là điều hướng. Không dùng cùng một kiểu active nếu hai hành vi khác nhau.
Gradient recipes
Gradient dành cho section và box
Gradient chỉ dùng để tạo chiều sâu và bảo vệ độ đọc của nội dung. Giữ palette navy, gold, cream; tránh gradient nhiều màu hoặc tương phản quá mạnh.
Soft radial
Section nền sáng
Dùng cho intro, category hoặc khối thông tin cần cảm giác nhẹ và có chiều sâu.
Dark luxury
Section nền tối
Dùng cho brand story, technology và CTA cao cấp. Text chính luôn là white.
Image overlay
Box có ảnh nền
Overlay tối đi từ dưới lên để bảo vệ heading và nội dung ngắn.
Pearl wash
Nền pearl cao cấp
Dùng cho testimonial, quote và giới thiệu bộ sưu tập sáng.
Champagne
Box ưu đãi tinh tế
Dùng rất tiết chế cho offer, membership hoặc đặc quyền thương hiệu.
Midnight gold
Signature feature
Dùng cho khối thương hiệu nổi bật hoặc lời mời trải nghiệm riêng.
Velvet night
Editorial tối
Phù hợp cho câu chuyện chất liệu và nội dung giàu cảm xúc.
Side overlay
Ảnh nền đặt nội dung bên trái
Gradient ngang bảo vệ nội dung khi điểm nhấn ảnh nằm bên phải.
Radial image
Ảnh nền có focal point
Radial overlay giữ vùng trung tâm ảnh sáng và bảo vệ nội dung phía dưới.
Trong Bricks, ưu tiên native Gradient setting. Với ảnh nền, đặt ảnh trong Background và gradient riêng ở Overlay; chỉ dùng custom CSS khi native controls không biểu đạt được pattern.
Royal ornament subheads
Subhead dùng SVG phào chỉ thay cho line
Dùng các ornament SVG vừa upload để tạo cảm giác royal hơn cho eyebrow/subhead. Pattern này thay thế line ngang ở các block hero, editorial, testimonial và section mở đầu cao cấp.
Signature craftDi sản chế tác trong từng chi tiết
Ornament hai bên giúp subhead trang trọng hơn line thẳng, phù hợp hero hoặc campaign title trên nền sáng.
Pearl collectionNền pearl cho câu chuyện thương hiệu
Biến thể mềm, sáng, có chiều sâu nhẹ cho quote, testimonial hoặc giới thiệu bộ sưu tập.
Private suiteTrải nghiệm nghỉ ngơi riêng biệt
Dành cho section navy/dark, ornament chuyển sang champagne để giữ tương phản và chất royal.
Royal detailKhung nhấn cho thông điệp quan trọng
Dùng cho panel feature hoặc CTA cao cấp, khi cần thay divider bằng một chi tiết có tính nhận diện hơn.
Slider component
Slider native, responsive và dễ tái sử dụng
Slider dùng scroll-snap làm nền tảng nên vẫn hoạt động khi JavaScript không tải. Controls và dots chỉ tăng trải nghiệm, không giữ vai trò bắt buộc.
Royal feather icons
Icon nét mảnh, đồng nhất và có sắc thái hoàng gia
Dùng Feather/Lucide làm hệ icon duy nhất. Tất cả icon giữ stroke tròn, không fill, stroke width 1.5–1.7 và dùng gold/navy theo ngữ cảnh.
Icon box layout recipes
Các cách trình bày icon box dễ tái sử dụng
Dùng các pattern này cho benefit, quy trình tư vấn, listing dịch vụ, trust signals, CTA nhỏ và panel nền tối. Icon giữ cùng stroke, chỉ thay layout theo ngữ cảnh.
Feature card ngang
Dùng cho benefit chính trên product page, mỗi card có icon, title và mô tả 2–3 dòng.
Trust card
Phù hợp chứng nhận, bảo hành, chính sách đổi trả hoặc cam kết chính hãng.
Service card
Dùng cho chăm sóc khách hàng, tư vấn tại nhà, hậu mãi hoặc concierge.
Đặt lịch showroomListing row gọn cho danh sách dịch vụ hoặc checklist.
Giao hàng & lắp đặtPhù hợp sidebar, block chính sách hoặc phần sau CTA.
Đo kích thước riêngCó thể dùng trong accordion hoặc card tư vấn cá nhân hóa.
Ưu đãi thành viênRow cuối không cần divider, giữ cảm giác editorial sạch.
Chính hãng
Bảo hành
Đúng lịch
Showroom
Dùng trên navy section, hero phụ hoặc block campaign cần tương phản cao.
Icon gold trên nền tối giúp nhấn vào chất liệu, di sản và trải nghiệm cao cấp.
Phù hợp các cụm thương hiệu, showroom flagship hoặc private suite.
Cần một component icon box riêng?Copy pattern phù hợp, đổi icon bằng native Bricks SVG và giữ text ngắn để card không rối.
Quy tắc sử dụng
Icon utility dùng 14–18px; icon button dùng 16–22px; icon feature dùng 24–30px. Dùng cùng một icon cho cùng một hành động trên toàn site.
Tránh
Không trộn icon fill, emoji, ký tự mũi tên và nhiều bộ icon khác nhau. Không dùng crown/gem cho mọi nội dung vì sẽ làm mất cấp bậc thương hiệu.
Bricks component system
Hướng dẫn tạo và tái sử dụng component trên website
Mục tiêu là giữ component native, dễ chỉnh trong Builder và không tạo ra nhiều bản sao lệch chuẩn. Bắt đầu từ variables và global classes; chỉ tạo Bricks Component khi instance thực sự cần properties riêng.
Variables
Tạo Bricks Global Variables cho màu semantic, spacing, radius, shadow và typography. Không nhập raw value lại trên từng element.
Global classes
Dùng class BEM ổn định cho component như kl-staff-card. Riêng Button dùng native Style và Size của Bricks, không tạo class variant.
Native structure
Dựng bằng Section, Container, Heading, Text, Button, Image và Query Loop. Icon button dùng SVG trong native icon setting, không gõ ký tự mũi tên vào label.
Component
Chuyển thành Bricks Component khi block phức tạp được dùng nhiều nơi và cần properties như title, image, CTA hoặc theme.
Cấu trúc mẫu: Staff card
Block Image · kl-staff-card__imageBlock · kl-staff-card__content Heading · kl-staff-card__nameText · kl-staff-card__metaButton · Native style: Primary + Outline · Size: Small
Khi nào dùng gì?
Theme Styles: mặc định cho heading, text, link và button toàn site.
Global Variables: token dùng chung.
Global Classes: style và variant tái sử dụng.
Query Loop: listing nhân viên, sản phẩm, bài viết.
Bricks Component: block phức tạp cần properties theo instance.
Naming
- Prefix dự án: kl-.
- Block: kl-staff-card.
- Element: kl-staff-card__name.
- Modifier: kl-staff-card--featured.
Responsive
- Set desktop trước, override tablet/mobile có chủ đích.
- Dùng native grid/flex gap controls.
- Không tạo class riêng chỉ để sửa một margin ngẫu nhiên.
Checklist publish
- Kiểm tra hover, focus, active, disabled.
- Kiểm tra dynamic data trống/dài.
- Kiểm tra desktop, tablet, mobile.
- Đặt tên và mô tả component rõ ràng.
Nguyên tắc quyết định: nếu một block chỉ lặp lại style, dùng Global Classes. Nếu block cần nội dung/properties thay đổi có kiểm soát giữa nhiều instance, dùng Bricks Component. Listing động phải dùng Query Loop thay vì copy card thủ công.
Fluid sizing trong Bricks: lưu các giá trị
clamp() như --text-h1, --fluid-space-lg, --control-md thành Global Variables và gán cho Theme Styles/Global Classes. Breakpoint chỉ dùng để đổi layout, không dùng để đặt lại toàn bộ font-size và spacing. Icon dùng SVG Feather/Lucide đã upload vào Media Library và gắn qua native icon setting.Color system
Bảng màu nền tảng
Màu chính vẫn xoay quanh navy và gold để giữ cảm giác cao cấp, còn cream và paper làm nền giúp chữ thoáng hơn.
Bảng màu này mirror trực tiếp Bricks Global Variables và Bricks Color Palette KingLuxury Variables. Khi đổi màu, sửa biến
--color-* trước; semantic token như --surface-* và --text-* chỉ trỏ về biến nền tảng.Scale readiness
Những lớp cần có để design system scale bền vững
Token và component chỉ là phần nhìn thấy. Một hệ thống trưởng thành còn phải kiểm soát layout, nội dung, dữ liệu, trạng thái và vòng đời thay đổi.
Layout primitives
Chuẩn hóa container, cluster, stack, grid, sidebar và full-bleed section để không dựng layout từ đầu ở mỗi trang.
Data states
Mỗi listing cần empty, loading, error, no-result và partial-data states; không chỉ thiết kế trạng thái có dữ liệu đẹp.
Content rules
Quy định độ dài title, body, label, CTA, alt text và cách xử lý nội dung động dài/ngắn.
Component API
Mỗi component ghi rõ slots, properties, variants, defaults, giới hạn và các combination không hỗ trợ.
Accessibility QA
Checklist keyboard, focus order, contrast, landmarks, motion và screen reader phải là điều kiện publish.
Versioning
Gắn version cho component, ghi changelog và đánh dấu deprecated trước khi xóa variant cũ.
Ownership
Chỉ định người duyệt token/component mới, tránh nhiều nhóm tạo pattern gần giống nhau.
Visual regression
Lưu trang showcase này làm baseline và chụp desktop/mobile sau các thay đổi lớn để phát hiện lệch giao diện.
Layout & rhythm
Spacing, radius và elevation có quy luật
Hệ spacing dùng bước tăng có chủ đích. Khoảng cách nhỏ dành cho nội bộ component; khoảng cách lớn dành cho nhóm nội dung và section.
4
8
12
16
24
32
48
64
96
4px · utility controls8px · buttons / fields16px · cards / panelsModal / elevated hero onlyControls & states
Component phải có đủ trạng thái
Không chỉ thiết kế trạng thái mặc định. Mỗi control cần hover, focus-visible, active, disabled và error khi phù hợp.
Hierarchy
Text link
Sizes & shape
Icon & states
Khám phá
On dark surface
Status
Đã xác nhậnChờ xử lýCần kiểm tra
Usage
- Mỗi vùng chỉ có một primary CTA.
- Icon phải hỗ trợ ý nghĩa, không trang trí tùy tiện.
- Button phải có hover, focus và disabled.
Helper text ngắn, có ích và cụ thể.
Vui lòng nhập đúng định dạng email.
Components
Các khối UI tái dùng trên site
Đây là các pattern đã xuất hiện trong homepage và product page, giờ được chuẩn hóa để dễ lặp lại ở các trang mới.
Hero banner
Tiêu đề lớn + CTA
Dùng cho homepage và landing page. Heading lớn, nhưng phải giữ khoảng thở rộng và không quá đậm.
Product card
Card sản phẩm
Title serif vừa phải, price mạnh hơn body và CTA phải rõ cấp bậc. Đây là pattern của các grid sản phẩm.
Editorial surface
Section kể chuyện
Phù hợp cho section công nghệ, chứng chỉ và nội dung giải thích. Tông chữ cần mềm hơn, nhưng vẫn giữ nhịp chắc.
UI states
Buttons, labels và danh sách
Các mẫu nhỏ nhất này cũng cần theo cùng ngôn ngữ chữ: gọn, rõ, letter spacing vừa đủ và không đẩy weight quá cao.
Buttons
.bricks-button { font-size: var(--text-small); font-weight: 600; letter-spacing: .04em; }
.bricks-button.primary { background: var(--color-navy); color: var(--color-white); }
.bricks-button.primary { background: var(--color-navy); color: var(--color-white); }
Labels
- Eyebrow dùng cho chapter / section marker
- Small dùng cho metadata, specs và helper text
- Body giữ ở 15px trên homepage, 14-15px trên product
Usage note
- Heading lớn nên ưu tiên 400-500 thay vì 300 để tránh cảm giác mỏng.
- Giữ serif cho tiêu đề, sans cho phần đọc nhanh và UI.
- Không tăng weight cho mọi thứ, chỉ dùng khi cần cấp bậc thật sự.
Accessibility
Sang trọng không được đánh đổi khả năng sử dụng
Các quy tắc tối thiểu áp dụng cho mọi trang: focus rõ, vùng bấm đủ lớn, cấu trúc heading đúng và nội dung vẫn hoạt động khi giảm chuyển động.
Nên làm
Dùng navy hoặc ink cho body text trên nền sáng. Giữ focus-visible rõ ràng. Button và input cao tối thiểu 44px. Alt text mô tả mục đích ảnh, không lặp lại caption.
Không nên
Không dùng gold cho đoạn văn dài. Không truyền đạt trạng thái chỉ bằng màu. Không ẩn outline bàn phím. Không dùng chữ 10–11px cho nội dung cần đọc liên tục.
| Cặp màu | Mục đích | Quy tắc |
|---|---|---|
| Navy trên Paper/Cream | Heading, UI quan trọng | Ưu tiên |
| Ink trên Paper/Cream | Body text | Ưu tiên |
| White trên Dark/Navy | Heading và CTA đảo màu | Ưu tiên |
| Gold trên Paper/Cream | Eyebrow, icon, decorative accent | Không dùng cho body dài |
Governance
Quy tắc mở rộng hệ thống
Trước khi thêm token hoặc component mới, cần chứng minh pattern hiện tại không đáp ứng được. Mọi bổ sung phải có vai trò rõ, trạng thái đầy đủ và ít nhất hai nơi tái sử dụng.
1. Reuse
- Tìm component và token hiện có trước.
- Dùng variant thay vì clone component.
2. Validate
- Kiểm tra desktop, tablet và mobile.
- Kiểm tra keyboard và reduced motion.
3. Document
- Ghi rõ mục đích và giới hạn sử dụng.
- Thêm ví dụ nên/không nên khi dễ dùng sai.
Access
Lối vào nhanh từ menu
Trang này đã được đưa vào top menu để khi chỉnh typography hay component, bạn mở ra được ngay từ homepage và product.
Homepage
Trang gốc cho hero, banner và các section lớn. Hệ typo ở đây quyết định cảm giác đầu tiên của thương hiệu.
Mở homepageProduct page
Trang mô tả sản phẩm là nơi test rõ nhất heading, body, price và nhãn kỹ thuật. Đây là chỗ kiểm tra tính nhất quán tốt nhất.
Mở productHeading gradient system
Gradient chữ sang trọng, có cấp bậc rõ ràng
Luôn ghép class nền kl-heading-gradient với một variant. Gradient chỉ dành cho hero, campaign heading hoặc một cụm từ cần nhấn mạnh; không áp dụng đại trà cho mọi tiêu đề.
Royal gold · Light surface
Di sản hoàng gia cho giấc ngủ hiện đại
Dùng cho hero hoặc title thương hiệu quan trọng trên nền paper và cream.
Champagne · Editorial
Tinh tuyển trong từng lớp vật liệu
Ấm và mềm hơn royal gold, phù hợp campaign, membership và editorial.
Midnight · Dark surface
Một chuẩn mực nghỉ ngơi riêng biệt
Variant sáng dành riêng cho navy hoặc dark section, giữ tương phản cao.
Accent span · Partial emphasis
Chạm vào nghệ thuật nghỉ ngơi
Dùng accent span khi chỉ cần làm nổi bật một cụm từ trong heading thông thường.
Trong Bricks: chọn Heading → thêm kl-heading-gradient → thêm đúng một variant. Với gradient một phần chữ, bọc cụm từ bằng span và gán kl-heading-gradient-accent. Luôn kiểm tra contrast trên ảnh nền.