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

# HBO Max — Style Reference > Cinema lobby at midnight. Pure black walls, one cool blue exit sign, and movie posters glowing from every surface. **Theme:** dark HBO Max is a cinema-dark streaming interface: deep black canvas, content poster art as the primary visual unit, and a single steel-blue accent that powers every interactive element. The design is deliberately sparse — white text floats on black, pricing cards flip the polarity to white-on-light to signal commerce zones, and typography does the heavy lifting through size and spacing rather than color. Components stay flat and minimal: 8px-radius buttons, hairline borders, no shadows, no gradients. The custom Max Sans typeface carries a slight positive letter-spacing on small labels, giving even utility text a cinematic, editorial quality. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page background, hero canvas, navigation surface — the default darkness that lets poster art and white text feel illuminated | | Smoke | `#050409` | `--color-smoke` | Near-black secondary surface, subtle elevation layer above pure black for section separation | | Ash Mist | `#b8b6bb` | `--color-ash-mist` | Muted helper text, secondary body copy, disabled icon strokes — readable but recedes | | Iron Veil | `#89868e` | `--color-iron-veil` | Tertiary text, inactive border outlines on controls |

# Foundry — Style Reference > thánh đường chữ cam rực — một căn phòng đen nơi những ký tự khổng lồ được chiếu sáng treo như tác phẩm triển lãm, và những thanh dẫn đường duy nhất là viền wireframe nhạt cùng một màu đánh dấu neon. **Theme:** dark Foundry là một xưởng đúc chữ (type foundry) được trình bày như một bàn làm việc tối, nơi sản phẩm cũng chính là giao diện. Canvas gần như đen (#121212) làm nền cho UI chrome góc vuông được xây dựng gần như hoàn toàn từ monospaced text và hairline borders, mang lại cho toàn bộ website cảm giác như terminal của developer kết hợp với tường gallery. Giọng màu duy nhất là cam rực (#ff4d00) — được dùng làm điểm nhấn cấu trúc trên logo, đường viền action có outline, và highlight chọn lọc — không bao giờ dùng làm nền button đặc, giữ cho điểm nhấn mang cảm giác như đèn cảnh báo hoặc nét bút marker, chứ không phải một lớp sơn thương hiệu. Mọi màn hình đều là một specimen: các display face khổng lồ (90–234px) chiếm ưu thế trong viewport, UI lùi lại xung quanh chúng, và ngay cả sidebar items cũng được tạo kiểu như các tag có nhãn. Khoảng cách dày đặc (compact spacing), bán kính gần như bằng không (2.8px), và metadata monospace viết hoa củng cố một cảm giác chính xác, công nghiệp, không trang trí — trang trí hoàn toàn sống bên trong chính các typeface. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Orange | `#ff4d00` | `--color-ember-orange` | Điểm nhấn cam cho đường viền action có outline, linked labels, và emphasis tương tác nhẹ. Không nâng cấp nó thành màu CTA chính | | Foundry Black | `#121212` | `--color-foundry-black` | Nền trang, canvas section, bề mặt chính — nền tối chủ đạo giúp chữ trắng và điểm nhấn cam trông phát sáng | | Chalk White | `#e2e8f0` | `--color-chalk-white` | Hairline borders, nav rules, link underlines, tag outlines — màu wireframe xây dựng toàn bộ khung UI | | Bone White | `#efefef` | `--color-bone-white` | Văn bản body và UI chính, icon strokes, button text, secondary surface fills — màu chữ có thể đọc được và màu nền đảo ngược dùng cho các control được nhấn mạnh |

# Marco — Style Reference > Moleskine notebook trong ánh sáng ban mai mát dịu — một không gian làm việc cá nhân nơi các widget trôi nổi như sticky notes trên tờ giấy ấm. **Theme:** light Trang web của Marco mang phong cách một không gian làm việc cá nhân được bày trên tờ giấy mát: nền gần trắng, các card mềm mại như đồ nội thất, và chữ dày đặc nhưng thoáng khí, gợi cảm giác như một cuốn Moleskine mở ra dưới ánh sáng ban mai. Bố cục là một grid hai cột có kỷ luật — một bản tuyên ngôn dài ở cột trái, một chồng widget nhúng, ảnh chụp màn hình app, và avatar card ở cột phải — tất cả được kết nối bởi góc bo tròn rộng rãi và bóng đổ cực nhẹ. Màu sắc được phân bổ tiết kiệm: 99% trang là trung tính, chỉ có violet và hồng san hô xuất hiện như những dấu chấm câu chức năng nhỏ cho active links, chấm trạng thái 'Work', và một card gradient ấm. Typography là giọng nói chính — ba font geometric sans-serif tùy chỉnh (Maison Neue, Graphik, Neue Montreal) được xếp lớp với các điều chỉnh tracking tinh tế, rộng trên micro-labels và thắt chặt trên display sizes lớn hơn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Iris Glow | `#6366f1` | `--color-iris-glow` | Điểm nhấn violet cho đường viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. | | Signal Blue | `#1685c7` | `--color-signal-blue` | Điểm nhấn xanh dương cho đường viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. Không nâng lên thành màu CTA chính. | | Ember Red | `#e92f48` | `--color-ember-red` | Lớp phủ đỏ cho highlight backgrounds, decorative bands, và điểm nhấn mềm phía sau nội dung. | | Coral Pulse | `linear-gradient(16deg, rgb(255, 77, 121), rgb(255, 128, 64) 85%)` | `--color-coral-pulse` | Gradient start và điểm nhấn phụ — dùng tiết kiệm trên warm cards và lớp phủ hồng-cam. |

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

# Miti Navi — Style Reference > Tuscan sea-view chapbook on raw linen **Theme:** light Miti Navi vận hành như một editorial canvas ấm áp, tông giấy — hãy tưởng tượng một tạp chí du thuyền hạng sang được in trên giấy kraft chưa tẩy trắng. Toàn bộ giao diện được xây dựng trên nền cát-be (#e6dece) với typography đen mực đậm, mang lại cảm giác thủ công, như in tay. Kiểu chữ monospaced (GT Pressura Mono) đảm nhận toàn bộ UI chức năng — nav, button, body — tạo độ chính xác kỹ thuật tương phản với serif lãng mạn, uốn lượn (Voyage) dành riêng cho các dòng display editorial. Một đường gạch chân màu peach ấm duy nhất (#ffdead) là điểm nhấn màu sắc duy nhất, được dùng rất tiết chế để đánh dấu các tương tác. Ảnh hero được che bởi một vòm cong ấn tượng, navigation chia thành ba cụm cân bằng quanh wordmark ở giữa, và một vertical sticky side tab nằm ở cạnh phải với chữ xoay — tất cả đều gợi một cuốn sách nghệ thuật hơn là một trang sản phẩm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Linen | `#e6dece` | `--color-linen` | Canvas trang, bề mặt card, nền section — nền giấy chưa tẩy trắng ấm áp chứa toàn bộ nội dung | | Deep Ink | `#000e13` | `--color-deep-ink` | Text chính, navigation, border cấu trúc, logo lockup — gần như đen với một chút undertone lạnh rất nhẹ | | Carbon | `#232323` | `--color-carbon` | Body text, icon strokes, secondary heading, hairline rules, card borders — màu tối đa năng cho các UI element dày đặc | | Soft Ash | `#999999` | `--color-soft-ash` | Helper text mờ, nav items không active, divider nhẹ, secondary metadata |

# Vivid+Co — Style Reference > darkroom editorial spread **Theme:** dark Vivid+Co operates as a dark-canvas editorial stage where the entire interface is a single moody slate field and typography is the only subject. Massive Neue Montreal headlines at 105–136px sit directly on the dark background with no card containers, no grid scaffolding, and almost no color — the page reads like a typography magazine spread. The lone chromatic accent is a muted blue-gray (#6f879c) that appears only as hairline borders, ghost button outlines, and subtle icon strokes; warmth comes from an off-white #fffdf9 rather than from any hue. 3D glass-prism motifs float behind the text, adding depth and refraction light-play without introducing surface clutter. Components are intentionally absent in the traditional sense — sections are full-bleed type compositions, nav is a floating minimal bar, and the lone interactive shape is the rectangular outlined button. The system rewards restraint: a new page should feel like it was set on a darkroom table, not built in a component library. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffdf9` | `--color-bone-white` | Primary text, headlines, nav links, all foreground typography. The warm off-white (not pure white) is the single most-used color in the system and gives the dark canvas a paper-print feel rather than a screen-glow feel | | Slate Veil | `#495764` | `--color-slate-veil` | Dominant page background and the base canvas. This desaturated dark blue-slate is the entire stage — every section sits on it directly with no card or panel treatment | | Carbon | `#101010` | `--color-carbon` | Deeper accent within dark passages, occasional icon fills, and decorative surface variation. A step darker than Slate Veil for moments that need recess rather than flat canvas | | Obsidian | `#000000` | `--color-obsidian` | Pure black used sparingly for 3D-rendered glass prism fills and icon glyphs. Anchors decorative elements against the Slate Veil canvas |

# Inthememory — Style Reference > Bản thiết kế kiến trúc trên nền đá cẩm thạch trắng với một tia lửa ấm duy nhất. Một phòng dữ liệu editorial yên tĩnh, nơi mực xanh teal đậm và các điều khiển hình pill lơ lửng trên bề mặt trắng như phấn, chỉ bị phá vỡ bởi một tia cam duy nhất. **Theme:** light Inthememory mang đến một bề mặt editorial kết hợp sản phẩm sắc nét: canvas trắng, typography xanh teal mực đậm, và các dấu chấm câu màu cam ấm dè dặt cho những khoảnh khắc năng lượng. Cards nằm trên nền xám nhạt thoáng đãng (#f1f7f9) với viền siêu mảnh (hairline borders), trong khi các điều khiển hình pill (radius 100px) và isometric line illustrations mang đến cho hệ thống cảm giác xúc giác, gần như văn phòng phẩm ấm áp. Màu sắc mang tính chức năng và hiếm khi xuất hiện — màu xanh điện (#0c67ff) được dành riêng cho announcement bars và focus states, màu cam (#fa4e1d) cho hero iconography và thỉnh thoảng cho nền card, và toàn bộ chrome giữ đơn sắc để dữ liệu và nội dung dẫn dắt. Typography là Graphik tùy chỉnh ở hai weight duy nhất, tạo ra một hệ thống hai giọng nói có kỷ luật, nơi weight 500 đảm nhận sự nhấn mạnh và weight 400 mang mọi thứ còn lại. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Teal | `#102126` | `--color-ink-teal` | Văn bản chính, đường viền, nút đã điền, iconography — xương sống cấu trúc của hệ thống. Màu teal gần đen này mang vẻ uy quyền mà không gay gắt như đen tuyền | | Slate Veil | `#3d5761` | `--color-slate-veil` | Văn bản phụ, đường viền tinh tế — cầu nối giữa body copy và UI chrome tĩnh lặng mà không cạnh tranh với mực chính | | Fog Gray | `#677b82` | `--color-fog-gray` | Văn bản cấp ba, trạng thái disabled, nhãn ít nhấn mạnh — màu trung tính yên tĩnh nhất vẫn duy trì khả năng đọc trên nền trắng | | Chalk White | `#ffffff` | `--color-chalk-white` | Canvas trang, bề mặt card, văn bản nút trên nền tối — bề mặt chủ đạo để mực tối và màu nhấn mang trọng lượng thị giác |

# Enter GmbH — Style Reference > Bauhaus poster workshop, midday sun **Theme:** mixed Enter GmbH reads like a Bauhaus-influenced IT services brochure printed on warm stock: bold full-bleed color panels (seafoam, cream, signal orange) stack like poster sheets, and a monospaced face (Maax Mono) carries nearly every word, giving the whole site the cadence of a technical readout rather than a marketing page. The visual rhythm is theatrical — each horizontal band changes color and mood, with no soft transitions, just hard seams between cream, teal, white, and orange. A single abstract geometric illustration of stacked blocks on poles lives in the hero, and every interactive control is a dark pill on a colored ground. Neutrality is the default (black on white for text, #282828 for filled buttons), with orange and teal used as architectural surfaces rather than accents — they ARE the layout, not decoration on it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Orange | `#ff5000` | `--color-signal-orange` | Full-bleed section surfaces, geometric illustration caps, partner section canvas — carries warmth and authority across an otherwise achromatic text system | | Seafoam Panel | `#a5d3d4` | `--color-seafoam-panel` | Hero canvas and alternating section ground — a cool counterweight to the warm orange, used as full-bleed background, never as a text highlight | | Cream Stock | `#f9f8ea` | `--color-cream-stock` | Soft band surfaces between content sections — a paper-like off-white warmer than pure #ffffff, signals a transition zone | | Charcoal | `#282828` | `--color-charcoal` | Filled button background, dark illustration blocks, heading accents — the loaded weight of the palette, softer than pure black |

# Runway — Style Reference > Sổ cái giấy kraft dưới đèn bàn hổ phách. Mỗi màn hình phải mang cảm giác như mở một cuốn sổ tài chính được sắp xếp gọn gàng: giấy kem, mực espresso, một màu nhấn ấm, không có bề mặt kỹ thuật số lạnh lẽo. **Theme:** light Runway tạo ra một không gian làm việc tài chính ấm áp như giấy: canvas kem (#f8f7f5) làm nền cho các bề mặt card trắng, divider linen ấm (#e3dfd5), và text espresso đậm (#261b07) trông như được in chứ không phải render. Một điểm nhấn amber duy nhất (#f9a600) là tín hiệu màu sắc duy nhất trong giao diện — nó đánh dấu hành động chính và không bao giờ dùng để trang trí, mang lại cho CTA trọng lượng như bút highlight trên trang sổ cái. Typography chặt chẽ và hơi humanist nhờ font custom Interphases Pro Variable với các weight không chuẩn (492, 584), tạo ra mật độ tự tin, đọc như một tài liệu kinh doanh được dàn trang đẹp. Shadow có màu nâu ấm, không phải xám lạnh, nên ngay cả độ cao cũng giống như các lớp giấy kraft thay vì panel nổi. Toàn bộ hệ thống truyền tải sự ấm áp mang tính phân tích — nghiêm túc về con số, nhưng dịu nhẹ cho mắt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Cream Canvas | `#f8f7f5` | `--color-cream-canvas` | Nền trang, hero wash, shadow card nâng cao — lớp giấy ấm làm nền cho mọi màn hình | | Pure Paper | `#ffffff` | `--color-pure-paper` | Bề mặt card, nền ảnh chụp màn hình sản phẩm, button fill cho ghost variant — lớp sạch trên nền cream | | Linen Border | `#e3dfd5` | `--color-linen-border` | Màu divider chính, border card, separator section — xám ấm phân cách mà không cắt rời | | Stone Mist | `#d5d2cd` | `--color-stone-mist` | Border button nhẹ, divider phụ — nhạt hơn Linen một bậc để phân cách lồng nhau |

# Discover — Style Reference > Type museum trên nền marble trắng — wordmark gần như đen, một thì thầm của san hô, và mọi thứ khác đều lùi về phía sau. **Theme:** light Fonts Ninja là một gallery gần như đơn sắc dành cho letterforms, nơi điểm nhấn màu duy nhất là một tông san hô ấm áp dùng để đánh dấu các hành động. Canvas gần như trắng và luôn giữ yên lặng; type là nhân vật chính, được trình bày ở tỉ lệ cực lớn và kết hợp với khoảng trống rộng rãi. Cards là các panel trắng bo góc mềm nổi trên nền đổ bóng nhẹ, và mọi element tương tác đều phải "kiếm" được màu sắc của nó — hầu hết UI là mực trên giấy, và màu san hô chỉ xuất hiện khi có thứ gì đó muốn được click. Mật độ dày nhưng bố cục vẫn thoáng vì margin lớn và nhịp điệu được đo bằng các bước tăng 10px và 24px thay vì các chồng 4-8px chặt chẽ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#121212` | `--color-ink` | Văn bản chính, border card, icon strokes, divider mảnh. Màu gần đen pha ấm được chọn thay vì #000 để làm mềm độ tương phản trên nền trắng mà không mất đi tính uy quyền | | Canvas | `#ffffff` | `--color-canvas` | Border mảnh, divider, đường viền input, và cạnh card trên nền sáng. Không dùng làm màu CTA chính | | Fog | `#dbdada` | `--color-fog` | Tông đổ bóng xung quanh, nền mờ nhạt, tạo độ nổi bề mặt tinh tế. Mang theo đổ bóng alpha 0.16 giúp nâng card lên khỏi canvas | | Slate | `#8e8e93` | `--color-slate` | Body text phụ, metadata đã giảm độ nổi bật, border nav không active, copy trợ giúp |

# Pentagram — Style Reference > Gallery wall of compressed restraint **Theme:** light Giao diện của Pentagram hoạt động như một catalog gallery được tuyển chọn: pure achromatic canvas, nơi màu sắc duy nhất xuất hiện chính là tác phẩm. Mọi quyết định cấu trúc đều mang tính typographic — không icon, không badge, không filled buttons, không decorative chrome. Trang web xen kẽ giữa các dải trắng và gần đen với chữ in nén (compressed type) cỡ lớn, sau đó trình bày dự án dưới dạng các khối đặc quá khổ trông như swatch màu trước khi hiển thị nội dung thực tế. Navigation là một hàng text links đơn lẻ. Cards không viền hoặc viền siêu mảnh (hairline-bordered). Hệ thống tạo dựng thẩm quyền thông qua sự kiềm chế: cùng tracking chặt chẽ và weight khiêm tốn cho mọi vai trò, để một display heading 52px có cảm giác cân đối như caption text 13px. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, text trên dark bands | | Ink | `#1a1a1a` | `--color-ink` | Primary body text, heading text, hairline borders, link color — gần đen chiếm 90% mọi nét vẽ | | True Black | `#000000` | `--color-true-black` | Solid surface fills cho dark bands, inverted text backgrounds, inverted footer | | Graphite | `#222222` | `--color-graphite` | Elevated dark surface, input field fills trên dark contexts |

# Square — Style Reference > tín hiệu xanh trên thép trắng. **Theme:** mixed Hệ thống thiết kế của Square là một ngôn ngữ fintech tự tin trên nền canvas trắng, để một màu xanh duy nhất làm mọi nhiệm vụ. Giao diện gần như đơn sắc: bề mặt trắng, nền page xám nhẹ, chữ gần đen, và một màu Signal Blue (#006aff) duy nhất tạo điểm nhấn cho CTA, link và form đăng ký. Headline dùng một custom display face hình học ở kích thước gần display (50–86px) với line-height dày và negative tracking, tạo cảm giác uy quyền kiềm chế thay vì la hét. Các component phẳng và tối giản — button filled bo góc 4px, biến thể ghost, feature card nền xanh nhạt với ảnh bo góc 24px, và một dải footer tối màu sắc cạnh (hard-edged) duy nhất đảo ngược bảng màu thành đen với chữ trắng và cùng một màu xanh cho nút gửi. Elevation gần như không tồn tại: shadow 1px 16% đen trên button là độ sâu duy nhất hệ thống cho phép. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Signal Blue | `#006aff` | `--color-signal-blue` | Primary CTA, link text, nav active, nút submit, icon accent — giọng màu duy nhất trong một hệ thống gần như không màu | | Carbon | `#1a1a1a` | `--color-carbon` | Primary text, heading fill, dark icon stroke, nav label — gần đen nhưng đọc nhẹ hơn đen tuyền trên nền trắng | | Slate Gray | `#737373` | `--color-slate-gray` | Secondary text, helper copy, nav muted, placeholder tone | | Platinum | `#d9d9d9` | `--color-platinum` | Hairline border, input outline, divider mờ giữa các section |

# Trigger.dev — Style Reference > Charging terminal on slate. The interface is a dimly lit workstation where one lime LED signals activity against rows of quiet monospaced text and faint violet syntax glow. **Theme:** dark Trigger.dev's visual system is a dark-mode developer terminal transplanted into a marketing surface: matte charcoal canvas, Geist's quiet technical voice for body and UI, and Satoshi's geometric precision stretched to display scale with generous tracking. A single electric lime (#a8ff53) carries the brand's signal — it lives in the logo glyph, the primary nav button, and feature pills, giving the whole interface a charging-light quality against the dark. The rest of the chromatic vocabulary is a syntax-highlighting palette (pinks, violets, soft greens) borrowed from code editors, applied to feature icons and inline code so the site visually rhymes with the TypeScript it asks you to write. Surfaces stay flat and low-contrast; depth comes from 1px hairlines and the gradient stack, not from drop shadows. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Slate Canvas | `#1c1e21` | `--color-slate-canvas` | Primary page background, hero canvas, card surface base — the workspace floor everything sits on | | Ink Well | `#121317` | `--color-ink-well` | Deepest surface — code block backgrounds, terminal panes, inset containers that need to feel recessed below the canvas | | Graphite Hairline | `#3b3e45` | `--color-graphite-hairline` | Subtle borders, divider lines, card edges — barely visible separators that let density carry the visual structure | | Steel Border | `#272a2e` | `--color-steel-border` | Slightly darker hairline for nested containers and secondary borders where Graphite feels too bright |

# Squarespace — Style Reference > Cinematic monochrome gallery **Theme:** light Squarespace speaks in absolute black and white — a purely achromatic system where drama comes from scale, contrast, and full-bleed photography rather than color. The visual identity is cinematic: a single massive headline floats over a full-bleed photographic hero, then the page alternates between stark black bands and white expanses, each section announcing itself through scale rather than color. Typography carries the entire brand voice — Clarkson, a custom geometric sans, is used at whisper-light 300 weight for huge 64–72px displays with aggressively tight tracking (-0.06em), creating a serif-like density that feels editorial. Components are intentionally minimal: ghost buttons, pill-shaped filter tabs, dark image cards with arrow indicators. The system is deliberately austere so user content (the websites being built) inherits all the visual energy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, nav bar, black section bands, dark feature cards, logo mark | | Paper | `#ffffff` | `--color-paper` | Page background, hero text on dark imagery, light section canvases, button text on filled buttons | | Charcoal | `#2f2f2f` | `--color-charcoal` | Filled button background, elevated dark surfaces — softer than pure black, reads as premium matte | | Ash | `#898989` | `--color-ash` | Muted body text, secondary borders, de-emphasized labels on dark backgrounds |

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

# mono — Style Reference > Swiss editorial grid as gallery wall text — a black-and-white broadsheet where type itself is the only color. **Theme:** light Mono operates as a strict editorial-grid system: pure white canvas, a single near-black charcoal (#292929) doing all structural and typographic work, and zero chromatic accents. The visual logic is that of a museum wall label meets a Swiss design manual — type and gridlines carry every signal, never color. Custom display faces (NH at whisper-light 100/300, EV as a razor-thin display weight, S-Works for impact) create sharp typographic contrast that fills the role color normally would. Components are flat to the point of austerity: hairline borders, zero shadows, no rounded corners, no gradients. Layout is rigidly columnar with visible structural lines acting as both composition and ornament. The feel is curated, quiet, and deliberately self-conscious about its own typographic discipline. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, image backgrounds — the dominant surface that lets typography and gridlines read as structure | | Charcoal Ink | `#292929` | `--color-charcoal-ink` | Primary text, heading fills, hairline borders, gridlines, button text — the only working neutral, doing 90% of visual heavy lifting | | Carbon Black | `#000000` | `--color-carbon-black` | SVG fills, input borders, deepest text emphasis — used sparingly for maximum-contrast accents only |

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

# Awesomic — Style Reference > Rounded midnight marketplace — a portfolio gallery cut from matte black tiles on a white tablecloth, where large rounded corners and a single custom typeface do all the expressive work. **Theme:** light Awesomic operates on a white-and-near-black canvas with maximum roundness — 36px cards and pill-shaped containers dominate every surface, creating a soft, approachable tension against the very dark #09090b fills used for primary actions. The neutral scale is dense and graduated (gray-50 through gray-950), but only 3-4 steps appear in any single view, keeping contrast high without complexity. The single custom typeface, Cosmica, spans the entire system from 10px badge labels to 64px display headlines — its weight range (300–700) does all tonal work that color doesn't. Accent color is almost entirely absent from the UI layer: vivid orange (#ff5a00) surfaces only on YC badge labels, and the vivid pink (#fe45e2) is a single decorative card wash — the system's restraint makes these moments land harder. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#09090b` | `--color-obsidian` | Primary filled button backgrounds, display heading text on white surfaces — the system's anchor dark, nearly true black | | Ink | `#18181b` | `--color-ink` | Body text, nav text, badge text on light surfaces — one shade lighter than Obsidian, used for reading-weight text | | Graphite | `#3f3f46` | `--color-graphite` | Button borders, badge backgrounds (dark variant), border strokes across components — the dominant UI border tone | | Slate | `#52525b` | `--color-slate` | Mid-dark card backgrounds in dark sections, subtle icon fills |

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

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

# Current — Style Reference > Editorial gallery in black and white. A whisper-thin headline floats on white paper beside a saturated photograph — banking as a magazine spread, not a dashboard. **Theme:** light Current uses an editorial monochrome language: stark white canvas, pure black navigation, and whisper-thin soehne headlines that command through restraint rather than weight. The UI itself contains zero chromatic color — every screen is built from black, white, and two shades of slate gray, with a single warm-to-cool gradient reserved for brand expression. Photography brings all the color, and it does so in saturated, slightly surreal editorial frames. Components are pill-shaped and ghost-like: black-filled primary buttons sit beside thin-outlined ghost links, and the only meaningful shadow in the system is a soft ambient glow on the floating app CTA. The aesthetic reads more like a fashion magazine spread than a banking app. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Navigation bar, filled primary buttons, primary headlines, hairline borders, icon strokes — the structural ink of the entire system | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav text, button text on dark — the negative space that makes the whisper-thin type readable | | Slate | `#737582` | `--color-slate` | Body copy, secondary text, link text, thin borders — the only mid-tone in the palette carries all helper and supporting information | | Iron | `#4e525e` | `--color-iron` | Heavier borders, dividers in dense areas, secondary structural edges |

# Monologue — Style Reference > Một thư viện nhung với một tia xanh lam duy nhất. Một căn phòng tối rộng lớn nơi một headline serif in nghiêng duy nhất thu hút sự chú ý và một tia sáng cyan báo hiệu hành động. **Theme:** dark Monologue hoạt động như một canvas biên tập tối, phủ trong sắc gần-đen với một xung teal điện duy nhất. Nhận diện thị giác được neo bởi Instrument Serif ở tỷ lệ ấn tượng — headline in nghiêng từ 28px đến 400px tạo ra trọng lượng trang bìa tạp chí, với brand wordmark trải dài toàn bộ viewport như chữ màu xám ma. DM Mono xử lý chrome UI/kỹ thuật: label, tag và chú thích cấu trúc đọc như metadata hệ thống hơn là copy. Bề mặt mờ và mỏng như giấy trên nền tối; một nút download trắng đơn độc và card sản phẩm gradient teal cung cấp các điểm có trọng lượng vật lý duy nhất. Tâm trạng là workstation đêm khuya kết hợp với ấn phẩm xa xỉ — tự tin, yên tĩnh và có quan điểm typography rõ ràng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Electric Cyan | `#19d0e8` | `--color-electric-cyan` | Accent text, accent border, bề mặt video card, điểm nhấn gradient trên màn hình sản phẩm — xung màu duy nhất trong một hệ thống achromatic | | Sky Signal | `#44ccff` | `--color-sky-signal` | Cyan phụ cho gradient stop và chiếu sáng màn hình sản phẩm | | Deep Teal | `#062f34` | `--color-deep-teal` | Nền card surface, gradient shadow stop — neo card sản phẩm teal trong bóng tối | | Void Black | `#000000` | `--color-void-black` | Canvas trang, nền chính — trường tối không bị gián đoạn |

# Savvycal — Style Reference > Sân khấu xanh rừng với trang giấy kem, headline serif và dấu câu xanh chanh **Theme:** mixed SavvyCal vận hành theo hệ thống biên tập hai vùng: một sân khấu hero xanh rừng và phần body giấy kem ấm áp. Cá tính là sự giao thoa giữa tạp chí và sản phẩm: một condensed display serif (GT Alpina) làm headline với trọng lượng biên tập, trong khi một grotesk đa năng (GT America) đảm nhận body và UI. Một màu xanh chanh duy nhất tô điểm cho mọi khoảnh khắc tương tác, và màu đỏ san hô chỉ tồn tại như dấu câu trang trí — gạch chân lượn sóng, hình vẽ tay, viền khung mảnh. Thẩm mỹ vay mượn từ in ấn: trung tính ấm, giọng serif, khoảng trắng rộng rãi, và các điểm nhấn thủ công làm mềm đi tính tiện ích của công cụ lên lịch. Các màn hình nên xen kẽ giữa sân khấu tối (dùng có chừng mực cho hero, spotlight tính năng) và canvas kem (mặc định cho tính năng, giá, nội dung), không bao giờ pha trộn cả hai trong một view. Bề mặt giữ phẳng và mờ — không glassmorphism, không elevation nặng. Màu sắc xuất hiện như những chấm chức năng nhỏ, không phải mảng màu loang. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Forest Stage | `#0d542b` | `--color-forest-stage` | Nền hero section, spotlight tính năng tối — xanh đậm neo ấn tượng đầu tiên đầy kịch tính | | Lime Sprout | `#b9ff78` | `--color-lime-sprout` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp | | Ember Coral | `#f54320` | `--color-ember-coral` | Accent stroke trang trí — gạch chân lượn sóng, hình vẽ tay, viền khung sản phẩm, đường phân cách section | | Coral Whisper | `#ffe3e3` | `--color-coral-whisper` | Lớp phủ bề mặt ấm mềm, điểm nhấn gradient hero, nền tint nhẹ phía sau các section biên tập |

# Photographer — Style Reference > Wordmark đen khổng lồ đổ xuống xuyên qua một phòng trưng bày ảnh tường trắng — chữ CHÍNH LÀ kiến trúc. **Theme:** light Julia là một portfolio nhiếp ảnh ưu tiên thị giác: một canvas trắng chứa một masonry lỏng lẻo gồm các khung hình editorial cỡ lớn, bị ngắt quãng bởi một wordmark đen khổng lồ, vừa đóng vai trò nhận diện vừa là công cụ đồ họa. Giao diện cố tình chỉ còn bộ xương — không menu, không card, không nút bấm — để nhiếp ảnh editorial bão hòa màu sắc gánh vác toàn bộ màu sắc, trong khi chrome chỉ đen trên trắng. Mỗi ô ảnh được bao quanh bởi một đường viền mảnh màu sắc (chromatic hairline border) lấy từ màu chủ đạo của chính bức ảnh, biến grid thành một nghiên cứu về màu sắc. Typography chỉ làm một việc và làm thật to: một wordmark cực đậm, tracking chặt, neo trang và chứng minh rằng hệ thống thiết kế đủ tự tin để để khoảng trắng làm phần còn lại. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, khoảng trắng âm giữa các tile, bề mặt để wordmark hiện rõ | | Wordmark Black | `#000000` | `--color-wordmark-black` | Wordmark Julia, toàn bộ body và nav text, đường viền grid mảnh, và các đường cấu trúc — màu cấu trúc duy nhất trong hệ thống | | Vermillion Frame | `#e21715` | `--color-vermillion-frame` | Đường viền màu mảnh trên các tile ảnh có màu chủ đạo đỏ — đường viền accent xuất hiện nhiều nhất trong grid | | Cobalt Frame | `#086392` | `--color-cobalt-frame` | Đường viền màu mảnh trên các tile ảnh xanh lam — kết hợp với Vermillion làm trục phụ của hệ thống khung màu |