Petrol
#009999Brand · link · primary CTA
SE-DNA
Siemens-Enterprise Design DNA
Công nghệ để chuyển hoá điều thường nhật.
SE-DNA là hệ nhận diện lấy cảm hứng từ Siemens — calm engineering: bình tĩnh, chính xác, đáng tin cậy và hướng tới con người. Petrol là tiếng nói; Deep Blue là nền móng; khoảng trắng là chất liệu.
Dynamic Petrol
Chữ ký thương hiệu của Siemens: màu Petrol truyền thống được nâng thành một gradient sống động, chuyển từ xanh lá tươi qua Petrol tới Deep Blue. Dùng tiết chế — cho hero, wordmark, điểm nhấn lớn; không rải gradient lên chữ nhỏ hay nền toàn trang.
#00FFB9
#00E5A0
#009999
#007993
#001F39
Color Palette
Petrol làm màu tương tác/nhận diện chính, Deep Blue làm nền tảng và tiêu đề, neutral ám sắc deep-blue cho nội dung, và bộ signal color cho trạng thái.
Brand — Dynamic Petrol
Bright Green
#00FFB9Đỉnh gradient · accentDark Petrol
#007993Hover · text-on-lightFoundation — Deep Blue
Deep Blue
#000028Nền tối · tiêu đề · inkBody
#37374DĐoạn vănMuted
#66667EMetadata · captionSignal — Semantic
Success
#01893AThành côngWarning
#E9C32ACảnh báoCritical
#E8001DSignal red · lỗiInfo
#007EB1Thông tinSurface — Neutral
Snow
#FFFFFFNền mặc địnhSoft
#F3F5F6Nền section mềmEdge
#E5E5EDBorder · dividerTypography
Trục chữ là SE Sans — hệ chữ web dựng trên Inter (self-hosted), lấy chuẩn tinh thần từ Siemens Sans. Xem chi tiết weights, specimen, type tester ở Font Guideline.
Display
Heading 1
Heading 2
Body — kỹ thuật rõ ràng, đọc thoải mái ở line-height 1.65.
CAPTION / LABEL
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 (Petrol, 1 per view), Secondary (viền), Ghost (tertiary/cancel).
Card
Card title
Viền mảnh, không shadow lúc nghỉ. Hover nâng +2px.
Phẳng lúc nghỉ, có chiều sâu khi tương tác. Radius 6–8px.
Input
Label xếp trên, một đường viền, focus ring 3px Petrol.
Icon
Stroke 2px, viewbox 24×24. Ưu tiên hình học cơ bản, đường nét sạch.
Grid & Spacing
12-column grid, max-width 1280px. Spacing scale base 8px. 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 |
Logo & Wordmark
Wordmark SE-DNA dùng SE Sans ExtraBold + dấu ◈ mang Dynamic Petrol. Giữ khoảng bảo vệ rộng rãi; chỉ đặt trên nền có tương phản đủ. Không kéo giãn, đổ bóng hay xoay logo.
Design Language
Calm engineering — bình tĩnh, chính xác, hướng con người. Áp dụng cho mọi page, dashboard, tool, widget, report, article. Học tinh thần rồi tái sử dụng, không clone pixel-by-pixel.
Calm engineering
Chính xác hơn hoa mỹ. Tránh shadow nặng, gradient mạnh (ngoài Dynamic Petrol có chủ đích), neon, animation thừa. Ưu tiên whitespace · typography · hierarchy.
One signature colour
Petrol dẫn dắt toàn bộ. Signal color chỉ dùng đúng trạng thái. Phần còn lại là neutral để nội dung được thở.
Cards before tables
Card là primitive mặc định. Radius 6–8px cho component, 12–16px cho panel; border mảnh, nền mềm, padding rộng rãi.
Typography creates hierarchy
Section title lớn → content title vừa → secondary label nhỏ/nhạt. Số liệu KPI: 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.
Human-centric
"Transform the everyday" — thiết kế phục vụ tác vụ thật của người dùng, dễ quét, dễ hành động, accessible (WCAG AA/AAA).
Motion
Tinh tế: duration 150–250ms. Tránh bounce, scale transform lớn. Animation hỗ trợ đọc.
Information density
Trung bình — như Bloomberg terminal × premium annual report. KHÔNG crypto dashboard · gaming UI · Material overload.