Design System#Design#Typography#CSS
Warm Glassmorphism as a System
Published: Feb 26, 2026Updated: Feb 27, 2026Reading time: 1 min
Our constraints for typography, color tokens, hierarchy, and motion in MLog, designed for reuse and maintainability.
Font strategy
We separate display and body typography:
- expressive serif for headings,
- language-specific body fonts for Chinese and English.
Color tokens
All core colors are tokenized to avoid scattered hex values.
:root {
--color-brand: #d46634;
--color-brand-strong: #bb5122;
--color-ink: #3e2a22;
}
Motion strategy
Motion should reinforce hierarchy, not compete with content:
- staggered card reveal on the homepage,
- subtle hover feedback,
- low-frequency background movement.
Takeaway
A durable visual style comes from consistency across component design, tokens, and content structure.