Featured · Essay
2026 · 05 · 22 — 12 min read
墨Mài mực: một bài thực tập về sự không hoàn hảo
Khi tôi bắt đầu mài mực thật, sắc đen đầu tiên hôm đó tệ hơn tôi tưởng. Đến chiều thì tay đã quen, nhưng sắc đen vẫn không bao giờ giống nhau hai lần.
Hệ thống thiết kế theo triết lý wabi-sabi, sắp xếp theo Atomic Design — tokens, typography, atoms, molecules, organisms, templates. Đặt tên theo quy ước Sumi của dự án.
Mọi giá trị màu là CSS custom property trong tokens.css. Tham chiếu bằng
var(--sumi-900), var(--washi-100), var(--shu-red)…
— không hardcode hex trong component.
| Token | Map | Dùng cho |
|---|---|---|
| --color-text | sumi-800 | Body text mặc định |
| --color-text-heading | sumi-900 | Heading |
| --color-text-muted | sumi-600 | Caption · metadata |
| --color-bg | washi-100 | Page background |
| --color-bg-elevated | washi-50 | Card · surface nổi |
| --color-border | washi-300 | Hairline · table border |
| --color-accent | shu-red | Link hover · dấu nhấn |
Ba họ chữ: display (Cormorant Garamond) cho heading, body (EB Garamond) cho prose, mono
(JetBrains Mono) cho UI. Class tiện ích .type-<variant> dùng cho UI ngoài
prose.
.type-h1 .type-h2 .type-h3 .type-h4 .type-h5 .type-h6 .type-subtitle1 .type-subtitle2 .type-body1 .type-body2 .type-button .type-caption | Token | Value | Visual |
|---|---|---|
| --space-1 | 8px | |
| --space-2 | 16px | |
| --space-3 | 24px | |
| --space-4 | 32px | |
| --space-5 | 48px | |
| --space-6 | 64px | |
| --space-7 | 96px | |
| --space-8 | 128px | |
| --space-9 | 192px |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) · mặc định |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
| --duration-fast | 250ms |
| --duration-base | 400ms · UI mặc định |
| --duration-slow | 600ms · letter-spacing |
Hover signature: letter-spacing 0.12em → 0.16em (600ms ease-out)
sm · base · lg · disabled
Stroke 1.5px · currentColor · 24×24 viewBox
Plain — .divider
Cao 2px · gradient sumi-900 → shu-red. --_remain = phần còn lại.
Wabi-sabi extension — cảm giác đóng dấu tay, transform rotate(-2deg)
2026 · 05 · 22 · 7 min read
Khi tôi bắt đầu mài mực thật, sắc đen đầu tiên hôm đó tệ hơn tôi tưởng.
Không phải bài nào cũng đáng viết. Đây là filter giữa cảm hứng và bản nháp.
Một blog cá nhân không phải là tạp chí. Nó là một không gian — và không gian cần có chỗ để thở. — Sumi · v2.0
→ Xem sticky AppBar ở đầu trang. Nền color-mix(... 85%, transparent) + backdrop-filter: blur(12px).
"Mài mực" sẽ bị xoá vĩnh viễn. Không thể hoàn tác.
2026 · 05 · 22 — 12 min read
墨Khi tôi bắt đầu mài mực thật, sắc đen đầu tiên hôm đó tệ hơn tôi tưởng. Đến chiều thì tay đã quen, nhưng sắc đen vẫn không bao giờ giống nhau hai lần.
Note · 2026 · 05 · 18 · 3 min
Không phải bài nào cũng đáng viết. Đây là filter giữa cảm hứng và bản nháp.
Essay · 2026 · 05 · 10 · 8 min
Người Nhật gọi đó là "ma". Ở giữa hai âm, hai động tác, hai chữ.
ArticleLayout grid 3 cột (TOC | content | aside) ≥ 1100px. Container + Stack là layout primitives.
Khi tôi bắt đầu mài mực thật, sắc đen đầu tiên hôm đó tệ hơn tôi tưởng.
Quá loãng. Lần thứ hai quá đặc. Đến chiều thì tay đã quen, nhưng sắc đen vẫn không bao giờ giống nhau hai lần.