#124191
Brand, link, primary CTA
Design Manifesto · nokia.com/blog
Rõ ràng. Chuyên nghiệp. Editorial-first.
Hệ nhận diện lấy cảm hứng từ Nokia Blog: blog công nghệ B2B với typography Nokia Pure, palette Nokia Blue, card editorial và khoảng trắng thoáng — phù hợp tri thức mạng, AI và hạ tầng số.
Color Palette
Nokia Blue là màu nhận diện chính; cyan accent cho điểm nhấn kỹ thuật; neutral slate cho nội dung dài. Palette bám Nokia Design System.
Primary — Brand
#00c9ff
Accent, highlight, tech signal
#001135
Headlines, hero titles
Neutral — Content
#2d3748
Paragraph body
#5c6b7a
Meta, date, caption
#d8dde6
Borders, card outline
Surface — Background
#ffffff
Cards, article surface
#f0f4fa
Page tint, section bg
#f5f5f5
Page background
Typography
Nokia Pure (Dalton Maag) cho body; Nokia Pure Headline cho tiêu đề hero và section. Xem chi tiết tại Font Guideline — Nokia Pure.
UI Components
Card editorial, CTA pill, category chip và link underline — pattern lặp lại trên Nokia Blog.
Buttons
Primary = Nokia Blue fill. Secondary = outline. Ghost = text link style.
Editorial card
Radius 12px, shadow nhẹ, ảnh 16:9 phía trên (blog pattern).
Card là đơn vị chính của feed — không bảng developer-style.
Topic chip
Pill category — nền soft blue, chữ Nokia Blue.
Link
Underline offset 3px — rõ ràng, accessible, không cần màu chói.
Nokia Blog Patterns
Các pattern quan sát từ nokia.com/blog — áp dụng có chọn lọc cho blog SEOMONEY.
Featured hero
Bài nổi bật full-width: ảnh lớn + headline Headline Bold + excerpt ngắn + CTA "Read more".
Article grid
Feed 2–3 cột desktop, 1 cột mobile. Card đồng nhất: thumbnail → topic → title → date.
Topic navigation
Filter theo chủ đề (5G, AI, Cloud…) — horizontal scroll hoặc dropdown trên mobile.
B2B editorial voice
Giọng chuyên gia, data-driven, ít marketing fluff. Calm enterprise — không crypto-dashboard.
Grid & Spacing
12-column, max-width 1200px. Spacing 8px base. Card radius 12px (mềm hơn Hilda 4px).
| Token | Value | Use |
|---|---|---|
--space-sm | 8px | Chip gap, inline |
--space-md | 16px | Card body padding |
--space-lg | 24px | Section internal |
--space-xl | 32px | Between sections |
--radius-card | 12px | Editorial cards |
--radius-pill | 999px | Category chips |