FANA Solar Pattern
Trang nội bộ này (ẩn khỏi hệ thống tìm kiếm) làm source of truth lưu trữ các thành phần giao diện, màu sắc, typography dùng trong toàn bộ dự án.
1. Màu Sắc (Colors)
Primary
#FBA13A
bg-primary / text-primary
Primary Dark
#e08c2a
bg-primary-dark
Secondary
#243761
bg-secondary / text-secondary
Secondary Dark
#0C1640
bg-secondary-dark
Background Light
#F8FAFC
Background Dark
#0F172A
Surface Light
#FFFFFF
Surface Dark
#1E293B
2. Typography (Fonts)
Font Display (Montserrat) - Headers
Heading 1 - Cung Cấp Năng Lượng Xanh
Heading 2 - Giải Pháp Điện Mặt Trời
Heading 3 - Tiết Kiệm Tối Đa
Heading 4 - Tư Vấn Trực Tiếp
Font Body (Roboto) - Paragraphs
Text Large (Lid): Hệ thống điện mặt trời là khoản đầu tư dài hạn giúp bạn tự chủ năng lượng và bảo vệ môi trường.
Text Base (Normal): Fana Solar ra đời với khát vọng mang nguồn điện sạch – bền vững – tiết kiệm đến từng mái nhà, từng nông trại và từng vùng nuôi trồng thủy sản tại Việt Nam.
Text Small (Caption): © 2026 Công Ty TNHH FANA Solar. All rights reserved.
3. Components & UI Elements
Nút Bấm (Buttons)
Thẻ Tag (Badges) & Icon
Box Trải nghiệm Icon
Thẻ (Cards)
Service Card
Thiết kế thẻ dùng cho các section như Dịch vụ, Tính năng nổi bật.
Image Card
Dành cho tin tức hoặc dự án.
Ô Nhập Liệu (Inputs)
Hệ thống Lề & Bố cục (Spacing & Grid)
max-w-7xl
Container Max Width
py-24
Section Vertical Gap
px-4 / sm:px-6
Global Horizontal Padding
gap-8 / 12 / 16
Grid Gutter Sizes