XS (<640px)
UI Style Guide v1.0

Design System

Hệ thống ngôn ngữ thiết kế nhất quán của Xưởng gỗ Thân Thiện. Bao gồm các nguyên tắc về typography, màu sắc, khoảng cách và các UI component.

01. Colors

Bộ thẻ màu chủ đạo giúp tạo đặc điểm nhận diện thương hiệu hiện đại, chuyên nghiệp nhưng vẫn mang đậm chất ngành gỗ.

Primary (Slate)

#f8fafc

slate-50

#f8fafc

#f1f5f9

slate-100

#f1f5f9

#cbd5e1

slate-300

#cbd5e1

#64748b

slate-500

#64748b

#334155

slate-700

#334155

#0f172a

slate-900

#0f172a

Brand

Accent (Orange)

#ffedd5

orange-100

#ffedd5

#fdba74

orange-300

#fdba74

#f97316

orange-500

#f97316

#ea580c

orange-600

#ea580c

Accent
#c2410c

orange-700

#c2410c

#7c2d12

orange-900

#7c2d12

02. Typography

Sử dụng Google Font Inter. Thiết kế tối giản, sạch sẽ, đảm bảo khả năng đọc tốt trên mọi thiết bị.

Scale & Headings

text-6xl / font-bold 60px

Heading 1

text-5xl / font-bold 48px

Heading 2

text-4xl / font-bold 36px

Heading 3

text-3xl / font-bold 30px

Heading 4

Paragraphs

text-lg / leading-relaxed / text-slate-600

Sống trong một không gian nội thất đẹp không chỉ là nhu cầu, mà là sự tận hưởng. Chúng tôi mang đến giải pháp gia công gỗ xuất sắc cho tổ ấm của bạn.

text-base / leading-relaxed / text-slate-700

Cắt CNC ván MDF, HDF chính xác đến từng milimet. Dán cạnh noline tinh tế, độ trơn láng hoàn hảo giúp bảo vệ viền cạnh ván khỏi hơi ẩm.

text-sm / text-slate-500

Thông tin bảng báo giá chỉ mang tính tham khảo. Vui lòng liên hệ trực tiếp để có mức giá ưu đãi nhất tùy thuộc vào khối lượng công trình.

Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700

03. Iconography

Hệ thống sử dụng thư viện Material Symbols Outlined từ Google nhằm duy trì sự đồng nhất, phong cách mỏng nhẹ, tối giản và phù hợp với logo của thương hiệu.

Cách sử dụng

Các biểu tượng được chèn thông qua thẻ `span` với class `material-symbols-outlined`. Bạn có thể thay đổi kích thước và màu sắc bằng class của Tailwind CSS dễ dàng.

<span class="material-symbols-outlined text-accent text-3xl">
  precision_manufacturing
</span>
home Default
precision_manufacturing text-4xl
support_agent
In Circle

Biểu Tượng Thường Dùng (Industry / Woodworking)

precision_manufacturing precision_manufacturing
carpenter carpenter
construction construction
handyman handyman
architecture architecture
format_paint format_paint
design_services design_services
straighten straighten
cut cut
forest forest
chair chair
inventory_2 inventory_2
factory factory
warehouse warehouse
support_agent support_agent
verified verified
phone_in_talk phone_in_talk
mark_email_read mark_email_read
location_on location_on
schedule schedule

04. Buttons & Actions

Tương tác người dùng là ưu tiên hàng đầu. Nút bấm được thiết kế với hit-area lớn, hover effect mượt mà và trực quan trên cả hai nền sáng/tối.

L

Light Context

Primary Action Secondary
Outline Button Ghost Button
Gọi Ngay Xem chi tiết
D

Dark Context (Hero/Footer)

Gửi File Báo Giá White Outline

05. Cards & Components

Cards sử dụng hover states, mask images và subtle transitions để tạo chiều sâu mà không làm loãng sự tập trung.

Media Card

CNC Service

Cắt CNC Chính Xác

Gia công cắt ván MDF, HDF, Plywood theo kích thước yêu cầu. Được tối ưu bằng phần mềm giúp tiết kiệm phôi ván lên đến 15%.

Xem mảng dịch vụ

Feature / Feature Cards

Chất Lượng Vượt Trội

Máy móc nhập khẩu hiện đại, kết hợp cùng đội ngũ kỹ thuật lành nghề. Cam kết thành phẩm đạt độ chính xác tuyệt đối.

Tận Tâm Phục Vụ

Đội ngũ hỗ trợ nhiệt tình từ bản vẽ đến ra ván. Cam kết giao hàng đúng tiến độ, hỗ trợ xử lý sự cố công trình 24/7.

Liên hệ VIP

06. Layout & Responsive

Xây dựng dựa trên hệ thống Grid 12 cột linh hoạt của Tailwind. Giao diện ưu tiên Mobile-First.

Base Spacing Variables

gap-4 / p-4
16px
gap-6 / p-6
24px
gap-8 / p-8
32px
py-12
48px
py-16 / mb-16
64px
py-24
96px

Tailwind Breakpoints

sm:
min-width: 640px
Mobile L / Tablet S
md:
min-width: 768px
Tablet / Grid Switch
lg:
min-width: 1024px
Desktop S
xl:
min-width: 1280px
Desktop L / High-end UI
2xl:
min-width: 1536px
Ultra Wide