Enterprise calm
Institutional tone. No startup noise, no crypto urgency. White space is a feature, not an accident. Every element earns its place.
E-DNA
Enterprise Editorial Design System · Guideline Reference
Source of truth → Branding Guideline
Enterprise Editorial Design System · Design Reference
E-DNA — Enterprise Editorial Design System
Ngôn ngữ giao diện doanh nghiệp, sạch, có nhịp biên tập — dùng làm nguồn tham khảo cho các dashboard và trang công cụ SEOMONEY trong tương lai.
E-DNA captures the visual direction inspired by enterprise and editorial technology leaders — calm layouts, strong whitespace, confident typography, and structured navigation. It is a future reference for SEOMONEY dashboards, status pages, and tool interfaces. No brand assets, logos, or proprietary elements have been copied — only design principles learned from studying enterprise/editorial rhythm.
Reference inspiration: Ericsson · enterprise/editorial technology category · Companion to S-DNA and B-DNA · governed by the Branding Guideline
5design principles for enterprise calm
6layout grammar rules
1design signature — Hilda
Design principles
Five principles borrowed from enterprise editorial thinking — not from any single brand.
Editorial clarity
Content leads. Visual decisions serve the message. Hierarchy is built with weight and space, not color effects or decorative graphics.
Fewer widgets, stronger sections
A page is a stack of purpose-driven sections. Do not fragment attention with scattered widgets. Each section does one thing well.
Status belongs in calm cards
System status, metrics, and health belong in quiet, readable cards — not noisy dashboard widgets. A green dot and a clean value communicate better than a gauge with animation.
Mobile-first readability
Every layout must work at 360px without horizontal scroll. Desktop is where detail expands; mobile is where clarity is earned.
- Let whitespace define relationships between sections.
- Use size and weight to establish hierarchy over color.
- Design sections as self-contained editorial blocks.
- Prefer calm status cards over animated dashboards.
Do
- Copy crypto or fintech dashboard patterns (neon, pulse, gauge overload).
- Add widgets just because there is room.
- Use color as the only signal for importance.
- Ship a page that fails at 360px width.
Don't
Typography system
E-DNA uses Ericsson Hilda as its design signature for display titles, hero labels, and section headings — the same typeface already self-hosted in the site's font pipeline. Body text stays readable with the existing Vietnamese-safe fallback stack. If Hilda has diacritic limitations, use it for short Latin labels and headings only.
E-DNA Display
Section Heading
Card title · Hilda Medium
Vietnamese body text with diacritics: Tiếng Việt có dấu, tổng quan thị trường, doanh nghiệp công nghệ.
LABEL · CAPTION · STATUS
code / metric / mono value
- Use Hilda for hero titles, section headings, and short display labels.
- Let Vietnamese body text fall back to the existing safe stack (Manrope, Inter, system).
- Build hierarchy with weight and size, not multiple typefaces.
Do
- Import new external fonts — Hilda is already self-hosted.
- Use Hilda for long Vietnamese paragraphs if diacritics render poorly.
- Use color as the only signal of type hierarchy.
Don't
Layout grammar
Six layout primitives that define the E-DNA rhythm. Mix them, but never break the calm.
Large hero
A single, confident hero section per page. Large Hilda title, short lede, minimal navigation. No carousels.
Grouped navigation
Navigation clusters by purpose — not flat link clouds. Mega-menu structure with clear category headings.
Highlight card grid
Cards with strong top accent or left border. Used for featured content, KPIs, status summaries.
Calm status module
System status rendered as a quiet card: indicator dot, label, value. No gauges, no animation.
Clear content rails
Content flows in vertical rails. Each rail has a kicker, a title, and a focused purpose.
No link-cloud feeling
Links belong in navigation or inline context, never as a tag cloud or dense link list in the main content area.
- Start every page with a strong, calm hero.
- Group links by category with clear labels.
- Use card grids for scannable content blocks.
- Keep status information in quiet, readable cards.
Do
- Use tag clouds or link-dense widgets in main content.
- Mix more than two layout systems on one page.
- Add carousels, sliders, or rotating hero blocks.
- Compress layout to "fit above the fold" — scroll is natural.
Don't
Component examples
Visual examples of the five E-DNA layout primitives. These demonstrate the direction — not final production components.
E-DNA hero
A large, calm hero with a left blue accent border. Hilda title, short lede, minimal chrome.
Enterprise platform
Organic Search Dashboard
Track keyword performance, competitor movements, and content opportunities — all in one calm editorial view.
Highlight / news card
Top-tagged card with hover shadow lift. Used for featured articles, announcements, or key metrics.
Google August 2026 Core Update
Early analysis shows content experience signals carrying more weight than backlink volume.
Topic cluster card
Blue top-border card for grouping related topics or categories. Includes a summary stat line.
Technical SEO
Core Web Vitals, structured data, crawl optimization, log file analysis
12 articles · 3 seriesDashboard status card
Calm status module with green indicator dot, label, and value. No gauges, no animation.
System status
All services operational
Footer / status area
A grouped link area with category headers — no flat link lists. Calm, editorial footer pattern.
Do / Don't
A quick-reference checklist for staying on the E-DNA direction.
- Use calm spacing and strong visual hierarchy.
- Curate topics into clear, grouped sections.
- Keep actions focused — one primary per view.
- Use Hilda for display and headings.
- Design for 360px first, expand to desktop.
- Let whitespace create editorial rhythm.
Do
- Use random icons — stick to Lucide/Tabler outline set.
- Build crypto-style dashboards with neon, pulse, or gauges.
- Create admin noise with crowded sidebar widgets.
- Design layouts that accidentally resemble ad placements.
- Override global navigation, header, or footer styles.
- Introduce new colors outside the existing Hilda/Ericsson palette.
Don't
Future usage
E-DNA is a reference for upcoming SEOMONEY interfaces. These are the target applications — each requires separate approval before implementation.
Organic Search dashboard
Keyword tracking, competitor intelligence, content gap analysis — calm enterprise editorial view replacing the current dense dashboard.
Master Dashboard V5
Next-generation master dashboard with E-DNA structure: hero summary, grouped navigation, calm status cards, editorial content rails.
Monitoring / status pages
System health, uptime, and service status presented with calm cards and indicator dots — not noisy gauges or alerts.
Homepage redesign (future)
E-DNA could inform a future homepage refresh — large Hilda hero, grouped topic navigation, editorial card grid. Requires separate approval.