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

# Modern Business Intelligence — Style Reference > Sunlit greenhouse editorial **Theme:** light Mode sử dụng ngôn ngữ editorial phong cách thực vật: nền sage nhạt (#eef2e3) thay thế cho màu trắng SaaS vô trùng thông thường, và một điểm nhấn chartreuse duy nhất (#c8f169) tạo điểm nhấn cho các hành động với một pop sắc nét, gần như huỳnh quang. Font headline là một serif tùy chỉnh (Grenette) ở kích thước 56–96px với negative tracking mạnh — các chữ có cảm giác được kéo chặt, gần như condensed, và đọc giống như bìa tạp chí hơn là dashboard. Chiều sâu đến từ một stack màu ba lớp (sage → forest green → chartreuse) thay vì đổ bóng; các bề mặt nằm phẳng cạnh nhau và dựa vào tương phản hue để tạo hierarchy. Các phần tử tương tác sử dụng border-radius nhỏ 4px trong khi card và bề mặt lớn dùng 16px, tạo nên một ngôn ngữ hình học nhất quán. Mood tự tin, ấm áp và trí tuệ — BI không có sự lạnh lẽo của doanh nghiệp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pale Sage | `#eef2e3` | `--color-pale-sage` | Canvas trang, bề mặt card sáng, nền eyebrow, mat ảnh hero | | Paper White | `#fcfcfc` | `--color-paper-white` | Bề mặt card nâng cao, nền nav, modal, footer | | Ink Black | `#000000` | `--color-ink-black` | Text chính, stroke icon, hairline border, đường viền ghost button | | Charcoal | `#242423` | `--color-charcoal` | Text phụ và fill icon — mềm hơn đen thuần cho các phần tử UI muted |

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

# Monad — Style Reference > Tạp chí kỹ thuật monospaced trên giấy kem — nhẹ nhàng, chính xác, mang phong cách editorial. **Theme:** light Monad hiện ra như một tài liệu editorial nhẹ nhàng trên nền giấy ấm: canvas màu kem, mực than, và một bề mặt card màu oải hương gần như xám duy nhất mang toàn bộ UI. Điểm nhấn đặc trưng là typography — một serif nhân văn (humanist serif) ở weight 400 cho headline, kết hợp với font monospaced cho gần như toàn bộ UI text, tạo cảm giác technical-journal hiếm thấy trong B2B SaaS. Màu sắc gần như hoàn toàn vắng bóng trong giao diện; các tông màu đào, oải hương và bạc hà chỉ xuất hiện trong sơ đồ luồng dữ liệu (data-flow diagram) ở hero, nơi chúng hoạt động như những mảng màu khí quyển mềm mại chứ không phải điểm nhấn thương hiệu. Các component phẳng và tự tin: pill buttons 100px, cards border-radius 40px, viền mảnh (hairline) gần như đen, và một bóng đổ mềm duy nhất — không có gì nặng nề, không có gì bóng bẩy. Nhịp điệu tổng thể là khoảng thở rộng rãi, các khối text căn giữa, và các đường flow ngang gợi ý chuyển động mà không cần animation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Canvas trang, nền nav, bề mặt badge — nền off-white ấm áp khiến toàn bộ giao diện có cảm giác như giấy thay vì màn hình | | Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, viền mảnh (hairline borders), và màu viền chủ đạo trên nav, cards, và divider | | Charcoal | `#242424` | `--color-charcoal` | Nền primary action button, viền badge, bề mặt nâng cao — filled CTAs hơi lệch khỏi đen tuyền để tạo độ mềm thị giác | | Graphite | `#4e4d4d` | `--color-graphite` | Body và heading text ở độ tương phản thấp hơn, viền card phụ, muted UI elements |

# Mobbin — Style Reference > Bảng mẫu grayscale — một tờ in thử của thợ in nơi trọng lượng typography CHÍNH LÀ màu sắc. **Theme:** light Mobbin vận hành dựa trên sự kiềm chế achromatic thuần túy — zero chroma trên toàn bộ bảng màu, buộc hệ thống phân cấp chỉ dựa vào weight, kích thước và tông màu. Trang là khoảng trắng bị ngắt quãng bởi mực gần-đen (#141414) ở kích thước display và xám ấm (#707070, #adadad) cho text phụ. Typeface tùy chỉnh 'saans' là yếu tố khác biệt duy nhất: các weight phân số (440, 456, 652) không tồn tại trong bất kỳ system font nào, tạo ra khối lượng headline nằm giữa regular và semibold — typography đảm nhận công việc của màu sắc. Hình dạng pill 9999px xuất hiện trên mọi phần tử tương tác trong khi nội dung card nằm trên các hình chữ nhật bo tròn 16–24px, khiến các button trông như badge trong một biển thumbnail được đóng khung. Bản thân nội dung — ảnh chụp màn hình app mobile trong các card grayscale — CHÍNH LÀ kết cấu thị giác của trang. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Ink | `#141414` | `--color-midnight-ink` | Primary text, headings, filled CTA buttons, nav items, icon strokes — con ngựa thồ màu sắc duy nhất của một hệ thống achromatic | | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, text button trên nền tối | | Graphite | `#707070` | `--color-graphite` | Body copy, secondary links, descriptive text | | Ash | `#adadad` | `--color-ash` | Tertiary text, viền button disabled/muted, placeholder icons |

# Haley Park — Style Reference > Illuminated manuscript on forest vellum **Theme:** dark A personal portfolio system built on a dark forest-green manuscript — the page reads like a hand-illuminated codex rather than a website. The entire interface lives inside a single chromatic mood: deep pine canvas (#143930), warm parchment text (#f8f2de), and a sage structural accent (#456859) for line work and iconography. Typography stays in the weight-200 whisper range across a curated family of editorial serifs, with one display cut (Wispy, 96px) used as a single monumental name treatment. Decorative gothic architecture — rose windows, arches, intersecting plus-signs at line junctions — bleeds through the layout as full-width structural pattern rather than ornament. No drop shadows, no gradients, no rounded cards; the system draws its depth from line weight, the cream-on-green contrast pair (11.3:1), and the disciplined rhythm of thin horizontal rules with terminal crosses. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pine Vellum | `#143930` | `--color-pine-vellum` | Page canvas, all section backgrounds, box-shadow tint for the only subtle elevation present | | Cedar Stroke | `#456859` | `--color-cedar-stroke` | Stroke color for background architectural illustrations, icon outlines, sage decorative line art, secondary borders | | Parchment | `#f8f2de` | `--color-parchment` | Primary text, link text, outlined button borders, heading characters, and the full suite of hairline rules and dividers | | Aged Tan | `#bead89` | `--color-aged-tan` | Muted secondary text and metadata labels (project years, category tags) — sits between parchment and the background, a quieter tertiary |

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

# sweetgreen — Style Reference > bảng phong cách farm-stand vào giờ vàng **Theme:** light Hệ thống thiết kế của sweetgreen là một thẩm mỹ ấm áp, pha trộn giữa farm-stand và typography hiện đại: nền cream (#f4f3e7) bắt nguồn từ chất liệu tự nhiên, với deep forest green làm neo cấu trúc và electric lime (#e6ff55) làm màu hành động đơn lẻ, năng lượng cao. Nhiếp ảnh là yếu tố dẫn dắt thương hiệu — những shot đồ ăn overhead, bão hòa màu, trên nền gạch ấm, gốm sứ và bê tông — được xử lý như hero, không bao giờ là trang trí. Typography đảm nhận phần nặng trên chrome: một geometric sans tùy chỉnh (SweetSans) thể hiện các nhãn danh mục cỡ lớn và hero headline ở weight cực đoan (400 ở 70–80px, với line-height 0.85 khiến các chữ gần như chạm nhau), trong khi một display face siêu nhẹ thứ cấp (Grenette ở 200) tạo sự tương phản qua sự kiềm chế. Các component được thiết kế tối giản có chủ đích — pill-shaped buttons, ghost text links với mũi tên, product cards không badge — để đồ ăn và headline typography chiếm trọn mọi màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Forest | `#00473c` | `--color-deep-forest` | Màu thương hiệu chính, nav logo, dark pill buttons, text accents, badge borders, link colors — màu xanh cấu trúc neo giữ bảng màu | | Lime Glow | `#e6ff55` | `--color-lime-glow` | Màu hành động xanh cho filled buttons, trạng thái điều hướng được chọn, và các thời điểm chuyển đổi tập trung. | | Sage Mist | `#d8e5d6` | `--color-sage-mist` | Nền section, card surfaces, content band xen kẽ — màu xanh thực vật nhẹ nhàng báo hiệu sự tươi mới mà không cạnh tranh với ảnh đồ ăn | | Warm Sand | `#e8dcc6` | `--color-warm-sand` | Accent surface cho các section band xen kẽ — màu be ấm kết hợp với ảnh đồ ăn và thêm sự đa dạng earthy vào bảng màu xanh chủ đạo |

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

# Epidemicsound — Style Reference > Ghi chú liner boutique trên giấy ngập nắng. Một spread trắng kem ấm với custom editorial serif, một mảng hồng neon duy nhất phá vỡ sắc đơn sắc như bìa tạp chí, và các CTA đen sắc nét mang cảm giác như tem mực — không phải sản phẩm phần mềm, mà là một vật thể in ấn tình cờ phát nhạc trực tuyến. **Theme:** light Epidemic Sound mang phong cách editorial của ngành công nghiệp âm nhạc: một canvas trắng xương ấm áp, UI sans-serif đen tự tin, và một custom serif tương phản cao làm giọng thương hiệu ở kích thước display. Một màu hồng neon rực rỡ (#ff82c2) là điểm nhấn đặc trưng — được dùng có chừng mực làm nền section full-bleed và nhấn mạnh inline, không phải trang trí rải rác. Độ sặc sỡ ở mức 1%, vì vậy hệ thống nên mang cảm giác gần như đơn sắc, với màu sắc xuất hiện như dấu câu editorial có chủ đích (hồng, xanh tín hiệu, vàng nắng). Các component phẳng và hình chữ nhật, gần như không có border-radius, rất ít shadow — thiết kế dựa vào trọng lượng typography và khoảng cách rộng rãi để tạo hierarchy. Italic bên trong display serif là một signature move: nhấn mạnh được đặt trong cùng một font family thay vì một màu sắc hay trọng lượng riêng, mang lại cho headline chất văn chương, gợi nhớ liner notes. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Hot Pink | `#ff82c2` | `--color-hot-pink` | Nền section điểm nhấn đặc trưng (announcement bar, Feature Highlight Block), nhấn mạnh inline link — dấu câu editorial của thương hiệu. Dùng full-bleed, không dùng làm tint | | Sun Yellow | `#ffda40` | `--color-sun-yellow` | Lớp phủ điểm nhấn và decorative badge fills. Điểm nhấn sắc độ thứ hai kết hợp với hồng trong bảng màu đặc trưng của thương hiệu | | Signal Blue | `#20afff` | `--color-signal-blue` | Nền section phụ, decorative callout. Một điểm nhấn lạnh làm đối trọng với hồng và vàng ấm, dùng khi cần một khoảnh khắc sắc độ thứ ba trong các trang dài | | Ember Orange | `#ff6138` | `--color-ember-orange` | Điểm nhấn sắc độ rải rác cho icon strokes và decorative highlights nhỏ. Không định nghĩa section |

# OLIPOP — Style Reference > Retro apothecary kết hợp soda fountain — menu soda in trên giấy ấm. **Theme:** light OLIPOP là sự pha trộn giữa apothecary phai màu nắng và soda fountain: nền cream ấm áp, một màu forest-teal đầy uy lực làm điểm neo cho mọi header, button và brand mark, cùng một carousel các thẻ sản phẩm pastel đọc như nhãn kẹo từ cửa hàng tổng hợp thập niên 1950. Typography đảm nhận phần lớn công việc kể chuyện — một display serif retro tương phản cao (WindsorEF) ở weight 800 nổi bật trên các headline, trong khi một sans-serif hiện đại sạch sẽ (Ano) xử lý mọi thứ còn lại với sự lặng lẽ chuyên nghiệp. Hệ thống sống trong khoảng không giữa sự ấm áp cổ điển và tiện ích thương mại điện tử hiện đại: button hình pill, card bo góc 16px mềm mại, và không có shadow nào ngoại trừ một lớp ánh sáng nhẹ duy nhất trên primary call-to-action. Màu sắc được phân bổ một cách tiết kiệm — phần lớn trang là cream và forest-teal, với năng lượng màu sắc dành riêng cho các thẻ sản phẩm, một điểm nhấn wine-red duy nhất và một secondary action bright-teal. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#14433d` | `--color-forest-ink` | Điểm nhấn teal hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính | | Cream Paper | `#fdf7e7` | `--color-cream-paper` | Canvas trang, nền section — màu trắng ngà mà mọi bề mặt đều nằm trên, hơi ấm để type không bao giờ có cảm giác lâm sàng | | Mint Sage | `#d3e8e3` | `--color-mint-sage` | Nền hero panel, các lớp nền section mềm — một mint bão hòa thấp lùi về phía sau để forest-teal text có thể dẫn dắt | | Charcoal | `#3a3a3a` | `--color-charcoal` | Body text, link text, icon phụ — mềm hơn đen thuần để hài hòa với nền cream ấm |

# Raw Materials — Style Reference > brutalist editorial trên nền kem ấm **Theme:** light Raw Materials vận hành như một hệ thống typographic maximalist: một canvas kem ấm mang display type thường xuyên vượt quá 200px, với mọi phần tử bề mặt chính đều có màu sắc riêng biệt. Hệ thống từ bỏ một màu thương hiệu duy nhất để chọn bảy màu đánh dấu section (cam, tím, mực, xanh coban, đỏ thẫm, vàng, xanh lá) — những màu này gắn nhãn cho cả navigation lẫn content blocks, tạo nhịp điệu giống tạp chí zine, nơi màu sắc cho bạn biết mình đang ở chapter nào. Các bề mặt phẳng và bo tròn 16px — không shadow, không gradient, không elevation. Typography đảm nhận toàn bộ công việc phân cấp, nhảy từ caption 12px lên display headline 259px với bốn custom typefaces, tất cả đều dùng stylistic alternate "ss02". ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ember Orange | `#ff3d00` | `--color-ember-orange` | Accent màu cam hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Pulse Violet | `#5900cc` | `--color-pulse-violet` | Accent màu tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Cobalt Blue | `#2835f8` | `--color-cobalt-blue` | Accent màu xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Crimson | `#ff003d` | `--color-crimson` | Accent màu đỏ hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |

# Mercury — Style Reference > Mountain Top Command Center **Theme:** dark Thiết kế mang cảm giác của một trung tâm chỉ huy lúc hoàng hôn, vừa rộng lớn vừa tập trung. Bảng màu trung tính tối gần như đen (#1e1e2a, #171721) tạo nên một canvas điện ảnh sống động, nơi dòng chữ trắng nhẹ (#ededf3) mang lại độ rõ nét sắc sảo. Mọi năng lượng đều được dồn vào một điểm nhấn xanh tím duy nhất (#5266eb), được dành riêng cho các call-to-action chính, giống như đèn báo hiệu trên bảng điều khiển công nghệ cao. Typography là yếu tố định hình chính, với các custom font được sử dụng ở weight nhẹ cho headline, tạo nên giọng điệu vừa có thẩm quyền vừa dễ tiếp cận. Sự tương phản giữa hình ảnh hero rộng lớn, đầy không khí và giao diện text-driven bên dưới tạo ra một hành trình từ khát vọng đến hành động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Mercury Blue | `#5266eb` | `--color-mercury-blue` | Nút CTA chính — điểm nhấn sống động duy nhất trong bảng màu trung tính, tập trung hành động của người dùng. | | Ghost Blue | `#cdddff` | `--color-ghost-blue` | Nền nút phụ, hover states — màu xanh nhạt, hư ảo gợi ý tương tác. | | Deep Space | `#171721` | `--color-deep-space` | Lớp nền trang ngoài cùng, tạo chiều sâu. | | Midnight Slate | `#1e1e2a` | `--color-midnight-slate` | Nền chính của trang và các section. |

# Stable Audio — Style Reference > Sunlit studio on warm paper. **Theme:** light Stable Audio sử dụng ngôn ngữ studio trên giấy ấm: canvas là màu kem (#f4f1ec) thay vì trắng lâm sàng, để các headline đen đậm và một CTA màu hổ phách duy nhất nằm trên bề mặt mang cảm giác analog và dễ tiếp cận, giống như bìa đĩa than. Các panel màu full-bleed — oải hương, mù tạt, xô thơm, kaki — hoạt động như background section cỡ lớn phía sau các product mockup, tạo nhịp điệu cho trang giống như các mẫu màu sơn phía sau bàn mixer. Mọi phần tử tương tác đều có dạng pill (9999px) và mọi bề mặt card đều có góc gần như vuông 4px, tạo sự tương phản có chủ đích giữa controls bo tròn và khối nội dung góc cạnh. Một đồ họa hình bán nguyệt "mặt trời" đặc trưng xuất hiện trong mọi track artwork, và một màu xanh neon rực rỡ (#a0f32f) đánh dấu mọi phần tử âm thanh đang hoạt động, làm cho âm thanh hiện hữu trên toàn bộ giao diện. Product screenshots đảm nhận vai trò giải thích; illustration và lifestyle photography được cố tình loại bỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Amber Pulse | `#f9a916` | `--color-amber-pulse` | Accent vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính | | Lime Signal | `#a0f32f` | `--color-lime-signal` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. | | Lavender Wash | `#c4bae3` | `--color-lavender-wash` | Background panel tính năng text-to-audio — full-bleed section tint cỡ lớn | | Mustard Field | `#e1ca46` | `--color-mustard-field` | Background panel tính năng audio-to-audio — full-bleed section tint |

# Anything — Style Reference > afternoon daydream over a wildflower field. Soft, floating, a little surreal — white UI plates drifting above a photograph that feels half-remembered. **Theme:** light Anything speaks in a daylight reverie: white canvas overlaid on dreamy photography, pill-shaped translucent navigation floating above the imagery, and one soft green accent that surfaces only as decorative punctuation. The wordmark is set in Instrument Serif italic — handwritten, not corporate — paired with Inter for UI and Instrument Sans for headlines, replacing the typical bold sans wordmark with something more personal. Components round generously at 20px on cards and images, 9999px on buttons, with shadows kept whisper-soft. Color is rationed: most surfaces are white or the faintest off-white; #448f52 appears sparingly on text and shimmer gradients, never as a filled CTA. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary headings, body text, and icon fills on light surfaces. Do not promote it to the primary CTA color | | Charcoal | `#18191b` | `--color-charcoal` | Secondary text, heading color, deep UI surfaces — slightly warmer than pure black | | Slate Mid | `#6a6a6c` | `--color-slate-mid` | Body text, helper copy, muted descriptions | | Steel | `#7d7f80` | `--color-steel` | De-emphasized headings, inactive labels |

# Moonli — Style Reference > Vôi điện trên nền trắng — một căn phòng xanh rực rỡ được khoét ra từ không gian đơn sắc, đóng khung bởi những góc bo tròn rộng rãi. **Theme:** light Moonli vận hành trên chủ nghĩa tối giản màu sắc triệt để: canvas trắng, chữ đen, và một điểm nhấn vôi điện duy nhất xuất hiện như một khối không gian lớn thay vì rải rác trên các UI element. Màu vôi (#b8ff65) hoạt động như một căn phòng, không phải một highlight — nó tràn ngập toàn bộ hero và xuất hiện lại ở nền section, không bao giờ dùng làm button fill hay icon tint. Mọi thứ khác đều là đen thuần trên nền trắng, neo giữ bởi border-radius rộng 30-40px giúp làm mềm độ tương phản đơn sắc gay gắt. DM Sans đảm nhận toàn bộ hệ thống typography với dải weight rộng, letter-spacing dày đặc co lại mạnh ở kích thước display (-0.05em ở 58px). Minh họa nét đen trên bề mặt xanh lá thêm cá tính và sự ấm áp mà không phá vỡ kỷ luật hai màu. Kết quả mang phong cách tự tin, gần như poster — như một vật thể sáng duy nhất trong gallery toàn tường trắng. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lime Voltage | `#b8ff65` | `--color-lime-voltage` | Nền section mang tính không khí, hero block — giọng màu duy nhất của hệ thống, dùng ở quy mô full-section thay vì làm UI accent | | Obsidian | `#000000` | `--color-obsidian` | Text chính, tất cả border, tất cả icon, scroll-indicator fill, logo mark | | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nav element fills | | Fog White | `#f3f3f3` | `--color-fog-white` | Bề mặt card phụ, nền section xen kẽ |

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

# Henry — Style Reference > Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed. **Theme:** mixed Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên | | Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper | | Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối | | Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |

# Poly — Style Reference > Ember trên nền sứ — một chấm gradient ấm lơ lửng trên trang editorial trắng tinh, bao quanh bởi headline serif nhẹ nhàng và ảnh full-bleed. **Theme:** light Poly là phần mềm editorial: nền canvas off-white ấm (#f4f4f4), mực gần đen cho text và UI, và một gradient duy nhất từ cam ember sang đỏ dành riêng cho brand mark. Nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí — ảnh full-bleed về bàn làm việc với chất liệu tự nhiên và ánh sáng định hướng ấm thay thế cho illustration và trang trí. Display type là humanist serif (Haffer ở weight 450, với tính năng liga và ss04) được kéo chặt ở -0.02em, kết hợp với Inter cho UI. Hệ thống mang cảm giác kiềm chế như cách một trang tạp chí kiềm chế: một khoảnh khắc màu sắc duy nhất, đường viền mảnh thay vì đổ bóng, bán kính 8px ở mọi nơi, và lưới cột để ảnh có không gian thở. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Gradient | `linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%)` | `--color-ember-gradient` | Brand mark, logo Poly, điểm nhấn màu duy nhất — cam ấm chuyển sang đỏ tín hiệu, chỉ dùng trên identity, không bao giờ dùng trên body UI | | Porcelain | `#f4f4f4` | `--color-porcelain` | Canvas trang, bề mặt card, text inverted trên nền ảnh tối | | Onyx | `#000000` | `--color-onyx` | Viền tối và separator cho bề mặt nâng cao và UI inverted. Không dùng làm màu CTA chính | | Graphite | `#292930` | `--color-graphite` | Text phụ, viền mảnh, icon fill, độ ấm nhẹ giúp gần đen không bị lạnh lẽo |

# Aira — Style Reference > Sunday broadsheet lúc nửa đêm — ảnh ấm áp, chữ in mực, UI thì thầm. **Theme:** light Aira sử dụng ngôn ngữ editorial-monochrome: không khí nhiếp ảnh ấm áp trên nền UI gần như không màu, xây dựng từ một tấm canvas off-white duy nhất và chữ ink-black. Điểm nhấn đặc trưng là serif display face (Gestura) kết hợp với Inter cho mọi chức năng — một serif headline ở 56-72px khiến một AI tool fintech trông như tờ báo kinh doanh Chủ nhật, không phải dashboard. Giao diện giữ phong cách giấy tờ yên tĩnh: pill buttons, hairline borders, một dark surface mỗi section, và hầu như không có chromatic accent — một hero ảnh ấm áp duy nhất mang toàn bộ nhiệt độ cảm xúc. Màu sắc chỉ xuất hiện như sự vắng mặt của màu sắc, nên contrast (trắng → gần đen) và chất liệu (soft shadow, gentle radius) làm công việc nặng nhọc mà một bảng màu SaaS thông thường sẽ đảm nhận. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Bone White | `#fafafb` | `--color-bone-white` | Canvas chính, bề mặt card, chữ button, input fills | | Graphite Ink | `#2c2c2b` | `--color-graphite-ink` | Border chính, hairline dividers, link underlines, heading accents | | Deep Coal | `#1f1f1f` | `--color-deep-coal` | Action fill trung tính độ tương phản cao cho primary buttons trên nền sáng | | Obsidian | `#111111` | `--color-obsidian` | Body và heading text ở weight tối đa, dark hero overlays, icon strokes |

# Aboard — Style Reference > pastel paper notebook on a white desk **Theme:** light Aboard là một workspace people-ops nhẹ nhàng, thoáng đãng sống trên nền gần trắng với một màu xanh dương đậm duy nhất đóng vai trò là brand color và bảng năm màu pastel làm bề mặt card để tạo cảm giác ấm áp. Typography dựa trên system-ui với tracking nén: headline rất to, rất tight (64px ở -0.64px) nằm trên body text xám trung tính, khiến trang đọc mang phong cách editorial tự tin thay vì marketing ồn ào. Các component mềm mại và bo tròn — card radius 24px, pill buttons 99px, 10px trên các element nhỏ — và elevation được thay thế bằng các lớp màu pastel thay vì đổ bóng, giữ cho interface mang cảm giác như giấy stationery hơn là kính. Emoji trang trí được inline trong copy và pastel product-mockup cards mang đến cho thương hiệu tính cách vui tươi, gần như notebook. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas | `#fafafa` | `--color-canvas` | Nền trang, surface mặc định — tạo nền off-white, giống giấy cho toàn bộ hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Product UI panels, card surfaces, các khối nội dung nâng cao — giữ nội dung sắc nét trên nền canvas off-white | | Ink | `#262626` | `--color-ink` | Heading chính và body text — màu đen làm mềm, đọc ấm áp thay vì gắt | | Graphite | `#757577` | `--color-graphite` | Secondary text, caption, nav labels, muted borders — màu xám hàng ngày cho supporting copy |

# AngelList — Style Reference > midnight greenhouse with violet dawn — một khoảng không teal gần như đen, nơi chữ serif màu mint-green phát sáng và những nút lavender nở rộ như điểm sáng ấm duy nhất **Theme:** dark AngelList vận hành như một nhà kính lúc nửa đêm: nền canvas teal gần như đen (#001d21) là mặt sàn, chữ display serif màu mint-green (#e0fee6) phát sáng như thể phát quang sinh học, và một điểm nhấn lavender-violet (#cdcbff) xuyên suốt giao diện như ánh bình minh. Hệ thống thị giác ưu tiên dark — toàn bộ trang nằm trên nền teal đậm, bao gồm card, navigation và footer — tạo ra bầu không khí ngân hàng tư nhân về đêm thay vì light mode SaaS điển hình. Typography là ngôi sao: một custom serif display face hiển thị số liệu và headline copy ở kích thước cực lớn (90–216px) với negative tracking dày đặc, trong khi một sans trung tính xử lý toàn bộ UI chrome. Các bề mặt phẳng với elevation tối thiểu; chiều sâu đến từ sự chuyển tông giữa các sắc teal gần như đen và các dải full-bleed màu đất thỉnh thoảng xuất hiện (olive grove, mint wash). Photography mang tông ấm, phong cách lifestyle — con người trong ánh sáng tự nhiên, đang làm việc — được đặt trong các card bo tròn nằm trên nền canvas tối. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyssal Teal | `#001d21` | `--color-abyssal-teal` | Page canvas, hero background, navigation surface, footer, primary text trên nền sáng — khoảng không mà mọi thứ nằm trên đó | | Deep Reef | `#002b31` | `--color-deep-reef` | Elevated card surfaces, secondary buttons, filled chip backgrounds — cao hơn canvas một tông để tạo chiều sâu tinh tế mà không rời khỏi họ dark | | Bio Mint | `#e0fee6` | `--color-bio-mint` | Display headlines, hero copy, chữ số lớn — mint phát quang mang bản sắc thương hiệu trên nền canvas tối | | Lavender Dawn | `#cdcbff` | `--color-lavender-dawn` | Violet text accent cho link, tag và các cụm từ ngắn cần nhấn mạnh. Không nâng lên làm màu CTA chính |

# Garden Eight — Style Reference > Editorial trên nền giấy kem hoành tráng. Một headline serif 215px đơn độc trên nền parchment ấm áp, bao quanh bởi các khối điêu khắc lơ lửng và khoảng trắng thoáng đãng như gió biển — trang web hoạt động như bìa của một art monograph, không phải dashboard. **Theme:** light Garden Eight vận hành như một editorial spread trong sách nghệ thuật: nền canvas parchment kem ấm làm bệ đỡ cho serif type hoành tráng, đóng vai trò như gallery wall text chứ không phải product UI. Bảng màu cực kỳ nhị phân — bề mặt trắng xương, chữ đen mực — và mọi màu bổ sung đều bị xem như sự xâm phạm. Layout thở ở quy mô gần như bảo tàng, với gutter margin 180px và khoảng trắng quá khổ, biến type và các đối tượng 3D điêu khắc thành nội dung duy nhất. Không có ngôn ngữ màu chức năng: không có alert red, success green hay info blue. Mọi quyết định đều dựa trên weight, scale và sự im lặng. Hệ thống mang phong cách masthead của tạp chí thời trang cao cấp hơn là giao diện SaaS, và bất kỳ agent nào tái tạo nó nên ưu tiên kịch tính typographic và sự kiềm chế về không khí hơn là các affordance UI thông thường. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#dbd6d0` | `--color-parchment` | Canvas trang, bề mặt card, divider nhạt, border link — tông màu xương desaturated ấm áp thay thế màu gần trắng thông thường, mang đến nhiệt độ editorial cho toàn bộ hệ thống | | Carbon Ink | `#1e1f1f` | `--color-carbon-ink` | Text chính, display headline, nav rules, border card, icon strokes — gần như đen với một chút ấm nhẹ hài hòa với parchment thay vì tương phản | | Pitch Black | `#000000` | `--color-pitch-black` | Dành riêng cho các khoảnh khắc display tương phản tối đa và text sâu nhất trên bề mặt sáng nhất — được dùng tiết kiệm để Carbon Ink giữ trọng lượng đọc mặc định |

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

# Fingerprint — Style Reference > warm CRT terminal on cream paper — a fraud-detection lab notebook where code blocks are the main characters **Theme:** light Fingerprint reads as a developer tool that has been deliberately warmed up: a cream-paper canvas (#fafaf8) sits beneath sharp black type, a single vivid orange (#f35b22) does the work of a highlighter on key nouns, and the rest of the accent palette is borrowed from an IDE — teal, blue, pink, green as code-syntax tokens. Surfaces are flat with hairline borders; elevation is whispered, not announced. The hero alternates between editorial typography (Inter, tight tracking) and a dark CRT-style terminal panel, establishing a two-mode visual rhythm: light prose, dark code. Orange never decorates — it annotates, turning one word per headline into a call-to-action, and turning the primary button into the only filled rectangle on the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fafaf8` | `--color-cream-paper` | Page canvas and primary surface — warm off-white that softens the otherwise stark black/orange system | | Card White | `#ffffff` | `--color-card-white` | Elevated card surfaces and input backgrounds — sits one step above the cream canvas | | Pebble Gray | `#f0f0ef` | `--color-pebble-gray` | Secondary surface for section bands, subtle backgrounds behind grouped content | | Linen Border | `#e4e5e1` | `--color-linen-border` | Hairline dividers, card borders, and table separators — the dominant structural line color |