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

# Stability AI — Style Reference > Xung tím trong phòng tối. Ảnh editorial full-bleed nổi trên bề mặt gần như đen, với một điểm nhấn violet rực rỡ duy nhất thắp sáng mọi thành phần tương tác mà không hề la hét. **Theme:** dark Stability AI là nền tảng sáng tạo trên canvas tối với một điểm nhấn điện tím duy nhất xuyên suốt các bề mặt gần đen. Ảnh editorial full-bleed chiếm ưu thế ở hero, với UI sản phẩm dạng nổi được ghép (composite) lên trên người mẫu và cây cỏ — hợp nhất công cụ và đầu ra thành một hình ảnh duy nhất. Typography là Archivo với các font-weight tự tin, display sizes được siết chặt ở line-height thấp (≈0.98–1.07) để headline xếp chồng thành các khối editorial gọn gàng thay vì copy marketing thoáng đãng. Tương tác gần như hoàn toàn được báo hiệu bằng xung tím — pill CTAs, link gạch chân, arrow affordances, và cả icon footer mạng xã hội đều đọc như cùng một tần số lavender. Các bề mặt phân lớp tinh tế (#1e1e1 → #383838 → #000000) không có decorative shadow, vì vậy chiều sâu đến từ sự chuyển tông màu và khoảng trống âm bản rộng rãi thay vì độ cao. Các component nhẹ nhàng và tự tin: pill buttons, divider mảnh, và body text màu violet nhạt (#725d91) lùi về phía sau nhưng vẫn giữ cho trang hài hòa về tông màu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Iris Spark | `#a381ff` | `--color-iris-spark` | Accent violet 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 | | Indigo Edge | `#776cff` | `--color-indigo-edge` | Accent violet 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 | | Mauve Veil | `#725d91` | `--color-mauve-veil` | Heading, body text trên nền tối, và muted link text — một màu violet bão hòa thấp giữ cho trang hài hòa về tông với accent trong khi để nội dung lùi lại | | Lilac Ash | `#b6a9c6` | `--color-lilac-ash` | Secondary body copy, helper text, subtle link variants trên nền tối — neutral pha tím nhạt nhất, làm cầu nối giữa mauve headings và white labels |

# OFF WHITE — Style Reference > Khối typography glitch trên nền đen nửa đêm — một bức tường chữ xanh pixel, nơi ảnh chân dung một khuôn mặt người được ép vào khoảng trống giữa các chữ cái hoành tráng, trên nền đen tuyệt đối. **Theme:** dark Đây là một trải nghiệm editorial mang tính khái niệm, không phải product UI — hệ thống thị giác vũ khí hóa các thái cực nhị phân (canvas đen thuần, chữ trắng thuần) và ba điểm nhấn màu sắc rực rỡ (xanh điện, đỏ báo động, vàng hi-vis) để hiện thực hóa chủ đề 'vùng xám giữa đen và trắng' của trang web. Typography được phân cực có chủ đích: một custom display face blocky được scale lên 180–500px đóng vai trò kiến trúc, trong khi serif Times 16px thông thường thì thầm bên cạnh như một chú thích editorial. Layout theo hướng collage thay vì grid cứng nhắc — ảnh chân dung chồng lên display type, tràn ra ngoài khung, và xếp chồng rải rác bất quy tắc, tạo cảm giác zine/protest-poster, từ chối các pattern product UI thông thường. Khoảng cách dọc rộng rãi (60–120px) nhưng ngang thì dày đặc và hỗn loạn, không có max-width container nào giới hạn canvas. Custom display face 'Offwhite' là tài sản quan trọng nhất trong hệ thống: hình học blocky lấy cảm hứng từ pixel biến mỗi chữ cái thành một vật thể điêu khắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Voltage Green | `#00fb34` | `--color-voltage-green` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi có focus | | Alarm Red | `#ff0000` | `--color-alarm-red` | Viền khung, stroke trang trí, divider section — màu border được dùng nhiều nhất trong hệ thống. Borders tổng cộng 44 lần so với chỉ 12 lần background, nghĩa là đỏ được đọc như một khung hình chữ nhật cứng hoặc đường viền cảnh báo, không phải surface fill | | Caution Yellow | `#fff500` | `--color-caution-yellow` | Điểm nhấn outline vàng cho tags, divider, và cạnh UI có focus | | Absolute Black | `#000000` | `--color-absolute-black` | Page canvas, viền photo tile (104 image borders), tất cả màu chữ. Màu xuất hiện nhiều nhất trong hệ thống (3357 lần) — mọi thứ khác nổi trên nó |

# Superr — Style Reference > Cuốn vở học trò ấm áp dưới ánh nắng chiều nhẹ. Một trang giấy kem, một cây bút dạ màu cam chưa đậy nắp, và một xấp nhãn tên dán ép đang chờ được bóc ra. **Theme:** light Superr là một thẩm mỹ sân trường ấm áp được thể hiện dưới dạng kỹ thuật số: một canvas giấy kem, màu cam bút dạ là điểm nhấn màu duy nhất, và display type chunky viết thường mang phong cách nguệch ngoạc trong vở học trò — to và đầy cá tính. Sản phẩm được chụp ảnh như một vật thật — sổ tay bìa da, bút chì màu, nhãn tên dán ép — và chính những vật thể này, chứ không phải minh họa UI trừu tượng, mới là yếu tố thị giác chính. Các sticker minh họa vui nhộn (tia chớp, gấu, trái tim, ma) rải rác khắp layout như những điểm nhấn cá tính nhỏ, nhưng chúng là dấu câu trang trí, không phải icon hệ thống. Mọi bề mặt đều mờ và mềm: viền tối mảnh thay vì fill màu, bóng đổ tối thiểu, khoảng thở rộng rãi, và bo góc dừng ở 20px trước khi chuyển sang full-pill. Kết quả là một trang web có cảm giác như mở một quyển vở mới vào ngày đầu năm học — thong thả, xúc giác, và hơi tinh nghịch. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Cream Paper | `#fdfbf9` | `--color-cream-paper` | Canvas trang, bề mặt card, fill button — tông nền trắng ấm giúp viền tối và điểm nhấn cam trông như mực và bút dạ trên giấy | | Charcoal | `#171717` | `--color-charcoal` | Viền tối và đường phân cách cho bề mặt nâng cao và UI inverted | | Cocoa Ink | `#2b1a07` | `--color-cocoa-ink` | Màu headline, viền trang trí — màu tối ấm hơn, kế thừa tông da sổ tay thay vì đen tuyền | | True Black | `#000000` | `--color-true-black` | Dành riêng cho headline cần độ nhấn cao nhất và các trường hợp đặc biệt khi Charcoal quá mềm |

# Savee — Style Reference > Black canvas dành cho visual curators **Theme:** dark Savee hoạt động trong bóng tối gần như tuyệt đối: một canvas gần như đen tuyền (#050505) nơi yếu tố màu sắc duy nhất là một electric indigo (#1500ff) duy nhất, điểm xuyết giao diện như ánh đèn neon trong gallery. Typography đảm nhận toàn bộ trọng trách — một custom sans-serif duy nhất được dùng ở mọi cấp độ, từ display headline 96px với line-height 0.96 và tracking -0.04em cho đến caption 13px, tạo nên nhịp điệu editorial đầy tự tin, mang cảm giác như tường bảo tàng hơn là một SaaS dashboard. Các bề mặt gần như không thể phân biệt: page canvas, elevated cards (#151515), và deep overlays (#1e1e1e) tạo thành một hệ thống phân cấp gần như vô hình, để hình ảnh và chữ dẫn dắt trải nghiệm. Điểm nhấn violet duy nhất trên primary CTA là tiếng ồn thị giác duy nhất mà hệ thống cho phép — mọi thứ còn lại là chữ trắng trên nền đen, pill-shaped controls, và khoảng thở section 64px rộng rãi. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Indigo | `#1500ff` | `--color-electric-indigo` | Điểm nhấn violet 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 primary CTA | | Obsidian | `#050505` | `--color-obsidian` | Page canvas, nền sâu nhất — khoảng không mà mọi nội dung đặt trên đó | | Charcoal | `#151515` | `--color-charcoal` | Elevated surface, khung xem trước sản phẩm, panel phụ | | Graphite | `#1e1e1e` | `--color-graphite` | Deep overlay surface, hover state trên dark cards, input fields |

# N8n — Style Reference > Workflow engine at midnight — the feeling of a live automation canvas running in a dark server room, lit by status indicators and data flows. **Theme:** dark n8n is a dark workflow canvas that feels like staring into a running machine at night — deep purple-black surfaces lit from within by orange fire and electric blue current. The #0e0918 base is nearly black but carries a violet undertone that makes the darkness feel technological rather than neutral. The signature visual move is the orange-to-red gradient CTA against this void: rgb(253,137,37) → rgb(255,12,0) at 30deg creates an ember glow that reads as kinetic energy. Typography runs entirely in geomanist at weights 300 and 400 — the light weight at 54px headline sizes feels deliberately restrained, letting the lightning bolt hero illustration do the shouting. Cards are not floating objects but embedded panels, using inset white-10% borders and faint orange inset bottom-glows (rgba(255,142,93,0.3)) that suggest backlit hardware. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Base | `#0e0918` | `--color-void-base` | Primary page background and hero section — the near-black violet creates depth without being neutral charcoal | | Elevated Surface | `#1a1624` | `--color-elevated-surface` | Card backgrounds (rgb(26,22,36)) — one step above void, visible as panels | | Deep Panel | `#1b1728` | `--color-deep-panel` | Secondary card surface (rgb(27,23,40)) — close to Elevated Surface, used for 24px-radius feature cards | | Muted Shell | `#2c2834` | `--color-muted-shell` | Ghost button backgrounds — semi-transparent frosted layer over dark surfaces |

# Obviously — Style Reference > Claymation vui nhộn trên nền giấy trắng. Zams đặt những sinh vật play-doh hình học thân thiện lên nền trắng sạch, gần như phòng thí nghiệm, để một màu tím rực rỡ duy nhất làm toàn bộ công việc về màu sắc, và một serif ấm áp đảm nhiệm phần ấm áp của typography. **Theme:** light Zams vận hành một hệ thống thị giác song ngữ: một thẩm mỹ doanh nghiệp tối giản nghiêm ngặt, lấy serif làm đầu, kết hợp với dàn nhân vật claymation mũm mĩm, màu kẹo ngọt — chính là hiện thân của các AI worker. Nền trắng là một sân khấu có chủ đích — nó để CTA tím (#7451f2), các pattern chấm chấm tinh tế, và các linh vật pastel gánh vác toàn bộ cá tính thị giác, trong khi phần chrome xung quanh (tab, logo tích hợp, huy hiệu tuân thủ) vẫn lặng lẽ hoạt động. Headline dùng serif ấm (Lustria) với negative tracking dày, body và UI chạy trên DM Sans, và các label như "COMING SOON", "EVAN", "YOUR NEXT HIRE" chuyển sang Martian Mono để tạo giọng kỹ thuật, gần như nhật ký build cho từng section. Các component có góc vuông: 4px corners, hairline borders, một button shadow nhẹ, và không có gradient trang trí. Tổng thể mang giọng doanh nghiệp đáng tin cậy nhưng không khô khan — các linh vật phá vỡ sự căng thẳng, và các meta-label monospace báo hiệu "sản phẩm này được kỹ thuật hóa, không phải lắp ráp." ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Iris Violet | `#7451f2` | `--color-iris-violet` | Nút CTA filled chính, active tab indicator, điểm nhấn màu duy nhất trong toàn bộ hệ thống. Một màu tím rực rỡ trên nền gần như không màu tạo sự hiện diện thương hiệu mà không gây nhiễu màu | | Deep Iris | `#5952a1` | `--color-deep-iris` | Viền action outlined/ghost, tím phụ cho secondary buttons và stroke accents. Tông tối hơn của primary — giữ nguyên hệ thương hiệu khi cần bề mặt nhẹ hơn | | Cobalt Info | `#0072c6` | `--color-cobalt-info` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. Không nâng lên làm màu CTA chính | | Powder Blue | `#d6e5ff` | `--color-powder-blue` | Form states trung tính, badge text, và UI feedback nhẹ nhàng khi màu cần giữ ở mức khiêm tốn. |

# Geniestudio — Style Reference > bầu trời pastel vui tươi với doodle bay lượn **Theme:** light Geniestudio nói ngôn ngữ thị giác của một canvas thiết kế hiện đại: không gian làm việc xanh pastel thoáng đãng, nơi các nhân vật minh họa tinh nghịch trôi nổi trên khoảng trống rộng rãi. Hệ thống kết hợp một CTA gần-đen (#181d27) duy nhất trên nền canvas xanh nhạt (#ebf5ff) với bộ bốn điểm nhấn minh họa bão hòa — xanh hoa ngô, cam, tím, vàng mù tạt — mang lại hơi ấm mà không cạnh tranh với UI. Typography có chừng mực và hình học: Aeonik weight 500 dẫn dắt headline với tracking -0.02em chặt chẽ, trong khi Geist 500/600 xử lý mọi thứ từ caption 10px đến label nút bấm. Bề mặt phẳng, viền mảnh, bo góc rộng (32px là mặc định), và shadow là lớp rửa xanh nhạt gần như vô hình thay vì đổ bóng tối. Kết quả là một công cụ mang cảm giác sáng tạo, dễ tiếp cận và tự tin nhẹ nhàng — màu sắc dành cho kể chuyện, không phải chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sky Wash | `#ebf5ff` | `--color-sky-wash` | Canvas trang — xanh nhạt tạo không khí thoáng đãng thay vì trắng tinh, mang đến nền có chiều sâu nhẹ nhàng | | Paper White | `#fafdff` | `--color-paper-white` | Bề mặt card và elevated surface — mát hơn trắng tinh một chút, giúp bề mặt không bị lạnh lẽo trên nền sky canvas | | Cloud Veil | `#f6f7f8` | `--color-cloud-veil` | Bề mặt phụ nhẹ và fill wash cho các UI element mờ cần sự tách biệt mà không cần độ tương phản | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card lồng nhau, icon fills và button text — điểm sáng nhất trong hệ thống |

# FLORA — Style Reference > Black velvet gallery — pure dark canvas, vivid images as the only color **Theme:** dark FLORA is a black-velvet gallery for AI-generated imagery: a pure #000000 canvas where the only color comes from the images themselves. The interface is austere and editorial — no chromatic brand accent, no decorative gradients, no icon color. Geist carries every functional surface with quiet efficiency while Redaction 10 and Redaction 50 Italic lend expressive typographic weight to the few moments that need to feel curated (the hero question, the section openers). Components float on #191919 cards with hairline #b4b4b4 borders and 24px radii, looking more like matted photographs than software panels. The entire system is designed to disappear so that the generated visual output — the actual product — becomes the only vivid thing on screen. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, primary borders, image frame edges | | Carbon | `#191919` | `--color-carbon` | Card surfaces, elevated panels, input fields — one step above the canvas | | Graphite | `#303030` | `--color-graphite` | Deeper elevated surfaces, input interiors, subtle panel separation | | Slate | `#606060` | `--color-slate` | Muted headings, secondary borders, subdued labels |

# Caserne — Style Reference > black gallery wall with white type whispers **Theme:** dark Caserne hoạt động như một portfolio đẳng cấp gallery: một canvas gần như đen tuyền, nơi ảnh editorial cỡ lớn đảm nhận vai trò chính, còn giao diện tự lùi về những đường viền mảnh như sợi tóc và kiểu chữ siêu mỏng. Ngôn ngữ thị giác mang sự kiềm chế của gallery — màu đen thật chiếm ưu thế, chữ đặt ở 13–14px trong custom ABC Oracle, và chuyển động duy nhất là scroll trang để lộ ra những ảnh dự án đồ sộ. Mọi UI element đều phải xứng đáng với vị trí của nó: không có navigation chrome, không button fill, không gradient trang trí — chỉ có text, image và một đường 1px. Dấu « » guillemet đặt trước nhãn dự án là một signature editorial kiểu Pháp-Canada, gợi về nguồn gốc Montreal của studio và neo thương hiệu vào một cảm quan curatorial, gần như typographic. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang, nền section full-bleed, hero containers | | Paper | `#ffffff` | `--color-paper` | Text chính, nhãn dự án, link navigation, icon strokes trên nền tối | | Frost | `#f2f2f2` | `--color-frost` | Viền mảnh (hairline borders), đường viền ảnh, grid dividers, nav separators — toàn bộ đường nét cấu trúc của giao diện | | Smoke | `#858484` | `--color-smoke` | Text phụ tắt tiếng, mô tả dự án, chú thích metadata |

# ToDesktop — Style Reference > Cosmic command deck transitioning into a bright spec sheet. Dark gradient hero with a single electric blue accent button; below, a calm, light, hairline-bordered document surface with pill navigation and floating product mockups. **Theme:** mixed ToDesktop operates as a dual-environment system: a deep space-grade dark hero with gradient atmosphere that transitions into a bright, document-like feature surface. The dark zone uses a sweeping white-to-near-black gradient to position the product against a cosmic backdrop, while the light zone feels like a clean product spec sheet. The single saturated #0036ff blue/violet is the only chromatic moment — used exclusively on primary action buttons — making every CTA feel like switching on a spotlight. Components are flat and confident: pill navigation, hairline 1px borders, generous 14-24px card radii, and almost no elevation shadow. The type system pairs Aeonik Pro's geometric character at display sizes with Inter's neutrality for UI, while Geist Mono marks developer-facing elements. The overall attitude is premium developer tool — the visual language of a tool that respects your attention. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Iris | `#0036ff` | `--color-electric-iris` | Primary CTA fill, active nav indicators — the only saturated hue on the entire page, it functions as a switch-on moment against an otherwise achromatic or deep-blue canvas | | Signal Cyan | `#0093ff` | `--color-signal-cyan` | Blue state accent for badges, validation surfaces, and short status labels. Do not promote it to the primary CTA color | | Deep Void | `#05061b` | `--color-deep-void` | Card surface within dark sections, box-shadow tone on dark cards — near-black with a violet undertone matching the hero gradient | | Ink Black | `#141414` | `--color-ink-black` | Primary heading and body text on light surfaces, dark button labels |

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

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

# Seline Analytics — Style Reference > Đài quan sát dữ liệu ngập nắng trên nền giấy ấm — một canvas màu kem nơi chỉ một tín hiệu xanh duy nhất được phép lên tiếng. **Theme:** light Seline sử dụng ngôn ngữ không gian làm việc dữ liệu tràn ngập ánh sáng: một canvas màu kem ấm (#fafaf9) mang một tín hiệu xanh lam sống động duy nhất trên nền giao diện hoàn toàn trung tính, tạo nên một đài quan sát tĩnh lặng nơi một màu sắc luôn mang ý nghĩa "dữ liệu trực tiếp, nhấp vào đây, có sự kiện xảy ra". Bảng màu được cố tình giữ 96% thang xám ấm — giọng màu duy nhất là xanh da trời (#3ba6f1) đảm nhận vai trò cột biểu đồ, nền CTA, đường viền icon, link, và highlight nội tuyến, tất cả đều cùng một sắc độ. Typography kết hợp Inter (body và UI) với Roobert (display và heading lớn) — cả hai đều thuộc dòng geometric humanist, với display weight được kéo chặt ở negative tracking để headline đọc như những tuyên bố gọn gàng, tự tin thay vì copy SaaS mềm mại. Các component cực kỳ nhẹ: pill buttons với border-radius 9999px, đường viền đá mỏng 1px, và shadow chỉ dùng duy nhất cho thẻ preview sản phẩm — không dùng ở đâu khác; trang nằm trên bề mặt như tài liệu in trên giấy, không phải dashboard glassmorphic. Các chú thích viết tay và một cutout ảnh lặp lại mang đến cho hệ thống chất liệu tự nhận thức kiểu "chúng tôi tự xây cho mình", nhưng ngữ pháp cốt lõi vẫn kỷ luật: xám ấm, một màu xanh, một thẻ trắng, một công thức shadow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Signal Blue | `#3ba6f1` | `--color-signal-blue` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung. | | Highlight Wash | `#c1e1f7` | `--color-highlight-wash` | Lớp phủ xám nhạt cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. Không nâng cấp lên màu CTA chính. | | Canvas Cream | `#fafaf9` | `--color-canvas-cream` | Nền trang, body của tài liệu — màu trắng kem ấm stone-50 giúp hệ thống không bị cảm giác lâm sàng. | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ, panel nâng cao, chữ trên nền tối, nền preview dashboard. |

# Home — Style Reference > Botanical specimen on vellum — an oxblood-stamped plate of golden fat, edges sharp, paper warm, nothing rounded. **Theme:** light Savor uses a warm editorial-ingredient-archive language: cream-paper canvases, full-bleed macro photographs of fats and oils as the dominant visual, and a single deep oxblood accent that replaces shadows with hairline 1px borders. Typography carries a deliberate weight contrast — Roslindale Display Condensed whispers at weight 300 across 120–140px display lines, while Suisse Intl handles body, nav, and UI chrome at 400/700. Components stay thin and outlined rather than filled: a uniform 5px corner radius across buttons, cards, and badges, generous warm-cream negative space, and a palette of essentially three tones — cream, oxblood, and ink. The site reads less like a product page and more like a botanical plate or a science monograph photographed in late-afternoon light. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vellum Cream | `#fff9eb` | `--color-vellum-cream` | Page canvas, card surfaces, text on dark — the dominant warm-paper background that sets the entire temperature of the interface | | Linen | `#f0e7d7` | `--color-linen` | Secondary surface for elevated cards, button fills, and body borders — slightly warmer and denser than vellum, creates a cream-on-cream layering without leaving the neutral family | | Buttered Gold | `#f8e47d` | `--color-buttered-gold` | Accent wash for highlights, badge fills, and tonal surface variation — a saturated warm gold used sparingly to suggest the ingredient palette without competing with photography | | Ink | `#000000` | `--color-ink` | Primary text, logo mark, and high-contrast accents — appears in nav fills and select UI chrome where absolute blackness is needed |

# Equals — Style Reference > Broadsheet gặp spreadsheet — serif mang hơi hướng tòa soạn trên nền kem ấm, điểm xuyết những ô dữ liệu pastel lơ lửng. **Theme:** light Equals mang cảm giác như một tờ báo broadsheet biết thở — headline serif uy quyền cỡ 110px đặt trên nền kem ấm (#FAF9F5), trong khi những mảng màu pastel vui tươi trôi nổi lỏng lẻo phía sau như các ô spreadsheet đang tan rã. Sự căng thẳng giữa trọng lượng editorial của Serrif Condensed và độ chính xác UI chặt chẽ của Unica77 tạo ra hai tầng âm vực: công cụ dữ liệu nghiêm túc và sản phẩm dễ tiếp cận. Màu vàng (#FFCC00) chỉ xuất hiện trên thanh thông báo trên cùng, màu tím orchid (#B074CE) chỉ xuất hiện trên nút CTA — hai màu nhấn không bao giờ cạnh tranh vì không bao giờ chung một khu vực. Các đường kẻ ngang mảnh phân chia section thay vì đệm whitespace, lấy cảm hứng từ đường kẻ lưới của spreadsheet như một ẩn dụ cấu trúc xuyên suốt trang. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Analyst Yellow | `#FFCC00` | `--color-analyst-yellow` | Chỉ dùng làm nền thanh thông báo — vàng bão hòa trên chữ gần đen tạo cảm giác khẩn cấp tối đa trên diện tích tối thiểu, không dùng ở nơi khác để giữ nguyên tín hiệu cảnh báo | | Orchid CTA | `#B074CE` | `--color-orchid-cta` | Nút CTA chính — tím ấm trên nền kem tạo cảm giác mời gọi thay vì khẩn cấp, phân biệt CTA với màu đỏ/cam thường thấy của SaaS | | Brand Green | `#20A277` | `--color-brand-green` | Mảng màu nhấn cho danh mục Finance — một trong ba khối chỉ báo theo vai trò (RevOps đỏ, Founders xanh navy, Finance xanh lá) nằm cạnh các dòng solution | | Glacier | `#2DCBDC` | `--color-glacier` | Khối màu trang trí nền trong hero, thuộc ngôn ngữ hình ảnh ô spreadsheet pastel nổi |

# Ventriloc — Style Reference > analytics console on parchment **Theme:** light Ventriloc speaks in a quiet, professional whisper against an off-white canvas — a workspace where data feels approachable rather than intimidating. The interface is built on tight geometric type (PolySans) paired with Inter for UI, an almost-monochrome neutral palette, and a single warm orange (#ff682c) that punctuates charts, icons, and logo marks with restrained energy. Surfaces are flat and lightly tinted (white cards on warm-gray canvas), corners are soft (8px cards, pill-shaped controls), and elevation comes from gentle background shifts rather than shadows. Buttons are pill-shaped, nav is a floating rounded capsule, and dashboard mockups are presented as pristine white cards — the whole experience reads as analytical, airy, and deliberately unfussy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Orange | `#ff682c` | `--color-signal-orange` | Brand accent — chart fills, logo swoosh, active indicators, small highlights; the single chromatic spark across an otherwise monochrome system | | Sienna Bronze | `#816729` | `--color-sienna-bronze` | Muted brand tone — icon strokes, decorative chart elements, secondary brand marks where a subtler warmth is needed than Signal Orange | | Carbon | `#202020` | `--color-carbon` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Graphite | `#4d4d4d` | `--color-graphite` | Secondary text, body emphasis, subdued borders |

# Airbnb — Style Reference > Ảnh kỳ nghỉ ghim trên bảng liệu trắng — ảnh sáng được đặt trong khung bo tròn trên nền gần trắng, với một chiếc ghim màu san hô duy nhất giữ mọi thứ lại với nhau. **Theme:** light Giao diện của Airbnb là một marketplace ấm áp, thoáng đãng được xây dựng trên nền gần trắng và một điểm nhấn thương hiệu màu đỏ san hô duy nhất. Canvas #f7f7f7 với bề mặt card #ffffff tạo ra chiều sâu rất nhẹ — giấy xếp chồng lên giấy — nơi nhiếp ảnh đảm nhận toàn bộ trọng lượng thị giác. Font biến thiên tùy chỉnh Airbnb Cereal VF chạy ở các weight 400–700 trên một thang đo chặt chẽ, nhỏ gọn với letter-spacing âm ở kích thước lớn, mang lại cho UI sự tự tin nhẹ nhàng mà không cần yếu tố trang trí. Màu đỏ san hô #ff385c duy nhất xuất hiện tại các điểm chạm thương hiệu (logo, trạng thái active, nút tìm kiếm), khiến nó giống như một chữ ký hơn là một màu hệ thống. Ảnh card tràn cạnh (edge-to-edge) với góc bo 20px — bán kính bo tròn duy nhất hào phóng trong một layout thông tin dày đặc, nhỏ gọn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Rausch Coral | `#ff385c` | `--color-rausch-coral` | Tô màu logo brand, gạch chân nav active, nền icon nút tìm kiếm, trạng thái active của carousel dot — chữ ký màu sắc duy nhất giúp nhận diện giao diện | | Rausch Deep | `#e00b41` | `--color-rausch-deep` | Làm tối màu Rausch Coral ở trạng thái hover trên các phần tử brand tương tác | | Carbon | `#222222` | `--color-carbon` | Văn bản chính, heading, border, icon stroke — màu trung tính chủ đạo cho hầu hết nội dung typographic | | Slate | `#6a6a6a` | `--color-slate` | Văn bản phụ (metadata, subtext, nhãn phụ), icon fill phụ |

# Kobu — Style Reference > Travel gazette đơn sắc trên nền giấy ấm **Theme:** light Kobu hoạt động như một editorial travel portfolio: nền cream ấm áp, gần như không có tạp âm màu sắc, và nhiếp ảnh là yếu tố màu duy nhất. Wordmark display khổng lồ KOBU trải dài gần như edge-to-edge — chính tên thương hiệu là tuyên bố thị giác, không phải một logo mark. Mọi thứ khác đều lùi lại: Gill Sans nhân văn tạo giọng văn văn chương, mang phong cách guidebook, trong khi Fira Mono xử lý các label uppercase nhỏ đọc như thẻ bảo tàng in ấn. Cards nằm sát mép trang với hairline borders, không shadow, không fill, và badges bo tròn 5px nổi ở góc trên bên trái mỗi bức ảnh. Hệ thống có chủ đích tối giản — không CTA, không accent color, không gradient — để kiến trúc và cảnh quan trong ảnh trở thành yếu tố biểu cảm duy nhất trên màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#242429` | `--color-obsidian` | Primary text, icon strokes, hairline borders toàn hệ thống — màu tối chủ lực thay thế pure black để đọc ấm hơn một chút | | Parchment | `#f9f5f2` | `--color-parchment` | Page canvas, hero và footer backgrounds — off-white ấm báo hiệu giấy editorial thay vì digital mặc định | | Gallery White | `#ffffff` | `--color-gallery-white` | Card surfaces, image borders, badge backgrounds — màu trung tính sáng hơn dùng để nâng nội dung khỏi nền parchment | | Ink Black | `#000000` | `--color-ink-black` | Headings, navigation borders, và các khoảnh khắc typographic tương phản cao cần độ đậm tối đa |

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

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

# Hume AI — Style Reference > Scientific pastel instrument panel. A calm white laboratory where near-black typography measures soft watercolor data washes. **Theme:** light Hume AI reads as a scientific pastel instrument panel: a near-white laboratory canvas where the only hard mark is a near-black #222222, and color enters as soft watercolor washes — rose, lavender, peach, mint, sky — that visualize data rather than decorate it. The headline typographic move is tight, low-contrast Fellix at 36–48px with negative tracking, set in a weight that whispers rather than shouts, framing emotional intelligence as measured restraint. Components are pill-shaped or softly rounded (8/12/16/24px radii), borders are invisible or hairline, shadows are absent — surfaces separate by hue and whitespace, not elevation. Monospace PP Fraktion Mono appears as the 'lab label' voice: uppercase column headers, tag chips, and data annotations carry a positive +0.025em tracking that contrasts the display sans's tight -0.025em. The overall rhythm is centered, generous, and editorial — sections breathe with 48–64px gaps, content never crowds, and the only saturated accent (#c094e4 violet) lives inside data bars and brand moments, never on chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#222222` | `--color-ink` | Primary text, filled buttons, nav strokes, icon fills — near-black rather than pure black to soften the interface | | Paper | `#ffffff` | `--color-paper` | Base canvas, card surfaces, button text on dark fills | | Bone | `#fff9f3` | `--color-bone` | Warm off-white secondary surface, subtle background tints behind sections | | Smoke | `#7a7876` | `--color-smoke` | Muted helper text, secondary button text, disabled labels |

# Fonts In Use — Style Reference > White gallery wall for letterforms **Theme:** light Fonts In Use operates as a typographic museum: an editorial archive where the interface is deliberately invisible so the letterforms being catalogued can speak. Every surface is white or near-white, every stroke is black, and the only typographic personality comes from the custom BentonSansRE UI sans and RelayCond display — never from decoration. The 5-column thumbnail grid functions as the page's primary content unit, each card pairing a photographic evidence image with a live sample of the typeface it documents (Baste, Proxima Nova, Zilla Slab…). Density is compact and newspaper-like rather than spacious-SaaS: tight vertical rhythm, 5px gaps, hairline 2px radii on controls, no shadows, no gradients, no accent color. The whole system reads as a printed specimen sheet rendered for the screen — restrained, factual, anti-decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all borders, logo wordmark, nav links, search input border — the sole ink color in the entire system | | Paper | `#ffffff` | `--color-paper` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Bone | `#f0f0f0` | `--color-bone` | Alternate row striping, search input fill, subtle list separators — a barely-there warm gray for differentiation | | Mist | `#dddddd` | `--color-mist` | Input borders, subtle dividers — the lightest functional border tone |

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

# Sauce Labs — Style Reference > Neon-lit command center on obsidian glass — a dark engineering console where a single green pulse marks every live signal. **Theme:** dark Sauce Labs operates as a neon-lit engineering console: deep obsidian canvas (#132322) with white precision typography and a single vivid green (#3ddc91) that activates every interactive surface. The system alternates between dark structural bands and light content cards (#edf7f5), creating rhythm through luminance contrast rather than ornament or elevation. Components are confident and generously rounded — 56px pill buttons, 20px card radii, minimal shadow — reading as high-end developer tooling where the product's intelligence is the visual subject. The green accent is rationed: it appears on primary actions, active tab states, announcement bars, and stat highlights, never as decoration, which gives it real semantic weight. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Shell | `#132322` | `--color-obsidian-shell` | Primary page background, dark navigation, dark card surfaces — the structural canvas that absorbs everything else and makes the green accent feel electric by contrast | | Pure White | `#ffffff` | `--color-pure-white` | Primary text on dark surfaces, card content backgrounds, light section canvases — maximum contrast against the obsidian shell | | Mint Frost | `#edf7f5` | `--color-mint-frost` | Light content card surfaces, elevated feature panels — the bright counterpoint that breaks up dark sections and hosts detailed content | | Deep Abyss | `#0e1a19` | `--color-deep-abyss` | Darker surface variant for nested elements, deep card backgrounds, gradient endpoints — pushes further into the void when extra depth is needed |