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

# Depot — Style Reference > Một terminal dark server-rack. Giao diện developer console gần như đen tuyền, nơi một đèn LED xanh báo hiệu hành động và phần còn lại của UI chỉ thì thầm trong tông graphite. **Theme:** dark Depot sử dụng ngôn ngữ developer console: một canvas gần như đen, đường viền mảnh pha xanh lục, và một điểm nhấn xanh lục duy nhất thắp sáng nút bấm duy nhất trên trang. Giao diện giống như một terminal đã trưởng thành thành một marketing site — nhỏ gọn, gần monospace, và tự tin trong sự tiết chế. Typography chia thành ba họ Red Hat: Display cho headline bó chặt với tracking âm, Text cho body copy có letter-spacing nhẹ, và Mono cho code và label kiểu terminal, tạo nên một hệ thống typographic ba tông màu. Các bề mặt xếp chồng với những nâng cấp gần như không thể nhận thấy của tông gần đen, được phân cách bằng đường viền mảnh 1px với ánh sáng xanh lục ambient nhẹ — không có drop shadow, chỉ có inset top highlight. Màu sắc xuất hiện một cách tiết kiệm: xanh lục cho hành động và trạng thái, xanh dương cho inline link, và một tông violet nhẹ cho điểm nhấn trang trí thứ cấp. Toàn bộ hệ thống mang phong cách 'cơ sở hạ tầng đáng tin cậy' hơn là 'ứng dụng tiêu dùng thú vị'. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Green | `#71d083` | `--color-signal-green` | Điểm nhấn xanh lục hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp | | LED Green | `#366740` | `--color-led-green` | Điểm nhấn xanh lục hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp lên màu CTA chính | | Moss Border | `#2d5736` | `--color-moss-border` | Đường viền xanh lục nhẹ cho card được làm nổi bật và trạng thái thông báo — giữ chủ đề xanh lục ở cường độ thấp | | Forest Wash | `#1d3a24` | `--color-forest-wash` | Nền card pha màu cho panel nổi bật/đặc trưng — bề mặt xanh đậm làm nổi bật nội dung được chú ý |

# Resident — Style Reference > Chuyên khảo kiến trúc trên giấy kem **Theme:** light Resident hoạt động như một phòng trưng bày biên tập tĩnh lặng dành cho các đối tượng thiết kế: canvas giấy trắng, chrome gần như bằng không, và nhiếp ảnh khổ lớn đảm nhận toàn bộ công việc thị giác. Giao diện gần như hoàn toàn đơn sắc — mực đen trên giấy trắng với các đường kẻ mảnh (hairline rules) và chữ ma (ghost text) nhỏ — để các căn phòng, đồ nội thất và đèn chiếu sáng tự đưa ra mọi quyết định về màu sắc. Typography là một sans-serif tùy chỉnh duy nhất (MessinaSans) ở weight vừa phải với tracking được thắt chặt, mang lại cho headline sự chính xác, uy quyền kiểu catalogue mà không bao giờ cảm thấy ồn ào. Các component được rút gọn về khung xương: một nav gạch chân nhỏ, nút chỉ có viền, một heading section mở rộng đến mép cột. Không có shadow, không gradient, không độ cao bề mặt — chiều sâu chỉ đến từ các bức ảnh và khoảng không gian dọc rộng rãi giữa các spread biên tập. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Body text, nav links, icon strokes, và tất cả hairline borders (1px rules dưới nav, quanh input, và giữa các khối biên tập). Xương sống cấu trúc — 724 lần xuất hiện borderColor và 336 body borders cho thấy nó mang các cạnh của layout | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, nav background, và ghost button fills. Mọi thứ nổi trên bề mặt này; toàn bộ giao diện là một tờ giấy phẳng duy nhất | | Soft Graphite | `#979797` | `--color-soft-graphite` | Body text mờ và secondary borders. Tỷ lệ tương phản 2.9:1 so với nền trắng có nghĩa là nó cố tình nhạt — dùng cho helper copy và các divider ít quan trọng, không bao giờ dùng cho nội dung chính | | Charcoal | `#333333` | `--color-charcoal` | Icon strokes, fills, và button borders cho secondary controls. Nằm giữa ink-black và mid-gray, tạo cho icon sự hiện diện nhẹ nhàng hơn body text mà không mất độ dễ đọc ở tỷ lệ 12.6:1 |

# Mother Design — Style Reference > broadsheet manifesto in mực đen **Theme:** light Mother Design xem trình duyệt như một tờ broadsheet biên tập: gần như đơn sắc hoàn toàn, typography đảm nhận mọi công việc biểu đạt, cấu trúc được vẽ bằng những đường mực 1px thay vì đổ bóng hay panel. Một nốt màu duy nhất — xanh rừng sâu #306f09 — được kiềm chế đến mức gần như biến mất, chỉ xuất hiện như một điểm nhấn code gần như vô hình. Display size đẩy lên tới 226px, biến typography thành hero của mọi màn hình; supporting text được đặt trong một grotesque dày, tracking hơi âm, đọc tự tin chứ không ồn ào. Các component đều thô: bordered tabs, unframed thumbnails, những đường kẻ dọc mảnh chia grid. Serif Times xuất hiện như một điểm đối trọng biên tập lặng lẽ, không bao giờ là trang trí. Kết quả mang cảm giác như một bản tuyên ngôn in ấn được gán một URL cố định — grid mực trên nền giấy xám ấm, nơi sự kiềm chế CHÍNH LÀ bản sắc thị giác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Newsprint | `#f4f4f4` | `--color-newsprint` | Nền section mềm, surface thay thế, card fill lặng lẽ. | | Bone White | `#ffffff` | `--color-bone-white` | Nền navigation, surface card, button fills, inverted text — đẩy lên phía trước khỏi canvas xám | | Press Black | `#000000` | `--color-press-black` | Neutral form states, badge text, và phản hồi UI lặng lẽ nơi màu sắc cần giữ kín đáo. | | Foil Gray | `#808080` | `--color-foil-gray` | Secondary text, subdued link borders, metadata — nằm sau Press Black như chú thích lặng lẽ |

# Filling Pieces — Style Reference > monochrome fashion editorial **Theme:** light Filling Pieces vận hành như một editorial thời trang đơn sắc: toàn bộ giao diện là thang xám, nên tiếng nói thương hiệu sống trong nhiếp ảnh và typography, không phải màu sắc. Một custom sans-serif duy nhất (favorit, weight 400/600) đảm nhận mọi nhãn, headline và tên sản phẩm, với tracking cố định -0.04em nén từng glyph vào một editorial lockup chặt chẽ. Display weight 100px là dấu câu duy nhất của hero — nó rất lớn, đặt trực tiếp lên ảnh full-bleed mà không có overlay card hay gradient. Bề mặt giữ ấm và phẳng: viền hairline #e5e7eb 1px, không shadow, không gradient, border-radius 8px được áp dụng đồng nhất cho input và button. Product cards phẳng trên nền canvas warm-gray; grid đọc như một trang tạp chí, không phải tường gạch ecommerce điển hình. Mọi element đều có mặt bằng cách im lặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Obsidian | `#000000` | `--color-obsidian` | Body text, icon, primary action button fill, footer ink — giá trị duy nhất mang cảm giác màu sắc, dùng với độ tương phản tối đa cho mọi affordance tương tác | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt chính cho card, input field, product tile và modal background; chữ trắng trên nền ảnh hero tối | | Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Viền 1px, divider, input outline, card edge — khung xương cấu trúc ngăn cách mọi bề mặt | | Stone | `#efefef` | `--color-stone` | Bề mặt phụ sau product grid, checkout band và footer — màu trung tính ấm nâng trang khỏi nền trắng tinh |

# Abel — Style Reference > Cream paper, black ink, breathing room — an editorial lookbook that smells of perfume. **Theme:** light Abel operates as an editorial fragrance house: one warm cream note against a near-total monochrome canvas, with photography doing the chromatic work. The interface is deliberately quiet — near-black ink on white paper, whisper-light sans-serif headlines (weight 300), and a monospaced voice for all functional microcopy that gives every label, button, and link the cadence of a typeset colophon. Spacing is generous and sectional, letting full-bleed photographic plates alternate with white product cards; the result reads like a printed lookbook rather than a retail UI. The single non-neutral (#f6eada, a warm parchment cream) appears as a subtle surface tint and accent border — never as fill or decoration — so the visual system stays austere while the imagery carries all the color temperature. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#030303` | `--color-ink-black` | Primary text, hairlines, ghost button borders, product card outlines, icon strokes — the dominant structural color; sets all copy and dividers against white and cream surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, product card backgrounds, inverse text on black buttons and dark imagery | | Parchment Cream | `#f6eada` | `--color-parchment-cream` | Warm accent surface, hairline borders, subtle highlight washes — the only chromatic note in the system; appears sparingly as tint, never as bold fill, to echo natural ingredient warmth without competing with photography | | Ash Gray | `#cccccc` | `--color-ash-gray` | Disabled/placeholder surfaces, secondary background panels behind product imagery |

# Akash Tyagi — Style Reference > tường gallery nửa đêm với điểm nhấn hồng neon **Theme:** dark Akash Tyagi là một portfolio editorial tối màu, được dàn dựng như một canvas nửa đêm với chữ ấm giống giấy da và một điểm nhấn hồng neon duy nhất — đóng vai trò như dấu câu chức năng chứ không phải trang trí. Bố cục thoáng đãng — khoảng cách section 200px, hai cột bất đối xứng rộng rãi, và label display đặt trong Geist Pixel Triangle tạo nhịp điệu gallery-wall, nơi mỗi dự án có khoảng lặng cần thiết. Mọi màu trung tính đều mang undertone nâu ấm, cố tình tránh xa tông xanh-xám lạnh của các portfolio công nghệ thông thường. Các component tối giản và phẳng: pill CTA, hairline divider, status dot, và ảnh dự án lớn không viền — không có elevation, không gradient, không trang trí ngoài typography và một điểm nhấn màu duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | Nền trang, bề mặt card, chữ đảo ngược trên nền hồng | | Parchment | `#efe6d8` | `--color-parchment` | Chữ body và heading chính — tông gần trắng ấm với undertone nâu, thay thế cho trắng lạnh thường thấy trong dark UI | | Bone | `#aca69c` | `--color-bone` | Chữ phụ, viền button, metadata — xám ấm trung tone | | Ash | `#736e68` | `--color-ash` | Chữ body mờ, viền link nhẹ, label không hoạt động |

# Ambrook — Style Reference > sổ cái thu hoạch trên giấy bọc thịt **Theme:** light Ambrook nói bằng thổ ngữ thị giác của vùng trung tâm nước Mỹ: nền canvas ấm như giấy da, chữ đậm như mực, và một điểm nhấn màu hổ phách thu hoạch duy nhất sưởi ấm mọi hành động chính. Bảng màu được giảm bão hòa có chủ đích — xanh olive, vàng lúa mì, nâu vỏ cây — như thể chính giao diện được in trên giấy bọc thịt tái chế và đóng dấu bằng mực đậu nành. Headline dùng một display face custom với uy quyền lặng lẽ (weight 500, không phải 700 như thường thấy), và mỗi section mở đầu bằng một eyebrow chữ in hoa nhỏ, trải rộng trên trang với tracking rộng. Ảnh chụp mang phong cách tài liệu (documentary), không phải khát vọng — thợ hàn, chủ trại, tài xế xe tải, không tạo dáng và đầy nắng. Kết quả là một giao diện có cảm giác gốc rễ, không bóng bẩy: đáng tin cậy qua sự ấm áp thay vì qua chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#fcfaf1` | `--color-parchment` | Canvas trang và bề mặt card — off-white ấm thay thế #ffffff thuần để giữ hệ thống gắn với chất liệu giấy, nông nghiệp | | Bone | `#efe9e0` | `--color-bone` | Bề mặt phụ cho footer, soft sections, và hairline borders cần tách biệt khỏi canvas parchment mà không có độ tương phản gắt | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt elevated card và product-mockup — dùng có chừng mực để nâng các panel cụ thể (như ảnh chụp Ledger) lên trên nền parchment | | Loam | `#c7bcaf` | `--color-loam` | Dividers nhẹ, cạnh card, và borders ít nhấn mạnh giữa canvas và content blocks |

# Thisispam — Style Reference > butter-yellow editorial broadsheet — một layout kiểu Swiss-press, nơi một tông giấy kem ấm duy nhất, chữ sắc như dao cạo, và hệ thống bề mặt zero-chrome biến mỗi lần cuộn thành một trang in. **Theme:** light Thisispam vận hành như một hệ thống thiết kế editorial chịu ảnh hưởng từ Thụy Sĩ: một canvas màu vàng bơ ấm kết hợp với typography mực đen sắc nét và gần như zero chrome. Ngôn ngữ thị giác vay mượn từ broadsheet in ấn — headline display lớn, tự tin nằm trong cụm uppercase khít, trong khi ảnh dự án trôi nổi trong một grid nghiêm ngặt với metadata dạng caption bên dưới. Màu sắc được sử dụng cực kỳ kỷ luật: #fff3b8 đóng vai trò vừa là nền trang vừa là điểm nhấn, để màu đen gánh toàn bộ chữ và màu trắng phân tách các khối nội dung. Không đổ bóng, không bo góc, không gradient — hệ thống dựa vào scale typography, khoảng trắng rộng rãi, và nền ấm bất thường để tạo bầu không khí. Các section xen kẽ giữa giấy vàng, trắng tinh, và đen mực, tạo nên một nhịp điệu editorial có tiết tấu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Butter Paper | `#fff3b8` | `--color-butter-paper` | Canvas trang chủ đạo cho toàn bộ section, chữ nhấn mạnh trên nền ảnh tối, đường viền link dạng hairline, và dải thứ ba trong stack bề mặt — một tông kem ấm thay thế màu trắng làm nền không khí của thiết kế | | Ink Black | `#000000` | `--color-ink-black` | Màu chữ chính trên mọi bề mặt, đường viền hairline và border cấu trúc, nền footer và dark-band — mọi chữ, đường kẻ, và icon đều đọc như mực in trên nền kem hoặc trắng | | Paper White | `#ffffff` | `--color-paper-white` | Nền section trắng và bề mặt card phân tách các dải vàng, chữ inverse trên footer đen, và bề mặt modal ngôn ngữ | | Wheat | `#f1e4a4` | `--color-wheat` | Màu nền input field mờ trên canvas vàng — một tông kem hơi đậm hơn giúp form field lùi vào nền ấm mà không mất phân cấp bề mặt |

# Bumble — Style Reference > Sunlit honey editorial **Theme:** light Bumble vận hành trên hệ thống monochrome cộng thêm một tông ấm: near-black ink (#202020) đảm nhận mọi chữ, mọi đường viền, mọi bề mặt tương tác, và một màu vàng mật ong rực rỡ (#ffdb5b) tràn ngập hero canvas và feature canvas như tín hiệu cảm xúc của thương hiệu. Hình học mềm mại và tự tin — radii 16-24px trên card và button, pill-shaped badges ở 1000px, shadow nhẹ đến mức khó thấy ở độ mờ 12% — nên không có gì cảm giác sắc cạnh hay hung hăng. BumbleSans nói với letter-spacing hơi rộng (0.007-0.02em), điều bất thường với một geometric sans và mang đến cho cả những dòng UI nhỏ nhất một nhịp điệu ấm áp, thong thả. Nội dung được sắp xếp trong các card có padding rộng rãi 24-40px trên nền trắng, với các dải vàng full-bleed đóng vai trò dấu câu thị giác giữa các section. Kết quả mang phong cách tạp chí lifestyle ngập nắng: ảnh con người làm phần việc nặng nhọc, màu thương hiệu không bao giờ là tiếng ồn trang trí, và UI lùi lại để những con người trong ảnh dẫn dắt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Bumble Honey | `#ffdb5b` | `--color-bumble-honey` | Yellow state accent cho badge, bề mặt xác thực, và label trạng thái ngắn. | | Pollen | `#fff386` | `--color-pollen` | Bề mặt accent vàng nhạt hơn cho secondary card frame và biến thể tông màu so với Honey | | Bumble Ink | `#202020` | `--color-bumble-ink` | Primary text, filled action buttons, tất cả border và divider — near-black cấu trúc chịu trách nhiệm cho hơn 2.100 instance UI và là de facto primary action color | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, body text inverse |

# MAKR — Style Reference > Tủ trưng bày bảo tàng dành cho đồ da thủ công. Một phòng trưng bày giấy trắng tĩnh lặng, nơi những dòng chữ đen ấm áp trôi nổi bên dưới các bức ảnh editorial cỡ lớn chụp đồ da được cầm trên tay hoặc đặt trong khung cảnh thiên nhiên, với một dải màu xô xám nhạt duy nhất là điểm nhấn sắc độ. **Theme:** light MAKR là một gallery editorial e-commerce dành cho đồ da thủ công, xây dựng trên bảng màu gần như hoàn toàn đơn sắc, nơi nhiếp ảnh là nhân vật chính. Một tông màu banner gần xám duy nhất (pha chút xô nhẹ) làm điểm nhấn cho dải thông báo phía trên, trong khi mọi thứ khác — bề mặt, chữ, đường kẻ, liên kết — đều sống trong màu mực đen ấm áp trên nền giấy trắng. Typography là Sohne neo-grotesque ở dạng kiềm chế nhất: cỡ chữ nhỏ, line-height rộng rãi, letter-spacing dương trên các nhãn chữ hoa — đọc như chữ trong gallery, không phải copy web UI. Layout thiên về hình ảnh, bất đối xứng, thưa thớt như bảo tàng: sản phẩm được chụp trên tay, trong khung cảnh thiên nhiên, dưới ánh sáng tự nhiên, với các link chú thích nhỏ bên dưới. Các component gần như vô hình — text link có gạch chân, ghost input, không bóng đổ, không nút bo tròn — để da thuộc và nhiếp ảnh gánh vác trọng lượng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian Ink | `#1c1717` | `--color-obsidian-ink` | Chữ chính, tất cả text link, body copy, heading, nét icon, đường viền mảnh trên toàn bộ UI. Đây là màu chịu lực — độ tương phản 17.7:1 trên nền trắng, dùng cho hơn 5.000 instance. Sắc ấm rất nhẹ (không phải đen thuần) mang lại cảm giác catalog in ấn thay vì cảm giác màn hình | | Paper | `#ffffff` | `--color-paper` | Đường viền mảnh, divider, đường viền input, cạnh card trên bề mặt sáng. Không nâng cấp lên màu CTA chính | | Bone | `#f0f0f0` | `--color-bone` | Bề mặt phụ cho các section xen kẽ, nền panel nhẹ, đường viền inline/separator. Tạo lớp xám ấm rất nhạt giữa nền giấy trắng và dải thông báo xô | | Eucalyptus Mist | `#a9aea9` | `--color-eucalyptus-mist` | Nền banner thông báo trên cùng, lớp nền section nhạt, đường viền cấp ba. Đọc như gần xám khi đứng riêng nhưng mang sắc xô khó nhận ra khi dùng full-width — một hơi thở sắc độ duy nhất trong hệ thống đơn sắc |

# GRAZA — Style Reference > Quầy deli Địa Trung Hải ngập nắng, được xếp đặt bằng tay **Theme:** light Graza mang chất của một quầy deli Địa Trung Hải tràn ngập ánh nắng — bề mặt kem ấm áp, mực olive đậm đọc như gỗ lâu năm, và những mảng xanh chanh bất chợt như rau củ dưới ánh đèn chợ. Typography mang trọng lượng editorial đầy tự tin: một typewriter serif đảm nhận phần hội thoại trong khi Garamond condensed lướt vào cho những khoảnh khắc display cỡ lớn. Màu sắc hoạt động như một gian hàng rau củ — canvas luôn ấm và trung tính, và những mảng xanh tươi xuất hiện dưới dạng section band full-bleed hoặc những điểm nhấn chức năng nhỏ, không bao giờ là chrome chồng chrome. Các component được giữ tối giản và đặt bằng tay: pill buttons, hairline borders, image radii 20px nhẹ nhàng, và hầu như không có shadow. Nhịp điệu luân phiên giữa hero plate ảnh full-bleed, editorial spread chỉ text trên nền màu đồng nhất, và bố cục text + ảnh chia đôi. Không có gì bị khóa cứng trong grid; whitespace và asymmetry làm tất cả công việc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Olive Ink | `#3c422e` | `--color-olive-ink` | Text chính, nav links, borders, button outlines, icon strokes — gần như đen nhưng pha ánh olive, giúp trang không bị cảm giác vô trùng | | Linen Cream | `#fff4ec` | `--color-linen-cream` | Bề mặt nền phụ nhẹ cho background tinh tế và phân cách section. Không nâng lên làm màu CTA chính | | Buttery Peach | `#f6e6d9` | `--color-buttery-peach` | Bề mặt phụ và band tương phản ấm — đậm hơn Linen Cream một chút, dùng để ngắt các trang dài và lồng card | | Squeeze Bottle Green | `#9eef80` | `--color-squeeze-bottle-green` | Section band full-bleed, text treatment được tô sáng — xanh tươi như rau củ trên kệ, mang cả trang |

# Vercel — Style Reference > Khối đơn sắc lăng kính trên giấy kẻ ô — một tam giác tối duy nhất khúc xạ toàn bộ quang phổ hình nón trên nền lưới kỹ thuật mờ, và mọi thứ còn lại trên trang là độ chính xác thuần đen-trên-trắng. **Theme:** light Vercel hoạt động như một không gian làm việc kỹ thuật gần như đơn sắc: canvas trắng ngà (#fafafa), text và filled actions gần đen (#171717, không bao giờ là #000 thuần), đường viền siêu mảnh (#ebebeb) đảm nhận cấu trúc thay vì đổ bóng, và một điểm nhấn lăng kính đầy màu sắc duy nhất từ logo prism conic-gradient xuất hiện đúng một lần trên mỗi màn hình. Hệ thống chữ hoàn toàn là Geist — một geometric grotesque với tracking âm rất chặt ở kích thước lớn (-0.06em ở 48px) và không có decorative weights — mang lại cho toàn bộ UI cảm giác chính xác như thiết bị phòng thí nghiệm. Mật độ giao diện là compact: bán kính 6px chiếm ưu thế trên cards và buttons, padding 12px bao phủ hầu hết các bề mặt, và khoảng cách 2–8px kiểm soát nhịp điệu. Màu sắc được phân bổ hạn chế — chromatic blue, red, và teal chỉ xuất hiện dưới dạng điểm nhấn trang trí minh họa; product chrome hoàn toàn achromatic với prism gradient là dấu câu màu sắc duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Graphite | `#171717` | `--color-graphite` | Primary text, filled action buttons, primary borders. Màu gần đen có chủ đích — không phải #000000 — giúp các bề mặt có cảm giác ấm hơn, mực hơn so với đen thuần | | Marble White | `#fafafa` | `--color-marble-white` | Page canvas, card surfaces, elevated panels. Không phải trắng thuần — độ ấm nhẹ đọc như giấy thay vì màn hình | | Pearl | `#ffffff` | `--color-pearl` | Inset surface white dùng bên trong cards, button text trên nền tối, và inner panel highlights | | Hairline | `#ebebeb` | `--color-hairline` | Màu border mặc định cho cards, nav, inputs, dividers. Đảm nhận phân cách cấu trúc thay vì đổ bóng |

# Slab — Style Reference > midnight-wine reading room **Theme:** mixed Slab reads like a curated library wrapped in a midnight-wine storefront: a deep plum hero cradles white serif headlines, then opens into bright, spacious editorial layouts where serif display type meets a quiet Whitney sans-serif system. Color is rationed — nearly all of the interface is grayscale — but the single coral-red action and the wine hero create a two-temperature palette: warm authority at the edges, cool utility in the middle. The aesthetic borrows from print publishing: Sentinel's 300-weight serif whispers rather than shouts, generous whitespace around each section feels like a magazine spread, and the 6px corner radius on inputs/buttons is restrained enough to feel editorial rather than soft. Decorative circles, organic blobs, and illustrated document cards float alongside flat UI — the visual language is human and craft-forward, not corporate. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Wine | `linear-gradient(90deg, #42022, rgba(66, 2, 46, 0))` | `--color-midnight-wine` | Hero band background, section dividers, deep surface moments — the deepest brand tone, used as atmosphere not as UI fill | | Coral Ember | `#ff4143` | `--color-coral-ember` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Slate Ink | `#455360` | `--color-slate-ink` | Primary text, icons, heading strokes, input borders, default UI chrome — the dominant near-gray that gives the system its printed-paper authority | | Fog Gray | `#939598` | `--color-fog-gray` | Secondary text, helper copy, muted badges, logo tints — recedes behind Slate Ink to build typographic depth |

# Ada — Style Reference > Phòng trưng bày ánh sáng ban ngày với điểm nhấn pastel — một căn phông nền trắng nhạt yên tĩnh, nơi bốn màu sắc quý được phép lên tiếng, và mọi thứ khác đều giữ tông than chì. **Theme:** light Ada hoạt động như một phòng trưng bày ánh sáng ban ngày: một canvas trắng nhạt với khoảng thở rộng rãi, một kiểu chữ humanist sans-serif duy nhất đảm nhận toàn bộ giọng nói, và các màu nhấn tông quý chỉ xuất hiện như những dấu chấm câu có chủ đích. Hệ thống thị giác kháng cự lại sự trang trí — không gradient trên button, không drop shadow trên card, không chrome cạnh tranh với nội dung. Thay vào đó, bản sắc đến từ một bảng màu nhỏ gọn, kỷ luật (xanh rừng, xanh periwinkle, hồng kẹo, vàng bơ) được dùng làm thanh nhấn cạnh trái trên stat card và làm pill button đặc. Hệ thống phân cấp được xây dựng qua tương phản kích thước và khoảng trắng, không phải khối lượng màu sắc. Các bề mặt nằm trên nền #f9f9f9 ấm áp với các card #ffffff nổi phía trên. Điểm xác định của hero là một nền ảnh được làm mờ mạnh, tạo cảm giác như nhìn qua kính mờ — nó thêm chiều sâu và độ ấm mà không cạnh tranh với headline trắng mang phong cách editorial typography. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Inkstone | `#0a0b0c` | `--color-inkstone` | Văn bản chính, body copy, heading, đường viền mảnh, bề mặt UI tối — xương sống gần như đen của toàn bộ giao diện, dùng ở tỷ lệ lớn cho đường viền và typography | | Bone | `#f9f9f9` | `--color-bone` | Canvas trang, nền section, lớp bề mặt tinh tế bên dưới card — một tông trắng nhạt ấm áp làm mềm độ tương phản của giao diện | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, panel nổi, container chat widget, input — lớp sáng nhất trong stack bề mặt | | Ash | `#d8d8d8` | `--color-ash` | Fill SVG trang trí, viền input bị vô hiệu hóa, divider trung tính |

# Kindsight — Style Reference > Sunlit field journal at dusk — an earthy, editorial calm built from cream paper, olive ink, and a single flash of chartreuse highlight. Kindsight feels like a sustainably-printed nonprofit annual report: warm cream backgrounds, near-black text with a green undertone, a deep olive hero panel, and terracotta as the only shout. The single chartreuse accent is used sparingly — as underline punctuation on italic display words, badge fills, and illustrative highlights — never as a functional color. Display type in Times Now at weights 200-300 with tight tracking reads like editorial cover typography, not SaaS headlines. **Theme:** light Kindsight operates in a warm, editorial register that reads more like a design magazine than a SaaS dashboard. A cream canvas (#faf5f1) holds the page, with a deep olive hero (#3d4128) creating an earthy, almost botanical atmosphere. Display type uses Times Now at whisper weights (200-300) with aggressive negative tracking, producing compressed, magazine-cover headlines. A single chartreuse accent (#e1f079) appears as decorative highlight — underlines beneath italic display words, badges, illustration fills — never as a utility color. Terracotta (#de7653) is the only CTA color, appearing as solid filled buttons or thick outlined pills. Components favor generous 24px card radii, thin hairline borders, and zero or very subtle elevation; the design relies on tonal contrast between cream, near-black with green undertones (#0e0f0a), and the dark olive hero block to create depth rather than shadows. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#faf5f1` | `--color-cream-paper` | Page background, nav surface, warm canvas base | | Soft Linen | `#fefffa` | `--color-soft-linen` | Card surface, slightly brighter than canvas for subtle elevation |

# 70Materia — Style Reference > Bảng mẫu kiến trúc trên giấy trắng — UI là khung đỡ, không bao giờ là tác phẩm. **Theme:** light 70Materia là một khung trung tính được thiết kế để biến mất xung quanh nội dung — một thư viện vật liệu được tuyển chọn, nơi UI chrome được cố tình làm vô hình để các mẫu đá, terrazzo và bột màu chiếm ưu thế. Mọi thành phần kiểu chữ đều ở weight 400 trong một dòng sans-serif duy nhất (Matter), với một font monospace đồng hành (Matter Mono) dùng cho nhãn, navigation và các UI control nhỏ. Letter-spacing trên mono (0.02em–0.04em) cùng với chữ số dạng bảng (tabular numerals) mang lại cho giao diện chất bảng thông số kỹ thuật, bản vẽ kiến trúc — như thể trang web tự nó là một bảng mẫu kỹ thuật. Bảng màu hoàn toàn achromatic: chữ đen, bề mặt trắng, và một canvas xám ấm trung tính (#bababa) lùi về phía sau các bức ảnh. Button mỏng, vuông, và có viền; bề mặt được tô màu duy nhất là màu gần đen (#1e1e1e) dành cho một số hành động chọn lọc và footer. Không có màu nhấn nào trong hệ thống — toàn bộ năng lượng màu sắc được chuyển giao cho ảnh sản phẩm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Chữ chính, đường viền siêu mảnh, đường viền navigation — "mực" cấu trúc | | Bone | `#ffffff` | `--color-bone` | Điểm nhấn trang, bề mặt card, chữ trên nền tối, viền button | | Graphite | `#1e1e1e` | `--color-graphite` | Nền button được tô màu, bề mặt footer, khối UI tối — màu gần đen ấm thay thế đen tuyền cho các bề mặt không phải chữ | | Ash | `#bababa` | `--color-ash` | Canvas trang chính, divider mờ, tông bề mặt phụ |

# Shopify — Style Reference > Midnight greenhouse — merchants' brands blooming against deep teal-black, lit by a single mint spark. **Theme:** dark Shopify's design system is a midnight workshop for commerce: an almost-black canvas tinted with deep teal-green, broad confident sans-serif type, and one electric mint accent that activates interactive moments. The interface feels like a darkroom where products and brands are the light source — photography and merchant storefronts glow against the near-black surfaces while chrome recedes. Components are geometric but soft: 12px-radius cards with hairline borders, pill buttons, and weight-330 display type that whispers scale rather than shouting. A single chromatic punctuation (#36f4a4) appears sparingly on links, tags, and focus states, reserving color for functional moments so the merchant stories stay the visual focus. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Forest | `#02090a` | `--color-midnight-forest` | Page canvas, hero backgrounds, section backgrounds | | Deep Lichen | `#061a1c` | `--color-deep-lichen` | Primary card surfaces, elevated panels, content blocks | | Shaded Fern | `#072720` | `--color-shaded-fern` | Navigation bar, secondary cards, subtle panel lift | | Spruce Border | `#1e2c31` | `--color-spruce-border` | Hairline card borders, divider lines, input outlines |

# Cohere — Style Reference > Editorial monograph trên nền giấy kem — mỗi màn hình là một spread, không phải dashboard. **Theme:** light Cohere mang phong cách một ấn phẩm editorial monograph: nền trắng kem, typography gần đen, và các CTA dạng pill tối màu đảm nhiệm toàn bộ hệ thống phân cấp mà không cần trang trí. Dấu ấn là sự tiết chế — một gradient ba màu (coral → violet → blue) chỉ xuất hiện bên trong ảnh chụp và các mảng trang trí, không bao giờ dùng trên UI controls, nhờ đó giao diện giữ được đơn sắc trong khi hình ảnh cung cấp hơi ấm màu sắc. Typography đảm nhiệm phần nặng nhất: Unica77 ở mọi vai trò UI với negative tracking dày, và CohereText display face rộng hơn cho hero headlines, tạo uy quyền editorial thay vì mật độ SaaS. Các component tối giản và tự tin — thẻ ảnh bo góc 22px, border hairline #e5e7eb, actions tối màu — để ảnh chụp, code snippets và nội dung chữ gánh trọng lượng kể chuyện. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang chính, bề mặt thẻ, chữ trên nút | | Soft Cream | `#f0eee9` | `--color-soft-cream` | Biến thể nền ấm nhẹ cho các section xen kẽ | | Hairline Mist | `#e5e7eb` | `--color-hairline-mist` | Border mặc định, divider, đường viền thẻ, input strokes | | Silver Rule | `#d9d9dd` | `--color-silver-rule` | Border phụ, nav dividers, separator nhẹ |

# Maciej Zadykowicz — Style Reference > phòng trưng bày nửa đêm với bức tranh kính vạn hoa — một mảng tường studio gần như đen, nơi một tác phẩm typographic đầy màu sắc rực rỡ chiếm trọn sự chú ý, còn mọi thứ khác đều giữ sự yên tĩnh và có chủ đích. **Theme:** dark Portfolio của Maciej Zadykowicz vận hành như một studio thiết kế nửa đêm: một canvas gần như đen với slate đậm (#25262d) để một tác phẩm nghệ thuật typographic duy nhất ngoạn mục — bức tranh tường nhiều màu 'I build things' — chiếm trọn ấn tượng đầu tiên. Bên dưới hero, hệ thống rút lui vào sự kiềm chế yên tĩnh: chữ bone-white nhạt (#f2f2f3) trên card tối phẳng, typography Replica chặt chẽ, pill controls, và một màu indigo nhẹ duy nhất (#384270) dành riêng cho indicator trạng thái 'Open' live. Trang đọc như một bức tường gallery — tác phẩm CHÍNH là trang trí, vì vậy chrome được giữ nhỏ gọn, metadata được mono-typed, và điểm nhấn màu duy nhất mang ý nghĩa ngữ nghĩa (availability, live state). Mật độ thông tin cao nhưng vẫn thoáng — các project entry xếp chồng dưới dạng year/title/description/tags với padding trong 24px rộng rãi, và card radius 16px làm mềm bề mặt tối vốn khắc nghiệt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Bone White | `#f2f2f3` | `--color-bone-white` | Primary text, nav links, button labels, footer copy — ánh sáng duy nhất trên trang, dùng cho mọi thứ cần đọc | | Slate Dark | `#25262d` | `--color-slate-dark` | Page canvas, bề mặt nền cho tất cả card và section | | Graphite | `#383a42` | `--color-graphite` | Elevated surface — card lồng nhau, button hover fills, secondary panels nằm trên Slate Dark | | Fog | `#858893` | `--color-fog` | Secondary text, metadata labels, inactive nav items, mô tả nhẹ |

# Graf Lantz — Style Reference > Scandinavian atelier trên nền vải linen thô — một nét violet cấp bách giữa căn phòng trắng xương. **Theme:** light Graf Lantz mang phong cách Scandinavian atelier trên vải linen thô: nền trắng xương, một màu violet thương hiệu dùng gần như dấu chấm câu, và ảnh sản phẩm được crop sát đến mức kết cấu vải nỉ trở thành bầu không khí. Trang web thiên về typography và whitespace, với 99% bề mặt achromatic và một bề mặt accent duy nhất dành cho các hành động. Type sử dụng grotesque chặt, hơi condensed (NeueHaasUnica) cho các chức năng tiện ích, trong khi một display face mềm mại hơn, gần như humanist (accessibly) dành cho wordmark và các CTA chính — sự tương phản nằm giữa utility text sắc sảo và display moments ấm áp. Các component mỏng như giấy: không shadow, không elevation stack, border dạng hairline trong khoảng #474747–#212121, và pill-shaped controls với ~50px radius. Mật độ thoải mái đến thoáng đãng; mỗi khung sản phẩm được thiết kế để cảm giác như một vật thể trên kệ trưng bày. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, text inverted trên nền tối. Nền trung tính để mọi thứ khác được gắn lên | | Soft Ash | `#eeeeee` | `--color-soft-ash` | Fill action trung tính nhạt cho button trên nền tối. | | Mist Sage | `#d5e4e8` | `--color-mist-sage` | Thanh thông báo và các vùng thông tin nhẹ nhàng — một teal desaturated mang tính utility, không bao giờ là trang trí | | Graphite | `#474747` | `--color-graphite` | Body text chính, border mặc định, hairline tone chủ đạo. Màu trung tính cấu trúc của hệ thống |

# Somos incansáveis pra você não precisar ser | Nubank — Style Reference > Tín hiệu violet trên nền marble trắng — một điểm nhấn sống động trên nền trắng kem sáng, mọi bề mặt đều được bo cong thành pill mềm mại. **Theme:** mixed Nubank vận hành trên hệ thống một điểm nhấn duy nhất: canvas sứ trắng, typography mực đen, và một sắc violet duy nhất đóng vai trò là điểm nhấn màu sắc duy nhất trong toàn bộ giao diện. Ngữ pháp thị giác được xây dựng trên các pill shapes — button, input và link đều được bo cong thành capsule 999px, mang đến cho hệ thống tính cách mềm mại, tròn trịa, dễ tiếp cận, làm dịu đi sự tương phản gay gắt của đen-trên-trắng. Typography mang sức nặng thẩm quyền: một geometric sans tùy chỉnh (Graphik) ở weight 400-500 với negative tracking mạnh, tạo nên những headline chặt chẽ, có cấu trúc, thì thầm thay vì la hét. Trang web thở — spacing rộng rãi dựa trên 8px, display size lớn (lên đến 56px), và các section ảnh tối tương phản với bề mặt trắng sáng khác. Mọi bề mặt tương tác đều là pill, mọi điểm nhấn đều là violet, và mọi màn hình đều giống như một trang từ một tạp chí được typeset tỉ mỉ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Nubank Violet | `#820ad1` | `--color-nubank-violet` | Điểm nhấn violet 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 thành màu CTA chính | | Deep Iris | `#290b4d` | `--color-deep-iris` | Điểm nhấn violet 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 thành màu CTA chính | | Dusty Violet | `#714f8f` | `--color-dusty-violet` | Lớp phủ violet nhẹ, trạng thái violet bị vô hiệu hóa, nền brand mờ | | Ink | `#000000` | `--color-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 |

# DJI — Style Reference > aerospace black canvas with a single electric blue thrust **Theme:** mixed DJI presents its products like aviation reveal footage: the hero is a near-black void where the device emerges from shadow, then the rest of the site opens into a clean, light-gray editorial grid of product cards. The palette is deliberately restrained — nearly monochromatic — with one vivid blue (#0070d5) that does the work of brand recognition, active state, and the one persistent call to action. Typography is Open Sans in a wide weight range (300–600) with tight negative tracking on display sizes, giving headlines a engineered, technical feel without serif warmth. Components are minimal: pill-shaped buttons at 64px radius, flat product cards with no decorative borders, ghost links with chevrons, and an almost shadowless surface system that lets the product photography carry all visual weight. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Onyx | `#000000` | `--color-onyx` | Primary text, icons, dark hero backgrounds, footer — the dominant ink color across all UI | | Paper | `#ffffff` | `--color-paper` | Card surfaces, nav bar, product detail panels, input fields — the lightest surface in the stack | | Fog | `#ededed` | `--color-fog` | Page canvas behind card grids and product sections — slightly cool, lower than pure white so product imagery pops | | Slate | `#6c7073` | `--color-slate` | Muted helper text, disabled states, secondary button borders, input placeholder |

# Join Parker — Style Reference > Banker's ledger meets indie magazine — white paper, electric blue ink, one italic flourish that rewrites the headline. **Theme:** light Parker operates as a confident fintech command center: white parchment canvas, single electric-blue primary, and a quiet italic serif that interrupts the all-sans orthodoxy. The dual-typeface system — Inter for everything functional, Gambetta italic for a single word of emphasis — is the signature: a sans headline reads as utility, but 'Powers Your Growth' in italic serif turns the value prop into editorial copy. Components are generously rounded (24px cards, 9999px pills) giving the dense financial UI a soft, approachable feel. A full-bleed electric-blue feature section breaks the white rhythm and re-establishes the brand as the visual anchor. Color is used sparingly and functionally: blue for action and brand surfaces, orange for one conversion-critical CTA, warm parchment and sand for soft surfaces that keep the page from feeling sterile. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Blue | `#5196fe` | `--color-electric-blue` | Primary brand color — filled CTAs, full-bleed feature section background, icon accents, the credit card product visual's gradient. Carries 80% of brand recognition | | Ember Orange | `#f9754e` | `--color-ember-orange` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#1b1d20` | `--color-ink-black` | Primary text, dark card surfaces (the credit card mockup, the dark feature section), heavy borders. Not pure black — sits slightly warm | | Midnight | `#101828` | `--color-midnight` | Secondary text and dark borders when Ink Black feels too heavy in tight contexts |

# Adaptive ML — Style Reference > Ấn phẩm in trên giấy kem ấm. Một phong cách editorial monochrome đầy tự tin, nơi màu sắc duy nhất là artwork trên các card và điểm trang trí duy nhất là serif. **Theme:** light Adaptive ML sử dụng ngôn ngữ editorial-monochrome ấm áp: mực gần đen (#272421) trên nền giấy kem trắng ấm (#ffffff, #edebe8), với headline serif cổ điển (Egyptienne F) mang phong cách typography ấn phẩm in hơn là web display text. Giao diện được thiết kế tối giản có chủ đích — không có điểm nhấn màu, không panel gradient trang trí, không badge màu — để mắt người xem bị thu hút vào một trong hai thứ: headline editorial, hoặc artwork gradient trừu tượng sống động trên các content card, vốn là màu sắc duy nhất trong hệ thống. Các component phẳng và đầy tự tin: dark filled buttons, hairline borders, 9px radii, và một shadow 12px gần như vô hình dành riêng cho elevated cards. Nhịp điệu tổng thể rộng rãi và phân chia theo section, với mono labels dạng uppercase có tracking rộng (Diatype Mono) đóng vai trò như 'typographic furniture' lặng lẽ bên cạnh serif display text uyển chuyển. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Ink | `#272421` | `--color-ink` | Primary text, filled buttons, dark inverse surfaces, hairlines, logo mark. Token tối nhất trong hệ thống — một màu gần đen ấm, đọc như mực in, không phải đen tuyền | | Paper Warm | `#edebe8` | `--color-paper-warm` | Hairline borders, dividers, input outlines, và card edges trên light surfaces. Không dùng làm màu CTA chính | | Paper Cool | `#e3e3e2` | `--color-paper-cool` | Tertiary surface tint, alternating row backgrounds, inset wells. Hơi lạnh hơn Paper Warm — dùng tiết kiệm để tạo chiều sâu phân lớp mà không cần màu sắc | | Mist | `#eeeeed` | `--color-mist` | Subtle dividers, low-contrast borders, badge fill backgrounds, hover wash trên neutral surfaces. Sáng hơn Paper Warm một bậc, dùng cho hairline detail work |