@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/content-vi/foundations/styles/logos/placement-and-containers.mdx

@@ -0,0 +1,96 @@
+---
+title: Vị trí và khung chứa
+description: Logo đặt ở đâu trên website, trong tài liệu, email, ấn phẩm in, trên ảnh và cạnh đối tác; icon nằm thế nào trong icon ứng dụng, avatar và favicon; và các lỗi cần tránh.
+order: 2
+audience: web, giao diện sản phẩm, tài liệu
+owner: Brand
+updated: 2026-10-23
+---
+import LogoInUse from '../../../../components/logos/LogoInUse.astro';
+import LogoContainer from '../../../../components/logos/LogoContainer.astro';
+import LogoMistakes from '../../../../components/logos/LogoMistakes.astro';
+
+## Trên website
+
+- Đặt lockup ở bên trái header và link về trang chủ.
+- Cỡ: icon 24–32 px trong header cao 56–64 px. Site này dùng icon 24 px trong header 56 px.
+- Giữ [vùng trống](/vi/foundations/styles/logos/using-the-logo/#vùng-trống) và làm theo phần [hiển thị sắc nét](/vi/foundations/styles/logos/using-the-logo/#hiển-thị-sắc-nét).
+- Bên trong HexaSync, dùng logo HexaSync. Xem [Logo sản phẩm](/vi/foundations/styles/logos/product-logos/).
+
+<LogoInUse only={['header', 'app']} />
+
+## Trong tài liệu và slide
+
+- Đặt lockup ở góc trên bên trái trang đầu hoặc slide bìa, giữ đủ vùng trống.
+- In rộng tối thiểu 25 mm.
+- Chọn bản màu theo nền: bản 1 trên giấy và slide nền sáng, bản 2 trên slide nền tối.
+
+<LogoInUse only={['document', 'slide']} />
+
+## Trong email
+
+- Đặt lockup dưới tên người gửi, dạng PNG xuất ở 2×, rộng tối thiểu 100 px. Nhiều ứng dụng email không hiển thị SVG.
+- Dùng alt text “Beehexa”, để chữ ký vẫn đọc được khi ảnh bị chặn.
+
+<LogoInUse only={['email']} />
+
+## Trên ấn phẩm in
+
+- Danh thiếp: lockup ở giữa mặt trước, bản 2 trên nền xám ghi; tên và thông tin ở mặt sau, nền trắng.
+- Lockup rộng tối thiểu 25 mm, và vùng trống không bị nếp gấp, đường cắt hay lỗ đục lấn vào.
+
+<LogoInUse only={['card']} />
+
+## Trên ảnh và nền màu thương hiệu
+
+- Trên ảnh, dùng bản 3 (trắng) ở vùng ảnh ít chi tiết, thường là một góc, giữ vùng trống. Không đặt ô nền sau logo để cứu một bức ảnh rối: hãy chọn khung cắt khác.
+- Trên nền vàng thương hiệu, dùng bản 4 (xám ghi).
+
+<LogoInUse only={['photo', 'yellow']} />
+
+## Cạnh logo đối tác
+
+Khi Beehexa xuất hiện cùng đối tác, ví dụ trên trang tích hợp, dùng lockup ngang. Hai logo có cùng trọng lượng thị giác, mỗi logo giữ vùng trống riêng, ngăn nhau bằng một vạch dọc mảnh.
+
+<LogoInUse only={['partner']} />
+
+## Icon trong ô: luật ô 3 cạnh
+
+Icon ứng dụng và avatar đặt icon trong một ô, và nền tảng sẽ cắt ô đó thành hình vuông bo góc hoặc hình tròn. Mép ô là ranh giới, nên icon dùng luật riêng, đo bằng cạnh lục giác:
+
+- Ô rộng 3 cạnh.
+- Icon cao 2 cạnh, bằng hai phần ba ô, nằm giữa.
+- Phía trên và phía dưới còn nửa cạnh.
+
+<LogoContainer />
+
+| File | Ô | Chiều cao icon | Nền |
+|---|---|---|---|
+| apple-touch-icon.png | 180 px | 120 px | Xám ghi #2B2A28 |
+| icon-192.png, icon-512.png | 192 và 512 px | 128 và 341 px | Xám ghi #2B2A28 |
+| icon-maskable-512.png | 512 px | 341 px, nằm trong vòng an toàn 80% | Xám ghi #2B2A28 |
+| avatar-800.png | 800 px | 533 px | Xám ghi #2B2A28 |
+
+Icon vàng trên ô xám ghi: giữ màu thương hiệu và đạt 7.76 : 1.
+
+## Favicon
+
+Favicon là icon đứng riêng, màu vàng, nền trong suốt, phủ kín ô vuông của nó.
+
+| File | Cỡ | Ghi chú |
+|---|---|---|
+| favicon.svg | Mọi cỡ | Trình duyệt hiện nay dùng file này. Cạnh mịn, vẽ từ icon gốc. |
+| favicon.ico | 16, 32 và 48 px | Cho trình duyệt và công cụ cũ. Mỗi cỡ được vẽ to rồi thu nhỏ, nên cạnh vẫn mịn. |
+
+```html
+<link rel="icon" href="/favicon.ico" sizes="48x48">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="manifest" href="/site.webmanifest">
+```
+
+<LogoInUse only={['tab', 'avatar']} />
+
+## Lỗi hay gặp
+
+<LogoMistakes />

package/dist/docs/src/content-vi/foundations/styles/logos/product-logos.mdx

@@ -0,0 +1,56 @@
+---
+title: Logo sản phẩm
+description: Logo các sản phẩm của Beehexa, bắt đầu từ HexaSync, và khi nào dùng chúng thay cho logo công ty.
+order: 3
+audience: sản phẩm, marketing
+owner: Brand
+updated: 2026-10-23
+---
+import LogoPair from '../../../../components/logos/LogoPair.astro';
+import LogoInUse from '../../../../components/logos/LogoInUse.astro';
+
+## HexaSync
+
+<LogoPair kind="hexasync" name="HexaSync" />
+
+Lockup HexaSync được dựng đúng như lockup công ty: cùng icon, tên sản phẩm bằng Inter Display cùng độ đậm 500, cùng khoảng cách và cùng [vùng trống](/vi/foundations/styles/logos/using-the-logo/#vùng-trống). Đuôi chữ “y” thò xuống dưới icon.
+
+Mọi luật trên trang [Cách dùng logo](/vi/foundations/styles/logos/using-the-logo/) đều áp dụng: bốn bản màu, cỡ tối thiểu, các lỗi dùng sai.
+
+## Logo nào dùng ở đâu
+
+| Nơi dùng | Logo |
+|---|---|
+| Bên trong ứng dụng web HexaSync | HexaSync |
+| Trang sản phẩm HexaSync, trang connector và marketplace | HexaSync |
+| Website công ty, hợp đồng, hoá đơn, tuyển dụng, mạng xã hội | beehexa |
+| Tài liệu nói về nhiều sản phẩm | beehexa |
+
+Không đặt logo beehexa và HexaSync cạnh nhau: hai logo dùng chung icon, đặt chung trông như lỗi. Chọn một theo ngữ cảnh.
+
+## HexaSync khi dùng thực tế
+
+- **Thanh ứng dụng:** bản nền tối trên thanh xám ghi, ở bên trái, link về trang chủ sản phẩm.
+- **Màn hình đăng nhập và màn hình trống:** bản màu, đặt giữa, phía trên nội dung.
+- **Marketplace và trang connector:** ô icon ứng dụng, cạnh đó là tên “HexaSync” viết bằng chữ. Các trang này cắt ảnh thành ô vuông, nên lockup không vừa.
+
+<LogoInUse only={['app', 'login', 'marketplace']} />
+
+## Icon và khung chứa
+
+Sản phẩm không có icon riêng. HexaSync dùng file icon Beehexa cho favicon, icon ứng dụng và avatar, dựng theo [luật ô 3 cạnh](/vi/foundations/styles/logos/placement-and-containers/#icon-trong-ô-luật-ô-3-cạnh). Tên sản phẩm nằm ở tên ứng dụng, tiêu đề trang và alt text, không nằm trong icon.
+
+## Cách viết tên
+
+- Logo công ty viết thường: “beehexa”.
+- Logo sản phẩm giữ cách viết của sản phẩm: “HexaSync”, viết liền, H và S viết hoa.
+
+## Logo cho sản phẩm mới
+
+Hiện mọi lockup sản phẩm đều dùng icon Beehexa với tên sản phẩm bên cạnh. Để có logo cho sản phẩm mới:
+
+1. Gửi cho người phụ trách Brand qua [hello@beehexa.com](mailto:hello@beehexa.com?subject=New%20product%20logo), kèm tên sản phẩm đúng như cách sẽ viết.
+2. Brand dựng lockup từ file gốc: icon, tên bằng Inter Display đã chuyển thành nét vẽ, đúng độ đậm đã chọn, cùng khoảng cách.
+3. File được thêm vào [gói tải về](/vi/foundations/styles/logos/downloads-and-terms/).
+
+Không tự vẽ logo sản phẩm, và không tạo icon riêng cho một sản phẩm.

package/dist/docs/src/content-vi/foundations/styles/logos/using-the-logo.mdx

@@ -0,0 +1,70 @@
+---
+title: Cách dùng logo
+description: Bản màu, nền, vùng trống, cỡ tối thiểu, icon đứng riêng và những điều không được làm.
+order: 1
+audience: mọi người đặt logo
+owner: Brand
+updated: 2026-10-23
+---
+import LogoColourVersions from '../../../../components/logos/LogoColourVersions.astro';
+import LogoClearSpace from '../../../../components/logos/LogoClearSpace.astro';
+import LogoMinSize from '../../../../components/logos/LogoMinSize.astro';
+import LogoMisuse from '../../../../components/logos/LogoMisuse.astro';
+
+## Bản màu
+
+Bốn bản, làm từ ba màu: vàng #FCB017, xám ghi #2B2A28 và trắng. Hãy chọn bản có độ tương phản cao nhất với nền của bạn.
+
+<LogoColourVersions />
+
+WCAG không đặt mức tương phản tối thiểu cho logo (Understanding 1.4.3 và 1.4.11), nhưng logo không ai nhìn rõ thì không ai nhớ. Chúng tôi đặt mỗi bản ở nơi nó nổi bật, nhắm tới mức 3 : 1 mà WCAG đặt cho các hình đồ hoạ khác. Đó là lý do icon vàng không đứng riêng trên nền sáng; ngoại lệ duy nhất là favicon (xem [icon đứng riêng](#icon-đứng-riêng)).
+
+## Vùng trống
+
+Giữ một lề trống rộng **x** ở cả bốn phía: không chữ, không hình, không mép trang lấn vào. x là x-height của wordmark, tức chiều cao chữ thường, và bằng đúng một cạnh của lục giác. Vì x là một phần của logo, lề trống to nhỏ theo logo.
+
+<LogoClearSpace />
+
+File gốc đã có sẵn lề này trong artboard. Căn theo artboard, không căn theo hình vẽ, là đủ vùng trống.
+
+## Cỡ tối thiểu
+
+<LogoMinSize />
+
+| | Màn hình | In |
+|---|---|---|
+| Lockup, bề rộng | 100 px | 25 mm |
+| Icon đứng riêng, chiều cao | 16 px | 6 mm |
+
+## Hiển thị sắc nét
+
+Cạnh của icon nghiêng 30°, nên trên màn hình 100% (1×) chúng hiện răng cưa khi logo rơi vào giữa hai pixel.
+
+- Đặt chiều cao và vị trí logo bằng số nguyên pixel.
+- Trên màn hình, hiển thị logo bằng ảnh PNG xuất ở gấp 3 lần cỡ hiển thị, không dùng SVG. Trình duyệt thu nhỏ ảnh lớn, làm mềm cạnh một chút và giấu răng cưa. Mọi logo trên site này, kể cả header, đều làm như vậy.
+- Cách làm: xuất file SVG gốc từ Figma, Illustrator hoặc Inkscape ở gấp 3 lần cỡ cần dùng. Cần logo cao 30 px thì xuất ảnh cao 90 px rồi hiển thị ở 30 px. Ảnh lớn hơn nhiều vẫn dùng được, nhưng nặng hơn khi tải và mỗi trình duyệt thu nhỏ hơi khác nhau.
+- Không vẽ lại icon cho khớp lưới pixel: làm vậy sẽ hỏng lục giác đều và góc 30°.
+- Trong tài liệu, slide và bản in, dùng SVG.
+
+## Icon đứng riêng
+
+Chỉ dùng icon không có wordmark khi tên đã có trên màn hình, hoặc khi không đủ chỗ cho lockup: favicon, icon ứng dụng, avatar và giao diện sản phẩm cỡ nhỏ.
+
+| Nền | Màu icon |
+|---|---|
+| Tối | Vàng |
+| Sáng | Xám ghi, hoặc vàng trên ô xám ghi |
+| Ảnh hoặc màu đậm | Trắng |
+
+Vàng trên trắng chỉ đạt 1.85 : 1. Đi cùng wordmark thì không sao, vì chữ xám ghi gánh phần đọc; đứng riêng thì icon gần như biến mất. Ngoại lệ duy nhất là favicon: dùng màu vàng để tab trình duyệt có màu thương hiệu.
+
+## Dùng sai
+
+<LogoMisuse />
+
+## Alt text và link
+
+- Logo đứng riêng: alt text là “Beehexa”, hoặc tên sản phẩm như “HexaSync”. Không thêm chữ “logo”.
+- Logo là link về trang chủ: “Beehexa – Trang chủ”, để người dùng biết link dẫn đi đâu.
+- Khi tên đã được viết ngay cạnh logo, logo chỉ để trang trí: để alt text rỗng.
+- Logo là link thì cần có viền focus nhìn thấy được, như mọi link khác. WCAG chỉ miễn yêu cầu về màu của logo, không miễn cho phần điều khiển bao quanh nó.

package/dist/docs/src/content-vi/foundations/styles/opacity.mdx

@@ -0,0 +1,9 @@
+---
+title: "Độ mờ"
+description: "Khi nào được dùng độ trong suốt, và vì sao trạng thái và control disabled dùng màu thay vì độ mờ."
+order: 10.5
+planned:
+  - "Chỗ được dùng độ trong suốt: lớp phủ sau dialog, lớp phủ trên ảnh"
+  - "Vì sao hover, pressed và disabled dùng bậc màu, không dùng độ mờ"
+  - "Token độ mờ, nếu cần"
+---

package/dist/docs/src/content-vi/foundations/styles/radius.mdx

@@ -0,0 +1,98 @@
+---
+title: Bo góc
+description: Tám bậc bo góc, phần tử nào dùng bậc nào, và cách bo góc cho hình nằm trong hình khác.
+order: 6
+---
+import ShapeDemo from '../../../components/ShapeDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+**Mọi góc bo đều là token radius. Chọn bậc theo loại phần tử, rồi kiểm lại với khung chứa nó.**
+
+## Thang bo góc
+
+Tám bậc. Số trong tên token theo thang khoảng cách: `radius.100` là 8 px, giống `space.100`.
+
+<ShapeDemo kind="radius-scale" />
+
+## Ví dụ
+
+### `radius.0` · vuông
+
+Những cạnh chạm mép màn hình: header của trang, bảng tràn hết chiều ngang và panel chạy sát mép.
+
+<ShapeDemo kind="radius-use" item="0" />
+
+### `radius.050` · 4 px
+
+Phần tử nhỏ: checkbox, tag, badge và các mục trong menu.
+
+<ShapeDemo kind="radius-use" item="050" />
+
+### `radius.100` · 8 px
+
+Control và các bề mặt nhỏ mở ra từ control: button, ô nhập, select, menu, popover, tooltip và alert. Ô nhập và button luôn dùng chung giá trị này.
+
+<ShapeDemo kind="radius-use" item="100" />
+
+### `radius.150` · 12 px
+
+Card, và nhóm control có padding 4 px, như segmented control.
+
+<ShapeDemo kind="radius-use" item="150" />
+
+### `radius.200` · 16 px
+
+Dialog và drawer, và nhóm control có padding 8 px.
+
+<ShapeDemo kind="radius-use" item="200" />
+
+### `radius.full` · viên thuốc
+
+Avatar, switch và chip trạng thái dạng viên thuốc.
+
+<ShapeDemo kind="radius-use" item="full" />
+
+## Hình nằm trong hình
+
+**Radius bên trong = radius bên ngoài − padding.** Dùng khi padding nhỏ hơn radius bên ngoài. Khi padding lớn hơn, phần tử bên trong giữ radius của nó, miễn là không lớn hơn radius bên ngoài.
+
+<ShapeDemo kind="nesting" />
+
+`radius.025` và `radius.075` chỉ dùng cho các trường hợp này. Không component nào dùng chúng mặc định.
+
+Theo luật khoảng cách, kết quả luôn là một bậc trong thang: 2 px không bao giờ là padding, và 6 px chỉ là padding bên trong component.
+
+Khi nội dung nằm sát mép trong một hộp có viền 1 px, cắt nó bằng `overflow: hidden`. Không tạo giá trị radius − 1.
+
+## Focus ring
+
+Focus ring nằm cách phần tử 2 px về phía ngoài, và trình duyệt tự bo nó theo góc: button 8 px có ring 10 px. Không cần token radius. Xem [Viền](/vi/foundations/styles/border/) cho chính ring.
+
+<ShapeDemo kind="focus-radius" />
+
+## Nên và không nên
+
+<ShapeDemo kind="dodont" item="nested" />
+<ShapeDemo kind="dodont" item="controls" />
+<ShapeDemo kind="dodont" item="corners" />
+
+## Code
+
+```css
+.card {
+  border-radius: var(--bh-radius-150);
+  padding: var(--bh-space-050);
+}
+.card img {
+  border-radius: var(--bh-radius-100); /* 12 − 4 = 8 */
+}
+```
+
+## Token
+
+<TokenTable prefix="radius" />
+
+## Liên quan
+
+- [Viền](/vi/foundations/styles/border/): độ dày viền, thanh đang chọn và focus ring.
+- [Khoảng cách](/vi/foundations/styles/spacing/): các giá trị padding dùng trong quy tắc lồng nhau.

package/dist/docs/src/content-vi/foundations/styles/size-and-density.mdx

@@ -0,0 +1,41 @@
+---
+title: Kích thước và mật độ
+description: Ba chiều cao control, cỡ vùng người dùng có thể bấm hoặc chạm, và mật độ của màn hình Beehexa.
+order: 5
+---
+import LayoutDemo from '../../../components/LayoutDemo.astro';
+import TokenTable from '../../../components/TokenTable.astro';
+
+**Mọi control có ba chiều cao: 24, 32 và 40 px. Các control trên cùng một hàng dùng chung một chiều cao.**
+
+Control là những thứ người dùng bấm vào hoặc gõ vào: nút, ô nhập, select, segmented control và tab. Chiều cao cố định giữ một hàng control thẳng hàng, dù chữ bên trong dài ngắn thế nào.
+
+<LayoutDemo kind="controls" />
+
+| Cỡ | Chiều cao | Ở đâu |
+|---|---|---|
+| Nhỏ | 24 px | Bảng dày đặc và thanh công cụ của chúng, bộ lọc, tag |
+| Mặc định | 32 px | Form, nút, header, thanh công cụ, mọi chỗ còn lại |
+| Lớn | 40 px | Trang đăng nhập và onboarding. Có thể dùng cho thao tác chính trên màn hình cảm ứng |
+
+- Giữ các control cùng chiều cao trên cùng một hàng. Nút 24 px cạnh ô nhập 32 px trông bị lệch.
+- Đặt chiều cao bằng token kích thước, không dùng padding. Chữ nằm giữa chiều cao.
+
+## Vùng bấm
+
+**Mọi control đều bấm được trong vùng ít nhất 24 × 24 px, và chạm được trong vùng 44 × 44 px trên màn hình cảm ứng.**
+
+- 24 px là cỡ vùng bấm tối thiểu của WCAG 2.2 (SC 2.5.8). Mọi chiều cao control đều đạt mức này.
+- Trên màn hình cảm ứng, giữ nguyên chiều cao nhìn thấy và mở rộng vùng phản hồi khi chạm lên ít nhất 44 × 44 px (`size.target.touch`).
+
+## Mật độ
+
+**Hiện Beehexa chỉ có một mật độ: mặc định.**
+
+Một mật độ nghĩa là mọi màn hình được thiết kế và kiểm tra ở một cỡ. Mật độ gọn có thể ra sau; nó sẽ giảm chiều cao control và khoảng cách cùng lúc, và màn hình nào dùng token sẽ không cần sửa gì.
+
+Trước khi có mật độ gọn, hãy làm bảng dày đặc bằng control và dòng cỡ nhỏ (24 px), không dùng token khoảng cách nhỏ hơn.
+
+## Token
+
+<TokenTable prefix="size" />

package/dist/docs/src/content-vi/foundations/styles/spacing.mdx

@@ -0,0 +1,70 @@
+---
+title: Khoảng cách
+description: Thang khoảng cách 14 bậc trên nền 8 px cho padding, gap và margin, và cách chọn bậc.
+order: 3
+---
+import SpacingDemo from '../../../components/SpacingDemo.astro';
+
+**Mọi khoảng trống đều là một token khoảng cách. Chọn bậc theo mức độ hai thứ thuộc về nhau.**
+
+Những thứ thuộc về nhau thì đặt gần nhau. Các nhóm khác nhau thì cách xa hơn. Người đọc nhận ra các nhóm trước khi đọc một chữ nào.
+
+<SpacingDemo kind="anatomy" />
+
+## Thang khoảng cách
+
+**14 bậc trên nền 8 px. Mỗi bậc có việc riêng, ghi ngay bên cạnh.**
+
+Số trong tên token là phần trăm của 8 px: `space.100` là 8 px, `space.200` là 16 px, và `space.075` là 6 px. Các bậc càng lớn càng cách xa nhau, vì chênh 4 px thấy rõ giữa các khoảng nhỏ nhưng gần như vô hình giữa các khoảng lớn.
+
+<SpacingDemo kind="scale" />
+
+Khi hai thứ có thể dùng một trong hai bậc, hãy hỏi chúng thuộc về nhau tới mức nào. Càng liên quan thì khoảng càng nhỏ.
+
+### Padding và gap
+
+<SpacingDemo kind="padding-gap" />
+
+- Padding là khoảng trống bên trong một phần tử. Đặt trên chính phần tử đó.
+- Gap là khoảng trống giữa các phần tử. Đặt trên phần tử cha bằng `gap`, trong bố cục flex hoặc grid.
+- Tránh dùng margin giữa các phần tử cùng cấp. Margin cộng dồn ở chỗ hai phần tử gặp nhau và để thừa khoảng sau phần tử cuối; `gap` không gặp cả hai vấn đề đó.
+- Đo padding từ mép ngoài, tính cả viền. Ô nhập 32 px có viền 1 px thì có 11 px padding bên trong viền, nên chữ cách mép 12 px.
+
+## Nền 8 px
+
+**Từ 8 px trở lên, mọi khoảng đều là bội số của 4 px. Dưới 8 px, thang có thêm hai bậc không chia hết cho 4: 2 và 6 px.**
+
+| Khoảng | Các bậc | Dùng cho |
+|---|---|---|
+| Gọn, dưới 8 px | 2, 4, 6 | Chỉ bên trong component |
+| Từ 8 px | 8, 12, 16, 20, 24, 32, 40, 48, 64, 80 | Component, bố cục và các phần của trang |
+
+- Line height của chữ cũng là bội số của 4 px (xem [Kiểu chữ](/vi/foundations/styles/typography/)). Chữ, control và khoảng trống thẳng hàng với nhau.
+- Chỉ dùng `space.025` (2 px) để xê dịch một thứ nhỏ vào đúng chỗ: badge trên icon, chấm trạng thái cạnh chữ. Không dùng giữa các control hay làm padding.
+- Chỉ dùng `space.075` (6 px) bên trong component, ở hai chỗ: trên và dưới nhãn của control 32 px, vì (32 − 20) ÷ 2 = 6, và hai bên tooltip. Không dùng cho bố cục, khoảng cách giữa các phần, padding của card, hay giữa icon và chữ: khoảng đó là 4 px cạnh chữ 14 px và 8 px cạnh chữ 16 px trở lên.
+- Viền và vòng focus không phải khoảng cách. Đừng tính chúng vào, trừ khi tính padding như trên.
+
+### Không có khoảng âm
+
+Không có token khoảng cách âm.
+
+- Khi hai thứ chồng lên nhau, như một chồng avatar, component tự quy định phần chồng.
+- Không dùng margin âm để kéo một phần tử cho thẳng hàng. Hãy sửa khoảng cách xung quanh nó.
+
+## Nên và không nên
+
+<SpacingDemo kind="dodont" item="grouping" />
+<SpacingDemo kind="dodont" item="scale" />
+<SpacingDemo kind="dodont" item="nudge" />
+
+## Chữ tiếng Việt
+
+Chữ tiếng Việt cần dòng cao hơn để chứa dấu. Text style đã tự thêm chiều cao đó (xem [Kiểu chữ](/vi/foundations/styles/typography/)), nên khoảng cách không đổi: dùng cùng token cho cả hai ngôn ngữ.
+
+Nhãn tiếng Việt thường dài hơn nhãn tiếng Anh. Hãy cho nhãn xuống dòng, hoặc chừa đủ chỗ trong khung chứa. Không bớt khoảng cách để nhét vừa nhãn.
+
+## Liên quan
+
+- [Khung ứng dụng](/vi/foundations/styles/layout/app-frame/): khoảng cách giúp header, menu bên và page header thẳng hàng.
+- [Lưới](/vi/foundations/styles/layout/grid/): cột, gutter và lề trang ở mỗi breakpoint.
+- [Kích thước và mật độ](/vi/foundations/styles/size-and-density/): chiều cao control.

package/dist/docs/src/content-vi/foundations/styles/typography/code.mdx

@@ -0,0 +1,53 @@
+---
+title: Code
+description: Font stack, cách lấy font, tính năng OpenType cho chữ số và mã, và các token chữ.
+order: 3
+---
+import TokenTable from '../../../../components/TokenTable.astro';
+import TypeDemo from '../../../../components/TypeDemo.astro';
+
+## Font stack
+
+Dùng token, không tự viết danh sách font.
+
+```css
+/* font.family.sans */
+font-family: Inter, "Noto Sans", system-ui, sans-serif;
+
+/* font.family.mono */
+font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+```
+
+Noto Sans là font dự phòng vì có đủ chữ tiếng Việt và ký hiệu ₫, và có cỡ gần với Inter (x-height 0.536 em so với 0.546 của Inter), nên trang chuyển sang font dự phòng vẫn giữ bố cục.
+
+## Lấy font
+
+- **Trên web,** hãy tự host font. Dùng bản Inter trong kho Google Fonts (`github.com/google/fonts`, `ofl/inter`): bản này được hinting cho chữ nhỏ trên Windows và giữ đủ mọi tính năng OpenType. Không link tới Google Fonts API: file ở đó bỏ mất `cv05`, `cv08`, `ss02` và `zero`, trong khi `cv05` và `cv08` được bật mặc định (xem [Chữ số và mã](#chữ-số-và-mã)). Site này phục vụ các file đó, chia thành các bộ ký tự Latin, Latin Extended và tiếng Việt.
+- **Trên máy tính,** để dùng trong Figma, slide và tài liệu, cài Inter từ Google Fonts và JetBrains Mono từ JetBrains. Bản Inter của Google Fonts cũng tránh được lỗi dấu bị cắt trong các ứng dụng Windows cũ như Office.
+- Giấy phép của cả hai font đều cho phép dùng trong sản phẩm, tài liệu và logo.
+
+## Chữ số và mã
+
+`cv05` và `cv08` được bật cho mọi chữ Inter. Chúng cho chữ l thường có đuôi và chữ I hoa có chân, nên l, I và 1 không bao giờ trông giống nhau trong tên, ID và key. Bật các tính năng còn lại ở nơi cần; giữ nguyên đoạn văn.
+
+- **Bảng và giá trị thay đổi:** dùng số đều cột (`font-variant-numeric: tabular-nums`), để chữ số thẳng cột và bộ đếm không bị giật.
+- **Mã mà người dùng đọc hoặc gõ,** như mã đơn hàng, SKU và API key: thêm số 0 có gạch chéo (`zero`) cho Inter, hoặc đặt chúng bằng JetBrains Mono (`code.default`). JetBrains Mono không có `cv05` hay `cv08`, nên code trông vẫn như cũ.
+
+<TypeDemo kind="numbers" />
+
+<TypeDemo kind="features" />
+
+Mọi text style được áp dụng bằng thuộc tính rút gọn `font`, và thuộc tính này đặt lại `font-feature-settings`. Vì vậy các tính năng được đặt trên mọi thành phần từ một biến, `--bh-font-features`; muốn thêm tính năng, hãy đổi biến, không đổi thuộc tính.
+
+```css
+/* Base: on every element */
+:root { --bh-font-features: "cv05", "cv08"; }
+*, ::before, ::after { font-feature-settings: var(--bh-font-features) !important; }
+
+/* Opt in where needed */
+.table-number { font-variant-numeric: tabular-nums; }
+.code-value  { --bh-font-features: "cv05", "cv08", "zero"; }
+```
+
+## Token
+<TokenTable prefix="font" />

package/dist/docs/src/content-vi/foundations/styles/typography/index.mdx

@@ -0,0 +1,58 @@
+---
+title: Kiểu chữ
+description: Hai font chữ và mười bốn text style, cùng độ đậm, khoảng cách chữ và line height.
+order: 2
+sidebarLabel: Overview
+---
+import TypeDemo from '../../../../components/TypeDemo.astro';
+
+## Font chữ
+
+Hai font là đủ cho mọi thứ: Inter cho chữ giao diện và chữ để đọc, JetBrains Mono cho code.
+
+<TypeDemo kind="faces" />
+
+Inter được chọn vì:
+
+- x-height cao, nên chữ giao diện cỡ nhỏ vẫn dễ đọc.
+- Có đủ chữ tiếng Việt, kể cả ký hiệu ₫.
+- Có tính năng OpenType giúp phân biệt các ký tự dễ nhầm như l, I và 1. Điều này quan trọng với một sản phẩm đầy mã đơn hàng và API key.
+- Là mã nguồn mở theo giấy phép SIL Open Font License, nên tự host và nhúng được.
+- Là font của wordmark Beehexa, nên chữ trong sản phẩm và logo cùng một họ.
+
+Inter có trục optical size: từ 32 px trở lên, font được vẽ thành Inter Display, khoảng cách chữ khít hơn cho tiêu đề. Trình duyệt tự áp dụng; hãy để `font-optical-sizing` ở `auto`.
+
+## Text style
+
+Chữ được định dạng bằng **text style**, không dùng cỡ chữ rời. Mỗi text style là một token mang cùng lúc cỡ chữ, line height, độ đậm và font, đặt tên theo vai trò. Mười bốn text style trong năm nhóm đủ cho mọi sản phẩm, tài liệu và trang web của Beehexa.
+
+<TypeDemo kind="styles" />
+
+- **Display** chỉ dùng cho trang marketing. Màn hình sản phẩm bắt đầu từ `heading.xlarge`.
+- **Heading** dùng cho tiêu đề trang, phần, card và nhóm. Mỗi trang dùng một `heading.large`, làm tiêu đề trang.
+- **Body** dùng cho đoạn văn. `body.default` (14 px) là mặc định trong giao diện sản phẩm; `body.large` (16 px) dùng cho chữ mà người dùng đọc kỹ thay vì lướt.
+- **Label** dùng cho chữ trên hoặc cạnh control: nút, nhãn của form, tab, menu, badge.
+- **Code** dùng cho code, ID và key.
+
+## Độ đậm
+
+| Độ đậm | Token | Dùng |
+|---|---|---|
+| 400 | `font.weight.regular` | Đoạn văn |
+| 500 | `font.weight.medium` | Nhãn |
+| 600 | `font.weight.semibold` | Tiêu đề |
+| 700 | `font.weight.bold` | Chỉ cho display |
+
+Không dùng độ đậm nhẹ hơn 400: nét mảnh bị đứt ở chữ nhỏ. Đoạn văn in đậm không phải là tiêu đề. Khi cần nhấn mạnh vì ý nghĩa, hãy dùng `<strong>` hoặc `<em>`, để trình đọc màn hình cũng nhận được.
+
+## Khoảng cách chữ
+
+Để ở 0. Trục optical size của Inter đã làm khít chữ lớn, nên tiêu đề không cần letter-spacing âm, và chữ nhỏ giữ khoảng cách mặc định.
+
+## Line height
+
+Line height là một phần của mỗi text style và nằm trên lưới 4 px: mọi giá trị đều là bội số của 4 px, nên chữ thẳng hàng với khoảng cách và component.
+
+- Text style body và label dùng 1.3–1.5 lần cỡ chữ (14/20, 12/16, 16/24), đủ khoảng trống giữa các dòng chữ giao diện mà không làm đoạn văn bị loãng.
+- Tiêu đề càng lớn line height càng khít, khoảng 1.1–1.25 ở cỡ display, để chữ lớn vẫn liền một khối.
+- Chữ tiếng Việt dùng giá trị cao hơn; xem phần [Tiếng Việt](/foundations/styles/typography/vietnamese/).