Nokia Branding

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ố.

01

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

Nokia Blue #124191 Brand, link, primary CTA
Signal Cyan #00c9ff Accent, highlight, tech signal
Navy Ink #001135 Headlines, hero titles

Neutral — Content

Body Slate #2d3748 Paragraph body
Muted #5c6b7a Meta, date, caption
Divider #d8dde6 Borders, card outline

Surface — Background

Paper #ffffff Cards, article surface
Soft Blue #f0f4fa Page tint, section bg
Canvas #f5f5f5 Page background
02

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.

Display
3rem / Headline / -0.02em Hero, featured story
Heading 1
2.25rem (36px) / Headline Bold Article title
Heading 2
1.75rem (28px) / Pure Bold Section trong bài
Body — Nokia Blog dùng đoạn văn thoáng, line-height 1.65, cỡ 16px cho đọc lâu trên desktop và mobile.
1rem (16px) / Pure Regular / lh 1.65 Paragraph
Category · 12 Jan 2026
0.82rem / uppercase / muted Meta, topic label
03

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

Accelerating AI-RAN

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

5G · Cloud · AI

Pill category — nền soft blue, chữ Nokia Blue.

04

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.

05

Grid & Spacing

12-column, max-width 1200px. Spacing 8px base. Card radius 12px (mềm hơn Hilda 4px).

TokenValueUse
--space-sm8pxChip gap, inline
--space-md16pxCard body padding
--space-lg24pxSection internal
--space-xl32pxBetween sections
--radius-card12pxEditorial cards
--radius-pill999pxCategory chips