AI Prompt Studio - Thư viện Prompt thông minh

Bạn là một chuyên gia thiết kế web. Khi tạo hoặc chỉnh sửa code, hãy tuân thủ các nguyên tắc sau: 1. **Responsive Design**: Luôn đảm bảo website hiển thị tốt trên mọi thiết bị (mobile, tablet, desktop) 2. **Clean Code**: Viết code sạch, dễ đọc, có comment khi cần thiết 3. **SEO Friendly**: Sử dụng semantic HTML, meta tags phù hợp 4. **Performance**: Tối ưu hóa hình ảnh, minify CSS/JS khi có thể 5. **Accessibility**: Đảm bảo website có thể truy cập được với mọi người dùng Khi được yêu cầu tạo hoặc sửa code, hãy trả về code hoàn chỉnh, có thể chạy ngay.

Một landing page hiệu quả cần có các section sau: 1. **Hero Section**: - Headline hấp dẫn - Subheadline mô tả ngắn gọn - CTA button nổi bật - Hình ảnh/video minh họa 2. **Features/Benefits**: - 3-6 tính năng chính - Icon + tiêu đề + mô tả ngắn 3. **Social Proof**: - Testimonials từ khách hàng - Logos đối tác/khách hàng

Khi viết HTML/CSS, tuân thủ các quy tắc sau: **HTML:** - Sử dụng semantic tags: header, nav, main, section, article, footer - Indent 2 spaces - Attributes theo thứ tự: id, class, data-*, src/href, alt/title - Luôn có alt cho images **CSS:** - Mobile-first approach - Sử dụng CSS variables cho colors, fonts - BEM naming convention khi phù hợp - Flexbox/Grid cho layout - Tránh !important

Hệ thống App Editor có cấu trúc file như sau: - **index.html**: File HTML chính, chứa cấu trúc trang - **styles.css**: File CSS cho styling - **script.js**: File JavaScript cho logic - **assets/**: Thư mục chứa hình ảnh, fonts, icons Khi chỉnh sửa: - Giữ nguyên cấu trúc file hiện có - Không tạo file mới trừ khi được yêu cầu - Đảm bảo các đường dẫn tương đối chính xác

# WalletConnect — Style Reference > Những khối cobalt trên nền giấy da — các monolith xanh lam bão hòa nổi trên sa mạc trắng ấm, với các góc bo tròn làm mềm vẻ kỹ thuật nghiêm túc. **Theme:** light WalletConnect Pay là một thương hiệu thanh toán crypto xanh điện nằm gọn trong một canvas sạch, sáng: bề mặt off-white ấm áp, typography indigo-đen, và các card bo tròn cỡ lớn mang cảm giác consumer fintech hơn là công cụ hạ tầng. Điểm nhấn đặc trưng là một hero panel cobalt rực rỡ (radius 40px) đặt trên nền gần trắng, neo giữ một layout xen kẽ giữa ảnh sản phẩm full-bleed và khoảng trắng rộng rãi. Typography sử dụng KHTeka, một geometric humanist mang giọng điệu kỹ thuật nhưng thân thiện ở các weight 400–700, với màu navy đậm #1b2045 thay thế cho đen thuần để tạo cảm giác đọc ấm hơn. Các component tối giản một cách tự tin — pill-shaped buttons, ghost CTA, hairline borders, và hầu như không có shadow, để màu xanh bão hòa làm tất cả công việc tạo cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Cobalt | `#006cff` | `--color-electric-cobalt` | Hero panels, filled buttons, active nav indicators, link accents — tín hiệu thương hiệu chính, được dùng như một bề mặt full-bleed thay vì màu nút nhỏ để chiếm ưu thế trên trang | | Indigo Action | `#4672ff` | `--color-indigo-action` | Primary filled action buttons và border của chúng — một màu xanh hơi sáng hơn, thiên về tím dành cho các bề mặt tương tác cần cảm giác được nhấn và có thể click | | Deep Indigo | `#1b2045` | `--color-deep-indigo` | Primary text, headings, và dark button borders — thay thế đen thuần bằng một navy ấm mang vẻ uy quyền mà không gay gắt như #000 | | Sky Tint | `#66a7ff` | `--color-sky-tint` | Hover states, subtle outlined button borders, secondary navigation accents — một companion desaturated của Electric Cobalt cho các khoảnh khắc xanh không chiếm ưu thế |

# Eclipse — Style Reference > Cel-shaded neon comic strip — nghĩ tới bảng hiệu kiểu Akira nhưng được render thành giao diện tài chính. **Theme:** mixed Eclipse vận hành trên nền canvas đơn sắc với một xung neon xanh lục duy nhất — ngữ pháp thị giác của nó gần với cel anime thập niên 90 hơn là một blockchain dashboard. Headline dùng GT Alpina Condensed ở hairline weights (100–200), nét serif mỏng nhất có thể nhưng vẫn đọc được thành chữ, kết hợp với Barlow Condensed cho UI chrome gọn nhẹ. Token màu duy nhất (#a1fea0) hoạt động như một chiếc bút dạ quang tô lên bản phác thảo mực trên giấy: border, button fill, hình minh họa đám mây, và hiệu ứng glow đều dùng chung một màu xanh tươi đó trên nền đen và trắng tuyệt đối. Bề mặt phẳng — không shadow, không gradient, không thủ thuật tạo chiều sâu. Button là dạng pill dày (25px radius), label là chữ in hoa kiểu máy chữ có tracking, illustration đảm nhận không khí còn type làm công việc cấu trúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Eclipse Green | `#a1fea0` | `--color-eclipse-green` | Primary action fill, active nav state, decorative border accents, cloud và glow illustration fills, investor-card spotlight — token màu duy nhất trong hệ thống, được dùng tiết kiệm để mỗi lần xuất hiện đều có cảm giác như một nét bút dạ quang | | Ink Black | `#000000` | `--color-ink-black` | Body và heading text, hairline borders trên card/badge/button, footer rules, outlined button stroke — màu trung tính chủ đạo mang tất cả các đường nét cấu trúc | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên nền tối, nav backgrounds, image backdrop — lớp nền cơ bản mà mọi thứ nằm trên đó |

# Shopify — Style Reference > Midnight greenhouse — merchants' brands blooming against deep teal-black, lit by a single mint spark. **Theme:** dark Shopify's design system is a midnight workshop for commerce: an almost-black canvas tinted with deep teal-green, broad confident sans-serif type, and one electric mint accent that activates interactive moments. The interface feels like a darkroom where products and brands are the light source — photography and merchant storefronts glow against the near-black surfaces while chrome recedes. Components are geometric but soft: 12px-radius cards with hairline borders, pill buttons, and weight-330 display type that whispers scale rather than shouting. A single chromatic punctuation (#36f4a4) appears sparingly on links, tags, and focus states, reserving color for functional moments so the merchant stories stay the visual focus. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Forest | `#02090a` | `--color-midnight-forest` | Page canvas, hero backgrounds, section backgrounds | | Deep Lichen | `#061a1c` | `--color-deep-lichen` | Primary card surfaces, elevated panels, content blocks | | Shaded Fern | `#072720` | `--color-shaded-fern` | Navigation bar, secondary cards, subtle panel lift | | Spruce Border | `#1e2c31` | `--color-spruce-border` | Hairline card borders, divider lines, input outlines |

# GitHub — Style Reference > violet aurora trên vũ trụ developer — bề mặt nửa đêm sâu thẳm được thắp sáng bởi những vệt sáng tím lơ lửng và chữ trắng tĩnh lặng **Theme:** dark GitHub vận hành trong vũ trụ dark-mode, nơi những canvas gần-đen sâu thẳm (#0d1117) lùi lại phía sau các vệt sáng radial tím và xanh dương lơ lửng — trông giống aurora hơn là UI. Giao diện gần như hoàn toàn achromatic — chữ trắng và trắng-lạnh trên các bề mặt tối nhiều lớp — với màu sắc xuất hiện như những dấu câu chức năng thưa thớt: xanh da trời nhạt cho link, mint tươi cho thành công/code, và một emerald CTA duy nhất neo giữ chuyển đổi. Typography là custom (Mona Sans) với dải weight rộng bất thường và negative tracking mạnh ở display sizes, khiến headline cỡ lớn trông nén chặt và đầy tự tin. Các component phẳng và có elevation thấp — 6px radii trên controls, 24px trên cards — với border và surface lift tinh tế đảm nhận công việc cấu trúc mà shadow thường làm ở nơi khác. Nhịp điệu tổng thể rộng rãi, mang phong cách editorial và tĩnh lặng, với 3D character illustrations và gradient halos là những khoảnh khắc duy nhất của sự phấn khích thị giác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Canvas | `#0d1117` | `--color-midnight-canvas` | Nền trang, canvas chính — signature near-black của GitHub với một chút cool tint hầu như không nhận thấy | | Abyss Surface | `#090d0a` | `--color-abyss-surface` | Overlay sâu nhất, button base, nền modal — tối hơn canvas một bậc để tạo độ tương phản | | Void Black | `#000000` | `--color-void-black` | Input fields, nav fills, lớp tối tuyệt đối — dùng khi cần pure black để phân tách | | Elevated Surface | `#151a22` | `--color-elevated-surface` | Button fills, bề mặt card phụ — cao hơn canvas một bậc cho các phần tử tương tác |

# Wrike — Style Reference > Công tắc màu vôi trên bảng điều khiển kỹ sư sạch sẽ — điểm nhấn xanh tươi sáng nổi bật trên nền xanh nước biển đậm uy quyền, trôi nổi trên nền trắng. **Theme:** light Ngôn ngữ thiết kế của Wrike được xây dựng trên nền canvas trắng tinh khôi, điểm xuyết bằng một màu xanh vôi tươi sáng duy nhất, hoạt động như một công tắc nguồn xuyên suốt giao diện. Hệ thống sử dụng màu xanh nước biển nửa đêm đậm cho văn bản chính và các phần tối, với các màu trung tính xanh lam-xám lạnh tạo sự phân cách bề mặt mềm mại thay vì xám ấm hoặc bóng đổ nặng. Typography được đảm nhận bởi TT Norms Pro trên lưới 4px thoải mái, với headline weight 700 thu hút sự chú ý so với body text weight 400 mỏng nhẹ. Các component có dạng pill (radius 40px) và card mềm (radius 20px), sử dụng một công thức shadow đặc trưng duy nhất giúp product mockup nổi khỏi trang. Tổng thể mang cảm giác enterprise tự tin nhưng tràn đầy năng lượng — một công cụ quản lý công việc trông giống như một productivity OS, chứ không phải một biểu mẫu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Signal Green | `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))` | `--color-signal-green` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính; Hình khối trang trí, radial glow accent trong phần tối, gradient endpoints | | Midnight Navy | `#162136` | `--color-midnight-navy` | Headlines, body text chính, navigation, footer section tối — mỏ neo cấu trúc của toàn bộ hệ thống phân cấp | | Slate Navy | `#2b3a57` | `--color-slate-navy` | Secondary headings, card titles, văn bản tối đã làm dịu — navy nhẹ hơn cho sub-hierarchy | | Steel Blue-Gray | `#657694` | `--color-steel-blue-gray` | Helper text, secondary copy, label đã làm mờ, dropdown menu — tương đương tông lạnh của mid-gray |

# Memorisely — Style Reference > Architect's drafting table on warm parchment — a quiet, monochrome workspace where every element is a typographic decision. **Theme:** light Memorisely reads as a typographer's workspace: a warm cream canvas, pure white card surfaces, and a single near-black that serves as both text and primary action. The system is deliberately zero-chromatic — no blue, no green, no accent hue — letting Inter's weight contrast and tight negative tracking carry all hierarchy. Components stay flat and pill-leaning: a floating nav bar, 8px button corners, and 100px-radius interactive elements create a designed-by-a-designer feel without ornament. Separation comes from hairline borders in warm linen (#f2f0e9) and the cream-to-white surface jump, not from shadows or color. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Parchment | `#faf9f6` | `--color-warm-parchment` | Page canvas, body background — the base layer that gives the entire site its designed-by-hand warmth | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, floating navigation, elevated content blocks — pure white sits one step above the cream canvas | | Soft Linen | `#f2f0e9` | `--color-soft-linen` | Hairline borders, subtle dividers, muted background washes — the warm-tinted replacement for #e5e5e5 | | Ink Black | `#171717` | `--color-ink-black` | Primary text, primary action button background, strong heading borders — the workhorse near-black that unifies copy and CTAs |

# Varo Bank — Style Reference > sao kê ngân hàng neon trên tờ ghi chú dán — display type đậm nén chặt in trên giấy bìa màu sáng, được giữ với nhau bằng đường viền đen mảnh **Theme:** light Varo Bank mang phong cách một series poster tài chính tiêu dùng tự tin in trên giấy bìa màu: canvas trắng tinh bị cắt ngang bởi các dải màu full-bleed tím, xanh chanh, san hô và kem, mỗi dải mang display type siêu nén dày. Hệ thống thị giác cố tình ồn ào — National 2 Compressed ở 96–147px dẫn dắt mọi headline với leading gần như bằng 0, khiến chữ hoạt động như một khối đồ họa thay vì văn xuôi. Một màu tím bão hòa duy nhất (#8c58d0) là màu tương tác thực sự duy nhất; mọi thứ chromatic khác đều là bầu không khí trang trí, và các neutral duy nhất có giá trị là đen thật và trắng thật. Border là hairline và tối, radius đồng nhất 4px, và shadow không tồn tại — chiều sâu đến từ sự va chạm màu phẳng, không phải độ cao. Toàn bộ sản phẩm mang cảm giác Gen-Z: vui tươi, hướng đến kiến thức tài chính, và đồ họa quyết đoán mà không mang vẻ doanh nghiệp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Varo Violet | `#8c58d0` | `--color-varo-violet` | Primary action buttons, active nav, brand logo — màu tím vừa bão hòa duy nhất cung cấp năng lượng cho mọi trạng thái tương tác | | Deep Plum | `#42185f` | `--color-deep-plum` | Dark accent surfaces, chữ đậm trên thẻ sáng, nền dải tối full-bleed — gần như đen với undertone tím | | Lilac Mist | `#cdb0fa` | `--color-lilac-mist` | Fill tím nhạt cho trạng thái surface đã chọn/phụ, tag backgrounds | | Coral Ember | `#ed6c52` | `--color-coral-ember` | Decorative section fills, icon highlights, dotted ticker text — dấu câu chromatic ấm phá vỡ sự thống trị của tím |

# Lamborghini.com — Style Reference > Showroom đen với một chiếc xe màu vàng dưới ánh đèn spotlight **Theme:** mixed Ngôn ngữ thiết kế của Lamborghini là sân khấu ô tô: một sân khấu tối điện ảnh nơi màu Giallo vàng tô điểm cho một thế giới vốn chỉ có đen trắng. Giao diện luân phiên giữa các hero canvas tối full-bleed (nơi video và ảnh sản phẩm chiếm ưu thế) và các bề mặt nội dung xám nhạt yên tĩnh (nơi kể chuyện editorial đảm nhận). Typography là yếu tố nổi bật nhất — một custom sans-serif công nghiệp (LamboType) chỉ được viết bằng CHỮ IN HOA, được scale mạnh mẽ lên 80–120px cho các hero statement. Các component tối giản và mang tính cấu trúc: không card bo tròn, không soft shadow, không decorative gradient — chỉ có bề mặt góc cạnh, hairline rules, và một nút hành động màu vàng rực rỡ duy nhất. Cảm giác tổng thể là sự kiềm chế như gallery bị phá vỡ bởi một điểm nhấn màu sắc tự tin, giống như một showroom đen mờ bị phá vỡ bởi một chiếc xe màu vàng dưới ánh đèn spotlight. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Giallo Vivo | `#ffc000` | `--color-giallo-vivo` | Accent vàng hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp lên màu CTA chính | | Giallo Ombra | `#917300` | `--color-giallo-ombra` | Trạng thái hover hoặc vàng thứ cấp, list marker với brand accent — biến thể mustard đậm hơn của màu chính | | Carbony Black | `#202020` | `--color-carbony-black` | Văn bản chính, hero canvas tối, navigation bar — màu gần đen chủ lực được dùng hơn 1400 lần | | Pure Black | `#000000` | `--color-pure-black` | Body copy, footer ink, icon stroke trên bề mặt sáng — văn bản tương phản tối đa và màu đen tuyệt đối |

# Flowers For Society — Style Reference > indigo editorial trên nền gallery trắng — một giọng tím đậm duy nhất đặt trên canvas giấy trắng, nơi ảnh sản phẩm và typography làm toàn bộ công việc kể chuyện. **Theme:** light Flowers For Society là một fashion house nói bằng một giọng duy nhất, đầy quyết đoán: deep indigo (#203b90) xuyên suốt mọi bề mặt — logo, heading, button, border, và hero scrim — được neo bởi một gallery trắng thoáng đãng. Sản phẩm là hero: ảnh full-bleed với gradient overlay để đảm bảo độ dễ đọc, CTA hình pill cỡ lớn với border-radius 41-60px, và display type căn giữa sử dụng line-height cực sít của Integral (0.92-1.0) để nén không gian dọc. Hệ thống cố tình tối giản — hai custom typeface, không shadow, border-radius cực rộng, và một màu sắc duy nhất. Soehne đảm nhận UI với letter-spacing rộng (0.033-0.063em) giúp ngay cả chữ nhỏ cũng mang nhịp điệu boutique, editorial. Kết quả mang cảm giác như một trang tạp chí: tự tin, kiềm chế, và mang đậm dấu ấn thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Indigo Statement | `#203b90` | `--color-indigo-statement` | Màu thương hiệu chính — logo, tất cả heading, primary action fill, action border, và hero scrim bên trái. Đây là màu sắc duy nhất trong hệ thống; nó xuất hiện trên hầu hết mọi bề mặt để khẳng định sự hiện diện của thương hiệu | | Indigo Mist | `#7989bc` | `--color-indigo-mist` | Màu tím nhẹ cho border tinh tế và secondary outline — phiên bản dịu hơn của Indigo Statement, dùng khi độ bão hòa đầy đủ sẽ cảm thấy nặng nề | | Paper White | `#ffffff` | `--color-paper-white` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc nên giữ ở mức kín đáo. Không nâng cấp nó thành màu CTA chính | | Carbon | `#000000` | `--color-carbon` | Icon stroke, border sắc nét, và điểm nhấn văn bản tương phản cao. Dùng có chọn lọc khi màu thương hiệu indigo quá mềm |

# 큰그림컴퍼니 — Style Reference > Tuyên ngôn typographic trên nền bê tông. Một press kit đen-trên-trắng, nơi Helvetica cỡ lớn đảm nhiệm vai trò của nhiếp ảnh, và kết cấu duy nhất là một tờ giấy nhàu duy nhất nằm dưới body type. **Theme:** light Bigpicture Company là một hệ thống editorial đơn sắc, xử lý trang web như một press kit in ấn được trải trên giấy thô. Giao diện loại bỏ mọi màu sắc và hoàn toàn dựa vào mực đen, khoảng trắng, đường kẻ mảnh (hairline rules) và một kết cấu giấy nhàu duy nhất để tạo bầu không khí. Typography chính là sản phẩm: display headlines đạt tới 274px với Helvetica Neue 700 và negative tracking mạnh, biến chữ thành khối thị giác chủ đạo trên mọi màn hình. Monospace labels ([01-N INTRODUCTION], CREATIVE/AGENCY) hoạt động như caption kiểu in ấn, trong khi các biểu tượng sparkle bốn cánh là vật trang trí duy nhất giữa các section. Layout rộng rãi, mang phong cách zine — section gap 72px, horizontal padding 144–250px, và các khối ảnh full-bleed với góc bo 288px giúp trang thở như một bức tường gallery thay vì một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Press Ink | `#121212` | `--color-press-ink` | Primary text, hairlines, section borders, icon strokes, footer text — sắc thái tối duy nhất mang 95% toàn bộ thông tin foreground | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav pill background, heading-bordered surfaces | | Newsprint | `#f1f1f1` | `--color-newsprint` | Surface fills nhẹ, soft borders, hairline dividers, tông màu nền cho kết cấu giấy nhàu | | Foil Gray | `#e1e1e1` | `--color-foil-gray` | Light borders, icon stroke accents, secondary dividers |

# Grove AI — Style Reference > clinical journal in morning light — một từ xanh duy nhất neo giữ trang văn xuôi đong đếm **Theme:** light Grove AI sử dụng ngôn ngữ mang tính clinical-credibility: canvas trắng sáng, điểm nhấn xanh rừng (forest-green) tiết chế, và sự tương phản typography có chủ đích giữa serif editorial (Libre Caslon Text) cho hero-level storytelling và grotesque chính xác (Geist) cho body và interface. Giọng thương hiệu sống trong một từ xanh duy nhất — "Grace" — được đặt bằng serif và thả vào một headline đơn sắc, khiến AI agent đọc như cá tính của sản phẩm chứ không phải một tính năng. Bề mặt phẳng với một lớp card xám nhạt duy nhất; độ cao đến từ inset shadow mềm và hairline borders, không bao giờ dùng drop shadow nặng. Component weight là lightweight: pill buttons, ghost controls, tags viền mảnh, và section labels small-caps khít. Tổng thể hệ thống giống một tạp chí y khoa được đầu tư tốt mà tình cờ cũng là một product page — thẩm quyền lâm sàng thể hiện qua sự tiết chế, không phải trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Grove | `#0b835c` | `--color-forest-grove` | Màu thương hiệu chính — dùng cho logo mark, chữ ký trong serif headlines, accent borders trên tags và announcement pills, và điểm nhấn icon nhỏ. Một tông xanh đậm, hơi bão hòa thấp, đọc như clinical và đáng tin cậy hơn là năng động | | Pine Shadow | `#1c2b27` | `--color-pine-shadow` | Bề mặt tối thứ cấp — một tông xanh gần đen pha chút xanh lá dùng cho inverted buttons và các khoảnh khắc bề mặt tối nơi #000 sẽ quá gắt so với accent xanh | | Ink Black | `#1c1c1e` | `--color-ink-black` | Dark borders và separators cho elevated surfaces và inverted UI. Không nâng lên làm màu CTA chính | | Graphite | `#303033` | `--color-graphite` | Secondary text và dividers — xám đậm vừa dùng để giảm nhấn body copy, borders mờ, và metadata |

# Linus Rogge — Style Reference > Portfolio mang phong cách editorial trên nền gallery trắng — mỗi dự án là một bức ảnh cỡ tường với chú thích nhỏ nhẹ ở góc. **Theme:** light Linus Rogge là portfolio cá nhân xây dựng trên sự kiềm chế triệt để về typography: chỉ một cỡ chữ 14px duy nhất cho mọi văn bản, chỉ hai màu (đen thuần và trắng thuần), và ảnh chụp cỡ gallery là giọng nói hình ảnh duy nhất. Hierarchy được tạo ra thông qua weight (400 vs 500) và khoảng trống âm bản rộng rãi, không phải bằng cách tăng kích thước. Mỗi dự án được trình bày dưới dạng một nhãn canh trái thưa thớt đi kèm với ảnh full-bleed, mang phong cách như chú thích trong bảo tàng bên cạnh một bản in lớn. Các component gần như vô hình — không có shadow, không có border-radius trên canvas, không có màu trang trí — để bản thân tác phẩm tự gánh vác trang. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Canvas chính, mọi chữ trên nền tối, chữ button inverted | | Ink Black | `#000000` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho chữ, icon và độ tương phản mạnh. Không dùng làm màu CTA chính | | Gallery Gray | `#e5e5e5` | `--color-gallery-gray` | Bề mặt phụ cho các section band, footer background wash | | Plinth Gray | `#d4d4d4` | `--color-plinth-gray` | Bề mặt cấp ba, divider nhịp điệu section xen kẽ |

# Miti Navi — Style Reference > Tuscan sea-view chapbook on raw linen **Theme:** light Miti Navi vận hành như một editorial canvas ấm áp, tông giấy — hãy tưởng tượng một tạp chí du thuyền hạng sang được in trên giấy kraft chưa tẩy trắng. Toàn bộ giao diện được xây dựng trên nền cát-be (#e6dece) với typography đen mực đậm, mang lại cảm giác thủ công, như in tay. Kiểu chữ monospaced (GT Pressura Mono) đảm nhận toàn bộ UI chức năng — nav, button, body — tạo độ chính xác kỹ thuật tương phản với serif lãng mạn, uốn lượn (Voyage) dành riêng cho các dòng display editorial. Một đường gạch chân màu peach ấm duy nhất (#ffdead) là điểm nhấn màu sắc duy nhất, được dùng rất tiết chế để đánh dấu các tương tác. Ảnh hero được che bởi một vòm cong ấn tượng, navigation chia thành ba cụm cân bằng quanh wordmark ở giữa, và một vertical sticky side tab nằm ở cạnh phải với chữ xoay — tất cả đều gợi một cuốn sách nghệ thuật hơn là một trang sản phẩm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Linen | `#e6dece` | `--color-linen` | Canvas trang, bề mặt card, nền section — nền giấy chưa tẩy trắng ấm áp chứa toàn bộ nội dung | | Deep Ink | `#000e13` | `--color-deep-ink` | Text chính, navigation, border cấu trúc, logo lockup — gần như đen với một chút undertone lạnh rất nhẹ | | Carbon | `#232323` | `--color-carbon` | Body text, icon strokes, secondary heading, hairline rules, card borders — màu tối đa năng cho các UI element dày đặc | | Soft Ash | `#999999` | `--color-soft-ash` | Helper text mờ, nav items không active, divider nhẹ, secondary metadata |

# Lightdash — Style Reference > pixel-grid tím trên giấy vẽ kỹ thuật **Theme:** light Lightdash hoạt động như một command center dành cho developer, mang phong cách điềm tĩnh: nền gần trắng với typography slate-gray, đường viền hairline tinh tế, và một màu tím bão hòa (#5e4cff) làm điểm nhấn cho mọi tương tác. Brand voice tự tin và nhẹ nhàng — headline được đặt bằng custom geometric sans (Britti Sans) ở kích thước 48–76px với tracking cực kỳ chặt (-0.025em), tạo cảm giác kiến trúc hơn là trang trí. Body copy dùng Inter ở 14–18px với letter-spacing hơi âm, giữ cho thông tin dày đặc vẫn dễ đọc mà không nặng nề. Các surface phân lớp nhẹ nhàng từ canvas #ffffff đến section #f6f8fa và card bo tròn 12px. Một mosaic pixel-art tím trong hero là điểm trang trí duy nhất — một cái gật đầu có chủ đích cho bản sắc 'code-native'. Các component phẳng và không viền theo mặc định; độ cao được tạo từ rgba shadow nhiều lớp pha màu slate (#272835) thay vì xám trung tính, giúp mọi card luôn đúng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang chính, bề mặt card, input fills | | Cloud Mist | `#f6f8fa` | `--color-cloud-mist` | Nền section thay thế, lớp surface phụ bên dưới trắng | | Frost Tint | `#eceff3` | `--color-frost-tint` | Surface cấp ba, khối nền mờ | | Ash Border | `#cdd2d9` | `--color-ash-border` | Đường phân cách hairline, viền card, đường kẻ bảng |

# Notion — Style Reference > Trung tâm chỉ huy làm việc đêm khuya — một studio tối lúc 2 giờ sáng, nơi những chiếc bàn màu kem mềm mại đỡ những tấm thẻ trắng phát sáng, được chiếu sáng bởi các bảng điều khiển màu xanh coban. **Theme:** mixed Notion vận hành như một trung tâm chỉ huy làm việc về đêm: một hero xanh navy nửa đêm bão hòa sâu chuyển dần vào các bề mặt nội dung màu kem ấm áp, với các hành động màu xanh coban nổi bật như những bảng điều khiển vừa được bật sáng. Thiết kế tự tin về mặt typography, sử dụng một sans humanist tùy chỉnh (Notion Inter) ở mọi cấp độ UI, kết hợp với các điểm nhấn serif Lyon Text thỉnh thoảng để tạo cảm giác ấm áp biên tập. Màu sắc được phân bổ có chừng mực — phần lớn trang sống trong mực gần như đen và trắng kem ấm, dành năng lượng màu sắc cho các phần tô CTA, điểm nhấn emoji-icon, highlight badge và đường viền thẻ trang trí. Các component mềm mại và bo tròn (thẻ 12px, input 5px, pill badges) hầu như không có drop shadow; chiều sâu đến từ độ tương phản bề mặt (navy đậm → kem → thẻ trắng) chứ không phải từ độ cao. Cảm giác tổng thể là một studio làm việc vẫn mở cửa sau giờ hành chính — chức năng, yên tĩnh, hơi mang hơi hướng về đêm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Navy | `#02093a` | `--color-midnight-navy` | Canvas cho hero và feature section — bề mặt tối đặc trưng khiến headline trắng và CTA xanh coban trông như những bảng phát sáng trong phòng điều khiển ca đêm | | Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Màu hành động tím cho filled buttons, trạng thái navigation được chọn và các khoảnh khắc chuyển đổi tập trung. | | Signal Blue | `#0075de` | `--color-signal-blue` | Đường viền hành động dạng outlined, inline text links và trạng thái hover có màu — một màu xanh mát hơn cho tính tương tác thứ cấp | | Ice Blue | `#62aef0` | `--color-ice-blue` | Điểm nhấn đường viền xanh cho tag, divider và cạnh UI đang focus |

# Origin Financial — Style Reference > serif headlines floating above dusk clouds — editorial finance at horizon altitude **Theme:** dark Origin speaks in an editorial financial-register voice: oversized Lyon Display serif headlines (80-96px, weight 300-400) do the emotional work while Suisse Int'l carries the UI at 14-18px against a near-black canvas stacked from #0f1011 through #2e2e2e. The interface is overwhelmingly achromatic — the only true CTA is a white pill with an arrow, never a chromatic button — and the brand's color appears not as controls but as illuminated product surfaces: violet, pink, sky-blue, and deep-indigo feature cards that float in the void like lit windows. The signature move is a full-bleed dusk-sky photograph behind the hero, giving the entire site a 'above the clouds' atmosphere that frames money as horizon, not spreadsheet. Spacing is generous and breathing; cards use 16-30px radii (never sharp), buttons are full pills (1440px), and tracking on small UI text is dramatically wide (0.182em) to feel stamped rather than typed. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#0f1011` | `--color-obsidian` | Primary page canvas — the foundational dark surface behind every section | | Void Black | `#000000` | `--color-void-black` | Pure black for SVG illustration fills, deepest shadow base, device screen content | | Carbon | `#090a0b` | `--color-carbon` | Elevated card surfaces and button shadow substrate — one step lighter than the page | | Graphite | `#2e2e2e` | `--color-graphite` | Mid-tone card surface for overlays, icon borders, and elevated containers |

# ClickUp™ — Style Reference > Buồng lái năng suất ánh tím trên nền trắng **Theme:** light ClickUp trình bày một trung tâm chỉ huy năng suất trên nền canvas trắng tinh — một thương hiệu SaaS dùng một màu tím rực rỡ duy nhất làm giọng nói chính, đặt trên giao diện gần như không màu. Nhịp điệu thị giác dày đặc và giàu thông tin: headline display cỡ lớn, tự tin (Plus Jakarta Sans ở 60-76px, weight 800) chiếm khoảng trắng rộng rãi, kết hợp với body text nhỏ gọn và UI sản phẩm được xếp chặt chẽ, đóng vai trò chính trong hero. Các bề mặt phẳng với bóng đổ pha xanh lam nhẹ thay vì độ nâng cao rõ rệt, và màu tím thương hiệu (#7b68ee) xuất hiện tiết kiệm trên các hành động chính, logo, và một vài điểm nhấn. Tổng thể mang cảm giác thực dụng nhưng cao cấp — một buổi trình diễn sản phẩm nơi phần mềm CHÍNH LÀ ngôi sao, được đóng khung bởi hệ thống phân cấp kiểu chữ sạch sẽ và bảng màu hạn chế, điểm xuyết bằng màu tím đặc trưng duy nhất đó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Brand Violet | `#7b68ee` | `--color-brand-violet` | Màu thương hiệu chính cho logo, CTA chính, trạng thái active, và điểm nhấn thương hiệu — một màu tím duy nhất này mang 90% bản sắc sắc độ | | Signal Blue | `#0091ff` | `--color-signal-blue` | Điểm nhấn phụ cho badge, icon, và các điểm nổi bật của tính năng Agents/Brain — một điểm đối lập mát mẻ với tím, thường xuất hiện trong các dải conic-gradient | | Ultra Violet | `#6647f0` | `--color-ultra-violet` | Biến thể tím đậm hơn cho trạng thái hover và bề mặt selected/active — tạo chiều sâu tối hơn cho thương hiệu khi cần | | Muted Violet | `#514b81` | `--color-muted-violet` | Tím bão hòa thấp cho secondary text, border nhẹ, và nền có tông màu khi cần sự hiện diện của thương hiệu mà không cần bão hòa hoàn toàn |

# Vercel — Style Reference > Khối đơn sắc lăng kính trên giấy kẻ ô — một tam giác tối duy nhất khúc xạ toàn bộ quang phổ hình nón trên nền lưới kỹ thuật mờ, và mọi thứ còn lại trên trang là độ chính xác thuần đen-trên-trắng. **Theme:** light Vercel hoạt động như một không gian làm việc kỹ thuật gần như đơn sắc: canvas trắng ngà (#fafafa), text và filled actions gần đen (#171717, không bao giờ là #000 thuần), đường viền siêu mảnh (#ebebeb) đảm nhận cấu trúc thay vì đổ bóng, và một điểm nhấn lăng kính đầy màu sắc duy nhất từ logo prism conic-gradient xuất hiện đúng một lần trên mỗi màn hình. Hệ thống chữ hoàn toàn là Geist — một geometric grotesque với tracking âm rất chặt ở kích thước lớn (-0.06em ở 48px) và không có decorative weights — mang lại cho toàn bộ UI cảm giác chính xác như thiết bị phòng thí nghiệm. Mật độ giao diện là compact: bán kính 6px chiếm ưu thế trên cards và buttons, padding 12px bao phủ hầu hết các bề mặt, và khoảng cách 2–8px kiểm soát nhịp điệu. Màu sắc được phân bổ hạn chế — chromatic blue, red, và teal chỉ xuất hiện dưới dạng điểm nhấn trang trí minh họa; product chrome hoàn toàn achromatic với prism gradient là dấu câu màu sắc duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Graphite | `#171717` | `--color-graphite` | Primary text, filled action buttons, primary borders. Màu gần đen có chủ đích — không phải #000000 — giúp các bề mặt có cảm giác ấm hơn, mực hơn so với đen thuần | | Marble White | `#fafafa` | `--color-marble-white` | Page canvas, card surfaces, elevated panels. Không phải trắng thuần — độ ấm nhẹ đọc như giấy thay vì màn hình | | Pearl | `#ffffff` | `--color-pearl` | Inset surface white dùng bên trong cards, button text trên nền tối, và inner panel highlights | | Hairline | `#ebebeb` | `--color-hairline` | Màu border mặc định cho cards, nav, inputs, dividers. Đảm nhận phân cách cấu trúc thay vì đổ bóng |

# Squarespace — Style Reference > Cinematic monochrome gallery **Theme:** light Squarespace speaks in absolute black and white — a purely achromatic system where drama comes from scale, contrast, and full-bleed photography rather than color. The visual identity is cinematic: a single massive headline floats over a full-bleed photographic hero, then the page alternates between stark black bands and white expanses, each section announcing itself through scale rather than color. Typography carries the entire brand voice — Clarkson, a custom geometric sans, is used at whisper-light 300 weight for huge 64–72px displays with aggressively tight tracking (-0.06em), creating a serif-like density that feels editorial. Components are intentionally minimal: ghost buttons, pill-shaped filter tabs, dark image cards with arrow indicators. The system is deliberately austere so user content (the websites being built) inherits all the visual energy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, nav bar, black section bands, dark feature cards, logo mark | | Paper | `#ffffff` | `--color-paper` | Page background, hero text on dark imagery, light section canvases, button text on filled buttons | | Charcoal | `#2f2f2f` | `--color-charcoal` | Filled button background, elevated dark surfaces — softer than pure black, reads as premium matte | | Ash | `#898989` | `--color-ash` | Muted body text, secondary borders, de-emphasized labels on dark backgrounds |

# Paste — Style Reference > Đèn lồng hổ phách trên đá cẩm thạch trắng — logo gradient ấm áp của thương hiệu lơ lửng trong khoảng trắng rộng lớn, như một ô cửa sổ có ánh đèn duy nhất trong tòa nhà phủ đầy tuyết. **Theme:** light Mang cảm giác ánh nắng xuyên qua một gallery tối giản — khoảng trắng rộng lớn với typography đen và một điểm nhấn màu hổ phách ấm áp thu hút ánh nhìn như chiếc đèn lồng trong tuyết. Trang web bị chi phối bởi trắng tinh (#ffffff) và gần trắng (#f5f5f7) với chữ gần đen (#101010), tạo độ tương phản cực cao. system-ui ở kích thước display (54-80px) với letter-spacing chặt (-0.013em) và weight 400-700 mang lại cho headline cảm giác native-OS, củng cố bản sắc Mac-utility. Gradient logo màu hổ phách-cam (rgb(240,100,19) → rgb(254,171,48)) là yếu tố ấm áp duy nhất trên một canvas đơn sắc, khiến nó trở nên vô cùng thu hút. CTA button xanh (#0088ff) với border-radius 100px pill là lời kêu gọi hành động duy nhất — thương hiệu ấm, CTA mát, nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Amber Flame | `linear-gradient(0deg, rgb(240, 100, 19) -29.375%, rgb(254, 171, 48) 100%)` | `--color-amber-flame` | Logo, brand mark, gradient start — màu cam ấm áp neo giữ toàn bộ bản sắc như yếu tố màu sắc duy nhất trên canvas đơn sắc | | Honey Glow | `#feab30` | `--color-honey-glow` | Gradient end của logo, highlight ấm áp — nâng hổ phách lên vùng vàng, xuất hiện trong section headings và brand accents | | Signal Blue | `#0088ff` | `--color-signal-blue` | Primary CTA buttons, interactive links — xanh mát đối lập với thương hiệu hổ phách ấm, tạo sự tương phản nhiệt độ có chủ đích, phân tách bản sắc khỏi hành động | | Bright Blue | `#1c95ff` | `--color-bright-blue` | Hover/active state cho CTA xanh, secondary interactive highlights |