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

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

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.

# HoneyBook — Style Reference > creative studio ngập nắng trên nền kem ấm — một marquee vàng tươi mở ra những mảng workspace trắng và những con dấu pill tối màu. **Theme:** light HoneyBook sử dụng ngôn ngữ sunlit-creative-studio: hero vàng tươi bão hòa, text xanh navy đậm ấm áp, và bề mặt sản phẩm trắng. Hệ thống thị giác được xây dựng trên sự căng thẳng giữa giọng display serif (STK Bureau Serif) và một sans geometric đầy tự tin (STK Bureau Sans), với một mặt chữ eyebrow all-caps nhỏ xíu (STK Gerhard) thì thầm 'editorial' phía trên các section header. Các nút là pill tuyệt đối — bo tròn hoàn toàn, màu navy đậm, không đổ bóng — khiến mỗi hành động như một con dấu vật lý đóng lên trang giấy. Các bề mặt vẫn yên tĩnh và trắng bên dưới fold; màu vàng xuất hiện như một khối màu có chủ đích cho các khoảnh khắc hero/marquee thay vì trang trí rải rác, tạo ra nhịp điệu entry-and-rest dễ nhận biết trên các trang dài. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Honey Yellow | `#fffa77` | `--color-honey-yellow` | Yellow wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. | | Marigold | `#fffa56` | `--color-marigold` | Accent fills trên card, headline underline strokes, icon highlights, secondary callouts — phiên bản hơi mạnh hơn của Honey Yellow cho những khoảnh khắc cần nổi bật trên nền trắng | | Inkwell | `#142127` | `--color-inkwell` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính | | Carbon | `#131416` | `--color-carbon` | Body text và high-contrast borders trên light surfaces, alt dark fill cho emphasis blocks |

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

# Sauce Labs — Style Reference > Neon-lit command center on obsidian glass — a dark engineering console where a single green pulse marks every live signal. **Theme:** dark Sauce Labs operates as a neon-lit engineering console: deep obsidian canvas (#132322) with white precision typography and a single vivid green (#3ddc91) that activates every interactive surface. The system alternates between dark structural bands and light content cards (#edf7f5), creating rhythm through luminance contrast rather than ornament or elevation. Components are confident and generously rounded — 56px pill buttons, 20px card radii, minimal shadow — reading as high-end developer tooling where the product's intelligence is the visual subject. The green accent is rationed: it appears on primary actions, active tab states, announcement bars, and stat highlights, never as decoration, which gives it real semantic weight. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Shell | `#132322` | `--color-obsidian-shell` | Primary page background, dark navigation, dark card surfaces — the structural canvas that absorbs everything else and makes the green accent feel electric by contrast | | Pure White | `#ffffff` | `--color-pure-white` | Primary text on dark surfaces, card content backgrounds, light section canvases — maximum contrast against the obsidian shell | | Mint Frost | `#edf7f5` | `--color-mint-frost` | Light content card surfaces, elevated feature panels — the bright counterpoint that breaks up dark sections and hosts detailed content | | Deep Abyss | `#0e1a19` | `--color-deep-abyss` | Darker surface variant for nested elements, deep card backgrounds, gradient endpoints — pushes further into the void when extra depth is needed |

# Retool — Style Reference > Warm obsidian workshop — a precision tool surface lit by ember glow, where everything is built. **Theme:** dark Retool operates on a near-black canvas — #151515 as the dominant ground — with off-white text (#e9ebdf) that reads more like parchment than pure white, giving the dark surface a warm, organic quality rather than a cold tech-void. Typography is the primary design tool: the custom 'saansFont' runs from weight 300 at 72px down to 380 at body sizes, with aggressive negative tracking at large scales creating compressed, authoritative headlines that feel proprietary. Surface depth is achieved through a three-step stack (#0e0e0 → #151515 → #242424) with no shadows — cards are literally darker or lighter slabs of the same material, not elevated objects. The only chromatic punctuation is muted teal (#185849, #0e352c) used as subtle background washes, while the hero gradient bleeds warm earthy tones (amber-rust into near-black) from the bottom-left, creating atmospheric depth without visual noise. Buttons are square-cornered or pill-cornered depending on context — no in-between — reinforcing a binary, decisive visual grammar. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Canvas | `radial-gradient(at -5% 105%, rgba(27, 46, 68, 0.5) 26%, rgba(51, 45, 43, 0.5) 44%, rgba(74, 43, 17, 0.5) 62%, rgba(73, 31, 22, 0.5) 66%, rgba(21, 21, 21, 0) 85%, rgba(21, 21, 21, 0.03) 100%)` | `--color-obsidian-canvas` | Primary page background, dominant surface across all sections; Hero background gradient — warm amber-rust bleeds from bottom-left into near-black | | Void Black | `#0e0e0e` | `--color-void-black` | Deepest surface layer, card backgrounds that recede below canvas | | Ember Surface | `#242424` | `--color-ember-surface` | Raised card and panel backgrounds — one step above canvas | | Charcoal Rim | `#3f403d` | `--color-charcoal-rim` | Subtle borders and dividers on dark surfaces |

# Valo — Style Reference > noir observatory at midnight — weight-300 typography floats on pure black while a single teal-violet gradient passes through like a laser line across the room. **Theme:** dark Valo runs on a noir observatory aesthetic: deep-black canvas, a single custom serif-less voice at whisper weight (300), and one luminous blue-teal-violet gradient used as deliberate punctuation rather than decoration. Typography does the heavy lifting — 100px display headlines with tight negative tracking feel like illuminated ink on obsidian, while the rest of the interface stays nearly invisible. The gradient appears in exactly three roles: a single accent word inside a headline, a thin floating ring/torus visual, and a wash at the page foot — never as a button fill or panel background. Components are flat, hairline-bordered, and borderless where possible; interaction is signaled by circular arrow buttons and numbered sequencing, not by color or shadow. Every screen should feel like a page torn from a dark scientific monograph: quiet, confident, with one moment of light. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, hero background, all primary surface area. Sets the dark-stage tone for every screen | | Bone | `#e5e7eb` | `--color-bone` | Hairline borders, dividers, and muted secondary text. The workhorse neutral that defines edges without adding visual weight | | Paper | `#ffffff` | `--color-paper` | Primary headings, body text, nav links, and icon strokes. Maximum contrast against Void for clear information hierarchy | | Graphite | `#4d4d4d` | `--color-graphite` | Subtle nav borders and disabled/inactive state lines. Sits between Void and Bone for low-emphasis structural lines |

# Arcade — Style Reference > Gợn sóng xanh điện trên nền giấy trắng. Một editorial canvas sạch sẽ, nơi một mảng xanh dương đậm duy nhất chảy như chất lỏng từ góc này sang góc khác, khiến mọi phần tử tương tác đều có cảm giác như đang bật sáng. **Theme:** light Hệ thống thị giác của Arcade là một bề mặt sản phẩm trên nền canvas trắng, được điểm nhấn bằng một màu xanh điện bão hòa (#2142e7) và một gradient xanh chảy đặc trưng làm neo cho hero. Typography sử dụng Inter trên mọi kích thước, với trọng lượng tập trung ở dải 400–700 và tracking âm chặt trên các display size giúp chữ co lại một cách quang học khi phóng to. Giao diện mang phong cách chức năng và yên tĩnh: các khối nội dung xám trên nền trắng, border mảnh, border-radius nhỏ gọn 12–16px, và bóng đổ pha xám lạnh dựa trên rgba(17,24,39,...) giữ cho mọi bề mặt nâng lên luôn đúng thương hiệu. Màu sắc được phân bổ có chủ đích — một màu xanh duy nhất đảm nhận vai trò accent, CTA và focus — mọi thứ còn lại đều là thang màu trung tính. Mật độ thoải mái nhưng không quá rộng: khoảng cách vi mô chủ yếu là 8px và 12px, khoảng cách giữa các section là 32–48px. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Voltage Blue | `#2142e7` | `--color-voltage-blue` | Accent xanh tím 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 thành màu CTA chính | | Deep Voltage | `#182fa5` | `--color-deep-voltage` | Accent xanh tím 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 thành màu CTA chính | | Midnight Ink | `#111827` | `--color-midnight-ink` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp thành màu CTA chính | | Slate 600 | `#4b5563` | `--color-slate-600` | Body text, nav links, icon fills, card secondary copy — màu chữ chủ đạo trên toàn trang |

# Mockups made easy — Style Reference > Editorial design studio trên nền giấy trắng **Theme:** light Hệ thống thị giác của Maneken mang phong cách gallery-first: nền gần như trắng giúp ảnh mockup chiếm ưu thế, trong khi một tông xanh bão hòa duy nhất đóng vai trò là giọng nói màu sắc duy nhất trong giao diện. Typography đảm nhận phần nặng nhất — một display face tùy chỉnh (TWKEverett) chiếm không gian trang với headline cỡ lớn 77–110px, leading dày 1.0–1.2, tạo cảm giác tạp chí editorial thay vì dashboard SaaS thông thường. Inter xử lý mọi chức năng ở kích thước compact 14–18px, tạo sự đối lập có chủ đích giữa display type sân khấu và UI tiện dụng. Các bề mặt giữ phẳng với border-radius 10px, đường viền chủ yếu là hairline đen tuyền, và độ nâng (elevation) chỉ dành riêng cho nội dung ảnh thông qua soft drop shadow nhiều lớp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Blue | `#0050b7` | `--color-signal-blue` | Primary action buttons, logo dot accent, active nav strokes — màu sắc duy nhất trong hệ thống tạo điểm nhấn rõ ràng trên nền đơn sắc | | Ink | `#000000` | `--color-ink` | Primary text, icon fills, hairline borders, image outlines — đen tuyền neo cấu trúc đơn sắc với độ tương phản tối đa (21:1 trên nền trắng) | | Paper | `#ffffff` | `--color-paper` | Card surfaces, button text trên nền tối, image backgrounds — bề mặt sáng giúp nội dung ảnh nổi bật | | Carbon | `#10151c` | `--color-carbon` | Dark surface backgrounds, body text trên card sáng, nav bar fills — gần như đen với sắc xanh nhẹ khó thấy, làm ấm tông trung tính đậm |

# Sprout Social — Style Reference > Green sprout on black slate. One vivid accent on a stark monochrome canvas, the color rationed to actions only, with confident geometric type that functions like wayfinding signage. **Theme:** light Sprout Social operates on a stark, high-contrast visual system: near-black ink on white canvas, with a single vivid green that punctuates every call to action. The typeface is Proxima Nova at bold weights (700–800), delivering confident, geometric headlines that feel like signage rather than prose. Surfaces are flat and borderless in feel — rounded corners (16px on cards, 6px on controls) do the structural work that shadows do elsewhere. Color is rationed: 99% of the page is achromatic; the green accent is reserved for primary actions and the brand leaf, never decoration. Product showcases break the monochrome with soft purple-to-white and green-to-blue gradient washes that frame UI screenshots without competing with them. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#040404` | `--color-ink-black` | Primary text, nav borders, heading strokes, footer dividers — the dominant non-white color across the entire system | | Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, nav surface, input fills, button text on dark fills | | Ash Gray | `#d9d9d9` | `--color-ash-gray` | Nav dividers, link borders, subtle separators, muted UI chrome | | Smoke Gray | `#cbcece` | `--color-smoke-gray` | Image borders, input borders, secondary button surface, faint dividers |

# Front — Style Reference > Phòng điều khiển màu plum đậm, một tia sáng xanh vôi. Tường aubergine sâu thẳm, viền sương lavender, và một ngọn hải đăng chartreuse duy nhất kéo mọi ánh nhìn. **Theme:** dark Front vận hành trong ngôn ngữ command-center màu plum đậm: một màu tím bão hòa duy nhất (#300c41) làm nền chính cho trang, các card lavender nhạt hơn nổi bên trên, và một điểm nhấn xanh vôi điện tử đâm xuyên qua bóng tối — màu ấm duy nhất. Typography là neo-grotesque với tracking chặt, display size ở weight 500 kéo vào trong -0.02em khiến headline mang cảm giác gia công máy móc thay vì vẽ tay. Các bề mặt phẳng — không drop shadow, chỉ có một viền inset 1px mảnh màu lilac nhạt (#d0c6f0) để xác định cạnh tương tác. Nhịp điệu tổng thể tự tin và dày đặc: pill controls bo tròn (bán kính 40-64px), spacing 8/16/24px gọn gàng, và xếp lớp dark-on-dark khiến CTA xanh vôi như được bật sáng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Aubergine | `#300c41` | `--color-aubergine` | Canvas trang, hero backgrounds, nav background — bề mặt màu chủ đạo duy nhất tạo nên bản sắc không thể nhầm lẫn của Front | | Royal Plum | `#5b1f76` | `--color-royal-plum` | Accent tím hồng hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính | | Lime Spark | `#dee948` | `--color-lime-spark` | Accent xanh lá hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính | | Bright Violet | `#8034bf` | `--color-bright-violet` | Accent tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |

# Savee — Style Reference > Black canvas dành cho visual curators **Theme:** dark Savee hoạt động trong bóng tối gần như tuyệt đối: một canvas gần như đen tuyền (#050505) nơi yếu tố màu sắc duy nhất là một electric indigo (#1500ff) duy nhất, điểm xuyết giao diện như ánh đèn neon trong gallery. Typography đảm nhận toàn bộ trọng trách — một custom sans-serif duy nhất được dùng ở mọi cấp độ, từ display headline 96px với line-height 0.96 và tracking -0.04em cho đến caption 13px, tạo nên nhịp điệu editorial đầy tự tin, mang cảm giác như tường bảo tàng hơn là một SaaS dashboard. Các bề mặt gần như không thể phân biệt: page canvas, elevated cards (#151515), và deep overlays (#1e1e1e) tạo thành một hệ thống phân cấp gần như vô hình, để hình ảnh và chữ dẫn dắt trải nghiệm. Điểm nhấn violet duy nhất trên primary CTA là tiếng ồn thị giác duy nhất mà hệ thống cho phép — mọi thứ còn lại là chữ trắng trên nền đen, pill-shaped controls, và khoảng thở section 64px rộng rãi. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Indigo | `#1500ff` | `--color-electric-indigo` | Điểm nhấn violet cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu primary CTA | | Obsidian | `#050505` | `--color-obsidian` | Page canvas, nền sâu nhất — khoảng không mà mọi nội dung đặt trên đó | | Charcoal | `#151515` | `--color-charcoal` | Elevated surface, khung xem trước sản phẩm, panel phụ | | Graphite | `#1e1e1e` | `--color-graphite` | Deep overlay surface, hover state trên dark cards, input fields |

# Arc — Style Reference > Sân chơi editorial với đường cắt hình vỏ sò **Theme:** light Trang web của Arc mang phong cách một spread editorial ấm áp, được cắt bằng dao giấy thủ công: nền canvas màu kem vanilla, các đường viền hình vỏ sò (scalloped edges) lượn sóng giữa mỗi dải màu, và một mảng tím violet rực rỡ tràn ngập các khối lớn như một trang sách nhuộm màu. Headline serif (Marlin) kết hợp với UI sans-serif sạch sẽ (Inter) tạo ra sự căng thẳng giữa editorial và product, trong khi chính trình duyệt — chứ không phải ảnh chụp — mới là nhân vật chính, được thể hiện dưới dạng mockup tương tác lớn với sidebar spaces, thư mục và inline chat. Bảng màu chủ yếu là giấy và mực; màu violet mang bầu không khí hơn là màu tương tác, và các đường chia lượn sóng đảm nhận phần lớn công việc tạo cá tính mà shadow và gradient thường làm trên các trang web khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Iris | `#3139fb` | `--color-electric-iris` | Nền section full-bleed, bầu không khí thương hiệu, sidebar chrome bên trong browser mockup — một màu violet bão hòa cao tràn ngập toàn bộ dải màu, khiến trang đọc như color blocking kiểu editorial, không phải trạng thái UI | | Deep Violet | `#2702c2` | `--color-deep-violet` | Lớp accent tối hơn bên trong các section violet, trạng thái pressed hoặc active trong màu thương hiệu, heading phụ trên nền violet — làm sâu thêm iris mà không chuyển sắc | | Oat | `#fffadd` | `--color-oat` | Canvas trang chính và nền gradient hero — màu kem ấm đọc như giấy chứ không phải màn hình trắng, bề mặt mặc định cho mọi thứ khác | | Linen | `#fffcec` | `--color-linen` | Bề mặt ấm thứ cấp cho card, nền nav và footer — ấm hơn Oat nửa bước, dùng khi một lớp cần nổi lên khỏi canvas mà không chuyển sang trắng |

# Gumroad — Style Reference > Đồng xu hồng trên sketchbook màu kem. Nền canvas ấm áp, type hình học mực đen, và một linh vật đồng xu hồng neon đóng dấu khắp mọi trang như một sticker trên quyển vở. **Theme:** light Gumroad là một canvas màu kem ấm được đóng dấu bằng một motif đồng xu hồng vẽ tay duy nhất và một sans-serif hình học mực đen. Nền #f4f4f0 trắng kem gợi cảm giác như trang sketchbook; chữ đen và button đen đặc nổi bật trên nền với độ nặng như một nét bút dạ. Các bề mặt phẳng — thẻ trắng nằm trên canvas ấm với viền xám mảnh thay vì đổ bóng. Màu bão hòa xuất hiện ở những điểm nhấn nhỏ, có chủ đích: linh vật đồng xu hồng, các mảng màu vàng và xanh lá dùng làm marker màu nội dòng, và đôi khi là highlight đỏ. Giọng điệu thân mật, ưu tiên người sáng tạo, chống doanh nghiệp — typography dày, tracking âm trên display sizes, và type scale kéo dài từ 14px body đến 192px hero type, tất cả từ một font family duy nhất. Các component có hình dạng tiện ích (4px radii trên input và button, 16–24px trên card lớn hơn) và không bao giờ được trang trí bằng gradient hay glow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas Cream | `#f4f4f0` | `--color-canvas-cream` | Nền trang, input fills, và lớp nền ấm mà mọi bề mặt khác đặt lên | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card và product-tile nâng lên trên canvas kem | | 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 | | Graphite | `#242423` | `--color-graphite` | Chữ phụ và input borders; đọc như màu đen đã làm mềm khi màu đen thật quá gắt trên nền kem |

# Jonas Pelzer — Style Reference > Tờ broadsheet văn học trên giấy trắng. Một headline display duy nhất weight-400 tạo nên giọng điệu — chữ roman và italic đan xen trong cùng một hơi thở, toàn bộ type dùng chung một weight, và một lượng mực tím được tiết chế tạo điểm nhấn cho một trang gần như không màu. **Theme:** light Một portfolio editorial văn học được thể hiện như một tờ broadsheet typographic trên giấy trắng. Trang web mang phong cách một spread tạp chí: một headline display weight-400 duy nhất pha trộn roman và italic để tạo nhịp điệu mà không cần dùng bold, mỗi đoạn văn đều có vị trí xứng đáng, và toàn bộ hệ thống màu sắc được rút gọn chỉ còn một màu mực tím duy nhất. Màu tím thương hiệu (#3502ff) được sử dụng có chừng mực — chỉ xuất hiện ở active nav pill, accent border active, và một deep text link duy nhất — trong khi một lớp lavender nhạt hơn (#c2b3ff) tạo sự đa dạng bề mặt trên các accent card. Khoảng cách được nén chặt (compact) và grid có tính chủ kiến (opinionated), với border-radius góc cứng 12px ở mọi nơi và hầu như không có độ sâu đổ bóng. Hệ thống thị giác đề cao sự tiết chế: khoảng trống âm, type weight và một màu nhấn duy nhất làm công việc mà màu sắc, độ cao và trang trí thường làm ở nơi khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nền nav | | Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, border dạng hairline, divider, list separator | | Mist Gray | `#d4d6dd` | `--color-mist-gray` | Border phụ, đường viền card, divider không hoạt động | | Violet Ink | `#3502ff` | `--color-violet-ink` | Violet outline accent cho tag, divider và cạnh UI đang focus. Không nâng cấp nó thành màu CTA chính |

# Laura Monin — Style Reference > editorial gallery wall, white marble, ink stamp **Theme:** light Laura Monin là một portfolio thời trang editorial được xây dựng trên sự kiềm chế màu sắc tuyệt đối: canvas trắng tinh, mực đen, và một display serif tùy chỉnh duy nhất mang toàn bộ giọng điệu thương hiệu. Bố cục hoạt động như một mood board được tuyển chọn — ảnh chụp phân tán bất đối xứng trên khoảng trống âm bản rộng rãi thay vì căn chỉnh theo grid thông thường, với overlay caption hoạt động như những nhãn dán thì thầm chứ không phải navigation. Typography đảm nhận toàn bộ hệ thống phân cấp: display serif khổng lồ ở 58–158px chiếm vị trí trung tâm, trong khi Neue Haas Grotesk ở 12–22px đóng vai trò là giàn giáo lặng lẽ cho navigation, metadata và văn bản hỗ trợ. Không có shadow, không có bo góc, không có gradient, không có màu sắc — hệ thống đạt được sự sang trọng thông qua những gì nó loại bỏ, chứ không phải thêm vào. Mọi element phải có cảm giác như được đặt bằng tay trên một bức tường gallery: chính xác, thong thả, và không bao giờ lấp đầy khung hình nhiều hơn mức cần thiết. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, viền ảnh, nền nav — tông bề mặt duy nhất trong hệ thống | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, mọi đường viền outline trên ảnh và nav, list markers — mỏ neo màu sắc duy nhất | ## Tokens — Typography

# Contrast — Style Reference > tín hiệu neon coral trên nền trắng tĩnh lặng **Theme:** light Contrast vận hành trên nền trắng tĩnh lặng, bị ngắt quãng bởi một tín hiệu coral rực rỡ duy nhất. Toàn bộ hệ thống thị giác được kiềm chế có chủ đích — khoảng trắng rộng rãi, bề mặt đơn sắc, geometric type dày — để một CTA đỏ-ấm duy nhất có thể đảm nhận toàn bộ nhiệm vụ tạo cảm xúc. Các card nổi trên những đổ bóng gần như vô hình (alpha 0.06), bo góc rộng rãi và thiên về pill, và accent coral lặp lại như một hệ thống: button, border, icon, badge, mảng màu trang trí. Chữ đen gần như thuần (#0e0f10) thay vì xám làm mềm, mang lại cho headline trọng lượng và uy lực mà phần chrome mỏng manh kia sẽ thiếu nếu không có. Layout xen kẽ giữa hero stack full-bleed canh giữa và lưới card nhiều cột dày đặc, với một floating webinar widget cố định ở góc dưới-bên trái. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Signal Coral | `#ff5065` | `--color-signal-coral` | Primary action buttons, active links, icon accents, decorative badges — yếu tố màu sắc duy nhất được phép lấp đầy không gian | | Ember Wash | `#ff7a59` | `--color-ember-wash` | Accent ấm phụ cho icon borders, decorative fills và illustration strokes khi coral cần một sắc độ nhẹ hơn đi kèm | | Persimmon | `#ff5c35` | `--color-persimmon` | Accent ấm đậm nhất cho icon borders, decorative fills và hero illustration strokes | | Coral Mist | `#ffe9eb` | `--color-coral-mist` | Mảng màu hồng nhạt mềm mại cho accent backgrounds, hover surfaces và decorative bands |

# dope.security — Style Reference > Dusk terminal at the edge of orbit **Theme:** dark Dope Security operates as a dark, cinematic interface — a near-black canvas (#090909) punctuated by vivid violet (#af50ff) and atmospheric photography of violet-pink cosmic skies. Typography carries the brand's rebellious confidence: a geometric sans (Whyte Inktrap) at extreme sizes pairs with an editorial italic serif (GrandSlang) for emotional moments like 'Your new', while a monospaced display variant creates stenciled, airport-board aesthetics for feature lists. Surfaces are nearly flat with hairline borders; the only elevation comes from glassmorphic panels and vivid gradient cards. Color appears sparingly but decisively — one violet accent for interactive moments, gradient washes for comparison blocks, and the rest is pure contrast. The visual rhythm alternates between vast negative space and dense, oversized type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#090909` | `--color-void` | Page canvas, section backgrounds — the base dark that makes all color vibrate | | Bone White | `#f7f9fa` | `--color-bone-white` | Primary text, icon fills, hairline borders — used at scale across headings, cards, and nav | | Ash | `#f0f0f0` | `--color-ash` | Heading text and decorative type outlines, large-scale display borders | | Slate | `#6b6b6b` | `--color-slate` | Muted borders, secondary icon strokes, subdued structural lines |

# Amie — Style Reference > Sunlit productivity dashboard — một workspace nơi mọi thứ đều trắng, phẳng và có chủ đích, với một công tắc xanh điện duy nhất để kích hoạt mọi thứ. **Theme:** light Amie mang cảm giác như một productivity workspace tràn ngập ánh sáng — bề mặt trắng sáng, gần như mang tính lâm sàng trong sự tiết chế, được điểm xuyết bằng một màu xanh da trời điện (#11a8ff) chỉ xuất hiện khi cần hành động. Trang web gần như hoàn toàn trung tính — 98% achromatic — khiến mọi khoảnh khắc có màu sắc (điểm nhấn amber trên 'without a bot', icon lịch xanh lá, tag tím) đều có chủ đích thay vì chỉ để trang trí. Inter với letter-spacing âm dày (-0.025em ở kích thước display) nén các headline thành những khối tự tin mà không cần đến weight cực đoan — weight 700 ở 56px đọc rất dứt khoát nhưng không hung hăng. Cards sử dụng border 1px siêu mảnh qua các lớp shadow gần như vô hình thay vì stroke nhìn thấy được, tạo cho các product UI previews cảm giác như đang nổi nhẹ trên trang. Nút ghost 'Request a demo' bên cạnh CTA đã tô màu tạo ra một cấu trúc lựa chọn theo cặp xuất hiện xuyên suốt trang. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, button fills cho các hành động phụ | | Fog Surface | `#fafafa` | `--color-fog-surface` | Nền card thay thế, phân biệt section nhẹ | | Ash Border | `#cdcdcd` | `--color-ash-border` | Tất cả border UI — input, card, divider, icon rings — ở dạng 1px solid | | Stone Divider | `#ebebeb` | `--color-stone-divider` | Nền tag (pill highlight 'Within 47 seconds:'), dải nền section |

# Solana — Style Reference > neon aurora in a midnight void — flowing magenta and violet ribbons suspended against pure black **Theme:** dark Solana operates in a midnight void: a near-black canvas punctuated by flowing neon aurora graphics in violet, magenta, and green. The system is deliberately monochromatic — white and warm-gray typography carry all communication weight, while the only chromatic presence comes from the brand's signature flowing wave illustrations, never from interface chrome. Components are whisper-thin: 1px hairline borders, pill-shaped controls at 9999px radius, and cards that float on barely-distinguishable dark surfaces. The custom Diatype typeface, with its tightly negative letter-spacing that tightens further at display sizes, gives every headline a compressed, futuristic confidence. Buttons achieve a subtle 3D embossed effect through a layered shadow stack that pairs a soft drop shadow with inset white highlights — the chrome looks pressed into the surface rather than floating above it. Density is comfortable, never packed; the page breathes with generous section gaps and lets the aurora graphics do the visual heavy lifting. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Page canvas, deepest background layer — the void against which everything else floats | | Obsidian | `#0d0c11` | `--color-obsidian` | Card surfaces, elevated panels — a barely-perceptible warm purple-black lift from the canvas | | Charcoal Press | `#121212` | `--color-charcoal-press` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Onyx | `#12151d` | `--color-onyx` | Navigation bar background, sticky header surface |

# Moving Parts — Style Reference > Electric blueprint on matte paper — a monochrome architect's sheet that learned to glow blue. Pure black, pure white, one bolt of #0000ff. **Theme:** mixed Moving Parts is a high-contrast tool for builders: matte white canvas, pure black ink, and one electric blue (#0000ff) that does all the chromatic work — filled buttons, borders, active states, and the product surfaces themselves. The type system is deliberately polyglot: Unica77 carries the voice everywhere (with eight stylistic alternates engaged), Whyte Semi-Mono handles UI chrome and labels, and display moments pivot to extreme display faces like Druk XXCondensed at 195–248px and Fraunces serifs at 100-weight thin. Hierarchy comes from font selection and weight, not size alone. Cards float with very large radii (76–106px), shadows are rare and heavy (rgba(0,0,0,0.3) 15px 20px 30px), and yellow (#fffc52) appears as a flat accent surface to break sections — never as text or decorative gradient. A single conic-gradient sphere anchors the hero as the only ornamental flourish; everything else stays industrial and quiet. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Ink | `#0000ff` | `--color-electric-ink` | Primary CTA fill, active nav, product surface backgrounds, chromatic borders — the only saturated color that carries meaning | | Voltage Green | `#00d37c` | `--color-voltage-green` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content | | Onyx | `#000000` | `--color-onyx` | Body text, headings, hairline borders, icon strokes — the dominant ink color | | Pure | `#ffffff` | `--color-pure` | Page canvas, card surface, button text, dark-section contrast text |

# Aevi Wellness — Style Reference > Nordic apothecary, weightless type. A muted slate-blue accent interrupts an otherwise achromatic, light-as-air editorial layout where product photography overlaps hairline-bordered cards on warm white. **Theme:** light Aevi Wellness reads like a Nordic editorial spread translated into e-commerce: generous product photography overlapping a warm off-white canvas, whisper-weight typography that gives headlines room to breathe, and a single muted slate-blue accent that appears only where the brand needs to signal action or section shift. The palette is almost entirely achromatic — warm near-black text (#231f20), pure white surfaces, and a powder-blue band (#d5e0ea) that structures the page into editorial chapters. Components are barely-there: ultra-thin hairline borders, 2px corner radii on most elements, and 60px pill buttons for primary actions. The overall feel is clinical-luxury — the products themselves are the visual subject, and the interface stays out of their way. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Powder Blue | `#d5e0ea` | `--color-powder-blue` | Section bands, card borders, decorative dividers — the brand's secondary canvas, used to segment the page into editorial chapters without introducing contrast | | Slate Bloom | `#a3bfdb` | `--color-slate-bloom` | Primary action buttons, active states — the single chromatic accent; its low saturation keeps it feeling clinical rather than commercial | | Warm Ink | `#231f20` | `--color-warm-ink` | Primary text, hairline borders, card outlines, icon strokes — near-black with a warm undertone that softens the high-contrast text against white | | True Black | `#000000` | `--color-true-black` | Icon fills, occasional heavy borders — used sparingly for graphical weight when maximum contrast is needed |

# Warp — Style Reference > obsidian command center — một IDE cockpit dành cho developer, nơi ánh sáng duy nhất là một tia phosphor tím trên nền đen mờ, và typography mang mọi tín hiệu **Theme:** dark Warp nói bằng ngôn ngữ của một terminal cao cấp: một canvas đen obsidian nơi hầu như mọi bề mặt đều không màu, typography đảm nhiệm vai trò chính, và một tia tím nhẹ (#cbb0f7) hoạt động như dấu câu chức năng thay vì trang trí. Hệ thống được xây dựng cho mật độ gọn — tracking chặt, cỡ body nhỏ, và khoảng cách hẹp tạo cảm giác tự tin như một IDE, tôn trọng thời gian và diện tích màn hình của người dùng. Custom typeface Matter với negative tracking cực đoan ở cỡ display (lên đến -0.04em ở 56px) tạo ra những headline có cảm giác được kỹ thuật hóa thay vì thiết kế, trong khi màu trắng ấm (#faf9f6) thay vì trắng tinh khiết giữ cho bề mặt tối không bị lạnh lẽo. Ngôn ngữ button được định nghĩa bằng hình pill (33-50px radius) trên nền trung tính — không có chromatic CTA, vì vậy thứ bậc hành động chỉ đến từ độ tương phản giữa filled và ghost. Các bề mặt nâng lên qua các bước xám tinh tế (#121212 → #1e1e1d → #333333) thay vì đổ bóng kịch tính, tạo ấn tượng về các panel phẳng xếp chồng trong không gian âm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang chính, nền nav, cửa sổ preview terminal — khoảng không mà mọi bề mặt khác nổi trên đó | | Graphite | `#121212` | `--color-graphite` | Bề mặt trang thứ cấp, nền body phía sau hero section, footer base | | Onyx | `#1e1e1d` | `--color-onyx` | Bề mặt card và panel nâng cao — bước đầu tiên từ canvas cho product cards và testimonials | | Carbon | `#333333` | `--color-carbon` | Bề mặt trung cấp cho nested UI, secondary buttons, và nền tag/badge |