Ericsson Blue
#003784
Brand, link, primary CTA
Branding Guideline
Design Manifesto
Tối giản đến tận cùng. Hiện đại đến từng pixel.
Hilda là hệ nhận diện Ericsson Professional cho blog: rõ ràng, sắc nét, nhất quán và ưu tiên khả năng đọc.
Color Palette
Palette Hilda dùng Ericsson Blue làm màu chủ đạo, Teal cho trạng thái hỗ trợ, Red cho CTA/cảnh báo và neutral grayscale cho nội dung.
Primary — Brand
Teal
#00a69d
Support, success, secondary signal
CTA Red
#e30613
Action, alert, destructive state
Accent — Highlight
Text Black
#000000
Headings, primary text
Body
#333333
Paragraph body
Muted
#666666
Metadata, captions
Surface — Background
Snow
#ffffff
Default surface
Mist
#f8fafc
Soft section bg
Edge
#ececec
Borders, dividers
Typography
Typeface chính là Ericsson Hilda. Fallback Inter/Roboto chỉ dùng khi trình duyệt cần glyph bổ sung cho tiếng Việt hoặc hệ thống.
Display
Heading 1
Heading 2
Heading 3
Body text — phù hợp cho đoạn dài 1.65 line-height vừa thoáng vừa đọc nhanh.
Caption — meta info, date, author byline.
UI Components
4 atom cơ bản: Button, Card, Input, Icon. Mọi composition phức tạp xây từ 4 atom này.
Buttons
3 tier: Primary (1 per view), Secondary (alternative), Ghost (tertiary/cancel).
Card
Card title
Subtle border, no shadow at rest. Hover lifts +2px.
Flat at rest, depth on interaction. Radius cố định 4px.
Input
Stacked label, single border, focus ring 3px accent color.
Icon
Stroke 2px, square 24×24 viewbox. Geometric primitives ưu tiên.
Grid & Spacing
12-column grid, max-width 1280px. Spacing scale 8px base. Mobile-first responsive.
| Token | Value | Use |
|---|---|---|
--space-xs | 4px | Icon gap, tight inline |
--space-sm | 8px | Card body gap |
--space-md | 16px | Standard rhythm |
--space-lg | 24px | Section internal |
--space-xl | 32px | Section gap |
--space-2xl | 48px | Major section divide |
Design Language
Calm enterprise design language lấy cảm hứng từ premium annual report. Áp dụng cho mọi page, dashboard, tool, widget, report, article. Không clone pixel-by-pixel — học design language rồi tái sử dụng.
Calm > flashy
Sang trọng hơn hiệu ứng. Tránh shadow nặng, gradient mạnh, glassmorphism, neon, animation thừa. Ưu tiên whitespace · typography · hierarchy · màu dịu.
Cards before tables
Card là primitive mặc định. Radius 14–20px, border mảnh, nền mềm, padding 18–28px. Tránh bảng "developer-style".
Typography creates hierarchy
Section title lớn → content title vừa → secondary label nhỏ/nhạt. Số liệu KPI quan trọng: lớn hơn + đậm hơn.
Whitespace is a feature
Không nén thông tin. Phân vân thì thêm spacing, đừng thêm element.
Dashboard style
Như Bloomberg terminal × premium annual report: calm · structured · informative · low-noise. Cards + sections + timelines + metrics, không "20 widget tranh chú ý".
Magazine-style articles
Gần Apple Newsroom / Financial Times / Stripe Docs / Notion hơn blog truyền thống. Hero → content → related → references → series → summary. Tránh tường chữ.
Motion
Tinh tế: duration 150–250ms. Tránh bounce, scale transform lớn, motion gây xao nhãng. Animation hỗ trợ đọc.
Information density
Trung bình — premium annual report · Bloomberg × Apple. KHÔNG crypto dashboard · gaming UI · Material overload.
Supplemental UI Inspiration (Optional Visual Theme)
Section này tồn tại để coder & AI tương lai hiểu được intended design direction chỉ bằng cách đọc trang Branding Guideline này (URL công khai). Đây là documentation only. Nó KHÔNG phải: một redesign · một migration plan · một component library · một implementation task.
Based on annual-report style KPI cards
Soft pastel backgrounds · calm enterprise feeling · large numbers · subtle circular icons · spacious card layouts · Apple Annual Report × Bloomberg × Stripe Docs × Notion.
Direction
“Think Apple Annual Report × Bloomberg × Stripe Docs × Notion, not AdminLTE or Crypto Dashboard.” Calm enterprise, ấn phẩm tài chính cao cấp — không gaming/neon/glassmorphism-heavy.
When to borrow
Chỉ khi future KPI-heavy pages hoặc annual-report-style sections thật sự cần (company profile, bài tài chính/ngành, dashboard summary). Borrow selectively — không đại trà.
Priority order
1) Branding Guideline → 2) Existing Design DNA → 3) Existing component library → 4) Supplemental theme này (optional). Chỉ áp dụng nếu là mở rộng TỰ NHIÊN của guideline.