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

# Freelance frontend UI developer và designer, Rou Hun Fan — Style Reference > Zine in Riso trên giấy construction đen **Theme:** dark Một portfolio editorial brutalism dành cho frontend developer độc lập: nền gần như đen, display type condensed cỡ lớn, và một khối accent bão hòa cao duy nhất bùng nổ giữa khoảng không. Layout hoạt động như một trang tạp chí in — text trải dài qua các cột bất đối xứng, type tiếp xúc với ảnh ở các cạnh cứng, và whitespace được dùng như một yếu tố cấu trúc thay vì padding. Điểm nhấn đặc trưng là card cyan với display text magenta trông như được dán lên trang giống một sticker, phá vỡ kỷ luật đơn sắc. Typography gánh toàn bộ trọng lượng: một monospaced geometric cho giọng hệ thống, một condensed sans nặng để "hét", và một script calligraphic cho các điểm nhấn editorial nhằm nhân tính hóa thẩm mỹ máy móc. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Carbon | `#0a0a0a` | `--color-carbon` | Nền trang và các section background — gần như đen thật giúp tối đa độ tương phản của white type và các khối accent bão hòa | | Bone | `#ffffff` | `--color-bone` | Text chính, display headlines, border, và link strokes — giọng duy nhất cho phần lớn trang | | Voltage Cyan | `#1ef0e4` | `--color-voltage-cyan` | Nền accent card, highlight panels — cyan phẳng bão hòa nổi bật trên nền tối, dành riêng cho project cards và editorial callout blocks | | Plasma Magenta | `#e91e8c` | `--color-plasma-magenta` | Display text trên cyan cards, decorative script flourishes — hồng/magenta nóng chỉ dùng làm ink-on-cyan contrast hoặc editorial accent |

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

# Koox — Style Reference > Phòng thí nghiệm ép lạnh phong cách Brutalist — gạch men trắng, in sticker, giọng điệu stencil. **Theme:** light Koox là một phòng thí nghiệm ép lạnh phong cách Brutalist, nơi gạch subway trắng kết hợp với ảnh sản phẩm và typography stencil mạnh mẽ. Thương hiệu sử dụng headline in hoa tự tin, tracking rộng ngang trang, viền màu cam như vữa gạch bao quanh mọi bề mặt như một bức tường ốp gạch, và bảng màu apothecary xanh đậm được neo bởi một bóng đổ burgundy lệch cứng duy nhất, khiến mọi nút bấm trông như một sticker in lụa. Các trang luôn sáng và sạch sẽ — canvas trắng, chữ gần đen, đường kẻ mảnh — với màu sắc chỉ dành cho các điểm nhấn chức năng: khung cam, CTA xanh đậm, bóng đổ burgundy. Kết quả là ồn ào nhưng có kỷ luật, giống như một quán nước ép do một nhà in thiết kế. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Tile Grout | `#d25a24` | `--color-tile-grout` | Viền thương hiệu và link accent — nét vẽ màu cam như vữa gạch bao quanh card, link và cạnh section, mang hơi ấm của gốm nung lên canvas trắng sạch sẽ | | Cold-Press Green | `#113722` | `--color-cold-press-green` | Màu nền action chính — xanh thực vật đậm cho nút CTA dạng filled, footer band và nền nút danh mục, báo hiệu sản phẩm bên trong mà không cần dùng đến tông xanh của ảnh đồ ăn | | Sticker Crimson | `#6b1229` | `--color-sticker-crimson` | Bóng đổ lệch cứng — burgundy đậm tạo bóng đổ 5px không blur dưới sticker và nút được nhấn mạnh, biến các element phẳng thành các lớp in lụa dán lên trang | | Noir | `#000000` | `--color-noir` | Navigation, body text và màu viền mặc định — màu đen cứng rắn cho mọi đoạn văn, icon stroke và card hairline |

# Cluely — Style Reference > blue dawn over mountain ridges — a premium product emerging from atmospheric gradient into crisp white workspace. **Theme:** light Cluely presents an atmospheric SaaS aesthetic anchored by a dramatic sky-to-mountain blue gradient hero that sets a premium, almost cinematic tone. The signature move is the pairing of a large editorial serif display headline (EB Garamond at 80px) with a precise modern sans-serif (Geist) for everything functional — this serif-meets-tech contrast is the visual identity. A single vivid blue accent (#3c83f6) powers the primary CTA, while the rest of the interface stays achromatic with soft cool-gray neutrals. Components lean compact and lightweight: 4px-radius buttons, 12-24px-radius cards, hairline borders in #e4e4e7, and no decorative shadows. The product screenshots are presented as floating, slightly tilted laptop frames — the app is the hero, not abstractions. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Blue | `#3c83f6` | `--color-signal-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. | | Deep Dusk | `#022c70` | `--color-deep-dusk` | Gradient terminal stop, button shadow depth — dark indigo that anchors the primary blue toward night | | Azure Crest | `#0544a5` | `--color-azure-crest` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color | | Hover Glow | `#81b6ff` | `--color-hover-glow` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Penpot — Style Reference > studio thiết kế với tông màu midnight, điểm xuyết tia sáng teal — hero stage tím đậm, nơi một nút teal sáng và một từ teal thắp sáng toàn bộ canvas vốn đơn sắc. **Theme:** mixed Penpot vận hành như một hệ thống thị giác hai màn: hero stage tím đậm (midnight-violet) thu hút sự chú ý, sau đó chuyển sang vùng làm việc trắng sáng (off-white) để nội dung sản phẩm được thoáng đãng. Bảng màu có chủ đích tối giản — một tím đậm, một teal sống động, và các gam xám trung tính — để giao diện công cụ thiết kế đầy màu sắc (sản phẩm thực tế) trở thành nơi duy nhất có nhiều màu. Work Sans ở cỡ display lớn tạo headline tự tin, hơi siết chặt, trong khi cùng font ở 14–16px giữ cho interface chrome dễ đọc và không kiểu cách. Các component phẳng và hình học: border-radius 8px cho controls, 20px cho card, viền mảnh (hairline), không có đổ bóng trang trí. Điểm nhấn teal duy nhất được dùng rất tiết kiệm — nó kích hoạt CTA, từ nhấn mạnh trong headline, và một vài nét vẽ trang trí — khiến nó giống như một công tắc được bật lên chứ không phải đồ trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Deep Space Violet | `#151035` | `--color-deep-space-violet` | Bề mặt thương hiệu chính — hero background, navigation, dark panels, code/token sidebars, và product UI shell. Tạo nên bản sắc dark-mode và tạo canvas để điểm nhấn teal phát sáng | | Bright Teal | `#1ccac7` | `--color-bright-teal` | Màu nền cho action chính, từ nhấn mạnh trong headline, active tab indicator, và tia sáng trang trí. Nốt màu duy nhất — được dùng tiết kiệm cho CTA, highlight, và một từ mỗi headline — khiến mỗi lần xuất hiện đều cảm giác như được bật lên | | Rich Violet | `#2f226c` | `--color-rich-violet` | Tím phụ cho viền mờ, đường phân cách, và nét nhấn trong dark panels. Cầu nối giữa Deep Space Violet và Bright Teal trên canvas tối | | Off-White | `#fafafa` | `--color-off-white` | Page canvas, bề mặt card sáng, body text trên nền tối, icon fills. Workhorse của chế độ sáng — không bao giờ trắng tinh, hơi ấm để làm mềm độ tương phản với Deep Space Violet |

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

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

# SwimClub — Style Reference > Hồ sơ lâm sàng ẩn sau màn hình LCD pixel **Theme:** mixed SwimClub vận hành một hệ thống thị giác mang phong cách tạp chí lâm sàng: gần như hoàn toàn achromatic (trắng, đen, xám lạnh) với một màu cam rực duy nhất (#ff9e00) được dùng làm điểm nhấn full-bleed thay vì màu nút. Typography đảm nhiệm vai trò chính — một geometric grotesque (Px Grotesk) cho body và headline, một monospace (Apercu Mono) cho data labels và navigation micro-copy, và một custom pixelated display face (Swimclub) chỉ dành cho logo và các con số thống kê cỡ lớn trông giống như màn hình LCD. Các bề mặt xen kẽ giữa nền canvas trắng ngà lạnh, thẻ sản phẩm trắng tinh, hero block xanh navy đậm với ảnh sản phẩm, và các panel thống kê cam bão hòa. Giao diện mang cảm giác như một hồ sơ y tế được nhìn qua màn hình arcade retro: lâm sàng, biên tập, hơi vui tươi, với các góc 0px sắc cạnh và đường viền đứt nét mảnh (hairline dashed borders) giúp mọi thứ đọc giống như biểu đồ hơn là trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Tabloid Orange | `#ff9e00` | `--color-tabloid-orange` | Nền section full-bleed (announcement bar, statistic panels) — màu thương hiệu có sắc độ duy nhất, dùng ở độ bão hòa tối đa để phá vỡ dòng chảy đơn sắc | | Deep Capsule Navy | `linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%)` | `--color-deep-capsule-navy` | Màu gradient cuối của hero và nền ảnh sản phẩm — gần như đen với tông xanh lam, không phải đen thuần | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền mảnh, navigation dividers, đường viền thẻ, chữ trên nút — màu cấu trúc chủ đạo trên toàn bộ giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt thẻ, overlay ảnh sản phẩm, nền nút và chữ trên panel tối hoặc cam |

# Champions4good — Style Reference > Midnight sports broadside — poster câu lạc bộ cổ điển nổi bật trên nền tường màu mận tím **Theme:** dark Champions4good là club poster theo phong cách dark-first: nền deep plum, một điểm nhấn lavender rực rỡ duy nhất, và display type ultra-condensed tràn đầy màn hình như một sports broadside cổ điển. Hệ thống phân cấp thị giác cực kỳ đơn giản — mọi thứ có màu sắc đều là lavender-pink (#e894ff) trên nền plum, và các điểm nhấn phụ (mint, amber) xuất hiện như những dấu câu chức năng nhỏ thay vì cạnh tranh sự chú ý. Các phần body text chuyển sang nền trắng với cùng display type condensed được render bằng màu đen đậm, tạo nhịp điệu tương phản cao giữa các section. Thái độ của typography là chống lại sự kiềm chế: Druk Condensed ở 200-300px với tracking chặt và line-height chặt đẩy display copy ra sát mép container, trong khi Neue Montreal xử lý UI chrome ở kích thước con người. Các component tối thiểu — pill toggles, một button lavender filled duy nhất, navigation thưa thớt — để typography và sự tương phản plum-to-trắng làm tất cả công việc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Plum | `#23002b` | `--color-deep-plum` | Hero canvas, nền dark section, page-level ground — tạo tâm trạng câu lạc bộ đêm độc quyền | | Lavender Shock | `#e894ff` | `--color-lavender-shock` | Điểm nhấn hồng cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính | | Espresso Brown | `#291900` | `--color-espresso-brown` | Màu gần-đen ấm cho nền card, bề mặt UI tối, border pha ấm — thêm hơi ấm tinh tế cho bảng màu lạnh | | Ink Teal | `#002629` | `--color-ink-teal` | Màu gần-đen lạnh cho body text, bề mặt card sâu, border lạnh — undertone teal phân biệt text tối với nền plum |

# Eindhoven Design District — Style Reference > editorial brutalism trên nền giấy trắng — một tuyên ngôn thiết kế đô thị được thể hiện qua type cỡ lớn, ảnh thưa thớt và sự kiềm chế tuyệt đối. **Theme:** light Eindhoven Design District mang phong cách editorial brutalism trên nền giấy trắng: một canvas gần như đơn sắc, nơi typography đảm nhận vai trò chủ lực và nhiếp ảnh giành được không gian nhờ vào tỷ lệ và cách bố trí bất đối xứng. Toàn bộ giao diện là cuộc đối thoại giữa display type HelveticaNow cỡ lớn và phần text hỗ trợ nhẹ nhàng, với đen-trên-trắng chiếm 95% khối lượng công việc. Sắc màu duy nhất là một tông đỏ rực dùng làm điểm nhấn nội dung (nhãn danh mục bài viết) — không bao giờ dùng cho UI chrome. Các component được thiết kế phẳng một cách có chủ đích: pill-shaped ghost buttons, article card với ảnh phía trên, viền mảnh (hairline), không shadow hay gradient. Kết quả không phải là một website mà giống một tạp chí thiết kế in ấn tình cờ có tính tương tác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Charcoal Ink | `#000000` | `--color-charcoal-ink` | Toàn bộ text, border, icon strokes, nav links, button outlines và đường kẻ cấu trúc. Mực in chủ đạo của hệ thống — mọi hình khối và ký tự đều mang trọng lượng này | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang chính, bề mặt card, button fills và text đảo màu trên các khối tối. Nền tảng để mọi thứ khác được đặt lên | | Newsprint Gray | `#e8e8e8` | `--color-newsprint-gray` | Nền section cho các dải nội dung (article grid, footer) — tạo ra sự chuyển tông nhẹ nhàng giữa các section trắng mà không đưa thêm một hue thứ hai | | Pewter | `#bfbfbf` | `--color-pewter` | Helper text mờ, list divider, border link phụ — dùng tiết kiệm ở nơi thông tin bị giảm ưu tiên nhưng vẫn hiện diện |

# Active Theory — Style Reference > mái vòm đài thiên văn lúc nửa đêm — một thiết bị duy nhất phát sáng trong khoảng không, xung quanh là những micro-label bảng điều khiển **Theme:** dark Giao diện của Active Theory là một vực thẳm: canvas đen gần như tuyệt đối bị nuốt chửng bởi một artifact 3D phát sáng duy nhất, với chrome được thu gọn thành những label chữ hoa mỏng như thì thầm và những đường kẻ tóc (hairline rules). Ngôn ngữ thị giác vay mượn từ bản vẽ kiến trúc và vật lý hạt — một typeface hình học monospaced (nbarchitekt) gắn nhãn cho mọi phần tử giao diện, trong khi một serif (Times) xử lý những đoạn body text hiếm hoi, tạo ra sự căng thẳng giữa độ chính xác kỹ thuật và sự ấm áp biên tập. Các phần tử UI tồn tại ở vùng ngoại vi: một pill nav góc trên bên phải được kết nối bằng một đường kẻ, một cookie consent nhỏ neo ở góc dưới bên phải. Màu sắc gần như hoàn toàn không có sắc độ; điểm nhấn màu duy nhất là một màu tím nửa đêm bão hòa thấp (midnight violet) được sử dụng rất tiết kiệm trên affordance accept của cookie, không bao giờ vươn tới vị thế hero hay marketing. Hệ thống thiết kế về cơ bản nói rằng: bản thân tác phẩm 3D CHÍNH LÀ giao diện, và mọi phần tử chrome nên phục tùng nó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Canvas trang, phông nền modal, nền trường hạt | | Pure White | `#ffffff` | `--color-pure-white` | Văn bản chính, label nav, chữ trên nền tối | | Graphite Border | `#4d4d4d` | `--color-graphite-border` | Đường kẻ tóc (hairline dividers), đường viền cấu trúc mờ | | Steel Border | `#808080` | `--color-steel-border` | Viền nút outlined, đường chia thứ cấp |

# 11x– Digital workers — Style Reference > Cinematic editorial sa mạc — ảnh địa hình full-bleed kết hợp headline serif hoành tráng, trang web mang phong cách tạp chí xa xỉ. **Theme:** mixed 11x.ai vận hành như một nền tảng editorial cinematic: ảnh phong cảnh full-bleed ấn tượng kết hợp với typography serif custom cỡ lớn, tạo cảm giác như một trang tạp chí xa xỉ được tái sử dụng cho enterprise software. Giao diện gần như hoàn toàn đơn sắc — đen trên nền trắng, trắng trên nền deep teal — màu sắc chỉ xuất hiện dưới dạng pastel nhạt, phai màu nắng trên các feature card (xanh bụi, bạc hà, oải hương, đào). Điểm nhấn lặp lại duy nhất trên các section tối là một màu slate-teal nhạt dùng cho feature tag pills. Các component được thiết kế tối giản có chủ đích: pill-shaped buttons với 999px radius, portrait card viền mềm, và status badge nhỏ — không gì cạnh tranh với nhiếp ảnh hay headline serif. Nhịp điệu luân phiên giữa các editorial spread trắng và các narrative band tối full-bleed, tạo cho toàn bộ site nhịp điệu của một chiến dịch in ấn thay vì một landing page SaaS điển hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary action buttons trên nền sáng, body text, headline, card borders — mực vạn năng của hệ thống | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas trên section sáng, card surfaces, text trên nền tối, button text trên filled buttons | | Deep Teal | `#0b252a` | `--color-deep-teal` | Nền section tối — bề mặt màu lớn duy nhất, dùng cho narrative bands giữa các editorial spread | | Bone | `#f6f5f5` | `--color-bone` | Card surfaces và hairline borders trên section sáng — màu trắng ấm ngăn sự lạnh lẽo |

# International Magic — Style Reference > bảo tàng gallery về đêm — một luồng sáng duy nhất, một tác phẩm, và một bức tường nhung đen **Theme:** dark International Magic hiện ra trong một khoảng không gần như đen tuyệt đối, nơi chỉ có tác phẩm được phép lên tiếng. Toàn bộ giao diện là achromatic — chữ off-white trên nền than, với xám là biến số duy nhất — để sự chú ý đổ dồn vào thứ mà agency đang trình diễn. Layout thưa thớt, canh giữa và dọc, với khoảng thở rộng lớn giữa các section; navigation nằm gọn như ba từ lặng lẽ trên một dòng duy nhất ở đầu trang. Các component mềm mại và bo tròn: 24px trên device và work containers, 9999px trên button và badge, cùng một bóng đổ khuếch tán lớn nhẹ nhàng nâng nội dung lên khỏi bóng tối thay vì khóa chặt bằng các góc sắc. Typeface Wand UI Pro tùy chỉnh gánh gần như toàn bộ giọng thương hiệu — negative tracking ở kích thước display và tracking hơi rộng hơn trên micro-label tạo ra cùng một độ tương phản như trang: lặng lẽ ở tỷ lệ lớn, có chủ đích ở tỷ lệ nhỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void | `#0a0a0a` | `--color-void` | Nền trang, canvas chính — trường tối chứa mọi tác phẩm | | Chalk | `#f7f7f7` | `--color-chalk` | Viền mảnh, divider, đường viền input và cạnh card trên bề mặt sáng. Không dùng làm màu CTA chính | | Ivory | `#ebebeb` | `--color-ivory` | Nhãn button và viền button — ấm hơn Chalk một chút, dùng trên pill button trung tính để tạo cảm giác được nhấn nhưng không lạnh lẽo | | Ash | `#7c7c7c` | `--color-ash` | Link phụ và body text, divider nhẹ — xám trung bình cho type bị giảm nhấn mạnh nhưng vẫn cần đọc được |

# Dashlane — Style Reference > Midnight vault with mint keyholes. **Theme:** dark Dashlane is a dark, warm-toned security interface — a near-black cocoa canvas (#200f0a) with subtle plum depth, where mint (#a2f6f5) pierces the surface like a keyhole glow and violet (#858df9) plays the second voice. The system is built on one custom sans (Saans) that uses weight 300 for headlines and 500 for UI — a deliberate two-weight conversation that lets massive statistics whisper rather than shout. Surfaces sit on a warm scale from cocoa to deep aubergine, separated by hairline borders in muted beige (#e3ccc0) rather than cold grays. Components are pill-shaped for actions and 8px-rounded for cards; buttons feel like physical keys (9999px), never rectangles. The overall mood is 'midnight vault with a single lit doorway' — confident, restrained, with color appearing as small functional punctuation against an otherwise matte dark workspace. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cocoa Black | `#200f0a` | `--color-cocoa-black` | Page background, primary text on light surfaces — the warm near-black base; it has subtle brown warmth that distinguishes it from pure black and pairs with mint without vibrating | | Cream Mist | `#fcfaf9` | `--color-cream-mist` | Primary body and heading text on dark surfaces, icon fills — soft off-white that reads as paper against cocoa | | Warm Sand | `#e3ccc0` | `--color-warm-sand` | Hairline borders on cards and nav, subtle dividers — beige linework that defines edges without harshness | | Ash Gray | `#e5e7eb` | `--color-ash-gray` | Secondary borders, image outlines, utility rules — neutral gray for the most abundant structural lines |

# Shares — Style Reference > Terminal ngà với nhịp tím — một không gian làm việc trắng lâm sàng, nơi một màu duy nhất đánh dấu mọi hành động có chủ đích. **Theme:** light Một giao diện fintech đơn sắc trên nền gần trắng, nơi một màu tím rực rỡ làm tất cả cuộc trò chuyện. Ngôn ngữ thị giác thưa thớt và tự tin: không gradient trang trí, không trang trí màu sắc, không hiệu ứng bóng đổ. Mọi thứ nằm trên nền phẳng porcelain với chữ than đen đậm, và màu sắc duy nhất đáng được chú ý là Signal Violet (#594ff4), được dành riêng cho hành động — nút đã điền, link đang hoạt động, brand marks. Các component dựa vào hình học thay vì chiều sâu: pill controls (99px radius), card bo góc rộng rãi (36px), và divider xám 1px mềm thay vì elevation. Typography mang tính hình học và tracking chặt chẽ, với headline lớn ở line-height nén (1.05–1.15) mang cảm giác kiến trúc hơn là editorial. Product mockup nổi trong các bố cục xếp lớp, hơi chồng lên nhau — phone + dashboard + code panel — được neo bởi một màu thương hiệu duy nhất. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Violet | `#594ff4` | `--color-signal-violet` | Primary action fill, active links, brand iconography — màu sắc duy nhất trong hệ thống, tạo độ tương phản cao và cảm giác cấp bách trên nền đơn sắc | | Inkstone | `#1f1f1f` | `--color-inkstone` | Primary headings, body text emphasis, dark surface fills — màu trung tính tối chủ đạo | | Graphite | `#333333` | `--color-graphite` | Secondary text, dense borders, icon strokes — màu trung tính được dùng nhiều nhất | | Slate | `#5d5d5d` | `--color-slate` | Muted body text, navigation subtext, secondary borders |

# Readwise — Style Reference > Một cuốn nhật ký có chú thích của người đọc — nền trắng giấy yên tĩnh, headline serif, và một cây bút xanh. **Theme:** light Readwise mang đến một không gian làm việc văn chương cho productivity: canvas gần như trắng với một điểm nhấn editorial blue duy nhất và những mảng highlight vàng ấm, thể hiện trực quan mục đích của sản phẩm. Hệ thống typography kết hợp serif chuyển tiếp (Charter) cho headline với humanist sans (Mulish) cho mọi thứ còn lại, tạo ra bầu không khí phòng đọc sách vở nhưng hiện đại, thay vì cảm giác dashboard SaaS điển hình. Các bề mặt phẳng và yên tĩnh — card nổi trên nền giấy trắng mát (#f1f5f8) với viền mảnh, hầu như không có shadow, và bo góc tròn trông giống như những tấm thẻ in hơn là app tiles. Màu vàng (#fff7ca) hoạt động như một highlighter thực thụ phía sau văn bản được nhấn mạnh trong dòng, không phải là một điểm nhấn trang trí — bản sắc của sản phẩm CHÍNH LÀ hành động đánh dấu những điều quan trọng. Các component luôn gọn nhẹ và tập trung vào chữ, với một nút blue filled duy nhất mang toàn bộ trọng lượng, mọi thứ còn lại được thể hiện dưới dạng ghost hoặc text-link. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Pen Blue | `#478cd0` | `--color-pen-blue` | Điểm nhấn blue hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Highlighter Yellow | `#fff7ca` | `--color-highlighter-yellow` | Điểm nhấn vàng hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. | | Reader Orange | `#fb9100` | `--color-reader-orange` | Điểm nhấn cam hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, nền ảnh chụp màn hình sản phẩm, màu chữ trên nút filled, và nền nav. Tầng bề mặt cao nhất |

# Monzo — Style Reference > Ấm áp của san hô trên nền giấy bạc hà mát — sự kiềm chế đầy tự tin với một điểm nhấn nóng duy nhất. **Theme:** light Monzo hoạt động như một ngân hàng thách thức (challenger bank) thuần kỹ thuật số với ngôn ngữ thị giác nhẹ, ấm áp và thân thiện không hề giả tạo. Canvas là một màu trắng pha xanh bạc hà siêu nhẹ (#f2f8f3) làm nền cho các bề mặt thẻ trắng sắc nét, tạo cảm giác nhiều lớp giấy chồng lên giấy mà không cần dựa vào shadow dày. Một màu Hot Coral (#ff4f40) duy nhất mang toàn bộ năng lượng màu sắc — nó nhuộm logo, link, heading, icon và chính sản phẩm thẻ vật lý, trong khi phần còn lại của giao diện giữ trung tính và yên tĩnh. Typography là sans-serif tùy chỉnh với hai giọng nói: một họ chữ text với letter-spacing âm đặc trưng -0.05em giúp siết chặt các đoạn văn, và một display face dày ở weight 600-800 cho heading. Các component được bo tròn rộng rãi (pill cho action, 64px cho container) và cố tình có độ cao thấp — thương hiệu tin tưởng vào màu sắc, trọng lượng chữ và khoảng trắng để tạo hierarchy, chứ không phải drop shadow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Hot Coral | `#ff4f40` | `--color-hot-coral` | Chữ ký thương hiệu — logo, link, heading, icon, sản phẩm thẻ. Một điểm nhấn sống động duy nhất trên nền giao diện trung tính; mọi khoảnh khắc màu sắc trong hệ thống đều lấy từ một sắc thái này | | Midnight Ink | `#091723` | `--color-midnight-ink` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính | | Deep Navy | `#112231` | `--color-deep-navy` | Màu nền phụ và điểm nhấn footer. Sáng hơn Midnight Ink một chút dành cho các phần tử tối nhiều lớp | | Page Mist | `#f2f8f3` | `--color-page-mist` | Canvas trang — nền chủ đạo phía sau mọi section nội dung. Màu trắng pha xanh nhẹ mang lại hơi ấm cho giao diện mà không cạnh tranh với bề mặt trắng |

# The Verge — Style Reference > Midnight control room, mint alerts **Theme:** dark The Verge reads as a late-night newsroom: a near-black canvas where type carries the weight and teal appears only as functional punctuation. The Signal Mint accent (#3cffd0) marks everything that is alive — section labels, author bylines, active states, the subscribe button — while the rest of the page stays achromatic. Display headlines run at Manuka weight 900, 60–107px, creating editorial impact at near-zero line-height, then article bodies switch to Fk Roman Standard serif to separate reading mode from chrome. The vertical 'Verge' wordmark pinned to the left margin is the page's most distinctive structural element — a constant typographic frame, not a logo. Violet (#5200ff) and red-orange (#ff3d00) appear only as section-card fills (Most Popular, Podcasts), giving the monochrome feed two moments of color without breaking the dark mood. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal | `#131313` | `--color-charcoal` | Page canvas, primary background, inverted sections | | Onyx | `#000000` | `--color-onyx` | Deepest darks, shadows, text on light surfaces | | Paper | `#ffffff` | `--color-paper` | Primary text, inverted surfaces, light icons | | Iron | `#313131` | `--color-iron` | Elevated card surface, image-adjacent panels |

# Sleeve — Style Reference > floating dock trên marble **Theme:** light Trang web của Sleeve mang phong cách như một trang sản phẩm macOS được dàn dựng trong gallery: canvas trắng vô tận, một ảnh sản phẩm hero duy nhất nổi lơ lửng với các app-icon vệ tinh quay quanh, và typography làm toàn bộ công việc. Bảng màu gần như đơn sắc — đen, trắng, và đường viền xám mảnh là những màu cấu trúc duy nhất — trong khi năng lượng màu sắc duy nhất đến từ gradient xanh của chính ứng dụng và một bộ nhỏ các icon hệ thống nhiều màu dùng làm điểm nhấn trang trí. Headline cực lớn và tracking dày (96px display với letter-spacing -0.025em, section heading 48px), body text là system-sans ở 15-18px, và micro-label như 'THEMING' và 'FEATURE LIST' dùng tracking 0.05em để thì thầm thay vì la hét. Các component mềm mại và chunky: card radius 24px, pill buttons 9999px, inset 1px borders ở độ mờ 0.05 thay vì shadow nặng. Ngôn ngữ thiết kế là sự tự tin qua kiềm chế — không gradient trên UI, không màu trên button, chỉ có trọng lượng typographic và khoảng thở rộng rãi gánh vác mọi màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Midnight Ink | `#000000` | `--color-midnight-ink` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính | | Graphite | `#333333` | `--color-graphite` | Text phụ, icon fill, button text — mềm hơn đen tuyền cho body emphasis mà không mất trọng lượng | | Slate | `#374151` | `--color-slate` | Neutral hỗ trợ cho UI phụ, divider và muted label. Không nâng lên thành màu CTA chính | | Silver Mist | `#e5e7eb` | `--color-silver-mist` | Hairline borders, subtle divider, light surface washes — màu được dùng nhiều nhất trong hệ thống, định nghĩa cạnh ở độ mờ tương đương 0.05 |

# Orderful — Style Reference > industrial command deck — a logistics dispatcher's printed control sheet in black ink and surgical vermillion, every page restrained enough to let a single CTA shout. **Theme:** light Orderful reads as an industrial command deck: a near-pure achromatic surface where black-and-white typography and 8px radii meet a single surgical vermillion accent that punctuates actions rather than decorates. The typographic voice belongs to telegraf, a custom grotesk spanning weights 100–700 and sizes 12–72px, tightened with −0.025em to −0.03em tracking on display and expanded 0.025em on uppercase eyebrows, with modernGothic at 14px/300 handling a specific small-text register via the ss02 alternate. Geometry is disciplined — one universal 8px radius, one two-layer shadow stack used sparingly, and a base 8px spacing scale that breathes at 40–64px section gaps. The result is a calm, information-rich B2B surface that treats color as a scarce commodity: most screens stay monochrome, letting the single red-orange mark function as the only signal that something is actionable. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vermillion Signal | `linear-gradient(94deg, rgb(255, 2, 1) -33.85%, rgb(255, 120, 2) -1.54%, rgb(255, 2, 1) 73.55%)` | `--color-vermillion-signal` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#000000` | `--color-ink-black` | Hairline borders, logo marks, high-contrast icon strokes, strong body emphasis | | Carbon | `#1f1f1f` | `--color-carbon` | Dark card backgrounds, inverted feature panels, footer surface | | Slate 900 | `#101828` | `--color-slate-900` | Display and heading text, hero headlines — the dominant typographic color |

# RainbowKit — Style Reference > Modal ví neon lơ lửng trong khoảng không đen — dải cực quang xanh dương pha tím phát sáng xuyên qua bóng tối. **Theme:** dark RainbowKit sử dụng ngôn ngữ crypto-native của nửa đêm: một canvas đen với các thẻ nổi tối, typography sans-serif bo tròn đầy tự tin, và một gradient xanh dương pha tím duy nhất làm trái tim cảm xúc của thương hiệu. Thiết kế tồn tại trong khoảng cách giữa sự nghiêm túc của developer-tool và sự dễ tiếp cận của consumer-app — shadow đậm tạo chiều sâu trên bề mặt tối phẳng, inset white border highlight định nghĩa các cạnh nút, và bán kính 9999px biến mọi tương tác thành những viên pill thân thiện. Màu sắc được sử dụng một cách có chủ đích: signal blue cho hành động chính, aurora gradient cho hero CTA, và chữ trắng tinh trên các lớp xám để phân cấp. Các modal component nổi với stack shadow 24px ấn tượng, xem trước bề mặt sản phẩm của chính toolkit. Lưới đối tác 6 cột bên dưới báo hiệu sự tin cậy của cộng đồng ở quy mô lớn mà không cần đến testimonials. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Signal Blue | `#0e76fd` | `--color-signal-blue` | Primary CTA fill, trạng thái active, brand wordmark, nhấn mạnh link — màu xanh duy nhất có đủ diện tích bề mặt để mang bản sắc thương hiệu | | Aurora Gradient | `linear-gradient(to right, rgb(56, 152, 255), rgb(122, 112, 255))` | `--color-aurora-gradient` | Hero CTA gradient, brand wordmark highlight, vùng chọn được tô — chảy từ xanh bầu trời đến tím điện | | Electric Violet | `#7a70ff` | `--color-electric-violet` | Điểm kết thúc gradient, brand-secondary accent — chỉ xuất hiện như nửa tím mát của aurora | | Deep Iris | `#38228f` | `--color-deep-iris` | Lớp phủ tím cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. |

# Fiasco — Style Reference > "editorial gallery on cream paper" — warm off-white canvas with confident black type and single-color project cards. **Theme:** light Fiasco operates in an editorial, gallery-like register: a warm off-white canvas (#f8f9f3) with near-black text (#1d1e19) creates a hushed paper feel, while every project card introduces a single vivid color field that acts as wayfinding rather than decoration. The type system pairs a geometric sans (area-normal) for body and interface with a more characterful display family (Gooper) for headlines, giving the page an italic, magazine-like confidence. Components are deliberately unembellished — pill-shaped buttons (800px radius), 8px-cornered cards, 3px input fields, and a 40px radius reserved for hero and feature surfaces. Color appears as sparse, deliberate punctuation: yellow, pink, blue, orange, green blocks behind work, while the rest of the system stays in warm neutrals so the colored surfaces read as the loudest thing in the room. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas Cream | `#f8f9f3` | `--color-canvas-cream` | Page background, button borders, soft surface | | Ink Black | `#1d1e19` | `--color-ink-black` | Primary text, nav borders, link borders, all structural outlines | | Stone Mist | `#e9eae2` | `--color-stone-mist` | Nav borders, icon strokes, subtle dividers, secondary borders | | Shadow Stone | `#d0d1cc` | `--color-shadow-stone` | Card and hero box-shadow base, low-contrast elevation |

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

# Hellotime — Style Reference > trung tâm chỉ huy biên tập đơn sắc **Theme:** light Hellotime là một bề mặt năng suất gần như đơn sắc: canvas trắng, chữ gần đen, và một điểm nhấn xanh điện xuất hiện hầu như chỉ dưới dạng gradient highlight trên hero headline và các từ khóa. Hệ thống thị giác dựa vào tương phản trọng số typographic thay vì đa dạng màu sắc — headline 700-weight khổng lồ (64–80px) nằm cạnh body text 400–500 nhỏ gọn, tạo phân cấp rõ ràng mà không cần trang trí nhiễu. Các bề mặt phẳng với đường viền mảnh (1px, #c8cad0) và border-radius 16px; elevation bị loại bỏ để ưu tiên các cạnh sắc nét và khoảng trắng rộng rãi. Nút tối màu (#25272d) là UI element có màu sắc duy nhất ngoài logo màu xanh lá và accent gradient xanh dương, khiến mọi hành động đều có chủ đích thay vì trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#151619` | `--color-ink` | Văn bản chính, đường viền icon, đường viền mảnh, chân trang — màu non-background chiếm ưu thế trong hệ thống | | Smoke | `#7f8491` | `--color-smoke` | Văn bản phụ/mờ, văn bản link, đường viền nhẹ, placeholder label — lùi lại để body copy được đọc trước | | Fog | `#c8cad0` | `--color-fog` | Đường viền card và component, divider nhẹ, đường viền icon ở trạng thái nghỉ — hairline mặc định | | Ash | `#e1e2e5` | `--color-ash` | Divider giữa các section, tint bề mặt phụ, đường viền input ở trạng thái nghỉ |