Mẫu DESIGN.md
Các tệp DESIGN.md thực tế được trích xuất từ những trang web công khai. Mỗi tệp ghi lại màu sắc, kiểu chữ, khoảng cách và component của một trang web theo định dạng mà các agent lập trình AI đọc được. Mở một thẻ để xem trước và sao chép vào repo của bạn.
Được trích xuất từ các trang công khai của từng website, không phải hướng dẫn thương hiệu chính thức. Mới làm quen với định dạng này? Đọc DESIGN.md là gì.
Airbnb
Hệ thống thiết kế của Airbnb được xây dựng quanh một phông chữ biến thiên độc quyền duy nhất (Airbnb Cereal VF), với bảng màu trung tính gần như đơn sắc, lấy màu than đậm (#222222) và các sắc xám nhạt làm nền tảng. Màu hồng san hô đặc trưng của thương hiệu, "Rausch" (#ff385c), chỉ được dành riêng cho các nút kêu gọi hành động chính và logo. Bố cục là lưới thẻ ảnh đáp ứng, với tỷ lệ ảnh so với chữ rộng rãi, các thẻ bo góc mềm 20px và hệ thống bóng đổ môi trường nhiều lớp tạo chiều sâu tinh tế mà không gây tương phản gắt. Thanh tìm kiếm dạng viên thuốc nổi bật, quy tụ hành động cốt lõi của người dùng.
Anthropic
Hệ thống thiết kế của Anthropic là một bản sắc tối giản, lấy kiểu chữ làm trung tâm, được xây dựng quanh hai bộ chữ tùy chỉnh là Anthropic Serif và Anthropic Sans, đặt trên nền ngà ấm #faf9f5. Bảng màu được giữ ở mức tối thiểu có chủ đích: màu đen gần như tuyệt đối #141413 trên nền trắng ngà ấm, cùng các tông đá mờ cho chữ phụ và đường viền. Kiểu chữ serif cỡ lớn làm điểm tựa cho giọng văn mang tính biên tập, trong khi một khối nền tối (màu đen gần như tuyệt đối với chữ màu ngà) tạo độ tương phản mạnh. Tổng thể phong cách truyền tải sự nghiêm túc trí tuệ và sứ mệnh ưu tiên an toàn, thông qua khoảng trắng rộng rãi, độ tương phản kiểu chữ cao và hoàn toàn không có chi tiết trang trí.
Apple
Các design token được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải của LLM.
Dribbble
Hệ thống thiết kế của Dribbble được xây dựng trên nền xanh navy gần đen sâu (#0d0c22) kết hợp với bề mặt trắng sắc nét, được điểm xuyết bằng màu nhấn hồng nóng đặc trưng (#ea4c89), chỉ dùng tiết chế để nhấn mạnh mang tính biên tập và các điểm nổi bật tương tác. Toàn bộ hệ thống typography chỉ dựa vào Mona Sans ở mọi độ đậm, tạo thứ bậc thông qua độ đậm và kích thước. Nút bo tròn dạng viên thuốc (border-radius: 1e+07px) và thẻ bo góc 12px định nghĩa ngôn ngữ hình học. Bố cục thoáng với lưới cơ sở 8px, và độ nổi được thể hiện bằng bóng đổ tinh tế thay vì các lớp xếp chồng nặng nề.
Duolingo - The world’s most popular way to learn
Các token thiết kế được trích xuất từ phân tích tần suất CSSOM, không qua diễn giải bằng LLM.
Figma
Figma của trang marketing sử dụng hệ thống đơn sắc đen-trắng rõ ràng, lấy font biến thiên độc quyền figmaSans làm trục chính. Thiết kế đặt trọng tâm vào typography: tiêu đề hiển thị lớn ở 88px/56px với letter-spacing âm, tạo tương phản với phần nội dung thân bài có độ đậm nhẹ ở weight 330. Các nút CTA dùng hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px), nền đen đặc với chữ trắng. Bố cục theo lưới với chiều rộng nội dung tối đa 1440px, khoảng đệm dọc mỗi section 80px rộng rãi và nền trắng sạch. Chiều sâu được giữ ở mức tối thiểu, bóng đổ là các lớp phủ oklch tinh tế. Màu nhấn oải hương/tím #cb9fd2 xuất hiện trong banner footer. Tổng thể mang phong cách tự tin, tinh tế về typography và đề cao thương hiệu.
Harvey
Hệ thống thiết kế của Harvey được xây dựng quanh một bộ nhận diện hai kiểu chữ riêng: HarveySerifFont cho sự uy quyền mang tính biên tập và HarveySansFont cho sự rõ ràng trong chức năng. Thanh điều hướng màu đen ấm gần như tuyệt đối (#0f0e0d) đối lập với nền nội dung màu ngà trắng (#fafaf9). Bảng màu được chủ đích đơn sắc, sử dụng thang xám ấm có cấp độ (gray-50 đến gray-950) và không có màu nhấn, nhằm truyền đạt sự tin cậy và tiết chế, phù hợp với công việc pháp lý có nhiều rủi ro. Độ nổi của các thành phần được thể hiện bằng độ tương phản bề mặt thay vì bóng đổ. Tiêu đề chính trên trang chủ dùng kiểu serif cỡ lớn 72px, tạo ngay cảm giác uy quyền về kiểu chữ, trong khi nội dung văn bản và các thành phần giao diện dùng kiểu sans tùy chỉnh. Khoảng cách tuân theo lưới cơ sở 8px với các token thang đo được đặt tên (xs, sm, md, xl, 2xl).
IKEA
IKEA là hệ thống thiết kế phẳng, táo bạo trên trang chủ toàn cầu, lấy màu vàng IKEA đặc trưng (#ffdb00) làm bề mặt hành động chính và xanh IKEA (#0058a3) làm điểm nhấn cho logo thương hiệu. Toàn bộ hệ thống chữ được xây dựng trên một kiểu chữ tùy chỉnh duy nhất là Noto IKEA, dùng hai độ đậm 400 và 700 trên thang cỡ chữ được xác định chặt chẽ, từ chữ nội dung 14px đến tiêu đề hiển thị 51px. Độ nổi được truyền tải hoàn toàn bằng độ tương phản màu sắc và cấu trúc bố cục thay vì bóng đổ. Bố cục dùng container có chiều rộng tối đa 90rem với khoảng cách lưới 1.5rem trên máy tính, và một token bo góc 8px nhất quán áp dụng cho các phần tử tương tác. Nền trắng ngà (#fffefb) mang lại cảm giác ấm áp khi đặt cạnh chữ #111111 đậm nét, tạo nên trải nghiệm đọc có độ tương phản cao và dễ tiếp cận.
Klarna
Hệ thống thiết kế của Klarna có màu chủ đạo xanh navy đậm tinh tế (#0b051d) cùng các màu nhấn tươi sáng, trong đó nổi bật là màu hồng đặc trưng (#ffa8cd). Hệ thống sử dụng phông chữ Klarna tùy chỉnh kết hợp với phông chữ hệ thống, nhấn mạnh các góc bo tròn (phổ biến nhất là 32px) và duy trì độ tương phản cao để đảm bảo khả năng truy cập. Thiết kế cân bằng giữa tính chuyên nghiệp và sự thân thiện nhờ khoảng cách rộng rãi và hệ thống phân cấp kiểu chữ rõ ràng.
Linear
Hệ thống thiết kế của Linear được xây dựng ưu tiên giao diện tối, dành cho sản phẩm có mật độ thông tin cao phục vụ các đội ngũ kỹ thuật. Bảng màu nền lấy màu đen gần như tuyệt đối làm gốc, gồm #08090a và #0f1011, kết hợp các lớp xám tối nhiều tầng để phân biệt thanh bên, thẻ và bảng điều khiển. Kiểu chữ chỉ dùng Inter Variable, với khoảng cách chữ âm được canh chỉnh chính xác ở các cỡ chữ tiêu đề lớn, còn Berkeley Mono dành cho mã nội dòng. Ngôn ngữ bo góc được giữ ở mức nhỏ có chủ đích, phổ biến nhất là 2–6px, và hình viên thuốc chỉ dành cho huy hiệu và chip trạng thái. Độ nổi được thể hiện bằng viền inset 1px tinh tế và bóng đổ độ mờ thấp thay vì các lớp xếp chồng mạnh mẽ. Màu CTA chính là màu chàm đặc trưng của Linear, #5e6ad2, được dùng cho nút Sign Up và các liên kết quan trọng.
Magentix Studio
Magentix Studio khoác cho một studio sản phẩm lấy AI làm trọng tâm bộ trang phục mang phong cách biên tập, như của một phòng tranh nghệ thuật.
Neon
Hệ thống thiết kế của Neon là một thương hiệu dành cho nhà phát triển, ưu tiên giao diện tối, xây dựng trên nền gần như đen (#000000, #18191b) với màu xanh neon rực rỡ làm màu chủ đạo (#00e599) và màu xanh lá trung gian (#34d59a) làm màu bổ trợ. Hệ thống chữ kết hợp Inter cho giao diện và nội dung chính với GeistMono cho mã nguồn và dữ liệu, cả hai đều dùng khoảng cách chữ âm và chặt. Khoảng cách theo lưới cơ sở 4px. Bo góc được giữ tối giản và đồng nhất ở mức 4px. Độ nổi được tạo bằng độ tương phản của viền thay vì bóng đổ, với một bóng đổ môi trường duy nhất được dùng tiết chế. Phần hero có nền trực quan hóa dữ liệu động toàn màn hình, củng cố bản sắc thương hiệu về cơ sở dữ liệu và hạ tầng.
Notion
Trang chủ tiếp thị của Notion kết hợp phần hero màu xanh navy đậm (#02093a) với nội dung chính màu sáng (#f6f5f4), sử dụng một kiểu chữ tùy chỉnh (NotionInter) cho mọi vai trò văn bản. Thiết kế dựa trên lưới 12 cột với khoảng cách rãnh 28px, hệ thống bo góc kép gồm 8px cho thẻ và 9999px cho các nút dạng viên thuốc, cùng hệ thống đổ bóng nhiều lớp tăng dần cho các thành phần nổi. Màu xanh thương hiệu (#2537b1) dẫn dắt các nút kêu gọi hành động và điểm nhấn, trong khi thang màu xám ngữ nghĩa từ gray-200 đến gray-900 tạo nên cấu trúc phân cấp cho toàn bộ văn bản và bề mặt.
Paperclip
Paperclip là nền tảng quản lý AI agent với phong cách thiết kế nền tối táo bạo, nổi bật với màu nền gần đen (#0a0a0a) và chữ tiền cảnh trắng (#ffffff). Phần hero được định hình bởi hình minh họa gradient đa sắc gồm các khối viên nang xếp chồng theo màu hồng magenta, tím, xanh ngọc, cam và vàng, tạo nên bản sắc thị giác đầy màu sắc và năng động trên nền tối. Về kiểu chữ, Inter Tight (bản co hẹp, đậm, tiêu đề có khoảng cách chữ âm) được kết hợp với Inter cho nội dung và giao diện, cùng JetBrains Mono cho mã và trạng thái. Nút kêu gọi hành động chính là nút viên nang trắng trên nền tối. Hệ thống màu xanh lá ngữ nghĩa (#22c55e) báo hiệu trạng thái của agent và tác vụ xuyên suốt giao diện sản phẩm. Thanh điều hướng tối giản, phẳng, với đường viền dưới mờ.
PayPal
PayPal có trang chủ tiếng Hà Lan với phong cách táo bạo, hướng đến người tiêu dùng, lấy màu xanh da trời rực rỡ #60cdff làm nền cho khu vực hero, kết hợp tiêu đề đen cực đậm (PayPal Pro w900). Thanh điều hướng màu trắng với chữ đen, và hai nút kêu gọi hành động khác biệt: nút viền "Inloggen" và nút đặc màu đen "Rekening openen". Một banner thông báo màu xanh navy đậm nằm ở đầu trang. Tổng thể ngôn ngữ thiết kế có độ tương phản cao, bo góc dạng viên thuốc chiếm ưu thế, và lấy kiểu chữ thương hiệu làm trọng tâm, thể hiện sự tin cậy và tính dễ tiếp c
Railway
Hệ thống thiết kế của Railway là giao diện nền tối ưu tiên cho nền tảng dành cho nhà phát triển, được neo bởi các bề mặt xanh navy gần như đen sâu (#13111c, #0b0b0f), chữ off-white độ tương phản cao (#f7f7f8), và màu nhấn thương hiệu tím đặc trưng (#853bce / #553f83). Phần hero sử dụng IBM Plex Serif để tạo độ đậm mang phong cách biên tập, trong khi Inter đảm nhiệm toàn bộ nội dung giao diện, còn JetBrains Mono và SF Mono phục vụ các ngữ cảnh mã nguồn. Độ nổi khối được tạo bằng viền phát sáng trắng inset (rgba(255,255,255,0.2) 1.5px inset) thay vì bóng đổ, mang lại phong cách bảng kính mờ. Hệ thống khoảng cách dựa trên bội số 4px với nhịp điệu 8/12/16/24/32 rõ rệt. Bo góc chủ yếu là 4px, kết hợp có chọn lọc 8px và 16px cho thẻ và khung hero.
Shopify
Trang chủ tiếp thị của Shopify sử dụng một khu vực hero video toàn màn hình đầy kịch tính, với nền gần đen (#02090a) tương phản rõ rệt với thanh điều hướng màu trắng phía trên. Màu nhấn thương hiệu chủ đạo là xanh bạc hà rực rỡ (#36f4a4), được dùng tiết chế cho các điểm nhấn và trạng thái tương tác. Kiểu chữ được phân chia giữa NeueHaasGrotesk cho tiêu đề hiển thị và mang tính biên tập, và Inter-Variable cho nội dung giao diện người dùng. Các nút kêu gọi hành động (CTA) có hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px). Tổng thể hệ thống thiết kế tự tin, độ tương phản cao và đầy khát vọng, được xây dựng để biến khách truy cập thành người bán hàng.
Snapchat
Trang web của Snapchat sử dụng giao diện sáng tương phản cao, lấy màu vàng thương hiệu biểu tượng #FFFC00 làm điểm nhấn, các bề mặt chính gần đen (#121314) và nền trang trắng gọn gàng. Thiết kế kết hợp phông Avenir Next (chính) với Graphik (phụ) để tạo hệ thống phân cấp chữ thân thiện nhưng có cấu trúc rõ ràng. Các phần tử tương tác như nút, viên thuốc và thẻ nhãn dùng bo tròn hoàn toàn (100px), còn ô nhập liệu dùng bo góc nhẹ 5px. Thanh điều hướng là một viên thuốc nổi với bóng đổ mềm. Nội dung được trình bày trong các thẻ phương tiện lớn với chữ trắng phủ lên trên, tạo bố cục sống động, đặt trọng tâm vào bản xem trước ứng dụng. Mật độ tổng thể ở mức vừa phải, với khoảng cách thoáng và thứ bậc thị giác rõ ràng, kết nối quy ước của giao diện marketing và giao diện sản phẩm.
Stripe
Trang chủ tiếp thị của Stripe sử dụng một hệ thống thiết kế được kiểm soát chặt chẽ (HDS — Stripe Design System), xây dựng quanh phông chữ biến thiên "sohne-var" ở các độ đậm nhẹ (300–400), một bảng màu thương hiệu từ xanh navy đậm đến chàm, lấy #533afd (Stripe Indigo) làm trục chính, cùng với phần hero có dải gradient quang phổ tràn viền đặc trưng. Các thành phần có bo góc nhỏ (4–6px), bóng đổ phẳng đến tối giản, và được bố cục theo lưới khoảng cách cơ sở 8px. Tổng thể giọng điệu vừa đầy uy quyền vừa gần gũi: hạ tầng tài chính được truyền đạt qua kiểu chữ tự tin và cách dùng màu tiết chế.
Supabase
Supabase sử dụng một hệ thống thiết kế ưu tiên giao diện tối, lấy nền gần đen sâu (oklch ~0.19) làm nền tảng, kết hợp với màu nhấn xanh lá rực rỡ (#3ecf8e / #3fcf8e). Bố cục được xây dựng quanh lưới thẻ tính năng đáp ứng, với Manrope cho tiêu đề hiển thị và Inter cho văn bản nội dung cũng như giao diện. Source Code Pro được dùng cho mọi ngữ cảnh monospace và mã nguồn. Hệ thống màu dựa trên các custom property oklch với cách đặt tên theo ngữ nghĩa. Thẻ có bo góc 12px và viền mỏng tinh tế, nút bo góc 6–8px, mật độ nội dung vừa phải và lưới khoảng cách cơ sở 8px.
The Onion
The Onion là hệ thống thiết kế của một tờ báo châm biếm được số hóa: tiêu đề sans-serif hẹp, đậm, màu đen, cùng màu nhấn xanh rừng đặc trưng #006b3a dùng cho nhãn chuyên mục, huy hiệu xu hướng và các nút kêu gọi hành động, tất cả đặt trên nền trắng và xám nhạt. Kiểu chữ là công cụ thiết kế chính: các họ chữ gothic hẹp và bán hẹp của Adobe Fonts (tablet-gothic, rocky-condensed) chi phối phần tiêu đề, trong khi utopia-std-caption đảm nhiệm phần nội dung chính. Bố cục dày đặc thông tin, với lưới thẻ sát nhau, đường kẻ phân cách bài viết ở cạnh dưới và bo góc gần như bằng không đối với các thành phần cấu trúc. Hiệu ứng độ nổi được giảm tối thiểu, chỉ có vài bóng đổ nhẹ ở các lớp phủ.
Uber
Ngôn ngữ thiết kế của Uber kết hợp sự tối giản gọn gàng với các minh họa nhiều màu sắc, tạo nên một nền tảng di chuyển dễ tiếp cận nhưng vẫn chuyên nghiệp. Nền đen trắng rõ nét mang lại sự rõ ràng và dễ đọc, trong khi các hình minh họa chính đầy màu sắc thêm sự ấm áp và kết nối với con người. Kiểu chữ dựa vào họ phông tùy chỉnh UberMove để giữ tính nhất quán thương hiệu, còn khoảng cách rộng rãi tạo không gian thoáng đãng xuyên suốt giao diện.
WIRED
WIRED là hệ thống thiết kế tương phản cao, lấy biên tập làm trung tâm, xây trên nền đơn sắc với bảng màu gần như không có màu. Hệ thống dựa vào bộ kiểu chữ độc quyền (Breve Text, WIRED Mono, WiredDisplay, Apercu). Màu đen (#000000) chiếm ưu thế với 2961 lượt xuất hiện, làm nền cho chữ, viền, biểu tượng và trạng thái tương tác. Màu trắng (#ffffff) là bề mặt chính. Màu nhấn được dùng tiết chế: chỉ #057dbc xuất hiện như màu xanh thương hiệu cho các nút kêu gọi đăng ký. Bố cục là lưới bài viết nhiều cột có cấu trúc, khoảng cách cơ sở 8px chặt chẽ, bề mặt phẳng không đổ bóng, và bo góc tối thiểu (4px theo tiêu chuẩn). Kiểu chữ là yếu tố tạo khác biệt chính: nội dung biên tập dùng Breve Text cỡ 19px, nhãn mục dùng WIRED Mono viết hoa với khoảng cách chữ được nới rộng, còn tiêu đề lớn dùng WiredDisplay. Tổng thể toát lên vẻ uy quyền, mật độ thông tin cao và ưu tiên mạch đọc.
xAI
Trang marketing của xAI sử dụng bảng màu nền kem ấm, được neo bởi --color-ivory (#f9f8f6) và --color-white (#ffffff), với màu chữ và màu nền chủ đạo là #0a0a0a gần đen. Hệ thống typography được chia thành ba phần: universalSansDisplay cho các tiêu đề lớn (60–72px, letter-spacing âm và chặt), universalSans cho nội dung nội dung chính và giao diện, còn GeistMono dành cho mã nguồn và ngữ cảnh terminal. Ngôn ngữ bo góc chủ yếu là các hình viên thuốc 9999px cho nút CTA và thẻ tag, còn thẻ và ô nhập liệu dùng 12px và 6px. Độ nổi (elevation) được giữ ở mức tối thiểu: thẻ dùng bóng đổ nhiều lớp mềm, trong khi phần lớn bề mặt phẳng. Tổng thể mang tông "kỹ thuật cao cấp": màu sắc tiết chế, khoảng trắng rộng rãi, và phong cách mã monospace nổi bật nhằm thể hiện sự uy tín với nhà phát triển.
Không thấy trang web bạn cần?
Dán bất kỳ URL nào để lấy DESIGN.md từ mọi trang web. Màu sắc, kiểu chữ, khoảng cách và token, sẵn sàng cho quy trình làm việc với AI của bạn.