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

# Metaview — Style Reference > Bioluminescent control room — a near-black instrument panel lit by a single living mint signal. **Theme:** dark Metaview is a dark-mode AI product surface — a near-black canvas tinted with the faintest green, typed in a geometric neo-grotesque at whisper-light weight, and punctuated by a single vivid mint that acts as a live signal for action and selection. The interface reads like an instrument panel for a recruiting agent: deep, controlled, and precise, with green used sparingly as a switch-on indicator for the primary CTA, active tabs, and a few brand glyphs. Components stay flat and low-elevation; the page gains its depth from a soft radial green bloom behind product mockups, not from drop shadows. Typography is airy and tight-tracked, and the only non-monochrome voice is that electric mint — it is the brand's heartbeat. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Deep Forest | `#000a06` | `--color-deep-forest` | Page background, hero canvas, footer — near-black with a barely-perceptible green undertone that ties the surface to the mint accent | | Pine Bark | `#0a1a14` | `--color-pine-bark` | Card and secondary surface background — sits one step above the canvas, used for product mockup containers, nested panels, and dark secondary buttons | | Charcoal | `#161818` | `--color-charcoal` | Elevated card surface, modals, and overlaid containers — used when a component must visibly float above the Pine Bark layer | | Abyssal Indigo | `#01051b` | `--color-abyssal-indigo` | Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis. |

# Playful — Style Reference > Cuốn sổ tay dưới ánh nắng với bút highlighter hồng neon. Một bề mặt sản phẩm editorial thân thiện, in trên giấy kem ấm, nơi một điểm nhấn magenta rực rỡ duy nhất tạo điểm nhấn cho toàn bộ thế giới monochrome xám ấm. **Theme:** light Playful mang phong cách một xưởng thủ công ấm áp, in trên giấy kem. Toàn bộ bề mặt nằm trên nền oat canvas màu cát (#f6f2ee) thay vì trắng lạnh, mang đến cho mọi màn hình cảm giác ấm áp, gần gũi như giấy. Một màu hot-pink duy nhất (#ff2e95) đảm nhận toàn bộ công việc tạo màu sắc — CTA, link, logo mark — trên nền mực gần đen (#111/#000), giúp màn hình luôn yên tĩnh về mặt thị giác cho đến khi cần một hành động. Display type được thiết kế đậm và italic ở 70–79px, thiên về năng lượng poster editorial thay vì tính trung tính của SaaS. Các component lớn và mềm mại: card 44px trên pill-shaped buttons, đổ bóng khuếch tán sâu, khoảng thở rộng rãi. Nhịp điệu tổng thể là một tuyên bố typography đậm mỗi section, bao quanh bởi khoảng trắng ấm yên tĩnh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Hot Magenta | `#ff2e95` | `--color-hot-magenta` | Primary CTA fill, logo mark, link color, accent strokes — giọng màu duy nhất trong hệ thống, dùng có chừng mực để báo hiệu hành động | | Ink Black | `#000000` | `--color-ink-black` | Heading text chính, button text, border đậm, navigation bar background | | Oat Canvas | `#f6f2ee` | `--color-oat-canvas` | Page background, large surface fills — màu kem ấm thay thế trắng lạnh trong toàn bộ hệ thống | | Soft Ink | `#111111` | `--color-soft-ink` | Body text và heading trên bề mặt sáng, card surface background cho phần tử tối |

# Home — Style Reference > Khu rừng bạch đàn ngập nắng trên nền giấy ấm — thiết kế nằm trên một trang giấy cream nơi chữ đen mực và một điểm nhấn vàng điện duy nhất làm tất cả công việc kể chuyện. **Theme:** light Ngôn ngữ thiết kế của Airtree mang phong cách một trang editorial ngập nắng trên nền giấy ấm: một canvas cream (#f7f6e3) nâng đỡ chữ than đậm tự tin, với một điểm nhấn vàng điện duy nhất — đánh dấu chứ không trang trí. Prody display serif cỡ 131px là giọng nói lớn nhất của thương hiệu — mọi thứ còn lại là khoảng trắng có chủ đích và một grotesque sạch sẽ. Các component giữ cảm giác nhẹ và giống giấy: card bo tròn 37px, ghost controls dạng outline, pill-shaped CTA màu vàng, và hairline borders định hình cấu trúc mà không tạo trọng lượng. Hệ thống tránh elevation nặng, gradient, hoặc các trường màu bão hòa; nó dựa vào khoảng cách rộng rãi, bán kính lớn, và bảng màu hai tông yên tĩnh để ảnh chụp và lời trích dẫn của founder mang trọng lượng cảm xúc. Màu sắc được phân bổ tiết kiệm: một trang cream, chữ đen mực, và một tia vàng — không có gradient trang trí, không có branding đa sắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Parchment Cream | `#f7f6e3` | `--color-parchment-cream` | Canvas trang, bề mặt card, bordered containers — cream gần xám làm ấm toàn bộ giao diện và mang lại cho toàn bộ site cảm giác giấy yên tĩnh; Outlined/ghost action borders, pill outlines, và interactive rings hòa vào tông canvas — chỉ hiện rõ khi đặt trên overlay tối | | Ink Black | `#262d29` | `--color-ink-black` | Text chính, navigation, body copy, card borders, icon strokes — màu cấu trúc duy nhất, dùng cho hairline definition và mọi nội dung có thể đọc | | Electric Lemon | `#ffff48` | `--color-electric-lemon` | Filled CTA buttons, active states, standout badges — một màu vàng bão hòa duy nhất phá vỡ sự yên tĩnh cream/ink để báo hiệu hành động; tỷ lệ tương phản với #262d29 là 13.2:1 AAA |

# Ingmar Coenen — Style Reference > Oversized masthead trên nền trắng — một chữ cái hình học 295px đặt trên một khoảng trắng rộng lớn, với chú thích serif nhỏ và navigation hình pill nổi bên dưới. **Theme:** light Portfolio của Ingmar Coenen vận hành như một bức tường gallery biên tập: một wordmark Megazoid khổng lồ chiếm phần đầu trang như masthead tạp chí, sau đó hệ thống lùi vào khoảng trắng tối giản và UI Swiss-type nhỏ xíu. Toàn bộ bảng màu là nhị phân — đen tuyền trên trắng tinh với một màu xám ấm duy nhất cho ghost controls — bởi vì bản thân tác phẩm phải mang màu sắc. Typography chính là thương hiệu: một display face hình học 295px (Megazoid) cho heading hoành tráng, ITC Garamond Light Condensed cho body copy serif mang chất suy tư, và Neue Haas Unica Pro cỡ 12-13px với negative tracking cho toàn bộ interface chrome. Các component tối giản và bo tròn — pill buttons 100px, cards 12px — tạo ra sự căng thẳng giữa giọng display nặng và bán kính bo tròn mềm mại, gần như hoạt hình. Mật độ dày đặc ở cấp UI (khoảng cách 4-14px) nhưng thoáng đãng ở layout (khoảng thở section 80-120px). ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Primary text, logo wordmark, filled pill buttons, hairline borders — mực cấu trúc giữ mọi element lại với nhau | | Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text trên nền tối — tờ giấy mà mọi thứ nằm trên đó | | Charcoal Slate | `#3a4042` | `--color-charcoal-slate` | Secondary text, link color, body copy, subtle borders — màu đen hơi mềm để tạo hierarchy dưới primary text | | Pale Stone | `#f2f2f2` | `--color-pale-stone` | Ghost button và segmented toggle background — surface không trắng duy nhất, dùng cho inactive controls như Grid/List switcher |

# Concrete Club Studio — Style Reference > zine biên tập phai màu nắng trên giấy hồng phấn — bố cục là một trang in, không phải màn hình **Theme:** mixed Concrete Club là một zine biên tập ấm áp trên nền hồng phấn: wordmark serif cỡ lớn chiếm ưu thế trên các mảng hồng và trắng ngà rộng rãi, các thẻ sans-serif viết hoa nhỏ dẫn dắt ánh nhìn, và một mảng mực cam-đỏ ấm duy nhất thấm xuyên suốt bố cục như điểm nhấn màu duy nhất. Các section xen kẽ giữa hồng phấn, canvas trắng ngà và than đậm — mỗi section hoạt động như một trang in riêng biệt được đóng thành một ấn phẩm. Typography chính là giao diện: một humanist serif đặc trưng (DaVinci) đảm nhận toàn bộ trọng lượng display, trong khi Helvetica Neue Light thì thầm ở tỷ lệ body và nav. Các minh họa đường nét vẽ tay phá vỡ grid ở lề phải của wordmark, làm mềm đi uy quyền typography đậm nét bằng nét duyên dáng lo-fi. Mọi thứ khác đều tiết chế — không button, không card, không shadow — trang web hoạt động như một cuốn sách nghệ thuật in, không phải một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Ink | `#d9462b` | `--color-ember-ink` | Màu wordmark hero, nét accent, và là văn bản màu duy nhất — một tông cam-đỏ ấm mang cảm giác mực in tay trên nền hồng. Dùng trên display headline và chi tiết minh họa chọn lọc | | Dusty Rose | `#e296bb` | `--color-dusty-rose` | Nền section chính — một tông hồng bão hòa thấp, ấm áp, làm nền cho hero band và các panel nội dung full-width. Thiết lập tông màu biên tập của site | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, tô màu wordmark trên section sáng, nét vẽ minh họa và đường viền. Màu trung tính chủ lực | | Charcoal | `#212121` | `--color-charcoal` | Bề mặt section tối — dùng cho các panel full-bleed đảo ngược trang thành các spread biên tập trắng trên nền đen |

# Legora — Style Reference > Editorial law journal on warm cream **Theme:** light Legora reads like an editorial legal journal printed on warm cream paper: a near-monochrome canvas of ivory and ink, whisper-weight serif headlines at 88px, and a body set in a humanist grotesk that feels more like column text than UI copy. The brand signals authority through restraint — no chromatic accents, no decorative gradients, no colored CTAs — instead relying on a single solid-black button as the only piece of high-contrast furniture on otherwise quiet pages. Surfaces are separated by the thinnest possible rules and faint tinted washes (a barely-there sage, a barely-there slate-blue) rather than shadows or elevation. Photography arrives as one cinematic, full-bleed still per page; everything else is typographic and product-screenshot driven, with product surfaces rendered in muted pastel blocks that act as visual breathing room between dense legal copy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment | `#fefefc` | `--color-parchment` | Page canvas, card surfaces, light-section backgrounds — a warm ivory that reads as paper, not screen | | Ink | `#000000` | `--color-ink` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Graphite | `#0a0a0a` | `--color-graphite` | Body text, heading strokes, dark surface accents — near-black used wherever ink is too harsh | | Smoke | `#6b6b6b` | `--color-smoke` | Secondary body copy, subdued borders, caption-level metadata |

# Tana — Style Reference > Midnight gallery, single lime beacon — a dark editorial spread where one pale-green button is the only color on the entire page. **Theme:** dark Tana is a midnight editorial: pure black canvas, one pale-lime signal, nothing else. The entire interface is monochrome — warm off-white type, a quiet scale of grays for hairlines and secondary text — with a single chromatic accent (#e1f0bd) reserved exclusively for the primary action. Headlines come from a custom high-contrast serif (tanaClassic) set tight at negative tracking, which creates a magazine-spread authority against the void. Category labels are pentagon-shaped tags (pointed left edge, flat right) that orbit around imagery like marginalia, turning product features into a printed index. Layout is centered and generous, with editorial photography used sparingly as a single warm focal point in an otherwise typographic page. Everything else is restraint. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, section backgrounds, card surfaces — pure black, not near-black, makes the off-white type and the lime accent feel luminous | | Charcoal | `#0e0e0e` | `--color-charcoal` | Elevated surface layer, subtle borders, secondary backgrounds — one step off the void for depth without breaking the dark mode | | Bone | `#f0eded` | `--color-bone` | Primary text, pentagon tag fills, announcement bar background — slightly warm off-white, softer than pure white against deep black | | Ash | `#b3b3b3` | `--color-ash` | Secondary body text, muted helper copy, list dividers — the dominant mid-gray for all non-primary prose |

# Vibrants — Style Reference > Skyborne apothecary trên nền đá cẩm thạch trắng — mực xanh navy đậm là cối giã thuốc, quang phổ cầu vồng là liều thuốc. **Theme:** light Vibrants mang phong cách quầy wellness sáng sủa, mang hơi hướng lâm sàng: nền trắng, mực xanh navy đậm làm nhiệm vụ chính cho chữ và primary buttons, và một dải cầu vồng full-spectrum chỉ xuất hiện trên bề mặt sản phẩm. Ngữ pháp thị giác có chủ đích là yên tĩnh bên ngoài hero và product imagery — gần như cấu trúc đơn sắc với một điểm xanh lá tươi duy nhất dùng để nhấn mạnh khuyến mãi, badge và xác nhận. Headlines sử dụng custom serif nghiêng về editorial và đáng tin cậy, trong khi body copy và UI dùng geometric sans-serif mang cảm giác chính xác như dược phẩm. Các component phẳng với hairline borders, bo góc 8px mềm mại, và elevation tối thiểu; chiều sâu đến từ độ tương phản màu sắc và khoảng trắng rộng rãi thay vì đổ bóng. Hero gradient xanh trời và product mockup nổi tạo tông màu điềm tĩnh, lạc quan mà phần còn lại của trang duy trì qua khoảng cách thoáng đãng và typography tiết chế. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Deep Navy | `#021422` | `--color-deep-navy` | Primary text, primary filled buttons, nav backgrounds, heading ink, footer surface — gần như đen nhưng đọc như mực chứ không phải đen tuyền, neo trang trong khi vẫn đủ mềm để kết hợp với trắng | | Vibrant Green | `#00852e` | `--color-vibrant-green` | Sale badges, discount pills, success indicators, điểm nhấn dùng một lần — sắc thái rực rỡ duy nhất chạm vào chrome; mọi bề mặt màu sắc khác đều thuộc về sản phẩm | | Midnight Navy | `#001f38` | `--color-midnight-navy` | Nhấn mạnh secondary text, card border accent trên hero product, phân cấp heading ngay dưới Deep Navy — xanh lam hơn một chút để tạo biến thể tông màu mà không rời khỏi họ | | Sky Wash | `#91c3ff` | `--color-sky-wash` | Outlined button borders, icon accents, link highlights — xanh lam nhẹ thì thầm chứ không la hét, dùng cho ghost controls vẫn cần định nghĩa màu sắc |

# Convex — Style Reference > Sổ tay kỹ thuật giấy kem **Theme:** mixed Convex mang đến một không gian làm việc kỹ thuật ấm áp trên nền giấy kem: canvas beige không bão hòa (#f6f6f6 đến #f7f1ff) làm nền cho cả giao diện sản phẩm lẫn ảnh chụp màn hình sản phẩm, trong khi các bề mặt code tối (#141414, #292929) hiển thị TypeScript và bản xem trước dashboard với dấu câu syntax highlight màu hồng, tím, xanh lá và vàng. GT America grotesque ở các weight rất nhẹ tạo nên một giọng văn kỹ thuật editorial nhẹ nhàng, điềm tĩnh — negative tracking dày trên headline 40-56px nén wordmark thành các khối chữ tự tin, gọn gàng. Các component vuông vức và nhỏ gọn: border-radius 8-12px, viền than mỏng, padding tối thiểu tạo ra mật độ giống bản thiết kế (blueprint), đọc giống sổ tay developer hơn là trang web marketing. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#141414` | `--color-ink-black` | Văn bản chính, bề mặt card tối, nền code editor, filled neutral buttons — màu tối chủ đạo trên toàn site | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt sáng hỗ trợ cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính | | Cream Surface | `#f6f6f6` | `--color-cream-surface` | Canvas trang và nền section — màu trắng ấm giúp Convex khác biệt với SaaS trắng lạnh | | Lilac Wash | `#f7f1ff` | `--color-lilac-wash` | Panel nền pha màu nhẹ, vùng icon wash, phân cách section mềm |

# San Rita — Style Reference > field guide vùng núi cao trên giấy sage **Theme:** mixed San Rita mang phong cách một cuốn nhật ký thực địa cho thương hiệu giày outdoor: ảnh phong cảnh rộng lớn, một điểm nhấn mint nhạt duy nhất nổi bật như bút highlight trên giấy topo, và một display face condensed tùy chỉnh biến các section opener thành những tuyên bố chắn ngang khung cảnh. Nhịp điệu thị giác xen kẽ giữa ảnh full-bleed sáng và các dải tối gần như đen (#161b13) nơi những bức ảnh kiểu Polaroid nghiêng rải rác khắp canvas như một cuốn nhật ký câu cá ruồi. Typography mang tính thực dụng và nhỏ cho mọi thứ ngoại trừ các khoảnh khắc display — mono caps xử lý UI chrome trong khi một dòng display khổng lồ 300px+ mang bản sắc của từng section. Các component vẫn phẳng và không trang trí: button outline mảnh, không đổ bóng, không bo góc để làm mềm các cạnh. Toàn bộ hệ thống giống như bản đồ địa hình kết hợp với tạp chí phiêu lưu — tự tin, chất outdoor, và cố tình thô mộc thay vì SaaS bóng bẩy. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Highlighter Mint | `#e2ffcc` | `--color-highlighter-mint` | Điểm nhấn thương hiệu chính — display text, nav links, button labels, icon fills. Màu đặc trưng; đọc như bút highlight trên bản đồ topo | | Sage Stone | `#84907f` | `--color-sage-stone` | Điểm nhấn phụ trung tính — nền mờ nhẹ, UI elements nhẹ nhàng khi Highlighter Mint quá chói | | Carbon Ink | `#161b13` | `--color-carbon-ink` | Nền section tối — gần như đen với sắc xanh lá cực nhẹ, neo các dải tối của trang | | Forest Charcoal | `#2d3329` | `--color-forest-charcoal` | Text và border tối vừa trên nền sáng — mềm hơn đen thuần, giữ ấm áp xanh lá nhất quán |

# Analogue — Style Reference > Đường hầm ánh sáng xuyên qua khoảng không **Theme:** dark Analogue hoạt động như một khoảng không điện ảnh với một điểm sáng tập trung duy nhất: chữ trắng trên nền đen gần như tuyệt đối, chỉ bị ngắt quãng bởi một tia sáng xanh-trắng từ ảnh chụp. Hệ thống hoàn toàn achromatic — không có điểm nhấn màu sắc, không bóng đổ, không gradient trang trí — vì vậy mọi cảm xúc phải đến từ typography, nhiếp ảnh và khoảng trống âm bản. Type nằm ở khoảng body 11–18px nén chặt với tracking siêu khít (-0.05em ở display) và line-height điện ảnh siêu chặt (1.00–1.05 ở display 40–60px), khiến headline có cảm giác như tiêu đề phim hơn là heading web. Font LCD dot xuất hiện như một điểm nhấn kỹ thuật số hiếm hoi — dấu câu kỹ thuật số trong một hệ thống nhân văn. Navigation là một pill nổi mờ, buttons là outline hoặc ghost achromatic, và kiến trúc trang (border, surface, divider) phẳng đến mức biến mất, buộc nhiếp ảnh và type phải đảm nhận mọi công việc. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Ink | `#000000` | `--color-ink` | Đen nguyên chất — neo cấu trúc, dùng cho hairline, border stroke và lớp surface sâu nhất bên dưới hình ảnh | | Graphite | `#1c1c1c` | `--color-graphite` | Văn bản chính và foreground UI chủ đạo — body copy, heading, và tông gần đen làm mềm màu đen nguyên chất cho các đoạn type dài | | Paper | `#ffffff` | `--color-paper` | Canvas trang chính và bề mặt card trắng | | Mist | `#ededed` | `--color-mist` | Lớp phủ surface nhẹ cho card và panel nâng cao — bước nhẹ nhàng nhất từ Paper, dùng khi panel cần được nhận biết mà không gây chú ý |

# 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 |

# NCDA — Style Reference > Architectural monograph trong không gian âm. Wordmark NCDA ở 62px bị cắt bởi mép viewport, biến logo thành một bức tường. **Theme:** mixed NCDA hoạt động như một monograph in ấn được chuyển lên web: canvas trắng như giấy, một mực gần-đen duy nhất, không có tạp âm màu sắc, và typography đảm nhận công việc cấu trúc mà màu sắc thường làm. Điểm nhấn đặc trưng chính là wordmark — được hiển thị ở tỷ lệ kiến trúc và bị cắt bởi mép viewport, biến brand mark thành một công cụ layout thay vì một logo. Navigation được tinh giản đến mức tối thiểu: một đồng hồ hai thành phố trực tiếp ở góc, một trigger 'Menu' duy nhất, và một khối mô tả màu xám gọn gàng. Hệ thống xen kẽ giữa không gian trắng rộng lớn và các dải đen full-bleed không thường xuyên, tạo ra nhịp điệu của một catalogue triển lãm. Các component thưa thớt và không trang trí — không shadow, không border-radius, không button — chỉ có hairline rules, margin rộng rãi, và typography thì thầm qua negative tracking dày đặc ở kích thước display và positive tracking nhẹ ở kích thước caption. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Onyx | `#191919` | `--color-onyx` | Text chính, hairline borders, dải nền tối full-bleed — mực gần-đen của hệ thống | | Pure Black | `#000000` | `--color-pure-black` | Text phụ, border sâu nhất, overlay ảnh khi cần độ tương phản tối đa trên nền trắng | | Paper | `#ffffff` | `--color-paper` | Canvas trang, nền surface, text inverse trên dải tối | | Concrete | `#808080` | `--color-concrete` | Text mô tả phụ, border link mờ, meta-information nhẹ — màu xám của footnote và caption |

# VALIENTE BRANDS — Style Reference > Tín hiệu khói trên nền đất sét phơi nắng. Một mảng đỏ cam khẩn cấp duy nhất gào lên giữa cánh đồng peach mờ ấm áp, được giữ chặt bởi một neo-grotesque nguyên khối và hầu như không có gì khác. **Theme:** light Valiente Brands là một broadcast brutalist — một tín hiệu chromatic đơn lẻ (đỏ cam rực rỡ) bắn ra trên nền canvas đất sét ấm nắng, hầu như không có bất kỳ xử lý bề mặt UI nào. Trang web là một scroll dọc với type cỡ lớn mang cảm giác monospace, navigation label neo ở góc, full-bleed cinematic video stills và portrait grid. Thẩm mỹ mượn từ biển báo khẩn cấp và tờ proof của thợ sắp chữ: mọi thứ đều in hoa, tracking âm mạnh ở kích thước display, và tước bỏ mọi trang trí. Không có card, không shadow, không gradient, không góc bo tròn — toàn bộ interface đọc như một tờ broadside in duy nhất, nơi một màu làm tất cả. White space và type scale đảm nhận hệ thống phân cấp, không phải container hay elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Signal Flare | `#ff1a00` | `--color-signal-flare` | Màu chromatic duy nhất trong hệ thống — dùng cho logo, toàn bộ navigation, body text, heading, icon, border và video play affordance. Đồng thời đóng vai trò là brand mark và foreground text color | | Sun-Baked Canvas | `#e7a196` | `--color-sun-baked-canvas` | Nền trang — một màu clay-peach ấm, dịu, làm mềm cường độ của đỏ và tạo cho toàn bộ site bầu không khí như sóng nhiệt. Mọi bề mặt mặc định đều nằm trên tông màu này | | Midnight Frame | `#0a0a0a` | `--color-midnight-frame` | Chỉ dành riêng cho các section full-bleed video và photography — xuất hiện dưới dạng khung tối xung quanh media được nhúng, không bao giờ là bề mặt UI hay text color |

# Acceptandproceed — Style Reference > editorial broadsheet trên nền giấy ấm **Theme:** light Accept & Proceed xem trình duyệt như một tờ broadsheet biên tập: một sans-serif một weight ở chín kích cỡ, nền canvas kem ấm, và một bảng màu gần như hoàn toàn không màu — để nhiếp ảnh và layout đảm nhận vai trò biểu cảm. Hệ thống phân cấp được xây dựng hoàn toàn từ kích thước — weight 400 được dùng cho mọi thứ, từ caption 8px đến display 72px, vì vậy độ tương phản đến từ bước nhảy kích thước, không phải độ đậm. Bề mặt mang tông giấy ấm: #f9f7f3 là trang giấy, #ecebe7 là nền button, và chrome cấu trúc duy nhất là đường viền đen 1px mảnh. Các component được thiết kế một cách nhẹ nhàng có chủ đích — pill buttons với border-radius 100px, badge nhỏ với góc 3.4px, card radius 8px — để hình ảnh dự án và nội dung editorial dài mang tải trọng của trang. Hệ thống mang cảm giác như đang lật giở một cuốn niên giám thiết kế được typeset kỹ lưỡng, chứ không phải lướt một dashboard SaaS. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Text chính, đường viền mảnh, icon strokes, badge outlines, card outlines — màu đường kẻ cấu trúc duy nhất trong hệ thống | | Paper Warm | `#f9f7f3` | `--color-paper-warm` | Canvas trang, bề mặt card, nền body — lớp nền kem ấm cho mọi nội dung | | Bone | `#ecebe7` | `--color-bone` | Bề mặt nổi, nền pill button, nền input, nền link — ấm hơn/tối hơn canvas một bước để tạo chiều sâu xúc giác mà không cần shadow | | White | `#ffffff` | `--color-white` | Màu headline trên overlay hero tối, highlight wash trên card, accent bề mặt đảo ngược |

# Notion — Style Reference > midnight workspace, warm paper below **Theme:** mixed Notion operates as a midnight workspace that hands you the keys to a clean editorial room. The first screen is a deep navy stage (#02093a) where a single bold headline commands attention, surrounded by subtle violet glows and product screenshots that float like objects under glass. Below the fold, the page lightens into a warm white editorial canvas (#f6f5f4) where product cards, testimonials, and feature blocks read like a well-designed magazine spread. Typography carries the personality: NotionInter does the utilitarian work at compact confident sizes, while Lyon Text appears as occasional editorial accent — a serif whisper that signals 'this is thoughtful, not just functional.' The color system is mostly cool blue and violet for the dark surfaces, with the brand's identity expressed through the midnight canvas itself rather than a single bright accent — a deliberate inversion of the typical SaaS color hierarchy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#02093a` | `--color-midnight-ink` | Hero canvas, top-of-page surface, and the brand's defining dark stage — deep navy reads as serious, focused, almost like an editor's darkroom before the content lights up | | Signal Blue | `#0075de` | `--color-signal-blue` | Primary action buttons, filled CTA backgrounds, active link emphasis — the one bright blue that makes actions feel switched on against the midnight canvas | | Sky Tint | `#62aef0` | `--color-sky-tint` | Decorative gradient stops, illustrated icon accents, soft highlight washes around headlines and product mockups — light blue provides the air around the heavy midnight | | Royal Violet | `#2537b1` | `--color-royal-violet` | Decorative gradient accent, illustrated aura around product screenshots, secondary brand surface in dark mode navigation |

# Stability AI — Style Reference > Xung tím trong phòng tối. Ảnh editorial full-bleed nổi trên bề mặt gần như đen, với một điểm nhấn violet rực rỡ duy nhất thắp sáng mọi thành phần tương tác mà không hề la hét. **Theme:** dark Stability AI là nền tảng sáng tạo trên canvas tối với một điểm nhấn điện tím duy nhất xuyên suốt các bề mặt gần đen. Ảnh editorial full-bleed chiếm ưu thế ở hero, với UI sản phẩm dạng nổi được ghép (composite) lên trên người mẫu và cây cỏ — hợp nhất công cụ và đầu ra thành một hình ảnh duy nhất. Typography là Archivo với các font-weight tự tin, display sizes được siết chặt ở line-height thấp (≈0.98–1.07) để headline xếp chồng thành các khối editorial gọn gàng thay vì copy marketing thoáng đãng. Tương tác gần như hoàn toàn được báo hiệu bằng xung tím — pill CTAs, link gạch chân, arrow affordances, và cả icon footer mạng xã hội đều đọc như cùng một tần số lavender. Các bề mặt phân lớp tinh tế (#1e1e1 → #383838 → #000000) không có decorative shadow, vì vậy chiều sâu đến từ sự chuyển tông màu và khoảng trống âm bản rộng rãi thay vì độ cao. Các component nhẹ nhàng và tự tin: pill buttons, divider mảnh, và body text màu violet nhạt (#725d91) lùi về phía sau nhưng vẫn giữ cho trang hài hòa về tông màu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Iris Spark | `#a381ff` | `--color-iris-spark` | Accent violet hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính | | Indigo Edge | `#776cff` | `--color-indigo-edge` | Accent violet hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính | | Mauve Veil | `#725d91` | `--color-mauve-veil` | Heading, body text trên nền tối, và muted link text — một màu violet bão hòa thấp giữ cho trang hài hòa về tông với accent trong khi để nội dung lùi lại | | Lilac Ash | `#b6a9c6` | `--color-lilac-ash` | Secondary body copy, helper text, subtle link variants trên nền tối — neutral pha tím nhạt nhất, làm cầu nối giữa mauve headings và white labels |

# Airtable — Style Reference > workshop ấm áp với các chương được mã hóa bằng màu sắc **Theme:** light Airtable hiện lên như một không gian làm việc ấm áp, mang phong cách editorial, thay vì một dashboard SaaS lạnh lẽo. Canvas là nền giấy da kem mềm mại (#faf5e8) — không bao giờ trắng tinh — mang lại cho toàn bộ trang web cảm giác như giấy, gần như in ấn. Typography đậm và không hề nao núng: một custom display face với font-weight gần 900 cho hero headline kết hợp với một sans-serif đa năng cho body và UI. Các button màu đen tuyền, không phải màu xanh thương hiệu như mong đợi, mang lại cho trang web một sự tự tin mang tính kiến trúc, gần như ấn phẩm in. Điểm nhấn đặc trưng là các feature card được mã hóa bằng màu sắc — mỗi use case có một màu bão hòa riêng (terracotta, xanh dương đậm, xanh rừng, đào, hồng) hoạt động như các dải phân cách chương trong một catalog trực quan. Hiệu ứng tổng thể là một cuốn sổ tay studio sáng tạo: ấm áp, có tổ chức, có cá tính và mang tính con người. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#faf5e8` | `--color-parchment-cream` | Canvas trang — nền trắng ngà ấm áp định hình toàn bộ bầu không khí của site, thay thế nền trắng tinh tiêu chuẩn | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt sáng nhẹ hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính | | Frost White | `#f8fafc` | `--color-frost-white` | Bề mặt sáng thay thế cho các phần tử lồng nhau, nền navigation tinh tế | | Onyx | `#181d26` | `--color-onyx` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp nó thành màu CTA chính |

# Employment Hero — Style Reference > violet ink on white parchment **Theme:** light Employment Hero projects a confident, AI-forward HR platform identity built on extreme typographic weight contrast: Saiga at 800–1000 weight delivers near-black display headlines that dominate white canvases, while DM Sans at 400–500 keeps interface text light and approachable. The visual system is anchored by a single vivid violet (#7622d7) that appears as compact filled pills, thin borders, and icon strokes — never as broad color washes — creating a 'punctuation' effect where color marks intent rather than fills space. Surfaces layer in three violet-tinted steps (#ffffff → #f9f5ff → #f0e6fa) giving the impression of a very pale lavender atmosphere without ever feeling decorative. Components are deliberately geometric: 32px pill buttons, 8–12px card corners, generous 16–24px padding, and 1px hairline borders over soft backgrounds — the result feels like a precise technical document that learned to wear soft clothing. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Hero Violet | `#7622d7` | `--color-hero-violet` | Primary action fills, active nav, link text, icon strokes, key borders — concentrated violet that signals interactivity and energy against the achromatic canvas | | Lavender Wash | `#f9f5ff` | `--color-lavender-wash` | Soft section backgrounds, card fills, hover surfaces — barely-there violet tint that creates atmospheric depth without committing to color | | Lilac Bloom | `#f0e6fa` | `--color-lilac-bloom` | Slightly stronger lavender for tagged surfaces, highlighted cards, badge backgrounds | | Periwinkle Veil | `#e6d5fe` | `--color-periwinkle-veil` | Outlined action borders, soft decorative borders, glow/shadow tints — a mid-violet for quieter emphasis |

# Control — Style Reference > Editorial Swiss grid meets creative tool **Theme:** light Control hoạt động như một công cụ thiết kế editorial: canvas trắng, đường viền đen cứng, và bảng màu gần như đơn sắc bị xuyên thủng bởi các điểm nhấn xanh lá, cam, và vàng tươi — trông như những vết highlight editorial. Điểm nhấn đặc trưng là sự tương phản typographic brutalism — display type Melange cỡ lớn (71–146px) với tracking gần như bằng 0, đặt cạnh label Favorit Mono uppercase siêu nhỏ (9–10px) với letter-spacing âm dày đặc. Mọi bề mặt đều phẳng; chiều sâu đến từ đường viền đen (1–2px), không phải từ đổ bóng. Thẩm mỹ này gợi một editorial spread Swiss được xây dựng lại cho phần mềm: neo vào grid, hình học không hề nao núng, và tự tin trong sự bất đối xứng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, đường viền cấu trúc, và các đường contour xác định mọi cạnh bề mặt | | Paper | `#ffffff` | `--color-paper` | Canvas trang, văn bản đảo màu trên bề mặt tối, và label button trên nền xanh lá | | Gridline | `#d2d2d2` | `--color-gridline` | Đường phân cách nhẹ và viền mờ trên bề mặt phụ | | Slate | `#3d3d3d` | `--color-slate` | Văn bản phụ và UI element bị tắt tiếng |

# Cup of Couple — Style Reference > tạp chí thời trang in trên giấy kem **Theme:** light Cup of Couple hoạt động như một nhật ký hình ảnh mang phong cách editorial: một canvas gần như đơn sắc với ảnh chụp ấm áp làm tất cả công việc tạo màu sắc. Mọi thành phần giao diện đều ở weight 400 — không có bold weight nào tồn tại trong hệ thống, vì vậy hệ thống phân cấp được xây dựng thông qua lựa chọn typeface (một humanist sans, một serif cổ điển, một titling serif) thay vì độ đậm. Kết quả mang phong cách như một trang tạp chí in ấn tình cờ có thể cuộn: tiêu đề serif lớn, đường kẻ xám mảnh như sợi tóc, khoảng trắng rộng rãi, và một grid portfolio ảnh phong cách sống. Bản sắc thương hiệu gần như sống hoàn toàn trong một custom display face duy nhất cho wordmark và kỷ luật không bao giờ thêm màu vào chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Charcoal | `#303030` | `--color-ink-charcoal` | Văn bản chính, tất cả border UI, nav rules, image borders — màu cấu trúc không phải trắng duy nhất trong hệ thống. Sự cố tình không dùng đen tuyền của thương hiệu mang lại cho headline cảm giác in ấn mềm mại hơn | | Dust Gray | `#808080` | `--color-dust-gray` | Border phụ, card dividers, footer rules, UI separators cấp ba — một mid-gray lùi về sau nội dung và không bao giờ cạnh tranh với ảnh chụp | | Bone | `#f0f0f0` | `--color-bone` | Bề mặt card, độ nâng nhẹ so với trang trắng, sắc thái đổ bóng nhẹ — làm ấm trang, tránh cảm giác trắng lạnh lẽo và gợi giấy in | | Faded Pencil | `#767676` | `--color-faded-pencil` | Nav underline / accent rule hiếm khi dùng — dùng có chọn lọc khi separator cần hiện diện nhiều hơn Dust Gray |

# DICE — Style Reference > Monochrome gig flyer — mực đen trên giấy trắng, headline gào thét, mọi thứ còn lại im lặng tuyệt đối. **Theme:** light DICE vận hành trên một hệ thống thị giác đơn sắc, tương phản cao, mang phong cách poster concert bị ép vào app store. Đen thuần và trắng thuần đảm nhiệm toàn bộ giao diện; màu sắc chỉ tồn tại trong artwork của event poster và một màn hình xác nhận màu xanh neon. Một custom condensed display face (Foggy) gào thét ở kích thước 100px+ trong hero, trong khi Favorit xử lý mọi bề mặt UI với tracking 0.06em hơi rộng, khiến ngay cả body copy cũng mang chất editorial. Các button là pill với border-radius 40px, ảnh nằm trong frame bo tròn 8px mềm mại, và các section xen kẽ giữa nền trắng canvas và dải đen full-bleed để tạo nhịp điệu như tạp chí zine. Thái độ tổng thể là punk, tự tin, và typographically ồn ào — kiềm chế ở mọi nơi ngoại trừ headline. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pitch Black | `#000000` | `--color-pitch-black` | Text chính, filled pill button, nền section tối full-bleed, icon stroke, hairline border — xương sống cấu trúc của mọi trang | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, text trên section tối, text button trên filled black button, nền search field | | Ash Gray | `#eeeeee` | `--color-ash-gray` | Nền ảnh mềm, tint bề mặt phụ, nền card/poster nhạt phía sau event artwork | | Concrete | `#d9d9d9` | `--color-concrete` | Hairline divider, border muted, input field outline |

# 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 |