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

# Ferrari — Style Reference > Phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, để những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh. **Theme:** mixed Sự hiện diện kỹ thuật số của Ferrari là một phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, nơi những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh, còn bản thân UI giữ kỷ luật với các tông đen, trắng và xám thuần túy. Layout mang phong cách editorial: hero cinematic tối full-bleed với tiêu đề all-caps căn giữa, xen kẽ với các section nội dung trắng có khoảng thở rộng rãi và nhịp điệu text-trái/image-phải cứng nhắc. Ngôn ngữ thị giác kiềm chế và đầy tự tin — CTA mũi tên tròn mảnh, navigation uppercase letter-spacing rộng, border siêu mảnh, không có điểm nhấn màu sắc, và không có gradient trang trí. Mọi quyết định bề mặt đều nhường chỗ cho bức ảnh: giao diện không bao giờ được cạnh tranh với chiếc xe. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, nền section sáng, bề mặt card, chữ trên nền tối | | Pure Black | `#000000` | `--color-pure-black` | Hero và feature section tối full-bleed, thanh navigation sâu, chữ chính trên nền sáng | | Carbon Black | `#181818` | `--color-carbon-black` | Bề mặt tối thứ cấp, card tối, nền footer — cao hơn pure black một bậc | | Graphite | `#303030` | `--color-graphite` | Bề mặt tối nâng cao, border tối, cấu trúc dark-mode tinh tế — sáng hơn Carbon một bậc |

# Nomen Nescio — Style Reference > mực trên giấy ấm **Theme:** light Nomen Nescio là một hệ thống editorial giấy và mực dành cho một nhãn hiệu thời trang ý niệm: một nền canvas trắng kem ấm (#fdfdfa) chứa ảnh thời trang cỡ lớn, trong khi mọi phần tử giao diện đều lùi về một màu mực gần đen duy nhất (#2b2b2e). Toàn bộ hệ thống typography chỉ dùng một sans-serif custom ở một weight duy nhất (400) — không bold, không light, không italic — vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua kích thước và negative letter-spacing thay vì tương phản. Các component là hình chữ nhật phẳng, không shadow, không bo góc, không màu sắc: bản sắc đến từ sự kiềm chế, từ tông trung tính ấm, và từ ảnh tràn cạnh (edge-to-edge). Hệ thống mang cảm giác như một zine in ấn được tái hiện dưới dạng website — khoảng trắng chính là layout grid, và mọi bề mặt UI đều có thể được cắt từ cùng một tờ giấy. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fdfdfa` | `--color-paper` | Canvas trang và bề mặt card — trắng kem ấm mang cảm giác giấy cũ, không phải digital white | | Bone | `#f5f3ee` | `--color-bone` | Bề mặt nâng cao và lớp phủ nhẹ — dùng cho nền card và hover state, ấm hơn canvas một bậc | | Ink | `#2b2b2e` | `--color-ink` | Text chính, navigation, border, và outlined action — gần đen với undertone ấm, không bao giờ là #000 thuần | | Ash | `#bebcb4` | `--color-ash` | Text mờ và border phụ — xám ấm dùng cho metadata, subtitle, và hairline divider |

# Applied Labs — Style Reference > Sunlit cream paper with cobalt punctuation and floating conversation cards **Theme:** light Applied Labs reads like a warm, sunlit editorial spread: cream paper backgrounds, near-black ink type, and a single vivid cobalt blue used as quiet punctuation rather than a shout. The visual signature is the contrast between photographic warmth (real people in real light, not illustrations or 3D renders) and restrained, typographically-driven UI chrome. Conversation fragments — translucent chat bubbles, message exchanges, agent replies — float as a design motif across hero and feature sections, making the product's nature legible without explaining it. Dark filled buttons (espresso-black) are the only hard shapes against the otherwise soft, hairline-divided surface stack; the entire system feels like reading a thoughtful magazine rather than scrolling a product page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Page canvas, base card surface, nav background | | Cream | `#f7f7f4` | `--color-cream` | Warm off-white section background, soft card fill — the secondary surface layer that gives the page its paper-like warmth | | Fog | `#f5f5f5` | `--color-fog` | Elevated card surfaces and subtle section bands | | Ash | `#e4e4e7` | `--color-ash` | Hairline borders, dividers, input underlines — the structural skeleton of the layout |

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

# ThoughtLab — Style Reference > crimson flare in obsidian dark **Theme:** dark ThoughtLab operates in cinematic darkness where a single vivid red mark cuts through near-black silence. Typography is architectural and oversized — 198px display headlines with extreme negative tracking create editorial drama, while body copy stays compact at 15-17px with generous leading. The interface strips away everything nonessential: pill-shaped CTAs, hairline borders, and vast negative space let the messaging and the one red accent command full attention. The iridescent 3D orb hero is the only ornament in an otherwise weightless void where every other element recedes into shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Red | `#fc1c46` | `--color-signal-red` | Primary action buttons, active states, brand mark accent — the sole chromatic note in a monochrome void, making every tap feel deliberate | | Pure White | `#ffffff` | `--color-pure-white` | Display headlines, button text, high-contrast labels — the brightest text tier, reserved for the loudest statements | | Ash | `#cccccc` | `--color-ash` | Body text, secondary headlines, subtle hairline borders — the workhorse gray that carries most readable content across the dark canvas | | Graphite | `#4c4c4c` | `--color-graphite` | Muted metadata, inactive controls, tertiary borders — recedes into the background when focus should be elsewhere |

# Patch — Style Reference > electric blueprint on drafting paper **Theme:** light Patch uses a loud, electric-blue blueprint aesthetic: a vivid indigo canvas (#1f00ff) alternates with stark white cards, and every interface element either lives inside a crisp hairline border or against the full-bleed blue. Typography is aggressive and condensed — PP Right at weight 800 with sub-1.0 line heights makes headlines feel architectural rather than friendly, while Archivo keeps body text quiet and functional. A single warm orange (#ff622b) punctures the blue/white duopoly as the only fill color used for primary actions. Hand-drawn line illustrations (sketchy people, objects) sit centered inside white cards, reinforcing a 'marketing blueprint' mood. The overall feel is a confident, slightly retro-tech agency identity — medical marketing pitched as engineering, not healthcare. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Indigo | `#1f00ff` | `--color-electric-indigo` | Full-bleed hero canvas, section backgrounds, heading text on light surfaces, all primary borders and dividers — the single chromatic color that defines the entire system | | Patch Orange | `#ff622b` | `--color-patch-orange` | Filled CTA buttons and active nav markers — the only warm color, reserved exclusively for conversion moments | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, hero reverse text, card surfaces, icon fills — the neutral that makes the indigo vibrate | | Fog Gray | `#f2f2f2` | `--color-fog-gray` | Secondary card surfaces, subtle elevation between cards and canvas |

# Ko-fi — Style Reference > Không gian ấm cúng như quán café phấn viết trên giấy kem. **Theme:** light Ko-fi mang phong cách menu indie café ấm áp in trên giấy tái chế. Nền cream canvas thay thế màu trắng lạnh lẽo thường thấy ở các công cụ creator, và một custom chunky display font tạo dấu ấn cho hero headlines với năng lượng zine thủ công, trong khi DM Sans giữ mọi thứ dễ đọc. Mọi phần tử tương tác đều được bo tròn tối đa — pill buttons, pillow-soft cards, capsule inputs — tạo cảm giác xúc giác, như một cuốn sticker-book. Viền đen 2-3px bao quanh ảnh và bề mặt card thay vì đổ bóng, củng cố thẩm mỹ thủ công cắt-dán. Một màu xanh periwinkle nhẹ duy nhất tạo điểm nhấn trên bảng màu trung tính ấm, chỉ dành riêng cho primary actions để chúng luôn là thứ quan trọng nhất trên màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Oat Cream | `#e9dfd2` | `--color-oat-cream` | Secondary surface — nền feature card, warm button fills, nền tag | | Morning Fog | `#e5e7eb` | `--color-morning-fog` | Page canvas, viền nhẹ, đường kẻ mảnh — nền tảng cho mọi thứ | | Ink Black | `#202020` | `--color-ink-black` | Primary text, dark filled buttons, dark icon fills | | Sticker Black | `#000000` | `--color-sticker-black` | Viền dày trên card, ảnh và logo wordmark — đường viền signature khiến phần tử trông như cắt từ giấy |

# Todoist — Style Reference > Không gian làm việc tràn ngập ánh sáng với một cuốn planner giấy — mặt bàn màu kem ấm, ghi chú bằng mực, một cây bút đỏ **Theme:** light Todoist mang phong cách một không gian làm việc ngập nắng với planner giấy: nền canvas trắng kem ấm áp, chữ mực gần như đen, và một điểm nhấn đỏ cam rực rỡ duy nhất để đánh dấu hành động mà không lấn át bố cục. Typography mang chất nhân văn và nhẹ nhàng — Graphik đảm nhận các kích thước display với tracking âm dày, trong khi Inter xử lý UI chrome với tracking dương nhẹ — nhờ đó, hệ thống phân cấp được tạo ra từ kích thước và weight chứ không phải từ khối lượng màu sắc. Ảnh chụp màn hình sản phẩm và mockup điện thoại nổi bên trên các đường cong trang trí màu kem, tạo bầu không khí mà không bao giờ rơi vào nhiễu loạn minh họa. Màu sắc được phân bổ như dấu câu chức năng: màu cam thương hiệu cho một hành động duy nhất trên mỗi view, xanh dương cho link, xanh lá cho trạng thái, phần còn lại của màn hình giữ yên tĩnh trong các tông màu trung tính ấm. Elevation cực kỳ nhẹ nhàng — một bóng đổ 1px mảnh trên card, không có panel nặng hay gradient trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Red | `#e34432` | `--color-ember-red` | Accent màu cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính | | Deep Ember | `#cf3520` | `--color-deep-ember` | Nhấn mạnh văn bản thương hiệu, eyebrow labels, iconography trang trí, sự hiện diện thương hiệu thứ cấp | | Cobalt Link | `#0f66ae` | `--color-cobalt-link` | Hyperlinks, nhãn ưu tiên trong ứng dụng, icon thông tin | | Ink | `#25221e` | `--color-ink` | Văn bản chính, heading, đường viền icon tối, bề mặt fill tối |

# Peloton — Style Reference > Red beacon on charcoal runway. A fitness showroom where one electric red CTA cuts through vast dark exhibition space into clean white product galleries. **Theme:** mixed Peloton runs a disciplined two-mode visual system: cinematic charcoal hero surfaces that make product photography glow, followed by bright white product grids that let the merchandise speak. The palette is almost entirely achromatic — gunmetal, white, and warm grays — with one vivid red accent that acts as the only chromatic punctuation on the page, reserved exclusively for primary actions, brand marks, and the persistent chat widget. Inter carries the entire typographic voice at a wide range of weights, from whisper-light 300 display headlines to confident 500 nav labels, creating a calm, premium fitness-retail atmosphere. Components are generous: 28px pill buttons, 6px inputs, 24px image corners, and minimal elevation — surfaces do the structural work, shadows stay absent or near-invisible. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Peloton Red | `#df1c2f` | `--color-peloton-red` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Carbon Black | `#181a1d` | `--color-carbon-black` | Primary text color, dark hero surfaces, navigation bar, footer backgrounds, heading color — the structural anchor of the entire system | | Pure White | `#ffffff` | `--color-pure-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Mist Gray | `#f7f7f7` | `--color-mist-gray` | Page canvas, subtle section backgrounds behind product grids, alternate band separator |

# Amplemarket — Style Reference > Frosted white workspace, sun-stained corner gradient. A bright cool neutrals system with a deep violet core and one orange ember, all set in a single tight grotesk. **Theme:** light Amplemarket operates as a minimal white canvas pierced by concentrated color. The default page is near-empty — white backgrounds, a single grotesk typeface at work, hairline borders, and tight negative tracking at display sizes that compresses the headline into a compact block. The signature move is a vivid radial atmosphere (orange → cream → lavender → cyan) that bleeds in from page edges as a soft glow rather than a background fill, paired with a hand-drawn line illustration that humanizes the otherwise austere grid. A deep violet (#10054d) is reserved for dark sections and bold accent surfaces, never competing with the bright gradient. Components are flat, border-driven, and generously spaced; elevation is almost always a 1px inset ring rather than a drop shadow. The effect is a workspace that feels calm and grown-up, with color appearing in deliberate, emotional bursts. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#111111` | `--color-ink-black` | Primary text, hairline borders, icon strokes, filled button background — the dominant structural neutral at ~5000 occurrences, always reading as near-black with no warm or cool cast | | Paper White | `#ffffff` | `--color-paper-white` | Primary page and card surfaces, inverse text on dark buttons and dark sections | | Obsidian Warm | `#272625` | `--color-obsidian-warm` | Dark section background (CTAs, feature blocks), dark surface for cards inside dark contexts — subtly warmer than pure black so the violet text on top still feels in the same family | | Graphite Mid | `#6d6c6b` | `--color-graphite-mid` | Secondary body text, muted labels, caption helper copy, decorative image borders |

# aave.com — Style Reference > violet neon xuyên qua chạng vạng — một buổi trưa oải hương nhạt tan dần vào bề mặt sản phẩm nửa đêm, và một tia violet điện duy nhất là màu sắc sống sót qua màn chuyển tiếp. **Theme:** mixed Aave vận hành như một hệ thống hai tông: một hero oải hương ngập nắng tan dần vào bề mặt sản phẩm gần như đen, với violet rực rỡ (#998eff) xuyên suốt cả hai nửa như điểm nhấn màu sắc duy nhất. Typography dùng một custom display family (Aave Repro) trong dải weight hẹp 400–500 — hierarchy đến từ những bước nhảy kích thước rộng và negative tracking mạnh, chứ không phải từ việc tăng đậm. Các component mềm mại và hình pill theo mặc định: 20px là corner radius chủ lực, 1584px đánh dấu CTA full-pill, và elevation gần như vắng mặt — chỉ một công thức soft shadow duy nhất xuất hiện trên các floating element. Kết quả là một ứng dụng fintech hấp thụ năng lượng điện tử của crypto và sự kiềm chế editorial của SaaS cùng lúc, trình bày cơ chế DeFi dày đặc qua một canvas tĩnh lặng, tương phản cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — sợi chỉ màu sắc duy nhất xuyên suốt các phần sáng và tối; đủ ấm để sống động trên nền đen mờ mà không trở nên hung hãn | | Obsidian | `#221d1d` | `--color-obsidian` | Dark surface chủ đạo, body text trong phần sáng, primary nav text — màu gần đen neo giữ các band Pro và Markets | | Inkwell | `#0f0f10` | `--color-inkwell` | Neutral action fill tương phản cao cho primary buttons trên surface sáng. | | Charcoal | `#000000` | `--color-charcoal` | Pure-black fallback cho fills, strokes và borders tương phản cao |

# Clutch Security — Style Reference > Bảo tàng typography trên nền đá cẩm thạch trắng. Những bức tường gallery trắng tinh, nơi mỗi chữ là một hiện vật, và một nút xanh duy nhất là bức tranh duy nhất trong phòng. **Theme:** light Clutch Security vận hành theo phong cách minimalism gallery trắng: một canvas sáng, gần như giấy, nơi typography gánh toàn bộ trọng lượng thị giác và một màu xanh điện duy nhất đảm nhận mọi cuộc đối thoại về màu sắc. Điểm nhấn typography đặc trưng là headline display với font PP Radio Grotesk, nơi các từ khóa chuyển đổi giữa weight 400 và 600 trong cùng một câu, tạo ra nhịp điệu gọi-đáp như một cuộc trò chuyện hơn là một tuyên bố. Giao diện gần như phẳng — góc 6px, border 1px mảnh như sợi tóc màu xám lạnh, không có shadow trang trí — để những hình minh họa 3D orbital hay brand mark 3D thỉnh thoảng xuất hiện giống như một vật thể tìm thấy trên mặt bàn sạch sẽ. Mọi thứ đều căn giữa, rộng rãi và đầy tự tin; các khoảng cách section 80px và internal padding thoáng đãng cho mỗi phần tử đủ không gian để khẳng định bản thân mà không cần cạnh tranh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Cobalt | `#004dff` | `--color-electric-cobalt` | Primary action buttons, active states, điểm nhấn màu duy nhất tạo điểm nhấn cho toàn bộ hệ thống đơn sắc | | Periwinkle Wash | `#d9e4ff` | `--color-periwinkle-wash` | Bề mặt xanh nhạt cho vùng được tô sáng, nền mang tông màu thương hiệu nhẹ nhàng, fill accent mềm mại | | Lavender Veil | `#e6c5f7` | `--color-lavender-veil` | Bề mặt tím nhạt cho brand mark và vùng accent cấp ba, một chút hơi ấm giữa bảng màu lạnh | | Obsidian | `#000000` | `--color-obsidian` | Neutral form states, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp lên màu CTA chính |

# Walden — Style Reference > A still forest floor — every product is a stone, every pixel is moss and silence. **Theme:** light Walden is a meditation and ritual-object brand whose interface behaves like a quiet gallery wall. The canvas is pure white; nearly every surface, border, and control is rendered in warm grayscale, with no chromatic accent anywhere in the system. Type is small, tight, and lowercase-leaning, and the only structural cues are hairline strokes in stone-gray (#d3cec5) — no drop shadows, no elevation tricks, no gradients. Full-bleed nature and product photography carries the entire emotional load, so the chrome around it must stay almost invisible. Components feel handmade, not templated: a 2px button radius, a 16px max radius on cards, and 1px inset rings as the only shadows in the system. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal Ink | `#3f3f3f` | `--color-charcoal-ink` | Primary text, default borders, link underlines, icon strokes — the workhorse gray that carries almost every label and divider in the system | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav background, card surfaces, button text — the absolute ground of the interface | | Stone Veil | `#d3cec5` | `--color-stone-veil` | Hairline borders, inset focus rings, soft separator lines — the warm gray that makes every edge feel like a seam in paper or stone, not a UI stroke | | Sumi Black | `#030302` | `--color-sumi-black` | Filled button backgrounds, active state borders, highest-emphasis text — the near-black ink, warmer than pure black, used when a control must be pressed or selected |

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

# Slack — Style Reference > Plum-warm digital hearth — a cream-white workspace where deep aubergine accents glow like embers in a quiet, collaborative room. **Theme:** light Slack's design language is a deep-aubergine workspace built on a cream-white canvas, where the brand's signature plum purple (#611f69) is reserved for moments of action and emphasis while nearly everything else stays achromatic and calm. The aesthetic is editorial-meets-product: oversized Salesforce-Avant-Garde display headlines whisper in weight 700 with tight negative tracking, product UI screenshots carry the actual color story (multicolored hash marks, channel pills, avatars), and the page breathes through generous vertical rhythm broken by full-bleed dark-purple storytelling bands. Playful radial gradient washes (pink, blue, green, yellow at 25% opacity) float behind sections like soft spotlights, echoing the lozenge brand mark without being loud. Components are lightweight and confident — 4px-radius buttons, 16px-radius cards, hairline lavender borders, and almost no elevation except a single soft shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aubergine Core | `#611f69` | `--color-aubergine-core` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Midnight Plum | `#1d1c1d` | `--color-midnight-plum` | Primary text, dark section backgrounds, button text on light surfaces — the near-black that reads as warm rather than clinical | | Eggplant Ink | `#2e0039` | `--color-eggplant-ink` | Display text on light lavender surfaces, deep purple headlines — the chromatic dark text that keeps the brand's purple identity in headings | | Plum Shadow | `#3d0157` | `--color-plum-shadow` | Hover and pressed states on primary buttons, deeper purple accents — what Aubergine Core becomes when it presses down |

# Erno Forsström — Style Reference > editorial gallery on warm paper **Theme:** light A personal design director's portfolio built on radical editorial restraint: a warm off-white canvas, a single weight of a single grotesque typeface, and near-black ink for everything typographic. The page behaves like a printed monograph — generous margins, tight tracking, lines of body text that sit close together while the display headline compresses to a 0.93 line-height so ascenders and descenders nearly touch. The chrome is essentially invisible: a three-word header, hairline section dividers, project labels in the same size as the body. Color and shadow are absent by design; the only chromatic information comes from the photographic work itself, which sits as full-bleed dark imagery against the warm paper. Hierarchy is built exclusively through scale, tracking, and the dramatic jump from 21px to 58px. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#202020` | `--color-ink` | Body text, headings, project titles, hairline borders, and the bottom edge of links — a soft near-black that reads as flat black at body sizes but never goes dead 000 | | Bone | `#dfdcdc` | `--color-bone` | Page canvas and the implicit surface for every project card — a warm off-white with just enough gray to feel like paper, not a screen | | Ash | `#cdcecf` | `--color-ash` | Hairline divider tone that sits one step darker than the canvas to register as a visible rule without becoming a hard line |

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

# beehiiv — Style Reference > midnight observatory with neon plasma **Theme:** dark beehiiv uses a midnight-canvas language: near-black surfaces with subtle violet undertones, tight geometric display type in Clash Grotesk, and a signature electric-indigo-to-hot-magenta gradient that injects energy into an otherwise restrained layout. The page behaves like a product launch site — dark always, with content cards floating on the dark canvas using thin violet borders and faint glows rather than heavy shadows. Satoshi carries all interface text with comfortable spacing, while Clash Grotesk delivers the headline voice at 60-72px with zero letter-spacing for confident geometric authority. Accent color appears sparingly: as a gradient on hero text, as a full-bleed highlight on one testimonial card, and as small chromatic icons — never as large filled buttons. Components are flat and precise, relying on border-weight and inner glow rather than elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Abyss Ink | `#060419` | `--color-abyss-ink` | Page background, deepest surface — the void that everything floats on | | Deep Violet | `linear-gradient(to right bottom, rgba(6, 4, 25, 0.4), rgba(47, 57, 186, 0.8))` | `--color-deep-violet` | Card and panel surfaces — one step lifted from the canvas; Atmospheric gradient overlay — blends canvas into indigo accent | | Twilight Plum | `#141230` | `--color-twilight-plum` | Elevated surfaces, active nav backgrounds, deeper card variants | | Dark Plum | `#1b0e27` | `--color-dark-plum` | Hover states, inset surface, tooltip backgrounds |

# RainbowKit — Style Reference > Modal ví neon lơ lửng trong khoảng không đen — dải cực quang xanh dương pha tím phát sáng xuyên qua bóng tối. **Theme:** dark RainbowKit sử dụng ngôn ngữ crypto-native của nửa đêm: một canvas đen với các thẻ nổi tối, typography sans-serif bo tròn đầy tự tin, và một gradient xanh dương pha tím duy nhất làm trái tim cảm xúc của thương hiệu. Thiết kế tồn tại trong khoảng cách giữa sự nghiêm túc của developer-tool và sự dễ tiếp cận của consumer-app — shadow đậm tạo chiều sâu trên bề mặt tối phẳng, inset white border highlight định nghĩa các cạnh nút, và bán kính 9999px biến mọi tương tác thành những viên pill thân thiện. Màu sắc được sử dụng một cách có chủ đích: signal blue cho hành động chính, aurora gradient cho hero CTA, và chữ trắng tinh trên các lớp xám để phân cấp. Các modal component nổi với stack shadow 24px ấn tượng, xem trước bề mặt sản phẩm của chính toolkit. Lưới đối tác 6 cột bên dưới báo hiệu sự tin cậy của cộng đồng ở quy mô lớn mà không cần đến testimonials. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Signal Blue | `#0e76fd` | `--color-signal-blue` | Primary CTA fill, trạng thái active, brand wordmark, nhấn mạnh link — màu xanh duy nhất có đủ diện tích bề mặt để mang bản sắc thương hiệu | | Aurora Gradient | `linear-gradient(to right, rgb(56, 152, 255), rgb(122, 112, 255))` | `--color-aurora-gradient` | Hero CTA gradient, brand wordmark highlight, vùng chọn được tô — chảy từ xanh bầu trời đến tím điện | | Electric Violet | `#7a70ff` | `--color-electric-violet` | Điểm kết thúc gradient, brand-secondary accent — chỉ xuất hiện như nửa tím mát của aurora | | Deep Iris | `#38228f` | `--color-deep-iris` | Lớp phủ tím cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. |

# Dennis Snellenberg — Style Reference > Canvas editorial tối với headline khổng lồ, trầm lặng **Theme:** dark Ngôn ngữ portfolio editorial tối được xây dựng trên nền gần như đen, nơi màu sắc duy nhất có giá trị là một tông violet rực rỡ duy nhất. Toàn bộ giao diện thu gọn về hai tông — `#1c1d20` cho thế giới, `#ffffff` cho mọi chữ viết — với một custom sans-serif ở weight medium cố định làm tất cả công việc kể chuyện. Typography là nhân vật chính: một display name 216px tràn ra ngoài mép trang, trong khi body copy 12–15px nổi bên cạnh ảnh full-bleed. Violet xuất hiện như dấu câu hiếm hoi trên card và link fills, không bao giờ là trang trí. Các component phẳng, không viền, và lớn — rounded pills thay thế button, và một vòng trắng inset 1px duy nhất là toàn bộ ngôn ngữ shadow trong hệ thống. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Nền trang, bề mặt card, text trên nền sáng, viền mảnh — màu gần đen chiếm 95% giao diện | | Bone White | `#ffffff` | `--color-bone-white` | Text chính, bề mặt card đảo ngược, link text trên violet, viền inset nhẹ — tông sáng duy nhất trong hệ thống | | Fog | `#999d9e` | `--color-fog` | Text phụ mờ, chú thích, metadata — nằm giữa canvas và trắng trong thang neutral | | Graphite | `#494a4d` | `--color-graphite` | Lớp bề mặt nâng cao hơn canvas, nền card mềm, hiệu ứng hover của link — thêm nửa bậc chiều sâu mà không phá vỡ cảm giác đơn sắc |

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

# HOUSEPLANT — Style Reference > hiệu sách gỗ óc chó trên giấy linen **Theme:** light Houseplant vận hành trong một bảng màu monochrome ấm áp, gần gũi với đất — nâu óc chó đậm trên nền kem cũ, với phần product photography đảm nhận toàn bộ công việc tạo màu sắc. Hệ thống mang phong cách catalog đồ gia dụng cổ điển: custom typography khít, khoảng thở rộng rãi, không có gradient trang trí, và hầu như không có màu nhấn. Màu nâu đậm #321e1 vừa là text vừa là bề mặt, đảo qua lại giữa background và foreground tùy theo ngữ cảnh, trong khi màu kem #f4f1e1 đóng vai trò canvas. Các component tối giản — solid filled buttons, hairline dividers, soft cards với một bóng đổ nhẹ duy nhất. Điểm nhấn đặc trưng là oversized custom wordmark neo ở footer trang, xử lý tên thương hiệu như một yếu tố đồ họa thay vì logo. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Walnut | `#321e1e` | `--color-walnut` | Màu text chính, filled action buttons, dark hero sections, footer wordmark. Màu nâu ấm đậm đọc gần như đen nhưng vẫn mang hơi ấm đất của thương hiệu — được dùng làm cả foreground lẫn background surface | | Linen | `#f4f1e0` | `--color-linen` | Page canvas, card surfaces, light text trên nền tối. Màu kem cũ ấm áp mang lại chất giấy, chất cổ điển cho toàn bộ hệ thống | | Graphite | `#464545` | `--color-graphite` | Secondary borders, muted helper text, subtle dividers. Màu xám trung tính nhẹ nhàng tạo sự phân cách tĩnh lặng mà không cạnh tranh với cặp Walnut/Linen | | Espresso | `#463938` | `--color-espresso` | Button text trên nền sáng, alternate dark fill. Biến thể nâu nhạt hơn một chút để tạo tương phản typographic trong cùng họ màu tối |

# Dub Links — Style Reference > warm sunrise over monochrome architecture **Theme:** light Dub mang phong cách SaaS ấm áp, tự tin: giao diện gần như đơn sắc (near-monochrome) neo trên gradient kem-pha-trắng mềm mại, với một điểm nhấn cam rực duy nhất khiến mọi thao tác đều nổi bật. Hệ thống thở nhờ khoảng trắng rộng rãi trên lưới 4px nhỏ gọn, kết hợp độ chính xác tiện ích của Inter với nét display bo tròn của Satoshi cho headline. Bề mặt luôn mờ và sáng với viền mảnh (hairline border) và bóng cực nhạt — chiều sâu đến từ sự chuyển tông tinh tế và độ cao (elevation), không bao giờ dùng panel nặng. CTA chính luôn là pill đen với micro-accents màu cam than hồng (orange-ember) ở gần, tạo độ tương phản giữa tính trung tính cấu trúc và sự ấm áp của thương hiệu. Các component nên cảm giác nhanh và tiện dụng: bán kính 4px và 8px chiếm ưu thế, pill buttons mang CTA, và card là hình chữ nhật trắng phẳng trên nền canvas hơi ấm. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas Cream | `#f5f5f5` | `--color-canvas-cream` | Nền trang — tông trắng ngà ấm tạo cảm giác ngập nắng cho giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, panel nâng cao, trường nhập liệu — trắng tinh cho container nội dung | | Ink Black | `#0a0a0a` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính | | Charcoal | `#171717` | `--color-charcoal` | Text phụ, text button trên nền tối, heading weights |

# Healthy Together — Style Reference > Xanh nửa đêm với dải ribbon màu violet dạng nét cọ. **Theme:** dark Healthy Together là một nền tảng gov-tech lấy tối làm chủ đạo: canvas xanh nửa đêm sâu thẳm làm nền cho những headline cỡ lớn đầy tự tin, bị phá vỡ bởi các section accent màu violet điện rực rỡ và những khoảng thở màu oải hương nhạt. Một dải ribbon hồng-tím đặc trưng lướt qua hero như một nét cọ, mang đến cho dark UI vốn nghiêm ngặt một khoảnh khắc năng lượng hữu cơ duy nhất. Cards được bo tròn rộng rãi (42px), buttons có dạng pill hoàn toàn, và tracking dày đặc của Inter ở kích thước lớn (64–92px) tạo cho headline một cảm giác nén chặt, có cấu trúc kiến trúc. Nhịp điệu thị giác luân phiên dark → vivid → soft, không bao giờ trắng trên trắng đơn thuần — mọi bề mặt đều là một nhiệt độ được chủ ý. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Ink | `#101722` | `--color-midnight-ink` | Primary text, hero canvas, nav bar, nền tối cấp trang — mỏ neo cấu trúc của toàn bộ hệ thống | | Linen Lavender | `#f9f0ff` | `--color-linen-lavender` | Section canvas, card fills, lớp highlight mềm — bề mặt thở giữa các khối hero tối | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, nav dividers, button text — bề mặt nội thất sạch sẽ | | Muted Graphite | `#6c6c7a` | `--color-muted-graphite` | Secondary text, helper copy, muted headings, đường viền nhẹ |