REAL HTML/CSS COMPARISON
Cùng layout, cùng nội dung, tám cách xử lý CSS.
Mỗi mẫu dùng cùng một cấu trúc HTML. Chỉ typography, kích thước, khoảng cách, đường viền và hình thức nút thay đổi. Không animation, blur, gradient, shadow hay hiệu ứng chuyển động.
Balanced baseline
58px header · 58px/1.04 title · 16px/1.68 body · 42px buttonsTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Compact editorial
50px header · 52px/1.01 title · reduced padding · 36px buttonsTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Readable generous
64px header · 60px/1.11 title · 17px/1.8 body · wider gapsTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Strong headline
66px/.99 title · 800 weight · tighter tracking · stronger CTATHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Quiet interface
580 title weight · lighter borders · softer contrast · calmer controlsTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Technical precision
56px header · 4/8px rhythm · 2px radius · aligned 12px navigationTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Vietnamese optimized
1.13 title leading · relaxed diacritics · 16.5px/1.78 paragraphTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.
Accessible contrast
64px header · 44px targets · 17px body · stronger borders and active stateTHINHAI · PRACTICAL AI LAB
Nghiên cứu.
Thử nghiệm.
Chia sẻ công khai.
Ghi lại hành trình khám phá AI và các hệ thống thực tiễn giúp bạn tư duy, ra quyết định và xây dựng tốt hơn.