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

# HashiCorp — Style Reference > phòng điều khiển lúc nửa đêm với đèn neon tím — một bề mặt kỹ thuật tối nơi khối lập phương lục giác phát sáng là điểm neo màu sắc duy nhất **Theme:** dark HashiCorp vận hành một thẩm mỹ phòng điều khiển nửa đêm: các canvas gần như đen nuốt trọn trang, để một tín hiệu thương hiệu xanh tím điện duy nhất mang mọi khoảnh khắc tương tác. Headline sử dụng một geometric sans tùy chỉnh ở weight nặng với negative tracking dày, tạo cho typography một tư thế nén chặt, tự tin thay vì thanh lịch thoáng đãng. Ảnh render khối lập phương lục giác 3D — phát sáng tím và chàm — là hình ảnh nhận diện, xuất hiện bất cứ nơi nào thương hiệu cần cảm giác hữu hình. Bề mặt gần như phẳng với đường viền mảnh và bóng gần như không thể nhận thấy; chiều sâu đến từ gradient washes, không phải elevation. Body copy không màu, cỡ chữ rộng rãi và không trang trí, để brand blue làm công việc dẫn dắt sự chú ý qua các link, active states và tab indicators. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Void Canvas | `#000000` | `--color-void-canvas` | Nền trang chính, nền hero, chân trang — khoảng không gần như đen hấp thụ mọi nội dung khác | | Onyx Surface | `#0d0e12` | `--color-onyx-surface` | Cards, panels, input fields, lớp bề mặt thứ cấp phía trên void | | Obsidian Plate | `#15181e` | `--color-obsidian-plate` | Bậc elevation cao nhất — modals, popovers, overlay containers | | Ash Text | `#656a76` | `--color-ash-text` | Body copy mờ, helper text, metadata, placeholder content |

# ThoughtLab — Style Reference > crimson flare in obsidian dark **Theme:** dark ThoughtLab operates in cinematic darkness where a single vivid red mark cuts through near-black silence. Typography is architectural and oversized — 198px display headlines with extreme negative tracking create editorial drama, while body copy stays compact at 15-17px with generous leading. The interface strips away everything nonessential: pill-shaped CTAs, hairline borders, and vast negative space let the messaging and the one red accent command full attention. The iridescent 3D orb hero is the only ornament in an otherwise weightless void where every other element recedes into shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Red | `#fc1c46` | `--color-signal-red` | Primary action buttons, active states, brand mark accent — the sole chromatic note in a monochrome void, making every tap feel deliberate | | Pure White | `#ffffff` | `--color-pure-white` | Display headlines, button text, high-contrast labels — the brightest text tier, reserved for the loudest statements | | Ash | `#cccccc` | `--color-ash` | Body text, secondary headlines, subtle hairline borders — the workhorse gray that carries most readable content across the dark canvas | | Graphite | `#4c4c4c` | `--color-graphite` | Muted metadata, inactive controls, tertiary borders — recedes into the background when focus should be elsewhere |

# Assembly Coffee London — Style Reference > Embers in a dark roastery. A near-black canvas with warm, low-lit product photography and italic serif labels — the feeling of a specialty coffee menu printed in a midnight zine. **Theme:** dark Assembly Coffee's visual system reads like an editorial magazine printed on black paper. The interface is overwhelmingly dark — near-black canvases carry everything — interrupted only by product photography lit against warm studio backdrops (ember-red, deep amber) and hairline typography in white. Two type families do all the work: a geometric sans (GT America) for UI scaffolding, navigation, and metadata, and a refined serif (ID00 Serif) for product names, section labels, and editorial copy, almost always in italic, which turns a functional nav list into a curated index. The palette is almost monochromatic: the chromatic vocabulary is rationed to badge fills (pale yellow, sage green, antique gold) and the occasional warm-tinted cream surface. Buttons are not loud — price chips and 'Shop Now' links live as small text or pill-shaped cream labels. Components are thin, sharp-cornered, and rely on borders and weight contrast rather than shadows or fills for separation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#0e1311` | `--color-obsidian` | Primary canvas — page backgrounds, hero sections, card surfaces. The near-black with a faint green undertone makes white type glow without feeling sterile | | Pure Black | `#000000` | `--color-pure-black` | Deepest surface, borders, and type. Used for maximum-contrast outlines, product box photography backgrounds, and the darkest UI strokes | | Ash Charcoal | `#1a1a1a` | `--color-ash-charcoal` | Secondary surface and border tone — slightly lifted from black for subtle layering on nav, dividers, and outlined button edges | | Graphite | `#333333` | `--color-graphite` | Mid-neutral for secondary text, input borders, and card outlines where pure black is too heavy |

# August Health EHR — Style Reference > Nền kem ấm với mực tím — một bề mặt clinical mang tính nhân văn, làm dịu đi sự khô khan thường thấy của healthcare. **Theme:** light August Health sử dụng ngôn ngữ thị giác warm-clinical: canvas kem mềm (#f8f3eb) thay thế cho nền trắng lạnh thường thấy trong healthcare SaaS, và shadow được pha màu nâu ấm rgba(75,68,57,0.1) thay vì xám lạnh. Sự kết hợp giữa serif mang phong cách editorial (Reckless Neue) và sans hình học (Saans) mang đến cho sản phẩm cảm giác dễ tiếp cận, nhân văn — phù hợp với lĩnh vực chăm sóc người cao tuổi — trong khi màu chàm rực rỡ (#4865ff) làm điểm neo cho mọi hành động chính. Màu sắc xuất hiện thành từng cụm tập trung — khung chân dung tròn, thẻ tính năng pha màu, và pill buttons — trên nền bảng màu neutral tiết chế, tạo nhịp điệu và hơi ấm mà không làm interface bị rối. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Primary Indigo | `#4865ff` | `--color-primary-indigo` | Primary action buttons, active nav state, icon accents — màu tập trung bão hòa duy nhất giúp CTA trông rõ ràng là có thể tương tác | | Deep Ink | `#080331` | `--color-deep-ink` | Headlines, body text, primary borders — gần như đen pha tím, kết hợp ấm áp với serif typeface | | Midnight Violet | `#1b1463` | `--color-midnight-violet` | Navigation borders, secondary surfaces, gradient terminus — phiên bản tối hơn của Primary Indigo để tạo chiều sâu phân lớp | | Forest | `#328a3b` | `--color-forest` | Green action color cho filled buttons, selected navigation states, và các thời điểm chuyển đổi tập trung |

# Perplexity AI — Style Reference > Thư viện giấy ấm lúc bình minh — một trang sách mở giữa những dụng cụ yên tĩnh, được vẽ bằng than chì trên nền kem. **Theme:** light Giao diện Perplexity mang phong cách sổ tay học thuật được render trong trình duyệt — một canvas kem ấm (#faf8f5) tránh được màu trắng vô trùng, kết hợp với text than chì đậm (#27251e) phảng phất hơi ấm nâu. Toàn bộ hệ thống gần như hoàn toàn achromatic: không có brand color, không accent hue, không gradient. Bản sắc đến từ sự kiềm chế: một custom sans-serif (pplxSans) dùng ở 12–16px, pill controls với border-radius 9999px, viền mảnh như sợi tóc, và gần như không có elevation. Layout là fixed two-pane shell — một navigation rail trái 260px và một main column căn giữa — tạo cảm giác giống công cụ nghiên cứu hơn là sản phẩm tiêu dùng. Mọi interactive element đều đơn sắc và hình học; ngôn ngữ shape duy nhất là pill cho button/tag và góc 12–16px cho surface. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#27251e` | `--color-ink` | Primary text, sidebar surface, active nav background, submitted query fills — than chì đậm với hơi ấm nâu, neo giữ canvas kem | | Cream | `#faf8f5` | `--color-cream` | Page canvas, sidebar background, input fields, card surfaces — off-white ấm thay thế cho trắng tinh khiết vô trùng, mang chất giấy mềm mại | | Pure Black | `#000000` | `--color-pure-black` | Dark supporting neutral cho text, icon, và độ tương phản mạnh. Không dùng làm primary CTA color | | Smoke | `#72706b` | `--color-smoke` | Secondary text, inactive nav labels, icon strokes, helper text — xám ấm lùi về sau mà không biến mất |

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

# PLATFORM — Style Reference > white cube gallery dưới ánh đèn spotlight **Theme:** light PLATFORM là một vitrine gallery đơn sắc: nền trắng tinh, chữ đen tuyền, và một giọng typography duy nhất để tác phẩm nghệ thuật mang toàn bộ màu sắc. Giao diện mang phong cách editorial hơn là thương mại — khoảng trống âm bản rộng rãi, đường viền mảnh như sợi tóc, và cỡ body 15px gọn gàng giúp catalog dày đặc mà không cảm giác tiện dụng. Mọi thành phần đều được rút gọn về dạng hình học cốt lõi: không đổ bóng, không bo góc, không gradient trang trí. Trọng lượng thị giác đến từ typography đơn thuần, với cỡ display 72px và line-height 1.00 tiết chế tạo nên nhịp điệu chậm rãi, có chủ đích của một catalog triển lãm in ấn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Bone White | `#ffffff` | `--color-bone-white` | Nền trang, bề mặt card, khoảng trống âm bản | | Lamp Black | `#000000` | `--color-lamp-black` | Văn bản chính, viền card và nav, màu link — màu cấu trúc duy nhất trong hệ thống | | Ash Gray | `#dddddd` | `--color-ash-gray` | Đường chia mảnh, phân tách bề mặt tinh tế | | Concrete Gray | `#cccccc` | `--color-concrete-gray` | Viền phụ, đường viền input, trạng thái disabled |

# Toggl Track — Style Reference > Plum theater marquee — một sân khấu màu aubergine đậm, nơi một từ duy nhất trong spotlight màu magenta thắp sáng mỗi headline. **Theme:** mixed Toggl Track vận hành trên duotone plum-và-kem: một sân khấu aubergine đậm cho hero và footer bands, màu trắng kem ấm cho nội dung sản phẩm, và một màu magenta-pink rực rỡ duy nhất chiếm lấy các từ đơn lẻ bên trong headline — được đặt trong kiểu chữ nghiêng rotalic — khiến cho copy mang cảm giác sân khấu kịch. Màu pink được dùng có chừng mực; nó xuất hiện dưới dạng các từ nhấn mạnh, pill CTA đã được tô màu, và các chấm icon nhỏ, không bao giờ tràn lan. Các bề mặt vẫn phẳng; chiều sâu đến từ sự tương phản giữa các dải tối và sáng, không phải từ bóng đổ hay gradient. Các component có kích thước lớn và bo tròn rộng rãi: 26px cho primary buttons, 200px cho pill tags và nav chips, 10px cho content cards. Typography kết hợp sự mềm mại hình học của GT Haptik (display) với tính trung lập của Inter (body), cả hai đều được đặt dày ở line-height 1.1–1.25 trên các kích thước lớn nhất để headline có cảm giác đậm đặc và tự tin thay vì thoáng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Plum | `#2c1338` | `--color-plum` | Hero, header, và footer canvases; nền brand mark. Màu aubergine gần như đen, được xem là màu tối đặc trưng của thương hiệu | | Heather | `#412a4c` | `--color-heather` | Primary headings và UI text trên nền sáng; secondary dark surface khi Plum quá nặng. Màu tím làm việc chính | | Magenta | `#e57cd8` | `--color-magenta` | Filled CTA buttons, emphasis words bên trong headline, selected nav state, star ratings, và decorative dots. Màu sắc rực rỡ duy nhất — được dùng có chừng mực, một từ hoặc một control trên mỗi màn hình | | Lavender Smoke | `#564260` | `--color-lavender-smoke` | Body copy và link text trên nền trắng kem nơi Heather có vẻ quá nặng. Mang sắc thái thương hiệu vào văn bản chạy |

# Alveos One — Style Reference > ốc đảo ấm áp như đá cuội bên suối — một căn phòng thiền tĩnh lặng, tràn ngập ánh sáng kem, nơi một vật thể graphite duy nhất nằm trong vũng ánh sáng hổ phách dịu dàng. **Theme:** light Alveos One sử dụng ngôn ngữ wellness ấm áp, không màu sắc: mọi bề mặt đều là tông màu kem, ngà, graphite hoặc gần đen, và bản thân sản phẩm là vật thể duy nhất được chiếu sáng trên trang. Bố cục tập trung và không vội vã — gradient xuyên tâm từ kem sang đất sét tạo khung cho hero device như một ánh đèn sân khấu, và các section phía dưới xen kẽ giữa kem ấm và trắng sáng với ảnh lifestyle bo góc lớn mang overlay gradient tối và chữ trắng. Typography được kiềm chế qua Hanken Grotesk ở các weight gốc với tracking rộng 0.4440em trên các label all-caps nhỏ, tạo cảm giác editorial tĩnh lặng thay vì gấp gáp. Primary action là các button gần đen — không có màu thương hiệu — giữ cho hệ thống mang cảm giác sản phẩm sức khỏe cao cấp, không phải công cụ SaaS. Góc bo mềm (25px chiếm ưu thế), shadow gần như vô hình, và gradient duy nhất trong hệ thống là hero spotlight ấm áp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Linen Canvas | `#fcf9f7` | `--color-linen-canvas` | Nền trang, điểm gốc hero gradient — nền kem ấm bao phủ toàn bộ site trong một tông off-white thống nhất | | Bone White | `#ffffff` | `--color-bone-white` | Bề mặt card, nền section, panel nổi trên linen canvas | | Graphite Ink | `#000000` | `--color-graphite-ink` | Văn bản chính, màu border chủ đạo trên card và section — neo typographic của hệ thống | | Nightshade Black | `#05060b` | `--color-nightshade-black` | Fill button hành động chính, nền footer — gần đen với undertone lạnh nhẹ |

# Mintlify — Style Reference > Khu vườn mây trên mặt bàn kính. Bầu trời vẽ tay và một sản phẩm tài liệu chung một khung hình — nơi duy nhất mà màu sắc và ý tưởng giao thoa trước khi trang web lắng xuống tông trắng tĩnh lặng. **Theme:** light Mintlify vận hành theo kỷ luật gần như đơn sắc tuyệt đối: canvas trắng, text gần đen, và một màu xanh lá tươi duy nhất là điểm nhấn màu duy nhất xuyên suốt toàn bộ giao diện. Hero là ngoại lệ có chủ đích — một cảnh quan mây vẽ tay trên nền gradient teal đậm, với sản phẩm tài liệu nổi ở tiền cảnh như minh chứng sống động. Mọi thứ phía sau đều quay về bề mặt trắng khắc khổ, typography Inter dày đặc, và hình khối component giữ góc vuông (button radius 4px, card radius 16–24px) thay vì dạng pill hay bo tròn quá mức. Màu sắc xuất hiện như dấu câu chức năng: xanh lá cho active state, brand link, và icon trang trí; đen cho variant button filled duy nhất. Elevation được thì thầm, không bao giờ tuyên bố — shadow nằm ở opacity 0.03–0.05 và được cảm nhận hơn là nhìn thấy. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Mint Green | `#0c8c5e` | `--color-mint-green` | Brand link, active nav state, feature icon, decorative dot trong eyebrow label, đường gạch chân mảnh trên inline code reference — điểm nhấn màu duy nhất trong hệ thống đơn sắc, được đặt có chủ đích để làm cho các khoảnh khắc chức năng trở nên nổi bật | | Ink Black | `#08090a` | `--color-ink-black` | Neutral hỗ trợ tối cho text, icon và độ tương phản mạnh. Không nâng lên làm màu CTA chính | | True Black | `#000000` | `--color-true-black` | Body text, link default trước hover, icon stroke, và footer rule — neutral chủ lực chịu hầu hết tải typography | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, text button trên nền tối, input field — lớp nền cơ bản mà mọi thứ khác nằm trên |

# Design Full-Time — Style Reference > black-box cinema với một ngọn đèn sân khấu ấm áp duy nhất **Theme:** dark Design Full-Time vận hành như một rạp chiếu phim black-box: canvas thuần #000000, chữ trắng, và một gradient ấm tập trung (amber → ember → red) chỉ dành riêng cho các bề mặt chuyển đổi và khoảnh khắc tiết kiệm. Trang gần như hoàn toàn achromatic — video thumbnails, course metadata và navigation đều sống trong thang xám đơn sắc, để banner gradient duy nhất đóng vai trò như một ngọn đèn sân khấu. Các component phẳng và hình chữ nhật với hairline borders, bo góc tối thiểu, và không có shadow; hệ thống phân cấp đến từ type weight, khoảng trắng, và những dấu câu màu sắc hiếm hoi. Inter ở 700/800 mang giọng nói tự tin, mang tính hướng dẫn của thương hiệu, trong khi body text giữ ở 400/600 với các sắc xám nhẹ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pure Black | `#000000` | `--color-pure-black` | Canvas trang, background chủ đạo — hấp thụ mọi thứ để nội dung và banner gradient ấm có thể thu hút sự chú ý | | Surface Black | `#111111` | `--color-surface-black` | Card backgrounds, elevated panels, filled neutral button surface — cách canvas một bước tạo chiều sâu mà không có gray noise | | Lifted Charcoal | `#252525` | `--color-lifted-charcoal` | Bề mặt mid-elevation, hover states, và card depth tinh tế — kết nối page black và border tones | | Border Gray | `#343434` | `--color-border-gray` | Hairline dividers, card outlines, table rules — xác định các cạnh cấu trúc trong một thế giới phẳng |

# Uizard — Style Reference > violet aurora over obsidian — a single charged accent glowing against an ink-dark product canvas **Theme:** dark Uizard operates as a midnight creative studio: near-black canvases absorb attention while a single violet glow (#a881fe) acts as the room's neon sign, drawing the eye to generation moments. The interface stays overwhelmingly achromatic — white type, graphite borders, ink-black surfaces — so that the purple accent reads as functional electricity, not decoration. Typography is confident and modern: Satoshi Variable carries the product voice at comfortable weights, while Clash Grotesk breaks through at display scale for hero headlines with tight tracking. Components feel contained and architectural — cards with hairline graphite borders, pills and inputs softened to 8-12px radii, and a signature purple outer-glow shadow on the primary action that makes it appear to emit light rather than sit on a surface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Violet Glow | `#a881fe` | `--color-violet-glow` | Primary action fill, brand accent, hero glow origin, logo mark — the charged purple that signals generation and AI intent | | Deep Iris | `linear-gradient(0deg, rgb(100,25,255), rgb(168,129,254))` | `--color-deep-iris` | Gradient deep stop, brand purple core — anchors hero radial bloom and logo gradient ramp | | Soft Lilac | `linear-gradient(189.47deg, rgb(204,178,255) 4.76%, rgb(100,25,255) 92.85%)` | `--color-soft-lilac` | Gradient highlight stop — outer edge of brand gradient where violet dissolves into the dark canvas | | Signal Blue | `#1e90ff` | `--color-signal-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |

# Sublime — Style Reference > white-walled curator's atelier — a quiet gallery where one bold black headline holds the room and a single green object is always the only thing worth picking up **Theme:** light Sublime operates as a digital atelier: vast white walls, a single monumental headline anchoring each view, and collected objects (text snippets, vintage images, 3D renders) that feel curated rather than organized. The palette is 98% achromatic — black on white carries the entire interface, with two whisper-soft washes (pale blue, pale green) and one vivid moss green that punctuates moments of intent. Typography does the structural work: a custom geometric sans at extreme sizes and tight tracking creates headline gravity, while Times New Roman supplies a literary counterpoint for body copy and quotes — the serif/sans collision is deliberate editorial tension, not a system oversight. Layout breathes aggressively — centered compositions, floating collaged elements that overlap and ignore grid lines, generous vertical rhythm. Radii split into two modes: crisp 5px for functional controls, 999px pill for tags and special actions. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Moss Green | `#38744d` | `--color-moss-green` | Green outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color | | Signal Cyan | `#00aaff` | `--color-signal-cyan` | Blue outline accent for tags, dividers, and focused UI edges. | | Ice Wash | `#e0f5ff` | `--color-ice-wash` | Cool surface tint — content card backgrounds, highlight washes; a barely-there blue that hints at a Polaroid shadow without actually adding one | | Mint Whisper | `#cbffa6` | `--color-mint-whisper` | Warm surface tint — secondary highlight washes, soft card fills; a pale chartreuse that pairs with Moss Green as a lighter sibling |

# Clutch Security — Style Reference > Bảo tàng typography trên nền đá cẩm thạch trắng. Những bức tường gallery trắng tinh, nơi mỗi chữ là một hiện vật, và một nút xanh duy nhất là bức tranh duy nhất trong phòng. **Theme:** light Clutch Security vận hành theo phong cách minimalism gallery trắng: một canvas sáng, gần như giấy, nơi typography gánh toàn bộ trọng lượng thị giác và một màu xanh điện duy nhất đảm nhận mọi cuộc đối thoại về màu sắc. Điểm nhấn typography đặc trưng là headline display với font PP Radio Grotesk, nơi các từ khóa chuyển đổi giữa weight 400 và 600 trong cùng một câu, tạo ra nhịp điệu gọi-đáp như một cuộc trò chuyện hơn là một tuyên bố. Giao diện gần như phẳng — góc 6px, border 1px mảnh như sợi tóc màu xám lạnh, không có shadow trang trí — để những hình minh họa 3D orbital hay brand mark 3D thỉnh thoảng xuất hiện giống như một vật thể tìm thấy trên mặt bàn sạch sẽ. Mọi thứ đều căn giữa, rộng rãi và đầy tự tin; các khoảng cách section 80px và internal padding thoáng đãng cho mỗi phần tử đủ không gian để khẳng định bản thân mà không cần cạnh tranh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Cobalt | `#004dff` | `--color-electric-cobalt` | Primary action buttons, active states, điểm nhấn màu duy nhất tạo điểm nhấn cho toàn bộ hệ thống đơn sắc | | Periwinkle Wash | `#d9e4ff` | `--color-periwinkle-wash` | Bề mặt xanh nhạt cho vùng được tô sáng, nền mang tông màu thương hiệu nhẹ nhàng, fill accent mềm mại | | Lavender Veil | `#e6c5f7` | `--color-lavender-veil` | Bề mặt tím nhạt cho brand mark và vùng accent cấp ba, một chút hơi ấm giữa bảng màu lạnh | | Obsidian | `#000000` | `--color-obsidian` | Neutral form states, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp lên màu CTA chính |

# Ferrari — Style Reference > Phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, để những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh. **Theme:** mixed Sự hiện diện kỹ thuật số của Ferrari là một phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, nơi những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh, còn bản thân UI giữ kỷ luật với các tông đen, trắng và xám thuần túy. Layout mang phong cách editorial: hero cinematic tối full-bleed với tiêu đề all-caps căn giữa, xen kẽ với các section nội dung trắng có khoảng thở rộng rãi và nhịp điệu text-trái/image-phải cứng nhắc. Ngôn ngữ thị giác kiềm chế và đầy tự tin — CTA mũi tên tròn mảnh, navigation uppercase letter-spacing rộng, border siêu mảnh, không có điểm nhấn màu sắc, và không có gradient trang trí. Mọi quyết định bề mặt đều nhường chỗ cho bức ảnh: giao diện không bao giờ được cạnh tranh với chiếc xe. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, nền section sáng, bề mặt card, chữ trên nền tối | | Pure Black | `#000000` | `--color-pure-black` | Hero và feature section tối full-bleed, thanh navigation sâu, chữ chính trên nền sáng | | Carbon Black | `#181818` | `--color-carbon-black` | Bề mặt tối thứ cấp, card tối, nền footer — cao hơn pure black một bậc | | Graphite | `#303030` | `--color-graphite` | Bề mặt tối nâng cao, border tối, cấu trúc dark-mode tinh tế — sáng hơn Carbon một bậc |

# Integrated Biosciences — Style Reference > phòng thí nghiệm phát quang sinh học lúc nửa đêm **Theme:** mixed Integrated Biosciences vận hành trong ngôn ngữ thị giác của một phòng tối-phòng thí nghiệm: canvas gần như đen với tông xanh lá dịu, typography trắng tiết chế, và một điểm nhấn xanh phát quang duy nhất chỉ xuất hiện trên các phần tử tương tác nhỏ như mũi tên, tag dots và chỉ báo tiến trình. Toàn bộ hệ thống type chạy trên một weight duy nhất của Aspekta — thứ bậc được tạo hình hoàn toàn bằng kích thước và letter-spacing âm mạnh, khiến các dòng display 111px và 158px mang cảm giác kiến trúc chứ không chỉ trang trí. Roboto Mono được dành riêng cho nhãn kỹ thuật, nav items và metadata, củng cố tính chất bảng thiết bị đo lường của thương hiệu. Bề mặt hầu hết phẳng — không shadow, không gradient — với các đường viền mảnh màu #c9cbbe hoặc #4d5757 làm nhiệm vụ phân cách. Các section sáng chuyển sang canvas ấm trắng kem (#f7f7f5) với thẻ trắng, nhưng điểm nhấn xanh vẫn tồn tại như một tín hiệu sinh học bất biến. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Bioluminescent Lime | `#cef79e` | `--color-bioluminescent-lime` | Lớp phủ xanh cho nền highlight, dải trang trí và điểm nhấn mềm phía sau nội dung | | Abyssal Ink | `#222f30` | `--color-abyssal-ink` | Văn bản chính, đường viền, canvas section tối, nền nav. Gần đen với tông xanh lá dịu — không phải đen thuần, mang cùng sắc xanh như điểm nhấn. Bề mặt nội dung tối nhất | | Bone White | `#f7f7f5` | `--color-bone-white` | Canvas trang section sáng, nền hero/section khi ở chế độ sáng. Trắng ấm với chút kem rất nhẹ | | Paper | `#ffffff` | `--color-paper` | Bề mặt thẻ trên section sáng, container nâng cao, icon fill, body text trên nền tối. Bề mặt sáng nhất trong hệ thống |

# Brainfish — Style Reference > Sticker trên giấy thủ công **Theme:** light Brainfish là một product site theo phong cách neo-brutalist khoác lên mình bảng màu sân chơi: nền trắng, một điểm nhấn xanh chanh rực rỡ duy nhất, và các section pastel full-bleed (xanh ngọc bầu trời, xanh bạc hà, xanh coban) được ngắt quãng bởi các hình minh họa mây, cá và biểu tượng app nổi. Đổ bóng cứng offset (2px solid, zero blur) và viền đen mảnh tạo cho mọi bề mặt tương tác một cảm giác nặng như sticker trên giấy — các component dường như được ghim vào trang thay vì lơ lửng. Chữ mang phong cách hình học và dày (Satoshi weight 500/700 với negative tracking mạnh ở kích thước display), và màu sắc được đưa vào một cách tiết kiệm: xanh chanh cho hành động, pastel tint cho data card, độ bão hòa đầy đủ chỉ xuất hiện ở nền section. Toàn bộ hệ thống đọc như một explainer thân thiện, hơi thủ công — UI là một truyện tranh về tri thức, không phải dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Lime Pulse | `#a3e635` | `--color-lime-pulse` | Màu hành động xanh cho button dạng filled, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi được focus. | | Carbon Black | `#000000` | `--color-carbon-black` | Text chính, tất cả border, đổ bóng cứng offset, icon stroke — mực cấu trúc của hệ thống | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, button fill, input background — lớp nền cơ sở mà mọi thứ ghim lên | | Graphite | `#171717` | `--color-graphite` | Border phụ, card outline, badge stroke — màu gần đen dùng khi #000 thuần đọc quá gắt ở độ dày mảnh |

# Phantom — Style Reference > Không gian mơ oải hương với bóng ma tím violet. Một thế giới pastel chuyển sang tím đậm vào những khoảnh khắc chính, với linh vật bóng ma thân thiện dạo chơi giữa các section. **Theme:** mixed Phantom sử dụng custom typeface siêu mảnh (Phantom, weight 350/400) và bảng màu tím violet kép để biến một crypto wallet thành sản phẩm thân thiện, không phải trading terminal. Trang web luân phiên giữa bề mặt oải hương nhạt và các section tím đậm, với linh vật bóng ma thương hiệu đóng vai trò là nhân vật duy nhất trong hệ thống. Mọi interactive element đều được bo tròn mạnh — pill ở 100px, button lớn ở 32px, hero panel ở 24px — tạo cho toàn bộ giao diện cảm giác mềm mại, phồng nhẹ. Shadow đặc trưng không phải xám mà là tím pha thương hiệu (#e2dffe ở 0px 0px 4px), khiến ngay cả những elevation nhỏ cũng mang đậm bản sắc. Type được set tight (-0.025em) và lớn, với display line ở 80–96px đọc vào thấy nhẹ nhàng thay vì ồn ào nhờ low weight. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Violet | `#3c315b` | `--color-midnight-violet` | Nền section tối, primary text trên bề mặt sáng, nav text — tím đậm thương hiệu neo bản sắc và tạo độ nặng cho hero/section tối | | Lavender Whisper | `#e2dffe` | `--color-lavender-whisper` | Shadow pha thương hiệu, accent wash mềm, glow elevation nhẹ — thay thế shadow xám trung tính để elevation luôn on-brand | | Ghost Lilac | `#ab9ff2` | `--color-ghost-lilac` | Accent tím hỗ trợ cho chi tiết trang trí và emphasis tần suất thấp. Không nâng lên làm màu CTA chính | | Cornflower Pop | `#4a87f2` | `--color-cornflower-pop` | Accent hiếm cho CTA được highlight hoặc button nổi bật — xanh lam tím sáng hơn, dùng tiết kiệm để nhấn mạnh |

# HOUSEPLANT — Style Reference > hiệu sách gỗ óc chó trên giấy linen **Theme:** light Houseplant vận hành trong một bảng màu monochrome ấm áp, gần gũi với đất — nâu óc chó đậm trên nền kem cũ, với phần product photography đảm nhận toàn bộ công việc tạo màu sắc. Hệ thống mang phong cách catalog đồ gia dụng cổ điển: custom typography khít, khoảng thở rộng rãi, không có gradient trang trí, và hầu như không có màu nhấn. Màu nâu đậm #321e1 vừa là text vừa là bề mặt, đảo qua lại giữa background và foreground tùy theo ngữ cảnh, trong khi màu kem #f4f1e1 đóng vai trò canvas. Các component tối giản — solid filled buttons, hairline dividers, soft cards với một bóng đổ nhẹ duy nhất. Điểm nhấn đặc trưng là oversized custom wordmark neo ở footer trang, xử lý tên thương hiệu như một yếu tố đồ họa thay vì logo. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Walnut | `#321e1e` | `--color-walnut` | Màu text chính, filled action buttons, dark hero sections, footer wordmark. Màu nâu ấm đậm đọc gần như đen nhưng vẫn mang hơi ấm đất của thương hiệu — được dùng làm cả foreground lẫn background surface | | Linen | `#f4f1e0` | `--color-linen` | Page canvas, card surfaces, light text trên nền tối. Màu kem cũ ấm áp mang lại chất giấy, chất cổ điển cho toàn bộ hệ thống | | Graphite | `#464545` | `--color-graphite` | Secondary borders, muted helper text, subtle dividers. Màu xám trung tính nhẹ nhàng tạo sự phân cách tĩnh lặng mà không cạnh tranh với cặp Walnut/Linen | | Espresso | `#463938` | `--color-espresso` | Button text trên nền sáng, alternate dark fill. Biến thể nâu nhạt hơn một chút để tạo tương phản typographic trong cùng họ màu tối |

# Spacelab — Style Reference > Swiss editorial grid trên nền giấy thô. Một gallery tĩnh lặng, nơi Helvetica nằm trên baseline và một nút slate-violet duy nhất là thứ ồn ào nhất trong phòng. **Theme:** light Spacelab là studio kiến trúc theo phong cách Swiss-editorial, xây dựng trên sự kiềm chế gần như đơn sắc tuyệt đối: một typeface, một điểm nhấn màu, và hầu như không có trang trí bề mặt. Trang web hoạt động như một monograph in ấn — canvas trắng, ảnh kiến trúc cỡ lớn, và navigation index cột trái gợi nhớ đến sidebar catalogue bảo tàng. Type đảm nhận toàn bộ giọng điệu: HelveticaNeue weight 400 với line-height nén ở 1.0–1.2 nằm sát baseline hơn so với web type thông thường, khiến mọi đoạn văn có cảm giác được "sắp chữ" (set) chứ không phải "gõ chữ" (typed). Màu slate-violet nhẹ (#495472) chỉ xuất hiện trên filled buttons và một số card surface hiếm hoi, hoạt động như một tín hiệu navigation nhẹ nhàng thay vì một tuyên ngôn thương hiệu. Các component được rút gọn đến bộ xương: hairline borders, 4px corners, không shadow, không gradient — mọi element đều có trọng lượng nhờ chiếm dụng negative space thay vì lấp đầy nó. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, card surfaces, body text inversion, button labels. Nền chủ đạo; mọi thứ khác đều nằm trên nó | | Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, logo wordmark. Dùng cho hầu hết divider và đường kẻ cấu trúc (border frequency 1,156) | | Charcoal | `#2c2222` | `--color-charcoal` | Secondary text và màu border đậm nhất trong hệ thống (freq 3,104). Màu gần đen pha ấm, làm mềm độ tương phản gay gắt khi đọc dài | | Fossil | `#b2b4b1` | `--color-fossil` | Muted link color, inactive nav items, tertiary text. Xanh-xám bão hòa thấp, lùi lại khi đặt cạnh paper white và ink black |

# Graphy — Style Reference > Blueprint on white marble. A hushed, indigo-inked technical surface where a single vivid blue is the only raised voice, and floating glassy chart fragments drift across a soft gray void. **Theme:** light Graphy is a luminous, blueprint-clean SaaS surface that treats data visualization as a calm craft rather than a loud spectacle. The canvas is a whisper-soft lavender-gray (#f2f4f8), and card surfaces sit one level brighter in pure white, creating a quiet two-tier depth that lets vivid cobalt-blue actions glow as the only chromatic punctuation. Typography leans on Aeonik's geometric warmth with aggressively tightened tracking (negative up to -0.05em on display sizes), making even the 82px hero feel engineered rather than decorative. The signature gesture is the floating 3D chart illustrations that orbit the hero — translucent, glassy, impossibly light — paired with hairline borders, generous breathing room, and a single saturated CTA color that never competes with the data on screen. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Indigo Ink | `#20295a` | `--color-indigo-ink` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color | | Cobalt Signal | `#2e62ff` | `--color-cobalt-signal` | Filled CTA buttons, active states, chart accents, and interactive highlights — the single saturated voice in an otherwise muted system. Used sparingly so it reads as functional energy, not decoration | | Electric Blue | `#0099ff` | `--color-electric-blue` | Outlined/ghost action borders and link underlines — a secondary chromatic for less-committed interactive states that still need a colored border or underline hint | | Paper White | `linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(76, 48, 237, 0.2) 100%)` | `--color-paper-white` | Card surfaces, elevated panels, button fills, and form inputs — the brightest surface level sitting one tier above the canvas; Translucent-to-violet gradient used on floating glassy chart illustrations and hero ornaments — fades from semi-opaque white into a soft violet aura |

# Index — Style Reference > Bản thiết kế trên bàn vẽ có đèn nền — toàn bộ giao diện là một bản vẽ wireframe, với một cây bút chú thích màu xanh hoa cà tím. **Theme:** dark Index hoạt động như một bản vẽ wireframe kỹ thuật trên không gian âm bản: một canvas gần như đen được bao quanh bởi các đường viền đứt nét, một điểm nhấn màu xanh hoa cà tím nhạt (#7089ba) được dùng như chú thích nhẹ nhàng, và display type ở weight tối đa (Raveo 1000) neo giữ mọi phần. Logic thị giác là "bản thiết kế trên bàn đèn" — các component không được trang trí mà chỉ được phác họa đường viền, khiến giao diện đọc giống như một sơ đồ kỹ thuật hơn là một sản phẩm hoàn thiện. Bề mặt luôn mờ và phẳng; chiều sâu được gợi ý bằng các đường viền đứt nét mảnh và độ nâng nhẹ từ #1c1c1c lên #808080, không bao giờ dùng bóng đổ. Khoảnh khắc mềm mại duy nhất là vùng sáng radial của hero, hoạt động như một ngọn đèn bàn tập trung chiếu lên bàn vẽ. Màu sắc được phân bổ hạn chế — 99% thời gian là không màu (achromatic), chỉ dùng xanh tím cho các dấu câu màu nhỏ (các nút kết nối dữ liệu, icon fill, lớp phủ nhẹ). Typography đảm nhận phần tạo cảm xúc chính: các dòng display weight 1000 chiếm ưu thế, được set tight (-0.04em) và lớn (70px) để tạo cảm giác kiến trúc thay vì biên tập. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Nền trang, tất cả đường viền cấu trúc, text chính trên bề mặt sáng — màu đen tuyệt đối khiến các đường viền đứt nét đọc như mực trên giấy | | Carbon | `#1c1c1c` | `--color-carbon` | Bề mặt nâng lên — nền card, fill section, canvas nơi hero spotlight đổ xuống; nâng lên một bước từ Void nhưng gần như không đáng kể | | Graphite | `#4d4d4d` | `--color-graphite` | Viền cấp ba và đường viền disabled, divider trong danh sách dày | | Steel | `#808080` | `--color-steel` | Body text phụ, metadata label, viền mờ, đường checkbox/divider trên nền tối |

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

# Kit — Style Reference > Warm creator notebook — parchment pages, highlighter-blue ink, heavy type on linen. **Theme:** light Kit reads like a warm editorial notebook — cream-tinted parchment (#f2efe9) as the page base, heavy black headlines punching out of it at weight 700, and a single sky-blue accent (#44b1ff) that appears on CTAs and interactive highlights against the near-black (#1e1e1e). The palette is intentionally muted and hand-curated: soft pastel blocks (dusty blue, blush pink, peach, sage green) appear as section backgrounds, never as text or interaction states, making the one vivid blue feel like a highlighter on a notebook page. KitSansFont at 80px/64px in the custom weight 500 dominates hero spaces with tight -0.009em tracking, while Libre Franklin handles everything else across the content hierarchy — a two-font system where custom display and workhorse utility stay in clearly assigned lanes. Radius tokens are tight and intentional: 12px on buttons and cards, 8px on secondary UI, creating a slightly-rounded-but-serious personality that avoids both sharp corporate rigidity and bubbly consumer softness. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Sky Marker | `#44b1ff` | `--color-sky-marker` | Primary CTA buttons, active nav states, inline keyword highlights — vivid blue on parchment or near-black backgrounds acts as the single highlighter across an otherwise neutral palette, directing attention without competing with any other chromatic element | | Dust Blue | `#a2d1f1` | `--color-dust-blue` | Hero and section background panels — muted blue used as an atmospheric backdrop, never for text or interaction | | Blush Mist | `#e7c9f1` | `--color-blush-mist` | Section background panels — pastel pink used decoratively to vary section rhythm | | Peach Sand | `#ffd0ad` | `--color-peach-sand` | Section background panels — muted orange for alternating content band backgrounds |