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

# Wonder — Style Reference > Trung tâm chỉ huy violet neon — màn đêm mận sẫm bị xuyên thủng bởi một nguồn sáng laser tím duy nhất. **Theme:** mixed Wonder hoạt động như một vũ trụ thiết kế dark-first: nền canvas violet gần như đen (#0f0217) tạo bối cảnh nhập tâm cho thương hiệu, được điểm xuyết bởi một điểm nhấn violet rực rỡ duy nhất (#d262ff) khiến các hành động trông như đang bật sáng, và một màu xám pha tím dịu (#44374a) làm công việc cấu trúc thầm lặng cho mọi border và divider. Hệ thống xen kẽ giữa các section dark atmosphere full-bleed và các content panel trắng sáng, tạo nhịp điệu qua tương phản thay vì trang trí. Typography dẫn dắt bởi Uncut Sans Variable — hình học, tracking rộng ở cỡ nhỏ, tracking chặt ở cỡ display — kết hợp với Martian Mono cho mọi metadata kỹ thuật, kích thước và chú thích. Bề mặt phẳng với hairline borders thay vì shadow nặng; một số card nâng lên dùng border 1px siêu mảnh và radius lớn (14px) để trông như những tấm kính nổi thay vì panel đặc. Components thưa thớt và tự tin: pill-shaped badges, buttons 8px radius dạng filled violet hoặc ghost outline, và rất ít điểm trang trí ngoài motif nguệch ngoạc vẽ tay. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void Plum | `#0f0217` | `--color-void-plum` | Page canvas và dark surface chính — nền violet gần đen làm nền cho toàn bộ hero và footer bands nhập tâm | | Eclipse Black | `#0b0211` | `--color-eclipse-black` | Elevated card và panel surface — tối hơn canvas một bậc, dùng cho UI elements nổi trên nền tối | | Carbon Ink | `#111111` | `--color-carbon-ink` | Badge fills, icon stroke accents, và dark section surfaces trên ngữ cảnh sáng hơn | | Lavender Mist | `#44374a` | `--color-lavender-mist` | Màu border và divider chủ đạo trên toàn hệ thống — mọi hairline, cạnh card, và UI outline đều dùng màu xám pha tím dịu này |

# Wise Design — Style Reference > Quầy hàng chợ đêm neon trên một con phố toàn cầu — bảng hiệu xanh điện rực rỡ hét vang giữa khu chợ đông đúc, rồi giao diện sản phẩm trau chuốt lặng lẽ xuất hiện phía sau. **Theme:** mixed Wise Design đánh mạnh như một tấm áp phích in lụa mang tinh thần biểu tình — màu xanh vôi điện (#87ea5c) tràn ngập hero ở độ bão hòa tối đa, rồi chữ màu mực rừng tối (#083400) đập thẳng vào đó ở kích thước display. Bảng màu cố tình không giống fintech: vàng tươi (#ffea4b), đào (#ffbd89), hồng kẹo bông (#ffd5f0), và tím cà tím đậm (#2a0831) cùng tồn tại như một bộ sưu tập tiền tệ toàn cầu. Wise Sans weight 900 với line-height 0.85 là chữ ký — các chữ cái xếp chồng khít đến mức gần như chạm nhau, tạo hiệu ứng nén bảng quảng cáo ở tỷ lệ kỹ thuật số. Pill (border-radius 9999px) là yếu tố UI bo tròn duy nhất, trong khi các khối nội dung lớn dùng bán kính 86px rộng rãi, tạo thẻ bo mềm tương phản với kiểu chữ mạnh mẽ. Hệ thống thiết kế dao động giữa la hét và thì thầm — display type chồng khổng lồ rồi một dòng midsize đơn độc yên tĩnh trên nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lime Volt | `#87ea5c` | `--color-lime-volt` | Nền hero, fill pill button, nền tag danh mục — tín hiệu thương hiệu dễ nhận biết nhất; xanh tươi trên nền mực tối tạo năng lượng mà không fintech xanh nào có được | | Forest Ink | `#083400` | `--color-forest-ink` | Văn bản chính, headline tối trên nền lime, nav link, fill icon — xanh rừng đậm thay vì đen giữ mọi thứ đúng thương hiệu ngay cả ở kích thước body | | Volt Yellow | `#ffea4b` | `--color-volt-yellow` | Headline điểm nhấn, màu chữ trang trí trên nền tối — vàng điện kết hợp với đỏ burgundy đậm để tạo độ mạnh tối đa | | Papaya | `#ffbd89` | `--color-papaya` | Nền thẻ điểm nhấn ấm, highlight phần trang trí |

# Windsurf — Style Reference > Midnight aurora command center — a deep navy terminal where a single mint teal action glows and a chromatic ribbon is the only permitted spectacle. **Theme:** dark Windsurf's visual system is a midnight IDE that walked out into a marketing site: deep navy canvas (#011c42) with one bioluminescent teal accent (#34e8bb) that makes every action glow against the dark. Display headlines use tomatoGrotesk at weight 300 — size does the heavy lifting while weight stays whisper-thin, an anti-convention choice that creates authority through restraint. An aurora ribbon (blue→purple→pink gradient) sweeps across the hero as the sole moment of color spectacle; everywhere else the palette stays disciplined. Components lean pill-shaped (9999px) for actions and gently squared (6px) for cards, with shadows used sparingly because contrast on the dark canvas already creates depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Navy | `#011c42` | `--color-midnight-navy` | Page background, section canvas, footer — the dominant surface that gives the entire site its terminal-like confidence | | Canvas White | `#ffffff` | `--color-canvas-white` | Primary text on dark surfaces, icon strokes, card text in light contexts | | Obsidian | `#0b100f` | `--color-obsidian` | Near-black text for light-context sections, logo mark, high-contrast headings | | Warm Sand | `#f8f1e5` | `--color-warm-sand` | Secondary text on dark surfaces, warm accent surface, card borders in light contexts — adds cream warmth that prevents the dark UI from feeling sterile |

# Watch new Originals — Style Reference > Khoảng không điện ảnh với ánh đèn sân khấu. Hãy tưởng tượng một sảnh rạp chiếu phim tối om, nơi một ngọn đèn neon xanh lơ là thứ màu sắc duy nhất trong tầm mắt — mọi thứ còn lại đều là chiều sâu đơn sắc, dẫn mắt người xem đến những tấm poster trên tường. **Theme:** dark Disney+ hoạt động như một canvas rạp chiếu phim tối: khoảng không gần như đen tuyền (#040714) nơi artwork phim và series là nhân vật chính, còn UI chrome lùi ra ngoài rìa. Giao diện dựa trên độ tương phản cực cao (trắng #fafafa trên nền gần đen) và một điểm nhấn màu sắc duy nhất — cyan điện tử (#33ddff) — đóng vai trò là lý do duy nhất để rời mắt khỏi nội dung. Typography là một font sans-serif tùy chỉnh duy nhất (Inspire) ở cỡ vừa phải, với letter-spacing dương (0.025em) mang đến cho cả những label ngắn một nhịp điệu tinh tế, cao cấp. Hệ thống ưu tiên nội dung: card là tile tỷ lệ poster, section là horizontal scroll rails, và những quyết định màu sắc nổi bật duy nhất (cyan CTA fills, teal link text) tồn tại để thúc đẩy chuyển đổi, không phải trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Canvas | `#040714` | `--color-midnight-canvas` | Nền trang, nền hero, canvas chính — màu navy gần đen sâu thẳm, hút mắt và làm artwork nổi bật | | Abyss | `#010104` | `--color-abyss` | Lớp bề mặt sâu nhất, nền navigation — lớp nền gần như đen tuyền bên dưới canvas | | Eclipse | `#0e0b14` | `--color-eclipse` | Nền footer, bề mặt tối thay thế — màu tối hơi ấm để tạo biến thể chiều sâu | | Carbon | `#1e1f24` | `--color-carbon` | Bề mặt tối nâng cao — dùng cho card hoặc panel nằm trên canvas |

# Warp — Style Reference > Deep-space command shell — một buồng lái obsidian mờ đục, nơi mỗi pixel đều có giá trị và màu sắc là một tín hiệu hiếm hoi, mang ý nghĩa. **Theme:** dark Warp vận hành trong một vũ trụ than chì sâu thẳm: canvas gần như đen (#121212) được xếp lớp với các bề mặt sáng hơn một cách tinh tế (#1e1e1d, #353534) và không có shadow — độ cao được truyền tải hoàn toàn qua các bước màu nền. Typeface chính, Matter, đảm nhận toàn bộ trọng trách biểu cảm: negative tracking dày đặc ở kích thước display (-0.04em ở 56-64px) thì thầm sự tự tin thay vì la hét, và các tính năng OpenType tùy chỉnh (cv03, cv04, cv09, cv11) mang đến cảm giác được thiết kế chính xác đến từng chi tiết mà các sans-serif thông thường không có. Màu sắc gần như vắng bóng hoàn toàn — ngoại lệ màu sắc duy nhất, một màu xanh xô thơm dịu (#799c92), chỉ xuất hiện làm điểm nhấn trên các tiêu đề phụ của section, khiến nó trông giống như màu prompt của terminal vô tình lọt vào UI. Ảnh chụp màn hình sản phẩm terminal là hero; giao diện tự tái hiện chính nó như một tài liệu tiếp thị, xóa nhòa ranh giới giữa sản phẩm và trang web. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void Canvas | `#121212` | `--color-void-canvas` | Nền trang chính, bề mặt chiếm ưu thế bên dưới mọi nội dung | | Obsidian Deep | `#090909` | `--color-obsidian-deep` | Lớp sâu nhất — nav overlays, nền announcement bar | | Charcoal Surface | `#1e1e1d` | `--color-charcoal-surface` | Nền footer, bề mặt hơi nâng cao hơn canvas | | Iron Surface | `#353534` | `--color-iron-surface` | Bề mặt card được nâng lên, nền pill button, interactive containers |

# Warp — Style Reference > Màn hình terminal dưới ánh kính hổ phách **Theme:** dark Warp vận hành như một phòng điều khiển mờ tối: canvas ấm áp gần như đen, bề mặt sản phẩm lấy cảm hứng từ terminal, và typography hình học chặt chẽ mang phong cách command line được in ấn. Bảng màu gần như hoàn toàn đơn sắc với tông ấm — không có xanh lam lạnh hay xám vô trùng — mang đến cho mọi màn hình ánh hổ phách của một buổi code đêm khuya. Màu nhấn được sử dụng cực kỳ hạn chế: một màu vàng gold nhẹ và một màu xanh lam-xám duy nhất chỉ xuất hiện khi terminal cần dấu câu syntax hoặc một link cần nổi bật. Các component phẳng, dày đặc và không trọng lượng — không có decorative shadow, không có độ sâu skeuomorphic, không có button bo tròn mềm mại. Mọi element đều có chỗ đứng nhờ sự chính xác của typography và negative tracking rộng ở kích thước display. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Warm Off-White | `#faf9f6` | `--color-warm-off-white` | Headline chính, body text, nav links — màu kem ấm đọc mềm hơn trắng tinh trên nền charcoal | | Bone Gray | `#868684` | `--color-bone-gray` | Secondary text, captions, muted labels — midtone tách biệt khỏi Off-White mà vẫn giữ ấm | | Pale Stone | `#b4b4b2` | `--color-pale-stone` | Tertiary text, ghost button labels, low-emphasis copy | | Faint Linen | `#e3e2e0` | `--color-faint-linen` | Hairline borders, divider mờ, selected state outlines |

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

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

# Walden — Style Reference > A still forest floor — every product is a stone, every pixel is moss and silence. **Theme:** light Walden is a meditation and ritual-object brand whose interface behaves like a quiet gallery wall. The canvas is pure white; nearly every surface, border, and control is rendered in warm grayscale, with no chromatic accent anywhere in the system. Type is small, tight, and lowercase-leaning, and the only structural cues are hairline strokes in stone-gray (#d3cec5) — no drop shadows, no elevation tricks, no gradients. Full-bleed nature and product photography carries the entire emotional load, so the chrome around it must stay almost invisible. Components feel handmade, not templated: a 2px button radius, a 16px max radius on cards, and 1px inset rings as the only shadows in the system. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal Ink | `#3f3f3f` | `--color-charcoal-ink` | Primary text, default borders, link underlines, icon strokes — the workhorse gray that carries almost every label and divider in the system | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav background, card surfaces, button text — the absolute ground of the interface | | Stone Veil | `#d3cec5` | `--color-stone-veil` | Hairline borders, inset focus rings, soft separator lines — the warm gray that makes every edge feel like a seam in paper or stone, not a UI stroke | | Sumi Black | `#030302` | `--color-sumi-black` | Filled button backgrounds, active state borders, highest-emphasis text — the near-black ink, warmer than pure black, used when a control must be pressed or selected |

# Waka Waka — Style Reference > poster bảo tàng trên nền giấy xương và mực — kiểu chữ grotesk đen hoành tráng in trên giấy trắng ấm, mọi thứ khác đều lùi về phía sau **Theme:** light Waka Waka xử lý website của mình như một catalog triển lãm in ấn: nền giấy màu xương ấm áp, một màu mực gần đen, và một typeface grotesk tùy chỉnh được triển khai ở cả kích thước footnote 10px và tỷ lệ hoành tráng 560px. Hệ thống về cơ bản là monoline và đơn sắc — không có điểm nhấn, không có sắc thái phụ, không gradient, và hầu như không có chrome trang trí. Phân cấp thị giác được tạo ra hoàn toàn thông qua trọng lượng typographic, tỷ lệ và khoảng trắng, với chính tên thương hiệu đóng vai trò là công cụ đồ họa chủ đạo trên mọi màn hình. Các component đều phẳng, không viền hoặc viền mảnh (hairline), và mang cảm giác được tuyển chọn hơn là tương tác — trang đọc như một bức tường gallery trưng bày các vật thể và chữ cái khổng lồ, không phải một giao diện phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Paper | `#edeae4` | `--color-bone-paper` | Nền trang, mọi bề mặt canvas — trắng ấm mang cảm giác giấy chưa tẩy trắng thay vì trắng kỹ thuật số | | Stone Gray | `#c9c7c4` | `--color-stone-gray` | Bề mặt phụ và neutral ngữ cảnh mờ — xuất hiện trong các cặp tương phản như một lớp sâu hơn bên dưới canvas | | Ink Black | `#28282a` | `--color-ink-black` | Văn bản chính, mọi đường viền, hairline rules, nét icon, và là neo màu sắc duy nhất trong hệ thống — gần đen nhưng pha chút ấm để nằm thoải mái trên nền xương thay vì rung động |

# WRITER — Style Reference > editorial AI atelier — a white marble newsroom where pill-shaped controls and a single violet accent turn enterprise software into confident editorial design **Theme:** light WRITER operates as an editorial AI atelier: a near-white canvas where confident display headlines in Poppins (64px, tight tracking) sit above pill-shaped controls with 60-82px radii, and a single vivid violet accent punctuates an otherwise monochrome system. The visual language alternates between bright editorial sections and near-black resource blocks, creating a magazine-meets-control-center rhythm where typography carries authority and color acts as functional punctuation. Custom serif CanelaDeck surfaces in body copy for an editorial undertone, while the geometric Poppins handles everything from eyebrow labels (0.14-0.30em tracking) to product UI. Components are lightweight and rounded: thin dividers, pill inputs, soft cards with 12px radii, and minimal elevation — the design trusts whitespace and type scale over chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Orchid Accent | `#a95ef8` | `--color-orchid-accent` | Highlighted word in display headlines, decorative emphasis — vivid violet that draws the eye to a single concept within a monochrome headline | | Iris Brand | `#5551ff` | `--color-iris-brand` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Lavender Wash | `#e4e9ff` | `--color-lavender-wash` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Cobalt Spark | `#007aff` | `--color-cobalt-spark` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Vucko — Style Reference > Type cỡ lớn trên nền gallery trắng — một cuốn sách mẫu chữ (type-specimen book) nơi wordmark chính là căn phòng. **Theme:** light Vucko hoạt động như một editorial canvas đơn sắc, nơi type chính là kiến trúc. Bề mặt trắng tinh gặp mực đen tuyền, với một sắc xám nhạt duy nhất dành cho secondary text và ghost-list items trong service lists. Custom typeface Suisse ở kích thước display — lên đến 211px — tạo ra sự hiện diện hoành tráng, gần như kiến trúc, nơi wordmark một mình có thể lấp đầy viewport. Màu sắc (chromatic color) hoàn toàn vắng mặt trong bản thân hệ thống, chỉ xuất hiện bên trong nội dung showcase dự án (gradient rực rỡ, thẻ vàng) — những điểm nhấn xuyên suốt trang vốn tối giản khác. Giao diện cực kỳ mảnh: border 1px mảnh như sợi tóc, không shadow, khoảng cách section rộng rãi 58px, và các nav element hình pill. Mọi màn hình nên đọc như một trang trong sách nghệ thuật cao cấp — kiềm chế, tự tin, và chống trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#000000` | `--color-ink` | Primary text, tất cả border, khối nền tối, và hero wordmark — xương sống cấu trúc của mọi màn hình | | Paper | `#ffffff` | `--color-paper` | Border dạng hairline, divider, input outline, và cạnh card trên nền sáng. Không dùng làm màu CTA chính | | Faint Ash | `#eeeeee` | `--color-faint-ash` | Màu nền nhẹ cho secondary cards hoặc khối nội dung giảm nhấn, hầu như không phân biệt được với Paper | | Steel | `#888a8b` | `--color-steel` | Secondary text mờ và ghost-list items trong service lists — màu chữ duy nhất không phải đen, dùng để tạo phân cấp tông màu (tonal hierarchy) mà không cần thêm sắc độ |

# Volume — Style Reference > gallery wall with whispers — editorial restraint on paper-white canvas, the chrome is invisible, the imagery is the only color **Theme:** light Volume reads as an editorial gallery for design publications: full-bleed photographic campaigns with whisper-light Messina Sans headlines floating over image backgrounds. The chrome itself is nearly invisible — paper-white canvas, charcoal type, hairline borders, and a small set of pill-shaped status tags that carry the only chromatic punctuation. The extreme light weights (300/350) and tight negative tracking create a refined, magazine-page atmosphere where negative space and imagery do the heavy lifting. Every surface favors restraint and breathing room, letting the projects — not the interface — command attention. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#272727` | `--color-ink` | Primary text, nav, footer text, dark pill tags (funded, successful) — the workhorse near-black that grounds every layout | | Graphite | `#717171` | `--color-graphite` | Secondary text, hairline borders on cards, images, and inputs — the quiet structural neutral | | Ash | `#949494` | `--color-ash` | Tertiary text, subtle borders, disabled or muted states | | Fog | `#cdcccc` | `--color-fog` | Light placeholder text, decorative dividers on dark surfaces |

# Voicenotes — Style Reference > cream-paper notebook with a single inkwell. A warm parchment workspace where oversized editorial serifs meet whisper-quiet Inter UI, and almost every pixel is neutral except a single green check that says "you're safe." **Theme:** light Voicenotes operates as a quiet, editorial note-taking workspace: a warm cream canvas with nearly zero chroma, where the only vivid mark is a single green check used as a tiny trust signal. The visual identity is a conversation between a humanist display serif (Instrument Serif) and a utilitarian sans (Inter) — the serif sings the marketing headlines while the sans does all the interface labor. Components are low-elevation, generously rounded, and pill-shaped for actions, giving every screen the feel of paper notebook pages laid out on a desk rather than a chrome-heavy SaaS dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment | `#faf9f5` | `--color-parchment` | Page canvas, hero backgrounds, section bands — the warm off-white that makes the whole product feel like paper rather than a screen | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, modal backgrounds, elevated panels — pure white sits on top of Parchment to create depth without shadows | | Soft Sky | `#eaf2f8` | `--color-soft-sky` | Soft section background, alternate surface, and quiet card fill | | Hairline | `#e5e7eb` | `--color-hairline` | Primary border color for cards, dividers, and input fields — the most-used neutral in the system |

# Vivid+Co — Style Reference > darkroom editorial spread **Theme:** dark Vivid+Co operates as a dark-canvas editorial stage where the entire interface is a single moody slate field and typography is the only subject. Massive Neue Montreal headlines at 105–136px sit directly on the dark background with no card containers, no grid scaffolding, and almost no color — the page reads like a typography magazine spread. The lone chromatic accent is a muted blue-gray (#6f879c) that appears only as hairline borders, ghost button outlines, and subtle icon strokes; warmth comes from an off-white #fffdf9 rather than from any hue. 3D glass-prism motifs float behind the text, adding depth and refraction light-play without introducing surface clutter. Components are intentionally absent in the traditional sense — sections are full-bleed type compositions, nav is a floating minimal bar, and the lone interactive shape is the rectangular outlined button. The system rewards restraint: a new page should feel like it was set on a darkroom table, not built in a component library. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffdf9` | `--color-bone-white` | Primary text, headlines, nav links, all foreground typography. The warm off-white (not pure white) is the single most-used color in the system and gives the dark canvas a paper-print feel rather than a screen-glow feel | | Slate Veil | `#495764` | `--color-slate-veil` | Dominant page background and the base canvas. This desaturated dark blue-slate is the entire stage — every section sits on it directly with no card or panel treatment | | Carbon | `#101010` | `--color-carbon` | Deeper accent within dark passages, occasional icon fills, and decorative surface variation. A step darker than Slate Veil for moments that need recess rather than flat canvas | | Obsidian | `#000000` | `--color-obsidian` | Pure black used sparingly for 3D-rendered glass prism fills and icon glyphs. Anchors decorative elements against the Slate Veil canvas |

# Vivid Spain — Style Reference > Lavender dusk over white marble — a soft violet wash on a clean white surface, where one vivid purple accent does all the work. **Theme:** light Vivid is a lavender-lit fintech canvas: a white marble surface washed in soft violet gradients, where the only chromatic decision a designer makes is how much purple to pour on. The system is radically monochromatic — a single vivid violet (#7d33f6) carries every interactive moment, from logo to CTA to active toggle, while the rest of the interface stays in a disciplined gray-on-white scale. Components breathe through soft pastel card backgrounds (#f4edff, #e9d4fb) and pill-shaped controls (100px radius) that feel like rounded candy, never corporate. Typography is geometric Satoshi at every weight, with aggressive negative letter-spacing on display sizes pulling the headlines tight, and generous positive tracking on small uppercase labels. The visual signature is restraint: no shadows, no borders on hero surfaces, no decorative noise — just purple light, white space, and confident type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vivid Violet | `#7d33f6` | `--color-vivid-violet` | Primary CTAs, logo, active nav, toggle thumb, link emphasis — the single chromatic decision that powers all interactivity. Deeply saturated against white to command attention without the corporate-blue cliche | | Lilac Veil | `#f4edff` | `--color-lilac-veil` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Orchid Whisper | `#e9d4fb` | `--color-orchid-whisper` | Muted violet wash for feature card backgrounds and decorative fills. Sits between Lilac Veil and Vivid Violet to create tonal depth in card grids | | Periwinkle Glow | `#9292ff` | `--color-periwinkle-glow` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Visual — Style Reference > Warm editorial zine. Cream paper, serif posters, mono marginalia, a single yellow highlighter mark. **Theme:** light Visual speaks an editorial design dialect: a warm cream canvas (#f6f6f4) holds a high-contrast modern serif at near-poster sizes (64–96px) paired with monospaced UI text at 12–16px. The palette is near-monochrome — warm blacks, olive-sage neutrals, and a single vivid yellow (#fff347) deployed as decorative punctuation on accent bars and highlight washes. Surfaces stay flat with hairline 1px borders; visual hierarchy comes from color contrast and generous 80px section gaps, never from shadows. Components are lightweight and geometric: 8px-radius cards, 3px-radius nav, tiny all-caps mono labels, and a neutral dark button that reads as 'next' rather than 'buy now'. The overall feel is a design museum catalog that happens to contain a product — confident, restrained, and slightly cerebral. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vellum | `#f6f6f4` | `--color-vellum` | Page background — the warm off-white that defines the entire canvas tone | | Paper | `#ffffff` | `--color-paper` | Card surfaces, elevated panels, product mockup backgrounds | | Ink | `#000000` | `--color-ink` | Primary text, heavy structural borders, nav bar outlines | | Carbon | `#2c2c26` | `--color-carbon` | Warm near-black for dark panels, footer background, and neutral filled button fill — the only filled button in the system |

# Visitors — Style Reference > frosted glass observatory at dawn — a periwinkle beacon rises over a white marble dashboard. **Theme:** light Visitors is a light, violet-accented analytics product that reads like a glass-walled observatory: bright white canvas, hairline borders, pill-shaped navigation, and one confident periwinkle action color that makes every interactive surface feel switched on. Typography stays in a single humanist sans (OpenRunde) with aggressively tightened tracking at every size, so headlines feel architectural rather than airy. Components are flat and compact — borders do the work that shadows usually would, corners are soft (8–24px), and gradient washes (blue-to-violet) appear only as atmospheric backgrounds behind floating product previews. Color is used sparingly and semantically: violet for primary action, green/yellow/pink/blue for data and icon variety, and near-black (#181925) for all meaningful text. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Periwinkle Beam | `linear-gradient(to right in oklab, rgb(44, 120, 252) 0%, rgb(145, 141, 246) 100%)` | `--color-periwinkle-beam` | Primary action background, active nav fills, brand icon strokes, decorative icon accents — the single chromatic action color across the system; Atmospheric section background transitioning from cobalt blue to periwinkle | | Iris Dusk | `#9580ff` | `--color-iris-dusk` | Secondary violet variant for hover states and secondary action surfaces | | Lavender Mist | `#dad9fc` | `--color-lavender-mist` | Soft tint for gentle background washes, subtle borders, and muted violet surfaces | | Midnight Ink | `#181925` | `--color-midnight-ink` | Primary text, heading color, dark surface fill, high-contrast borders — the near-black that carries the entire information hierarchy |

# Viewport — Style Reference > Sticky notes mint trên bàn kính. Một không gian làm việc sạch sẽ, nơi một nút indigo rực rỡ là thứ duy nhất 'bật sáng' trên nền bề mặt teal nhạt và tường trắng. **Theme:** light Viewport sử dụng ngôn ngữ workspace sáng, thoáng: canvas trắng tinh, khoảng thở rộng rãi, và bề mặt mint-teal đặc trưng làm mềm các section mà không làm tối chúng. Toàn bộ câu chuyện màu sắc là một bộ đôi hai màu chặt chẽ — indigo rực rỡ cho các hành động và mint-teal cho bề mặt — được kết nối bởi một gradient cyan-to-violet chỉ xuất hiện trên primary CTA. Typography mang phong cách hình học, nhẹ nhàng: HK Sentiments Bold cho headline ở weight 700 nặng, Silka cho mọi thứ chức năng ở 14–18px, tracking được siết chặt trên toàn bộ scale. Các component trông như những tile mượt mà: border-radius 16px lớn trên card, 12px trên button, pill 100px cho tag, và shadow hoặc là màu xám nhạt gần như không thấy hoặc là cyan glow có thương hiệu — không bao giờ dùng mid-tone trung tính. Layout tập trung một headline duy nhất cho mỗi section, sau đó để ảnh chụp màn hình sản phẩm rộng làm nhiệm vụ chính, thường nổi trên bề mặt mint như sticky notes trên bàn kính. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Indigo Voltage | `linear-gradient(0deg, rgb(0,202,242) 0%, rgb(77,77,255) 100%)` | `--color-indigo-voltage` | Primary action buttons, active nav states, accent borders, heading highlights — màu thương hiệu duy nhất, khiến mọi phần tử tương tác đều không thể nhầm lẫn; Primary CTA button fill — gradient duy nhất trong hệ thống, chảy từ cyan sang indigo theo chiều dọc | | Mint Whisper | `radial-gradient(102% 82% at 50% 107.7%, rgba(0,202,242,0.3) 0%, rgb(241,243,245) 100%)` | `--color-mint-whisper` | Bề mặt section đặc trưng — thay thế màu xám cho feature panels, product wrappers, và comparison cards; một teal nhẹ đọc như một canvas có màu thay vì một card có màu; Radial hero wash — cyan nở ra thành xám trung tính tạo bầu không khí xung quanh cho các showcase section | | Cyan Pulse | `#00caf2` | `--color-cyan-pulse` | Điểm gốc gradient và link glow shadow; chỉ xuất hiện bên trong gradient button cyan→indigo và radial brand wash | | Cyan Mist | `#66dff7` | `--color-cyan-mist` | Cyan nhẹ dùng làm link-focus glow ring; cầu nối giữa Mint Whisper và các điểm cuối gradient |

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

# Vetric — Style Reference > Iridescent prism refracting clarity — a white room with one glass diamond that throws pink, blue, yellow, and green light across every surface. **Theme:** light Vetric uses an iridescent-prism visual language: a bright white canvas, near-black ink for text and actions, and a four-color rainbow accent set (blue, pink, yellow, green) that refracts across soft pastel washes like light through a glass diamond. The system pairs a humanist serif (Noto Serif) for headlines with a geometric sans (Manrope) for UI, creating a deliberate tension between editorial calm and technical confidence. Components stay light and flat — thin borders, gentle radii, no drop shadows — so the prismatic gradients and colored accents carry all the visual energy. The result reads as 'data made luminous': the chrome recedes, the color talks. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#090a1e` | `--color-midnight-ink` | Primary text, primary CTA fill, strong borders — the dominant brand dark; a slightly blue-tinted near-black that reads warmer than pure black on white | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on dark fills | | Ash Border | `#e0e0e0` | `--color-ash-border` | Default hairline borders, button outlines, icon strokes | | Carbon Nav | `#222222` | `--color-carbon-nav` | Navigation text and thin nav borders — sits one step lighter than Midnight Ink |

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

# Ventriloc — Style Reference > analytics console on parchment **Theme:** light Ventriloc speaks in a quiet, professional whisper against an off-white canvas — a workspace where data feels approachable rather than intimidating. The interface is built on tight geometric type (PolySans) paired with Inter for UI, an almost-monochrome neutral palette, and a single warm orange (#ff682c) that punctuates charts, icons, and logo marks with restrained energy. Surfaces are flat and lightly tinted (white cards on warm-gray canvas), corners are soft (8px cards, pill-shaped controls), and elevation comes from gentle background shifts rather than shadows. Buttons are pill-shaped, nav is a floating rounded capsule, and dashboard mockups are presented as pristine white cards — the whole experience reads as analytical, airy, and deliberately unfussy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Orange | `#ff682c` | `--color-signal-orange` | Brand accent — chart fills, logo swoosh, active indicators, small highlights; the single chromatic spark across an otherwise monochrome system | | Sienna Bronze | `#816729` | `--color-sienna-bronze` | Muted brand tone — icon strokes, decorative chart elements, secondary brand marks where a subtler warmth is needed than Signal Orange | | Carbon | `#202020` | `--color-carbon` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Graphite | `#4d4d4d` | `--color-graphite` | Secondary text, body emphasis, subdued borders |

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