Design system

Hệ thị giác v3

Bố cục có cấu trúc, chữ lớn nét nhẹ, màu dùng theo token và sơ đồ làm rõ thông tin thay vì chỉ để trang trí.

app.css @themesite.css .v3fx.tst-*.css

Màu

Màu được quản lý bằng token trong mã nguồn, không lấy giá trị trực tiếp từ ảnh chụp màn hình.

Bảng màu v3

white --color-white · --white #ffffff ———
ink --color-ink · --ink #0a0f14 ———
dark --color-dark · --dark #051c2c ———
accent --color-accent · --accent #2251ff ———
paper --color-paper · --paper #f7f8fa ———
wash --color-wash · --wash #eef2ff ———
muted --color-muted · --muted #5b6675 ———
line --color-line · --line #e3e7ee ———
line-dark --color-line-dark · --line-dark rgba(255, 255, 255, .14) ———
accent-on-dark --color-accent-on-dark · --accent-on-dark #8ea2ff ———

Trạng thái

green --color-green #0b6b4f ———
green-soft --color-green-soft #edf8f3 ———
amber --color-amber #8a5a00 ———
amber-soft --color-amber-soft #fff6d6 ———
red --color-red #be123c ———
red-soft --color-red-soft #fff1f2 ———

Màu dữ liệu

sq-note --sq-note #5d7391 —
sq-explainer --sq-explainer #8ea2ff —
sq-evidence --sq-evidence #5fd3a8 —
sq-guide --sq-guide #ffffff —
tl-work --tl-work #8ea2ff —
tl-tech --tl-tech #2251ff —
tl-biz --tl-biz #ffffff —
tl-life --tl-life #5d7391 —

Tên cũ trỏ về v3

--color-soft#5b6675
--color-faint#8a94a3
--color-bg#ffffff
--color-card#ffffff
--color-border#e3e7ee
--color-border-light#eef1f5
--color-accent-soft#eef2ff
--color-accent-mid#cdd8ff

Kiểu chữ

Be Vietnam Pro là phông chữ chính; tiêu đề lớn dùng nét Light, còn thân bài, nhãn và nút có kiểu riêng.

Be Vietnam Pro--font-sans

Aa Ăă Ââ Đđ Êê Ôô Ơơ Ưư

à á ả ã ạ · ầ ấ ẩ ẫ ậ · ờ ớ ở ỡ ợ

Aa300
Aa400
Aa500
Aa600
Aa700

JetBrains Mono--font-mono

Aa Ăă Ââ Đđ Êê Ôô Ơơ Ưư

à á ả ã ạ · ầ ấ ẩ ẫ ậ · ờ ớ ở ỡ ợ

Aa400
Aa500
Aa600

.display-xl --text-display-xl clamp(48px, 7.2vw, 104px)

size: —
weight: —
line: —
track: —

Công việc & hệ thống

.display-l --text-display-l clamp(36px, 5vw, 72px)

size: —
weight: —
line: —
track: —

Sản phẩm & công nghệ

.title --text-title clamp(24px, 2.4vw, 34px)

size: —
weight: —
line: —
track: —

Kinh doanh & marketing

.lead --text-body-l clamp(18px, 1.5vw, 22px)

size: —
weight: —
line: —
track: —

Công việc được tổ chức ra sao, vướng ở đâu, thay đổi gì?

.body --text-body-m 17px

size: —
weight: —
line: —
track: —

Mình học, suy nghĩ, cộng tác và sống ra sao?

.label --text-label 13px

size: —
weight: —
line: —
track: —

Học hỏi & cuộc sống

.eyebrow --text-label 13px

size: —
weight: —
line: —
track: —

Hướng dẫn

code --font-mono

size: —
weight: —
line: —
track: —

.v3 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

Khoảng cách và bố cục

Bố cục theo lưới rõ ràng, thẻ nội dung có cấu trúc, đường phân cách và khoảng trống hợp lý.

token / rule	declared	now	used by
`--container-site`	`1280px`	`—`	.wrap max content
`--spacing-gutter`	`clamp(20px, 5.5vw, 80px)`	`—`	.wrap padding
`--radius-site`	`6px`	`—`	.card, input, .program
`.section`	`padding: clamp(64px, 9vw, 120px) 0;`	`—`	section rhythm
`.section-head`	`margin-bottom: clamp(36px, 5vw, 64px)`	`—`	head → body
`.grid-2 / .grid-3`	`gap: 24px`	`24px`	cards
`.card`	`padding: 28px`	`28px`	card body

var(--radius).card · input · image
999px.btn · .filter · .type-chip
1px.eyebrow ::before · .logo

Chuyển động

Chuyển động giao diện tôn trọng reduced-motion.

fx="v3"

home · hubs · editorial

beat 1 eyebrow → heading lines rv-up .8s +90ms/line → lead → actions fx-up .7s
beat 2 section body fx-in .7s +120ms
trigger IntersectionObserver .25, once
hover: row hairline .45s, chip lift 2px, ↗ nudge

fx="calm"

landing · sales · event · shop · catalog

<html data-fx="calm">
no fx-pre script, no entrances
@view-transition { navigation: none }
hover + functional UI only

prefers-reduced-motion

all pages

.v3 * { transition: none; animation: none }
@view-transition off
fx.ts init → static from first paint

--ease-sitecubic-bezier(.2, .7, .2, 1)

beat 1

eyebrow → heading → lead

fx-item · --d

Thành phần

Các biến thể của chương trình dùng chung hệ token cơ bản.

btn-ink arrow-link

Button · light.btn.btn-ink · .arrow-link

btn-primary btn-ghostbtn-disabledarrow-link

Button · dark.btn-primary · .btn-ghost · .btn-disabled

eyebrow

meta · 19 tháng 10, 2026

Eyebrow · meta.eyebrow · .meta

Ghi chépGiải thíchThử nghiệmLiên kếtHướng dẫnGhi chép

Công việc & hệ thống Sản phẩm & công nghệ Kinh doanh & marketing Học hỏi & cuộc sống

openended

Type chip · lens tag · status.type-chip.{type} · .lens-tag · .status

Filter chips · tabs.ex-filters .filter[aria-pressed] · .ex-tabs

Search box.search-box

.card

background: var(--paper)

card-foot

.card.white

background: var(--white)

card-foot

.card.wash

background: var(--wash)

card-foot

.card.dark

background: var(--dark)

card-foot

Card · light / dark.card · .card.white · .card.wash · .card.dark

12/10/2026

Kết nối MCP A Realistic Dreamer với Claude và ChatGPT

Đưa nội dung, quyền truy cập và thông tin tài khoản ARD vào cuộc chat AI của chính bạn.

Giải thích Sản phẩm & công nghệ 02/06/2026

WebWright: cho AI viết code làm task trên web, tái sử dụng được

Liên kếtgithub.com

Row<Row> · .row2

Short video`<ShortsStrip> · .ce-short-card`

eyebrow

.display-l

.lead

Page head.page-head > .wrap · .eyebrow · .display-l · .lead

25 tháng 7, 2026

Offline event · Sài Gòn tháng 7

Build and Chill

200.000₫ · bao gồm nước uống · Max 40 người · 200k bao gồm nước uống

Event · catalog.t-b1 .cat-up · .cat-archive

Workshop

Thứ 6 · 31/07 · 20:00 · Online (Zoom)

Office Hour — Foundation Claude Code

— Sellkit

Xem ngay →

Workshop

3 buổi · 150 phút/buổi · bản ghi xem ngay

Foundation — Claude Code cho người mới

— Sellkit

Xem ngay →

Combo

3 buổi · bản ghi xem ngay

Combo 3 Workshop AI tháng 1/2026 — THINK · BUILD · LEARN

— Sellkit

Xem ngay →

Shop card.t-b2 .sx-filter · .sx-card · <Cover>

Tiêu đề tiếng Việt

Khi tiêu đề chưa vừa khung, hãy điều chỉnh bố cục và ngắt dòng thay vì sửa chữ hay cắt bớt ý.

Trình duyệt tự ngắt text-wrap: wrap

Hiểu mô hình, dữ liệu, khách hàng và cách vận hành kinh doanh.

Quy tắc v3 balance · NBSP

Hiểu mô hình, dữ liệu, khách hàng và cách vận hành kinh doanh.

Trình duyệt tự ngắt text-wrap: wrap

Mình học, suy nghĩ, cộng tác và sống ra sao?

Quy tắc v3 balance · NBSP

Mình học, suy nghĩ, cộng tác và sống ra sao?

Không ngắt giữa từ..v3 h1–h4 { word-break: normal; overflow-wrap: break-word }
Giữ các cụm ngắn (≤ 16 ký tự) quanh dấu phẩy hoặc dấu hai chấm trên cùng một dòng.nowrapPhrases() · h1, .display-l, .display-xl
Dấu — – · đi cùng chữ phía trước, không đứng đầu dòng mới.bindDashes() · h1–h3, .title, .eyebrow
Chỉ tách dòng tại khoảng trắng ASCII.splitLines() · /[ \t\n\r]+/
text-wrap: balanceh1, h2, .display-l, .display-xl

Khu thành viên

Đề xuất, chưa duyệtmock/v3/members/PROPOSAL.mdmembers.css @theme

token	now	v3
`font-sans / font-serif`	Inter / Fraunces	Be Vietnam Pro / Be Vietnam Pro 300
`ink base / muted / subtle / inverse`	#09090b #52525b #71717a #fafafa	#0a0f14#5b6675#6b7584#ffffff
`surface base / subtle / muted / inverse`	#ffffff #fafafa #f4f4f5 #09090b	#ffffff#f7f8fa#eef1f5#051c2c
`line / line-strong`	#e4e4e7 #d4d4d8	#e3e7ee#cfd6e2
`accent / hover / muted`	#4f46e5 #4338ca #eef2ff	#2251ff#1a40d9#eef2ff
`ok / warn / bad`	tailwind green / yellow / red	#0b6b4f#8a5a00#b42318
`bg-grad-*`	pastel gradients	flat surface-subtle
`hover shadow-md`	shadow	none + border line-strong
`radius md / lg · button`	6 / 8 · 6	6 / 8 · rounded-full

Nên và không nên

Tránh dùng hiệu ứng chuyển màu hoặc đổ bóng tùy tiện.

.card

Nên

.card

Không nên

Không dùng riêng màu sắc để biểu thị trạng thái.

openended

Nên

Không nên

Không cắt bớt hoặc đổi nghĩa tiêu đề cho vừa khung; hãy chỉnh bố cục hoặc ngắt dòng.

Hiểu mô hình, dữ liệu, khách hàng và cách vận hành kinh doanh.

Nên

Hiểu mô hình, dữ liệu, khách hàng và cách vận hành kinh doanh.

Không nên

Màu

Bảng màu v3

Trạng thái

Màu dữ liệu

Tên cũ trỏ về v3

Kiểu chữ

Khoảng cách và bố cục

Chuyển động

Thành phần

.card

.card.white

.card.wash

.card.dark

Kết nối MCP A Realistic Dreamer với Claude và ChatGPT

WebWright: cho AI viết code làm task trên web, tái sử dụng được

Video ngắn

Build and Chill

Tiêu đề tiếng Việt

Khu thành viên

Nên và không nên

.card

.card

Chia sẻ ảnh