Design System v1.0
LifeSAF Design System
Hệ thống thiết kế chuyên nghiệp dành cho thiết bị bảo hộ lao động và giải pháp an toàn công nghiệp. Xây dựng trên nền tảng uy tín, rõ ràng và hiệu quả.
Foundation
Color Palette
Warm orange conveys energy & urgency; deep teal builds trust. The 80/20 ratio reserves orange for CTAs and alerts, blue for interactive elements.
Primary & Accent
Neutral Scale
color: var(--color-primary); /* #337AB7 */
background: var(--color-accent); /* #FE7500 */
border-color: var(--color-border-subtle); /* #E7E7E7 */
Foundation
Typography
HelveticaNeue / Arial system stack. 9-point scale enforces consistency — no arbitrary sizes allowed.
Mũ Bảo Hiểm Công Nghiệp
Kính Bảo Hộ Chống Bụi
Găng Tay Chống Cắt Dyneema
Sản phẩm bảo hộ lao động chất lượng cao, đáp ứng tiêu chuẩn quốc tế EN 388, được phân phối bởi LifeSAF với cam kết an toàn tuyệt đối.
var(--color-accent): #FE7500
font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
/* Display heading */
.text-display {
font-size: var(--fs-xl); /* 19px */
font-weight: var(--fw-medium); /* 500 */
}
Foundation
Spacing & Layout
4px base unit grid with a fixed scale. Every spacing value maps to a token — no arbitrary values permitted.
Container & Grid
1200px
16px
6-col (desktop) → 3-col (tablet) → 1-col (mobile)
1200px · 768px · 576px
.grid-6 {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--gutter); /* 16px */
}
Foundation
Elevation & Shadows
Conservative shadows clarify layering without visual heaviness. Four levels from flat (0) to modal overlay (3).
Flat (0)
none
Raised (1)
6px blur
Elevated (2)
Hover / float
Modal (3)
Overlay / dialog
--shadow-raised: rgba(0,0,0,0.176) 0px 6px 12px 0px;
--shadow-elevated: rgba(0,0,0,0.25) 0px 8px 16px 0px;
--shadow-modal: rgba(0,0,0,0.5) 0px 5px 15px 0px;
Foundation
Border Radius Scale
Five fixed radii. No intermediate values permitted — sharp for buttons, pill for search inputs.
Buttons
Badges
Cards
Modals
Inputs
Components
Buttons
Four variants — primary CTA (orange), secondary ghost, navigation white, and minimal. All maintain 40px min-height on mobile.
Primary Button (Orange CTA)
Secondary Button (Ghost)
White Text Button (Navigation)
Minimal Button (Icon / Text)
<button class="btn btn-primary">Liên hệ báo giá</button>
<button class="btn btn-secondary">Xem thêm</button>
<button class="btn btn-nav">Trang chủ</button>
<button class="btn btn-minimal">Yêu thích</button>
Components
Links
Three link styles — standard body, prominent white, and footer. All require underline on hover.
Components
Badges
Category badges using the accent orange, with semantic variants for classification.
Badge Variants
<span class="badge badge-blue">EN 388</span>
<span class="badge badge-navy">Premium</span>
Components
Inputs & Forms
Pill-shaped inputs (20px radius) with blue focus ring. Search inputs reserve right padding for icons.
Search Input
Full Width Input
States
Default
Disabled
Components
Cards & Containers
Product cards with raised shadow & hover elevation. Section headers use orange for visual hierarchy.
Section Header Card
Product Card (Hover to interact)
Mũ bảo hiểm 3M H-700
SKU: LS-HM-001
Kính bảo hộ Uvex Pheos
SKU: LS-KN-042
Nút tai chống ồn Howard Leight
SKU: LS-NT-019
Patterns
Product Grid
6-column flexible grid for product browsing. Reflows to 3 → 1 columns on smaller breakpoints.
Mũ bảo hiểm 3M H-700
LS-HM-001
285.000₫
Kính bảo hộ Uvex Pheos CX2
LS-KN-042
195.000₫
Chụp tai 3M Peltor Optime III
LS-NT-033
520.000₫
Găng tay Ansell HyFlex 11-800
LS-GT-088
145.000₫
Khẩu trang 3M 8210 N95
LS-KT-055
89.000₫
Giày bảo hộ Safety Jogger Bestrun
LS-GB-112
680.000₫
Patterns
Page Template Preview
Full-page layout demonstrating header → hero → product grid → footer composition.