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

# Cup of Couple — Style Reference > tạp chí thời trang in trên giấy kem **Theme:** light Cup of Couple hoạt động như một nhật ký hình ảnh mang phong cách editorial: một canvas gần như đơn sắc với ảnh chụp ấm áp làm tất cả công việc tạo màu sắc. Mọi thành phần giao diện đều ở weight 400 — không có bold weight nào tồn tại trong hệ thống, vì vậy hệ thống phân cấp được xây dựng thông qua lựa chọn typeface (một humanist sans, một serif cổ điển, một titling serif) thay vì độ đậm. Kết quả mang phong cách như một trang tạp chí in ấn tình cờ có thể cuộn: tiêu đề serif lớn, đường kẻ xám mảnh như sợi tóc, khoảng trắng rộng rãi, và một grid portfolio ảnh phong cách sống. Bản sắc thương hiệu gần như sống hoàn toàn trong một custom display face duy nhất cho wordmark và kỷ luật không bao giờ thêm màu vào chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Charcoal | `#303030` | `--color-ink-charcoal` | Văn bản chính, tất cả border UI, nav rules, image borders — màu cấu trúc không phải trắng duy nhất trong hệ thống. Sự cố tình không dùng đen tuyền của thương hiệu mang lại cho headline cảm giác in ấn mềm mại hơn | | Dust Gray | `#808080` | `--color-dust-gray` | Border phụ, card dividers, footer rules, UI separators cấp ba — một mid-gray lùi về sau nội dung và không bao giờ cạnh tranh với ảnh chụp | | Bone | `#f0f0f0` | `--color-bone` | Bề mặt card, độ nâng nhẹ so với trang trắng, sắc thái đổ bóng nhẹ — làm ấm trang, tránh cảm giác trắng lạnh lẽo và gợi giấy in | | Faded Pencil | `#767676` | `--color-faded-pencil` | Nav underline / accent rule hiếm khi dùng — dùng có chọn lọc khi separator cần hiện diện nhiều hơn Dust Gray |

# Designmodo — Style Reference > Rừng lúc bình minh — tán cây tối trên cao, ánh sáng lọt xuống dưới thấp, một tia xanh lục duy nhất đánh dấu lối đi phía trước. **Theme:** mixed Designmodo phân chia cá tính qua hai vùng riêng biệt: một hero xanh rừng đậm (#0e231c) tạo cảm giác uy quyền, sau đó mở ra một content canvas trắng sáng — tương đương với bước qua một ô cửa tối để vào một studio ngập nắng. Các section tối dùng chữ trắng và màu sage nhẹ #defaca, trong khi section sáng dùng màu gần đen #313942, tạo nên hệ thống màu hai phòng nơi ngữ cảnh luôn báo hiệu chế độ. Một màu xanh lục điện duy nhất (#27ae60) là màu tương tác duy nhất ở cả hai thế giới — CTA buttons, badges, và active states đều dùng chung một sắc thái, khiến mọi phần tử có thể click đều cảm thấy thuộc cùng một gia đình bất kể nó nằm ở phòng nào. InterVariable với letter-spacing âm (xuống tới -0.028em ở kích thước display) đảm nhiệm phần nặng về typography, với các feature flag nhận diện ligature 'cv03', 'cv04', 'cv06', 'cv09', 'ss03' khiến Inter tiêu chuẩn trở nên độc quyền. Border-radius 32px cho card và pill buttons 999px tạo nên hình học mềm duy nhất trong một hệ thống vốn vuông vức. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Forest Floor | `#0e231c` | `--color-forest-floor` | Nền hero section, nền dark nav — bề mặt sâu nhất trong hệ thống; chữ trắng đọc ở tỷ lệ 16.5:1 trên nền này | | Canopy Shadow | `#1a3029` | `--color-canopy-shadow` | Bề mặt tối thứ cấp, dùng làm dark card nâng cao hoặc section band trong vùng dark-mode hero | | Pine Border | `#233630` | `--color-pine-border` | Divider tinh tế trong các section tối — gần như không phân biệt với nền, đọc giống đường kẻ chìm hơn là separator | | Slate Ink | `#313942` | `--color-slate-ink` | Body text mặc định, icons, borders trên section sáng — màu gần đen đảm nhận hầu hết công việc trong vùng sáng |

# Altason — Style Reference > architectural monochrome broadsheet **Theme:** light Altason là một portfolio-canvas: lưới editorial thuần đen trên trắng, nơi wordmark Grotesk cỡ lớn, medium-weight là hero và bản thân tác phẩm chính là sản phẩm. Hệ thống hoàn toàn 0% chromatic — mọi khoảnh khắc thị giác đều được tạo nên từ mực, giấy và khoảng trắng âm giữa chúng. Các component không có border ngoại trừ đường kẻ 1px màu đen mảnh như sợi tóc, lặng lẽ phân chia trang; không có shadow, không gradient, không bo góc, không màu nhấn. Type làm tất cả công việc, và nó nói to bằng cách cực kỳ lớn và chỉ ở weight 500 — sự kiềm chế của một medium weight ở 288px là signature move. Mật độ thoáng và có tính kiến trúc: các section thở với vertical padding 112–288px, nội dung nằm trong lưới ba cột, và mọi bề mặt đều là mặt phẳng, không có phân cấp độ cao. Một AI agent nên nghĩ về điều này như thiết kế một trang tạp chí in, không phải một SaaS dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, border mảnh, đường kẻ cấu trúc, border ảnh, fill heading — mực đen chủ đạo vẽ nên toàn bộ trang | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, chữ trắng trên nền tối — bề mặt để chữ đen lên tiếng | | Charcoal Plate | `#212121` | `--color-charcoal-plate` | Khối bề mặt tối và nền ảnh nơi chữ trắng đặt lên — một giải pháp thay thế mềm hơn cho đen thuần ở các vùng tối lớn | | Silver Hairline | `#b0b0b0` | `--color-silver-hairline` | Đường phân cách tinh tế và link phụ nhẹ nhàng — một mid-gray lặng lẽ lùi về sau chữ đen mà không biến mất |

# Andercore — Style Reference > Steel blueprint at midnight **Theme:** dark Andercore vận hành trên ngôn ngữ công nghiệp chiaroscuro: canvas gần như đen (#0b0405) với chữ trắng sắc nét, góc vuông 4px, và một màu đỏ duy nhất được phân bổ có kiểm soát (#e32735) làm tất cả công việc kể chuyện. Trang web xen kẽ giữa một dải navigation sáng và các section tối full-bleed, nơi đường viền (1px, #382e30) định nghĩa cấu trúc thay vì shadow hay độ cao. Archivo mang độ chính xác hình học ở mọi kích cỡ với tracking -0.02em chặt chẽ, trong khi Space Mono ở 12px đóng dấu nhãn kiểu dụng cụ công nghiệp lên badge và step counter. Màu đỏ không bao giờ trang trí — nó kích hoạt, đánh dấu hành động chính duy nhất, gạch chân step đang hoạt động, và các kết nối UI quan trọng. Toàn bộ hệ thống mang cảm giác như một phòng điều khiển: dày đặc, có chủ đích, và được thắp sáng bởi một đèn báo duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Red | `#e32735` | `--color-signal-red` | Màu hành động đỏ cho filled button, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung | | Carbon | `#0b0405` | `--color-carbon` | Nền section chính, canvas tối full-bleed, secondary button fill | | Graphite | `#150e0f` | `--color-graphite` | Bề mặt gần đen thay thế cho card và panel nâng cao trên section tối | | Steel | `#382e30` | `--color-steel` | Hairline border trên nền tối, cạnh card, đường chia bảng, đường viền UI mockup |

# Sandclock — Style Reference > Terminal lệnh DeFi lúc nửa đêm — đèn tín hiệu xanh mint trên bảng điều khiển đen mờ **Theme:** dark Sandclock là một terminal yield DeFi khoác lên mình màu đen mờ: chrome gần như bằng không, một màu tín hiệu xanh mint rực rỡ, và typography đảm nhận mọi công việc. Giao diện mang phong cách Bloomberg terminal được tái hiện cho DeFi — canvas tối (#0a0a0a), viền graphite mảnh (#222222), bề mặt phẳng không có độ nâng trang trí, và Inter cho text tiện ích kết hợp với custom Aeonik display face cho headline 72px hiếm hoi. Màu xanh (#3fe280) chỉ xuất hiện như dấu câu chức năng: gạch chân nav active, primary CTA, và viền accent trên các thẻ số liệu trực tiếp. Mọi bề mặt khác đều giữ achromatic để màu xanh đọc như tín hiệu trực tiếp, không phải trang trí. Các component có cảm giác như một trading dashboard — gọn gàng, nhiều thông tin số, nhưng thoáng đãng nhờ khoảng cách section rộng. Không gradient, không drop shadow ngoại trừ một hiệu ứng nâng nhẹ duy nhất trên button, không có chrome minh họa màu sắc. Sự tin tưởng được truyền tải qua sự kiềm chế: thiết kế nói 'tiền của bạn ở đây' bằng cách giữ im lặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyss | `#0a0a0a` | `--color-abyss` | Canvas trang và nền chính — toàn bộ site sống trên bề mặt gần như đen này để accent mint đọc như tín hiệu trực tiếp giữa bóng tối thuần khiết | | Carbon | `#171717` | `--color-carbon` | Bề mặt card và panel được nâng lên — dùng cho stat cards, security badges, và announcement containers cần tách khỏi canvas mà không đưa thêm màu sắc | | Graphite | `#222222` | `--color-graphite` | Viền mảnh, divider, và màu cấu trúc xuất hiện nhiều nhất trong hệ thống. Mang 356 borderColor uses — nó là khung dây (wireframe) định nghĩa mọi container | | Ash | `#9b9b9b` | `--color-ash` | Secondary text mờ, helper labels, và nav items được giảm chú ý. Màu text không phải trắng duy nhất — dành #ffffff cho nội dung cần được đọc trước |

# Forner — Style Reference > Warm earthen atelier — hãy tưởng tượng một xưởng gốm vào giờ vàng, nơi mọi bề mặt đều là đất sét, xương, hoặc cà phê rang, và thứ chrome duy nhất là mảnh giấy ghi chú viết tay của người thợ gốm cài trên tường. **Theme:** light Forner hoạt động như một design atelier ngập nắng: bảng màu gần như hoàn toàn là tông đất ấm, một custom grotesque duy nhất đảm nhận 95% giọng điệu, và typography siêu lớn đến mức từ bỏ hệ thống phân cấp để tạo bầu không khí. Canvas là một tông kem khô; mực là một tông nâu rang đậm; mọi điểm nhấn đều nằm trong cùng một dải màu từ nâu đến xương. Không có màu thương hiệu chromatic — chính độ ấm là thương hiệu. Bề mặt phẳng với hairline borders, góc vuông sắc nét ở 4px, và khoảng thở rộng rãi (100px+ giữa các section). Custom serif italics xuất hiện tiết kiệm như những chú thích viết tay đặt cạnh nhịp điệu cơ học của grotesque. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, xương sống cấu trúc của mọi giao diện — nâu ấm đậm đóng vai trò như mực trên nền kem, màu foreground chủ đạo trên toàn bộ hệ thống | | Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Nền trang, trường kem ấm mà mọi bề mặt đặt trên đó | | Linen Surface | `#ecece4` | `--color-linen-surface` | Bề mặt card, panel nâng cao, content blocks — cách canvas một bước, hơi lạnh và xám hơn để lùi về phía sau | | Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — neutral có cảm giác chromatic nhẹ nhất, dùng khi Roast Ink có vẻ quá nặng |

# Munro Partners — Style Reference > Editorial parchment dưới ánh sáng alpine — một nền cream ấm áp chứa đựng khoảng trắng rộng rãi, một grotesque siêu nhẹ, và ảnh núi non full-bleed nơi cảnh vật tự kể chuyện còn giao diện gần như vô hình. **Theme:** light Munro Partners vận hành ở một tông editorial trầm lắng: nền cream ấm (#fff9ee) chứa khoảng trắng rộng rãi, mọi thành phần giao diện được viền bằng một màu nâu sẫm ấm duy nhất (#3f322a) đọc như mực chứ không phải đen. Typography Neue Haas Grotesk được set tight và nhỏ, với display headline 68px weight 400 thì thầm bên cạnh ảnh núi non full-bleed thay vì la hét. Một màu teal đậm duy nhất (#004e4e) dành riêng cho những khoảnh khắc tương tác quan trọng nhất, trong khi violet nhạt, aubergine và xanh băng xuất hiện dưới dạng viền accent mảnh trên card và data treatments. Hệ thống này giống một bản báo cáo thường niên in ấn hơn là một sản phẩm tài chính — tĩnh lặng, rộng rãi và đủ tự tin để để hình ảnh phong cảnh gánh vác trọng lượng cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Parchment | `#fff9ee` | `--color-cream-parchment` | Canvas trang, nền section, bề mặt card, nav bar fill — màu off-white ấm định nghĩa toàn bộ mood và thay thế cho pure white thông thường | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card được nâng lên, container nhúng video, panel tương phản trên nền cream | | Bark Brown | `#3f322a` | `--color-bark-brown` | Text chính, tất cả border, nav links, body copy, headings — thay thế màu đen trong toàn bộ hệ thống, tạo cho mỗi dòng chữ chất mực ấm | | Warm Gray | `#9f968c` | `--color-warm-gray` | Text phụ, border nhẹ, nav dividers — tone trung gian nối giữa Bark Brown headings và divider nhạt hơn |

# Gitbook — Style Reference > warm-white architecture studio with orange highlighter marks **Theme:** light GitBook projects the calm authority of a well-edited reference book: warm-white pages, generous breathing room, and near-black type that commands without shouting. A single vivid orange acts as a highlighter — appearing only in badges, the 'New' pill, the floating Ask widget, and the kinetic 3D shapes that bleed into the hero screenshot. The interface stays almost entirely monochromatic; color is punctuation, not atmosphere. Typography is the visual identity: a geometric bold display face at 45-55px with tight negative tracking creates editorial weight, while Inter handles the dense body copy. Components are paper-like — flat cards, hairline borders, pill buttons, minimal shadow. Everything reads as a knowledge product: structured, legible, confident. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Flame Orange | `#fe551b` | `--color-flame-orange` | Orange outline accent for tags, dividers, and focused UI edges. | | Ink | `#1c1917` | `--color-ink` | Primary action buttons, headlines, body text, primary borders — warm near-black replaces pure black for a softer, editorial feel | | Paper | `#ffffff` | `--color-paper` | Page canvas, button text on dark fills, card surfaces — the dominant background | | Bone | `#fafaf9` | `--color-bone` | Card backgrounds, subtle surface elevation above the white canvas, link/button ghost states |

# Outseta — Style Reference > Chợ chiều lúc hoàng hôn — bầu trời gradient ấm áp buông xuống màn đêm màu mận chín. **Theme:** light Outseta sử dụng ngôn ngữ chợ chiều ấm áp: một hero gradient ánh hoàng hôn (hồng → kem → vàng) neo giữ trang, kết hợp với văn bản màu tím đậm (#240029) tạo cảm giác chắc chắn, cao cấp cho giao diện. Câu chuyện màu sắc thương hiệu thiên về tím — gần như mọi đường viền, body text và icon stroke đều mang sắc thái #240029 thay vì đen trung tính, khiến ngay cả chrome chức năng cũng mang đậm chất thương hiệu. Màu hồng neon (#df37a7) duy nhất đảm nhận vai trò màu hành động chính, giữ cho các khoảnh khắc thương mại chặt chẽ và rõ ràng. Font mono-spaced cho eyebrow (JetBrains Mono với tracking rộng) mở đầu mỗi section, và các chú thích Permanent Marker tự do nổi trên hero, mang lại cho bề mặt marketing cá tính như một cuốn sổ tay thủ công. Các component có góc bo tròn mềm (6-14px), shadow thấp, nằm trên nền trắng với shadow pha tím thay vì xám. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Aubergine | `#240029` | `--color-aubergine` | Primary text, icon strokes, hairline borders, và fill cho section tối — mực cấu trúc của hệ thống; mọi đường viền chức năng đều mang sắc thái này thay vì xám trung tính | | Fuchsia Signal | `#df37a7` | `--color-fuchsia-signal` | Primary action fill (Sign up CTA, active states) — màu sắc nóng duy nhất trong hệ thống, chỉ dành riêng cho khoảnh khắc chuyển đổi | | Heather | `#6d526d` | `--color-heather` | Điểm nhấn hồng cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ | | Glowstick | `#ffcc11` | `--color-glowstick` | Màu kết thúc của hero gradient và điểm nhấn trang trí — một màu vàng ấm chỉ dùng cho khoảnh khắc ăn mừng và gradient hoàng hôn |

# Creative Giants — Style Reference > oversized editorial poster on cream paper **Theme:** light Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffef7` | `--color-bone-white` | Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel | | Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Graphite | `#666666` | `--color-graphite` | Secondary body text, captions, metadata, helper copy — recedes so display type can dominate | | Ash | `#aaaaaa` | `--color-ash` | Input borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed |

# Ableton — Style Reference > Editorial workshop trên nền trắng tinh. Giấy trắng, chữ Futura đen, một vệt bút xanh cho tương tác, ảnh cắt sát mép như layout tạp chí. **Theme:** light Hệ thống visual của Ableton mang phong cách bảng editorial của một studio đang hoạt động: canvas trắng tinh, hình học Futura PT, và một màu xanh dương tự tin đánh dấu mọi văn bản tương tác. Site ưu tiên chữ và gần như phẳng một cách triệt để — không đổ bóng, không bo góc, không chrome trang trí — để ảnh chụp nhạc công, phần cứng và phần mềm tự tạo cảm xúc. Màu sắc xuất hiện như những dấu chấm câu chức năng nhỏ: xanh dương rực cho link, cùng tag fill san hô và xanh ngọc để phân loại nội dung mà không làm mềm layout. Navigation là một thanh mỏng phía trên với tên sản phẩm mang phong cách monospace. Tổng thể gợi cảm giác một cuốn technical manual được dàn trang đẹp — mật độ thông tin do typography và hình ảnh đảm nhiệm, không phải do container design. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Văn bản chính, nav label, logo, icon stroke, và mọi heading — thiết lập toàn bộ hệ thống phân cấp thông tin | | Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, và text overlay trên hero — background mặc định cho hầu hết mọi màn hình | | Fog | `#eeeeee` | `--color-fog` | Form input nhẹ, bề mặt tag, và nền panel phụ tĩnh lặng — neutral gần như vô hình | | Signal Blue | `#0000ff` | `--color-signal-blue` | Accent màu xanh tím cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |

# Tatem — Style Reference > trung tâm chỉ huy chạng vạng tĩnh lặng — một không gian làm việc tối tăm, êm đềm, tràn ngập một gradient xanh dương nhạt pha than chì duy nhất, với một tia nắng ấm áp là điểm nhấn màu sắc duy nhất. **Theme:** dark Tatem vận hành trong một bảng màu chạng vạng tối tăm, êm đềm, nơi gần như toàn bộ giao diện được thể hiện bằng các bề mặt xám trung tính và gần như đen, tạo ra một môi trường tập trung, tĩnh lặng cho một ứng dụng email. Phần hero phá vỡ sự đơn sắc với một gradient xám-xanh dương nhạt duy nhất chuyển dần sang đen, đóng khung một headline căn trái cỡ lớn và một bản xem trước ứng dụng được xoay nhẹ. Typography chỉ dùng duy nhất Inter weight 400, dựa vào kích thước và letter-spacing để tạo hệ thống phân cấp thay vì tương phản weight. Các component vẫn phẳng và tối giản: ghost button với viền mảnh, card bo góc 6px, chip phím tắt, và các hàng trong inbox dùng khoảng cách và đường kẻ xám tinh tế thay vì viền hay đổ bóng. Dấu ấn thị giác là sự kiềm chế — một icon tia nắng ấm áp là điểm nhấn màu sắc duy nhất, phần còn lại của hệ thống giao tiếp qua không gian âm, gradient trung tính và màu chữ thì thầm nhẹ nhàng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Chữ chính, logo mark, viền ghost button trên nền tối — màu có độ tương phản cao nhất, dùng có chọn lọc cho headline và label đang hoạt động | | Ash Gray | `#c2c2c2` | `--color-ash-gray` | Heading phụ, chữ nhấn mạnh trên bề mặt tối | | Mist | `#b5b5b5` | `--color-mist` | Body text nhẹ nhàng, sub-label, metadata | | Smoke | `#919191` | `--color-smoke` | Chữ cấp ba, nét icon, mục điều hướng không hoạt động, chữ trên secondary button |

# Everlane — Style Reference > Minimalist atelier trên nền vải linen thô. Tường trắng, kiến trúc trần trụi, một dải ánh sáng xanh sage duy nhất. **Theme:** light Everlane hoạt động như một catalogue thời trang biên tập tối giản: bảng màu gần như hoàn toàn achromatic, một điểm nhấn sage mềm duy nhất dành cho thông điệp khuyến mãi, và Maison Neue được đặt gần như hoàn toàn ở dạng uppercase với tracking rộng. Nhiếp ảnh gánh gần như toàn bộ trọng lượng thị giác — ảnh editorial full-bleed và ảnh sản phẩm crop sát đặt trên nền trắng, không trang trí, không đổ bóng, không chrome. Typography là vật trang trí duy nhất: heading uppercase có tracking nổi trên hình ảnh, body text tối giản và lặng lẽ. Các component được lược bỏ đến mức tối thiểu — text link mảnh, product tile góc sắc, không button, không card, không panel. Kết quả đọc giống một cuốn lookbook in ấn được chuyển lên màn hình hơn là một cửa hàng trực tuyến. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Onyx | `#000000` | `--color-onyx` | Primary text, icon, hairline border, nav typography, footer text — mực chủ đạo trên mọi bề mặt | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nền product card, hero text overlay, input fill | | Soot | `#121212` | `--color-soot` | Dark feature section, inverted text trên bề mặt sáng, khối tương phản cao | | Ink | `#161912` | `--color-ink` | Biến thể body text gần đen, deep border — gần như không phân biệt được với Onyx nhưng mang một chút ấm nhẹ |

# Handhold — Style Reference > giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu. **Theme:** light Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng | | Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng | | Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao | | Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |

# Huly — Style Reference > Aurora through a midnight observatory — the hero is a vertical beam of violet melting into coral, and every quiet section below it borrows that same two-color story told at lower volume. **Theme:** mixed Huly projects a cosmic-workspace atmosphere: near-black canvas with a single violet-to-amber aurora slicing through the hero, then a quieter productivity grid below. The system lives in a narrow chromatic band — one electric iris blue and one ember coral do all the brand work against layered graphite surfaces, so the dark mode never feels neutral. Typography is Inter for everything functional, with a custom display face (Esbuild) reserved for hero moments at 80–84px with aggressive negative tracking. Components lean pill-shaped: 9999px radii on controls, 12px on cards, minimal shadow, and glowing gradient strokes as the primary decoration. The page alternates between full-bleed dark spectacle and calm light sections, so any new screen must decide which mode it's in before picking colors. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Canvas | `#303236` | `--color-obsidian-canvas` | Page background, dominant surface — near-black with a whisper of warmth, the default stage for all content | | Void | `#090a0c` | `--color-void` | Deepest surface layer for hero gradients, modal backdrops, and borders that need to disappear into the canvas | | Charcoal Card | `#111111` | `--color-charcoal-card` | Elevated card and panel surfaces sitting one step above the canvas | | Slate Edge | `#4a4b50` | `--color-slate-edge` | Hairline borders and dividers on dark surfaces |

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

# Incident — Style Reference > Technical broadsheet về bê tông. Times-serif headlines nổi trên nền xám ấm với hairline black rules và một tia cam duy nhất phá vỡ sự tĩnh lặng như một tín hiệu. **Theme:** light Incident xử lý trang status như một ấn phẩm editorial: typeface Times-serif trên canvas màu xám bê tông, hairlines đen tuyền, và một màu cam tín hiệu ấm áp đóng vai trò như tia sáng xuyên qua mảng đơn sắc. Kỷ luật ở đây là cực đoan — màu sắc bị hạn chế tối đa, chỉ xuất hiện dưới dạng brand accent fill, logo marks, và file-type illustrations trang trí, không bao giờ dùng làm nền button hay action fills. Bề mặt phẳng, giống giấy; chiều sâu đến từ soft 2-layer shadows trên hình ảnh, không phải từ elevation stacking. Kết quả mang phong cách của một tờ technical broadsheet đáng tin cậy hơn là một dashboard điển hình — sự uy tín đến từ sự kiềm chế về typography, không phải từ khối lượng màu sắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Signal Orange | `#f25533` | `--color-signal-orange` | Brand accent, logo mark, decorative SVG fills, nav emphasis — điểm nhấn màu ấm duy nhất xuyên suốt hệ thống đơn sắc | | Concrete | `#efefef` | `--color-concrete` | Page canvas, button background — tông bề mặt chủ đạo tạo cảm giác giấy ấm cho hệ thống | | Ink | `#000000` | `--color-ink` | Primary text, hairline borders (920+ lần sử dụng), button outlines — màu đen tuyền đảm nhận toàn bộ đường nét cấu trúc | | Paper | `#ffffff` | `--color-paper` | Card surfaces, nav fills — lớp trắng nằm trên canvas concrete |

# Flying Papers — Style Reference > Saturday morning cartoon confessional **Theme:** light Flying Papers hoạt động như một bộ phim hoạt hình sáng thứ Bảy in trên giấy riso dày: một sân khấu tím nhạt phẳng, một dàn nhân vật nhỏ với màu sắc bão hòa rực rỡ, và typography cỡ lớn đến mức nuốt chửng viewport. Giọng thương hiệu to, táo bạo và không hề hối lỗi — nó không xin sự chú ý, nó cướp lấy. Mỗi màn hình phải giống như một poster đơn lẻ mạnh mẽ: một display headline chủ đạo, một mascot illustration hỗ trợ, một inline action, và khoảng thở rộng rãi. Borders đảm nhận vai trò chính thay vì shadows; màu sắc được dùng như sơn vẽ, không phải dữ liệu. Bề mặt luôn phẳng, góc cạnh sắc nét ở 6px, và thứ duy nhất mềm mại trong hệ thống là pill 100px trên gate button. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Dusk Violet | `#8584bd` | `--color-dusk-violet` | Primary canvas và hero background — sân khấu nơi mọi màu sắc khác biểu diễn | | Hi-Vis Yellow | `#f4ed36` | `--color-hi-vis-yellow` | Yellow accent cho outlined action borders, linked labels, và lightweight interactive emphasis. Không nâng cấp nó thành primary CTA color | | Buttery Yellow | `#f9cc73` | `--color-buttery-yellow` | Secondary display text và border mềm hơn — phiên bản dịu nhẹ hơn của Hi-Vis khi Hi-Vis quá mạnh | | Lilac Shadow | `#61609a` | `--color-lilac-shadow` | Card và block backgrounds — một violet đậm hơn cho bề mặt lồng trên sân khấu violet |

# Sunday — Style Reference > Monochrome magazine spread with one yellow highlight **Theme:** light Sunday presents Memo in an editorial product-launch register: a pure white canvas dominated by massive single-weight headlines, photographic storytelling, and a single vivid yellow used as rare punctuation against a near-total absence of color. Typography is the brand — one weight (400) stretched across a scale from 14px to 142px, with slight negative tracking on display sizes, giving the page the cadence of a magazine spread rather than a software product page. The interface is sparse to the point of asceticism: centered navigation, no sidebar, no cards with shadows, no decorative gradient meshes. Color appears only as functional signal — yellow for highlight states and beta CTAs, black for everything else. The visual system reads as confidence through restraint: the robot does the talking, the page stays out of the way. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lemon Highlight | `#f7e731` | `--color-lemon-highlight` | Yellow supporting accent for decorative details and low-frequency emphasis | | Ink Black | `#1a1a1a` | `--color-ink-black` | Primary text, icons, button labels, nav links, form borders — the workhorse dark for all readable content | | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, button text on dark fills — the dominant canvas | | Pure Black | `#000000` | `--color-pure-black` | Hairline borders, footer background, maximum-emphasis text — used where Ink Black is not dark enough |

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

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

# Flecto — Style Reference > Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ. **Theme:** mixed Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng | | Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính | | Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính | | Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |

# Dul Zorigoo — Style Reference > ink-and-pencil gallery wall — portfolio của designer được thể hiện như những bảng triển lãm đơn sắc trên nền trắng, nơi cấu trúc được vẽ ra chứ không phải tô đầy **Theme:** light Một bức tường gallery đơn sắc cho portfolio của designer — nền canvas trắng tinh, đường phân cách xám mảnh như nét chì, và mực gần đen cho chữ, với chính tác phẩm (ảnh chụp, UI captures, thử nghiệm) cung cấp mọi giọt màu sắc. Layout theo cấu trúc hai cột: một thanh bio cố định mỏng bên trái, một thanh filter tab ngang phía trên, và một masonry grid thoáng với các tile tác phẩm kích thước khác nhau ở khu vực chính. Hệ thống được thiết kế có chủ đích tối giản — không có màu nhấn, không bóng đổ, không bo tròn mềm mại ngoại trừ bán kính 8px trên một vài control hiếm hoi. Sự kiềm chế chính là thương hiệu: mọi quyết định thị giác đều là sự vắng mặt của một quyết định, để ảnh chụp và screenshot sản phẩm gánh toàn bộ trọng lượng thị giác. Đặc điểm nổi bật nhất là màu viền mảnh #ebebeb xuất hiện 620 lần, cấu trúc mọi panel, card và divider — một grid được vẽ bằng bút chì 1px chứ không phải xây dựng bằng độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, image wells, bề mặt card bên trong embedded UI captures | | Pencil Gray | `#ebebeb` | `--color-pencil-gray` | Viền mảnh, divider panel, cạnh card, viền button, đường cấu trúc chủ đạo của toàn bộ hệ thống | | Graphite | `#a8a8a8` | `--color-graphite` | Chú thích ảnh, heading phụ, nhãn section, metadata thời gian/địa điểm | | Smoke | `#8e8e8e` | `--color-smoke` | Body helper text, secondary metadata, descriptor có độ nhấn thấp |

# Ví crypto an toàn và mạnh mẽ | Ctrl Wallet — Style Reference > sticker-bombed white lab — confetti cards on surgical chrome **Theme:** light Ctrl sử dụng chủ nghĩa tối giản trên nền trắng tinh, bị ngắt quãng bởi những mảng màu confetti vui tươi — một bảng chrome gần như đơn sắc, nơi chữ đen và viền mỏng đảm nhận vai trò cấu trúc, còn các card màu vàng, hồng, xanh dương và xanh lá bão hòa rải rác khắp layout như những tờ giấy ghi chú. Màu chức năng duy nhất là xanh lá tươi (#05c92f), dành riêng cho pill download/CTA neo giữ mọi màn hình. Typography là một font grotesque tùy chỉnh duy nhất (Tomato Grotesk) được triển khai ở kích thước display cực lớn với leading dày đặc (0.77–0.90), khiến headline mang cảm giác kiến trúc hơn là typographic. Các component phẳng, dựa trên viền, và được bo tròn rộng rãi — pill buttons, card góc bo mềm ở 17.5px, và bán kính lớn hơn 35–52px trên các phần tử tương tác. Hệ thống tránh hoàn toàn elevation; thứ bậc đến từ kích thước, weight, và độ tương phản màu sắc, không phải độ sâu đổ bóng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Acid Lime | `#05c92f` | `--color-acid-lime` | Lớp phủ xanh lá cho highlight background, dải trang trí, và điểm nhấn mềm phía sau nội dung. Không nâng cấp nó thành màu CTA chính | | Sticker Yellow | `#fcea59` | `--color-sticker-yellow` | Nền card accent trang trí, icon fills, điểm nhấn confetti trên hero và feature spreads | | Cotton Pink | `#ffd0e2` | `--color-cotton-pink` | Nền card accent trang trí, dấu câu màu sắc mềm mại trên layout tính năng | | Powder Blue | `#a7cbf6` | `--color-powder-blue` | Nền card accent trang trí, bề mặt callout thông tin |