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

# Dopper — Style Reference > Đầm phá kem ngập nắng với dòng chảy xanh lam rực rỡ. Một khoảng beige ấm áp, nơi một luồng xanh điện và những tấm card full-bleed màu kẹo sáng cắt ngang như ánh nắng trên mặt nước. **Theme:** light Ngôn ngữ thị giác của Dopper mang phong cách một quầy sinh thái ngập nắng: một canvas kem ấm (#f6ecc8 hero, #fcfaf2 page body) với khoảng trắng rộng rãi và một màu xanh bão hòa duy nhất (#0067e5) làm nổi bật mọi phần tử tương tác. Giọng thương hiệu tự tin nhưng thân thiện — headline display cỡ lớn bằng custom face 'Dopper', bo góc 20px trên mọi card và button, cùng các khối giải pháp được tô bằng màu full-fill sáng như kẹo (teal, vàng, sky, navy) biến grid sản phẩm thành một tấm poster. Typography mang hai tính cách: một custom display face quirky cho điểm nhấn hero và một grotesque sạch sẽ (Gilroy) cho mọi thứ cấu trúc. Hệ thống tránh shadow nặng và trang trí, thay vào đó dùng khối màu, khoảng cách 20px rộng rãi, và ảnh sản phẩm lớn để tạo nhịp điệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Navy | `#000f2e` | `--color-midnight-navy` | Text chính, heading, card nền tối, logo wordmark — mực chủ đạo của hệ thống. Đủ đậm để neo canvas kem mà không cần đen tuyền | | Warm Cream | `#f6ecc8` | `--color-warm-cream` | Nền hero band, nền section xen kẽ — tạo bầu không khí ấm áp, ngập nắng cho thương hiệu | | Soft Off-White | `#fcfaf2` | `--color-soft-off-white` | Canvas trang, bề mặt card, text button trên nền xanh đặc — lớp nền cho mọi thứ | | Electric Blue | `#0067e5` | `--color-electric-blue` | Accent xanh 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 |

# Fey — Style Reference > obsidian trading terminal — một control room phong cách Bloomberg, nơi biểu đồ, tin tức và dữ liệu trôi nổi trong khoảng không đen tuyền. **Theme:** dark Fey vận hành trên nền obsidian — một canvas gần như đen (#0b0b0b) với các bề mặt card được nâng lên tinh tế (#131313, #191919) tạo chiều sâu gần với một trading terminal chuyên nghiệp hơn là landing page SaaS thông thường. Toàn bộ giao diện chỉ dùng một typeface duy nhất (calibre) ở nhiều weight, với negative tracking mạnh ở kích thước lớn, siết chặt display copy thành thứ gì đó mang tính kiến trúc hơn là thân thiện. Ba điểm nhấn màu (chromatic accents) được triển khai như dấu câu chức năng, không bao giờ là trang trí: cam (#ffa16c) đánh dấu những khoảnh khắc thương hiệu muốn bạn cảm nhận — headline, brand mark, sự khẩn cấp; xanh dương (#479ffa) neo giữ navigation tương tác và dữ liệu biểu đồ chính; xanh lá (#4ebe96) báo hiệu biến động tích cực trên thị trường ở price tag và buy/sell chips. Nhịp điệu trang là product-forward: các device mockup cỡ lớn trong carousel ngang đảm nhiệm việc bán hàng, với các khối text ngắn đóng vai trò hỗ trợ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Orange | `#ffa16c` | `--color-ember-orange` | Accent cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. | | Signal Blue | `#479ffa` | `--color-signal-blue` | Accent xanh dương hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính. | | Tape Green | `#4ebe96` | `--color-tape-green` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái. | | Snow | `#ffffff` | `--color-snow` | Text chính và icon foreground — giọng nói giao diện chủ đạo trên nền tối. |

# Clase bcn — Style Reference > editorial gallery on white wall **Theme:** light Clase bcn là một editorial gallery trên tường trắng: một branding agency có portfolio đọc như catalogue bảo tàng. Giao diện gần như vô hình — text, đường kẻ mảnh (hairline dividers), và ảnh dự án full-bleed làm tất cả công việc. Một sans-serif duy nhất (Suisse Int'l) ở một weight (400) mang mọi element, từ navigation labels đến oversized project titles. Whitespace rộng rãi và có cấu trúc: project cards trải dài toàn bộ viewport với title và subtitle đặt chồng trực tiếp lên ảnh. Tương tác duy nhất là text links với mũi tên chỉ dẫn; không có buttons, không có fills, không có shadows, không có decorative UI chrome. Màu sắc xuất hiện dưới dạng content — các case study dự án riêng lẻ mang bảng màu riêng làm background fills — trong khi chrome giữ nguyên achromatic và yên tĩnh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface base, text trên dark cards | | Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, nav labels — điểm neo cấu trúc của mọi element | | Carbon | `#0a0a0a` | `--color-carbon` | Secondary text và các bề mặt tối nơi pure black đọc quá gắt | | Concrete | `#939393` | `--color-concrete` | Navigation labels mờ, secondary link text, inactive nav state |

# Cluely — Style Reference > blue dawn over mountain ridges — a premium product emerging from atmospheric gradient into crisp white workspace. **Theme:** light Cluely presents an atmospheric SaaS aesthetic anchored by a dramatic sky-to-mountain blue gradient hero that sets a premium, almost cinematic tone. The signature move is the pairing of a large editorial serif display headline (EB Garamond at 80px) with a precise modern sans-serif (Geist) for everything functional — this serif-meets-tech contrast is the visual identity. A single vivid blue accent (#3c83f6) powers the primary CTA, while the rest of the interface stays achromatic with soft cool-gray neutrals. Components lean compact and lightweight: 4px-radius buttons, 12-24px-radius cards, hairline borders in #e4e4e7, and no decorative shadows. The product screenshots are presented as floating, slightly tilted laptop frames — the app is the hero, not abstractions. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Blue | `#3c83f6` | `--color-signal-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. | | Deep Dusk | `#022c70` | `--color-deep-dusk` | Gradient terminal stop, button shadow depth — dark indigo that anchors the primary blue toward night | | Azure Crest | `#0544a5` | `--color-azure-crest` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color | | Hover Glow | `#81b6ff` | `--color-hover-glow` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Busuu — Style Reference > tấm hộ chiếu vui tươi kết nối toàn cầu. Bầu trời gradient rực rỡ, bong bóng lời chào và cờ hình tròn khiến toàn bộ giao diện như một lời mời ấm áp đến với thế giới. **Theme:** light Design system của Busuu toát lên năng lượng ấm áp, dễ tiếp cận thông qua hero gradient tím-xanh rực rỡ, tràn đầy sự tự tin trước khi chuyển sang không gian làm việc nhẹ nhàng, gần như trắng. Giao diện chủ đạo được xây dựng trên nền canvas xanh lam rất nhạt (#f2f7fd) với các thẻ trắng nổi bên trên, và một màu spring-green bão hòa duy nhất (#11ee92) đóng vai trò là điểm nhấn hành động chính — một lựa chọn độc đáo giúp nó ngay lập tức khác biệt giữa hàng loạt CTA xanh lam trong edtech. Typography là font tùy chỉnh (Nista) với bộ weight nhỏ gọn, thiên về đậm: weight 800 cho display, 700 cho heading, và 400 sạch sẽ cho body, mang đến cho hệ thống giọng nói tự tin, hơi hướng hình học. Ngôn ngữ hình ảnh được minh họa nhiều — character art phẳng, nhiều màu sắc với khung hình tròn — và bố cục dựa trên padding rộng rãi, pill-shaped controls và ô cờ hình tròn để việc học ngôn ngữ toàn cầu trở nên trực quan và hấp dẫn thay vì hàn lâm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Indigo | `#3b1e90` | `--color-deep-indigo` | Mép trái của hero gradient — neo giữ bầu trời tím của landing banner | | Signal Blue | `#116eee` | `--color-signal-blue` | Brand links, nav accents, heading highlights, logo wordmark — màu xanh duy nhất mang ý nghĩa thương hiệu | | Spring Mint | `#11ee92` | `--color-spring-mint` | Green supporting accent cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Hero Sky Blue | `linear-gradient(90deg, #3b1e9 0%, #5a3cc4 30%, #3a6ef0 100%)` | `--color-hero-sky-blue` | Mép phải của hero gradient — chuyển từ deep indigo sang xanh lam sạch hơn, làm dịu tâm trạng của landing page |

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

# Tesla — Style Reference > Automotive Showroom trên màn hình. Visual sản phẩm độ phân giải cao chiếm ưu thế, được đóng khung bởi giao diện tối giản, chức năng — không làm lu mờ nội dung chính. **Theme:** light Thiết kế vận hành như một showroom ô tô cao cấp được chuyển thể lên màn hình. Mỗi section là một bức ảnh sản phẩm điện ảnh full-bleed, với các UI element đóng vai trò như những tấm biển chức năng tối giản. Bảng màu hoàn toàn không màu (achromatic), ngoại trừ một màu Tesla Blue (#3e6ae1) điện tử duy nhất — chỉ dành riêng cho các primary call-to-action, hoạt động như một nút khởi động. Typography mang tính trung tính và kỹ thuật, truyền tải thông tin mà không khẳng định cá tính riêng. Sự phụ thuộc có hệ thống của UI vào hình ảnh đảm bảo sản phẩm — chiếc xe, tấm pin mặt trời — luôn là hero không bị gián đoạn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Tesla Blue | `#3e6ae1` | `--color-tesla-blue` | Primary CTA ('Order Now') — một điểm màu bão hòa duy nhất, tập trung trong môi trường grayscale, tạo ra lời kêu gọi hành động không thể bỏ qua. | | Pure White | `#ffffff` | `--color-pure-white` | Nền trang chính, bề mặt card, chữ trên nền tối/nút xanh. | | Off-White | `#eeeeee` | `--color-off-white` | Card nội dung phụ, đường phân cách nhẹ giữa các section trắng. | | Parchment | `#e5e3df` | `--color-parchment` | Màu nền thay thế hiếm khi dùng cho một số section cụ thể. |

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

# Warp — Style Reference > Deep-space command shell — một buồng lái obsidian mờ đục, nơi mỗi pixel đều có giá trị và màu sắc là một tín hiệu hiếm hoi, mang ý nghĩa. **Theme:** dark Warp vận hành trong một vũ trụ than chì sâu thẳm: canvas gần như đen (#121212) được xếp lớp với các bề mặt sáng hơn một cách tinh tế (#1e1e1d, #353534) và không có shadow — độ cao được truyền tải hoàn toàn qua các bước màu nền. Typeface chính, Matter, đảm nhận toàn bộ trọng trách biểu cảm: negative tracking dày đặc ở kích thước display (-0.04em ở 56-64px) thì thầm sự tự tin thay vì la hét, và các tính năng OpenType tùy chỉnh (cv03, cv04, cv09, cv11) mang đến cảm giác được thiết kế chính xác đến từng chi tiết mà các sans-serif thông thường không có. Màu sắc gần như vắng bóng hoàn toàn — ngoại lệ màu sắc duy nhất, một màu xanh xô thơm dịu (#799c92), chỉ xuất hiện làm điểm nhấn trên các tiêu đề phụ của section, khiến nó trông giống như màu prompt của terminal vô tình lọt vào UI. Ảnh chụp màn hình sản phẩm terminal là hero; giao diện tự tái hiện chính nó như một tài liệu tiếp thị, xóa nhòa ranh giới giữa sản phẩm và trang web. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void Canvas | `#121212` | `--color-void-canvas` | Nền trang chính, bề mặt chiếm ưu thế bên dưới mọi nội dung | | Obsidian Deep | `#090909` | `--color-obsidian-deep` | Lớp sâu nhất — nav overlays, nền announcement bar | | Charcoal Surface | `#1e1e1d` | `--color-charcoal-surface` | Nền footer, bề mặt hơi nâng cao hơn canvas | | Iron Surface | `#353534` | `--color-iron-surface` | Bề mặt card được nâng lên, nền pill button, interactive containers |

# NaN — Style Reference > mint greenhouse of living letters — a pastel type lab where every headline is the product itself **Theme:** light NaN runs its website like a working specimen sheet: the mint-green canvas is the page, and the page is the product. Massive custom display faces (200-336px) are the visual architecture; a monospaced sans (NaN Holo Mono) set in uppercase with 0.075em tracking is the chrome that holds everything together. The palette is ruthlessly tight — one pastel canvas, near-black text (#262626, never pure black), one bright lime accent (#00ff00) for raw typographic flourishes, and a single pink-purple-blue gradient for the lone chromatic CTA. Borders do the work that shadows usually do: 1-2px hairlines define cards, inputs, and the type tester frame with no elevation. The interaction model is a live font tester — sliders for size and leading, dropdowns for family and weight — letting visitors steer the display in real time, which makes the site function as both storefront and demo. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Mint Canvas | `#b7ffb4` | `--color-mint-canvas` | Page background, card surfaces — the signature pastel that makes dark type appear sunlit rather than printed | | Lime Spark | `#00ff00` | `--color-lime-spark` | Decorative typographic flourishes and SVG scribble overlays — a raw signal-green that contrasts the pastel canvas without warming it | | Carbon Ink | `#262626` | `--color-carbon-ink` | Primary text, borders, icon strokes, button outlines — softer than pure black, sits on mint without vibrating | | Obsidian | `#000000` | `--color-obsidian` | Display-type fills at the largest sizes, pure-black SVG fills for the heaviest display specimens |

# Zipline — Style Reference > open meadow in morning light **Theme:** light Zipline mang phong cách bìa tạp chí thiên nhiên được tái hiện cho một startup giao hàng bằng drone: nền cream ấm áp (#f7f4e8) thay thế cho màu trắng SaaS lạnh lẽo thông thường, và toàn bộ nhịp điệu thị giác được định hình bởi fkScreamer — một display face cực nặng, cỡ lớn, đóng dấu những tuyên bố editorial khổng lồ lên trang. Nhiếp ảnh là phương tiện chính, được chụp ở tầm mắt với motion blur để cảnh vật tựa như đang chuyển động; UI là lớp thứ yếu chỉ xuất hiện với các đường viền đen mảnh, một điểm nhấn violet (#643aed) duy nhất cho card, và typography tiết chế. Các component có kích thước rộng rãi (radius 20px, padding trong 24px) nhưng không bao giờ mang tính trang trí — hệ thống đề cao không gian thở và sự tự tin tiết chế hơn là kiến trúc thông tin dày đặc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Meadow Cream | `#f7f4e8` | `--color-meadow-cream` | Page canvas, bề mặt card, body text inverse, đường viền button — màu off-white ấm áp tạo nên tính chất ngoài trời, giống giấy cho toàn bộ hệ thống thay vì màu trắng SaaS vô trùng | | Hillside Ink | `#000000` | `--color-hillside-ink` | Heading chính, body copy, nét icon, action button dạng fill, đường viền mảnh — màu đen tương phản tối đa giúp cream có không gian thở và headline fkScreamer tạo ấn tượng mạnh | | Stone Border | `#c6c3ba` | `--color-stone-border` | Divider mờ, bề mặt thứ cấp, đường viền tương phản thấp — màu xám ấm đứng sau Meadow Cream một bước, ngăn canvas trông phẳng | | Drone Violet | `#643aed` | `--color-drone-violet` | Nền card và feature block, bề mặt accent — nốt màu duy nhất trong một hệ thống gần như không màu; nổi bật trên nền cream, giúp các khối thu hút chú ý mà không phá vỡ không khí editorial |

# Klarna ES — Style Reference > midnight gallery with candy accents — a near-black plum void opens onto a warm bone-white floor scattered with vibrant product cards, anchored by oversized geometric type and pill-shaped controls. **Theme:** light Klarna's visual system is a confident dark-meets-light duality: a near-black plum (#0b051d) anchors brand presence across the hero and display type, set against a warm bone-white canvas (#f9f8f5) that keeps content sections approachable rather than clinical. Oversized custom display typography at 90px commands the hero, while compact body text at 16px stays quiet and legible. Playful accent colors — bubblegum pink, lavender, lime, deep plum — appear as small punctuation on cards and CTAs, never as structural or background elements. Generous rounded corners (16-32px on cards, pill-shaped buttons), near-zero shadows, and hairline borders create a premium, almost gallery-like feel where depth comes from color contrast and scale, not from elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Plum | `#0b051d` | `--color-midnight-plum` | Violet supporting accent for decorative details and low-frequency emphasis. | | Deep Plum | `#2c2242` | `--color-deep-plum` | Accent card background — a slightly lifted version of Midnight Plum, used for dark-themed product/feature cards to create tonal variation within the dark family | | Lavender Mist | `#aa89f2` | `--color-lavender-mist` | Violet supporting accent for decorative details and low-frequency emphasis | | Lime Sherbet | `#e6ffa9` | `--color-lime-sherbet` | Accent card background — high-key lime used as a rotating card surface color. High contrast against Midnight Plum text makes it ideal for dark-on-light product cards |

# Stripe — Style Reference > violet horizon at dawn — a single electric accent on a vast calm canvas, with light bleeding in from the right edge. **Theme:** light Stripe operates as a financial infrastructure for the internet: airy, confident, nearly typographic. The interface is a near-monochrome canvas of cool whites and deep navy ink, interrupted only by a single electric violet accent that makes every action feel switched on. Headlines are set in weight 300 with aggressive negative tracking — authority through restraint, not volume — and gradient text is the signature move for hero statements, flowing from electric violet through slate gray. Decorative gradients (violet → magenta → amber) appear as soft halos behind product art and hero edges, never as backgrounds for content. Surfaces are flat, corners stay at 4px, and elevation is reserved for floating product mockups rather than UI chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Iris | `#533afd` | `--color-electric-iris` | Primary action fill, active nav, brand focal point — the only saturated color allowed to carry weight against the white canvas | | Lumen Violet | `#8087ff` | `--color-lumen-violet` | Hover/active washes, secondary link state, icon accents, soft brand halos | | Midnight Ink | `#061b31` | `--color-midnight-ink` | Primary text, nav ink, dark CTA text — deep near-black blue, never pure black | | Steel | `#50617a` | `--color-steel` | Body text, secondary headings, default link color — the workhorse neutral that reads as typography, not decoration |

# Gocardless — Style Reference > warm cream broadsheet with acid yellow highlighter **Theme:** mixed GoCardless uses a warm, editorial fintech language: a cream paper-white canvas punctuated by one electric acid-yellow accent that acts as functional highlighter rather than decoration. The system lives almost entirely in achromatic warm tones — deep charcoal text on cream surfaces — with bold sans-serif typography that carries the weight of the design. Type is oversized and confident (up to 84px display, weight 700) sitting alongside a single whisper-light serif at 48px for contrast. Surfaces are flat with hairline borders instead of shadows, and every interactive element rounds to a generous 32px pill, giving the interface a soft, button-like tactility. The result feels like a well-designed financial newspaper: serious, warm, and surprisingly playful when the yellow punctuates a dark hero. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Acid Highlight | `#f1f252` | `--color-acid-highlight` | Primary action buttons, decorative accent shapes, heading highlights, nav emphasis — the single chromatic color in an otherwise achromatic system, used sparingly to draw the eye to CTAs and break visual monotony | | Charcoal Ink | `#1c1b18` | `--color-charcoal-ink` | Primary text, dark hero/section backgrounds, icon strokes, nav borders, high-contrast surfaces — the structural black of the system, warmer than pure black | | Warm Graphite | `#545048` | `--color-warm-graphite` | Secondary body text, muted labels, image borders, card borders, icon outlines — the mid-tone that bridges ink and paper | | Cream Paper | `#efece7` | `--color-cream-paper` | Dominant page canvas, card backgrounds on dark sections, nav borders, link borders — the warm off-white that defines the brand's lighter surfaces |

# Trunk — Style Reference > monochrome control room with one green signal light. A dark, technical, near-grayscale interface where the only color that matters is a single dot of green confirming the pipeline is alive. **Theme:** dark Trunk is a near-monochrome command center for CI reliability: deep matte-black canvas, hairline dividers in cool gray, and a single, almost-restraint palette of black-to-white neutrals. The interface feels like an engineer's terminal that grew up into a product — flat, dense, confident, with type that whispers at display sizes (weight 300, tight tracking) and snaps to attention at body sizes. The lone chromatic accent is a single green signal that appears once in the hero illustration as a ball rolling through pipes; the rest of the system speaks in grayscale. Components sit on the canvas with minimal elevation — borders and contrast do the work, not shadows. The page alternates between a light illustrated hero and dark product sections, but the product surface is the source of truth: black ground, gray borders, white type, no decorative gradients, no noise. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, primary background — the ground everything sits on | | Carbon | `#08090b` | `--color-carbon` | Elevated card surfaces, nav text, deep backgrounds one step above the canvas | | Graphite | `#232323` | `--color-graphite` | Card and button borders — the hairline skeleton that defines structure | | Slate Mist | `#89898d` | `--color-slate-mist` | Subtle background fills, muted surface overlays |

# Cycle — Style Reference > Xưởng gốm nhuốm mực với nhãn màu ngọc **Theme:** light Ngôn ngữ thị giác của Cycle mang phong cách một không gian làm việc analog ấm áp — nền canvas hơi ngả trắng, chữ đen như mực, và bảng màu ngọc đậm gợi cảm giác lọ mực cổ điển hơn là accent SaaS. Headline dùng Eudoxus Sans weight nặng với tracking dày, tạo cho mọi tiêu đề cảm giác có khối lượng vật lý; body và UI mặc định dùng Inter ở cỡ 14–16px thoải mái. Các component nằm trên hệ thống shadow rất mềm (warm gray độ trong suốt thấp) thay vì đường viền cứng, và border-radius 20px lớn khiến card trông như gạch men. Màu sắc mang tính chức năng và phân loại — mỗi product agent hoặc cụm tính năng có một màu đậm riêng (teal, violet, amber, maroon) và nền pha màu riêng, không bao giờ dùng gradient trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#171618` | `--color-ink-black` | Văn bản chính, icon, bề mặt tối — màu trung tính chủ đạo; không bao giờ dùng pure #000 cho text | | Pure Black | `#000000` | `--color-pure-black` | Màu trung tính hỗ trợ tối cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, modal panel, text trên nút tối — bề mặt sáng nhất trong hệ thống | | Warm Canvas | `#f7f7f7` | `--color-warm-canvas` | Nền trang, đường phân cách section nhẹ — màu trắng ngà tạo cảm giác analog ấm áp |

# Fruitful — Style Reference > Vườn thảo mộc bếp ngập nắng — bề mặt kem ấm, một điểm nhấn xanh đậm duy nhất, sự mềm mại của cây cỏ xuyên suốt. **Theme:** light Fruitful hoạt động như một dịch vụ tài chính bên bàn bếp ngập nắng: bề mặt kem ấm thay thế tông xám lạnh của fintech điển hình, và một màu xanh rừng đậm duy nhất đóng vai trò là giọng màu sắc duy nhất. Typography gánh trọng lượng — display size lớn, tracking dày (lên đến 91px) có cảm giác như được sắp chữ thủ công hơn là được tạo ra bằng máy, tạo nền tảng cho một giao diện vốn dĩ nhẹ nhàng. Các component bo tròn và mềm mại (12px trên hầu hết container, 80px trên pill), với ảnh chân dung thật của các Guide trong khung bo tròn lớn thay thế ảnh sản phẩm trừu tượng thường thấy trong ngành. Elevation gần như vô hình — một shadow đa lớp duy nhất dành cho card sâu nhất — và border mảnh và nhẹ nhàng. Nhịp điệu tổng thể là: whitespace rộng rãi, headline band căn giữa, card grid 2–3 cột, và bảng màu ấm-nhưng-sáng giúp trải nghiệm có cảm giác như lời khuyên từ bạn bè, không phải dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Floor | `#0b7443` | `--color-forest-floor` | Primary action buttons, active nav state, brand links — xanh đậm trên nền kem ấm tạo cảm giác tự tin nhưng không mang tính công ty | | Deep Moss | `#054f31` | `--color-deep-moss` | Green outline accent cho tag, divider, và cạnh UI được focus. Không dùng làm màu CTA chính | | Vivid Leaf | `#61bc76` | `--color-vivid-leaf` | Green decorative accent cho icon, mark, và chi tiết đồ họa nhỏ. Không dùng làm màu CTA chính | | Bright Sprout | `#039855` | `--color-bright-sprout` | Green outline accent cho tag, divider, và cạnh UI được focus |

# SoundCloud — Style Reference > concert darkroom with neon blue signal — a near-black gallery where album art and one cool accent color do all the work, and the chrome around them stays invisible. **Theme:** dark SoundCloud is a dark-stage media environment: near-black canvas (#121212) sets the venue, album artwork and photography carry the color, and a single cool blue (#699fff) punctuates links and interactive moments. The interface stays flat and almost shadowless — definition comes from inset hairlines and gray scale shifts rather than elevation, which keeps the focus on the visuals (artists, track artwork, lifestyle photography). Typography is a custom geometric sans (Söhne) with an unusually wide weight range including a 100-weight for whisper-thin display moments, paired with comfortable 8–16px padding and squared 4px corners that feel utilitarian and unfussy. Components are rectangular and content-dense — buttons are flat fills, cards are bare containers for cover art, inputs are minimal — letting the music content be the visual hero. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#121212` | `--color-obsidian` | Page background, hero overlay base, primary dark surface | | Graphite | `#303030` | `--color-graphite` | Elevated dark surfaces — input fields, card backgrounds over the dark canvas, nested panels | | Mid Gray | `#666666` | `--color-mid-gray` | Mid-tone dividers, secondary surface tier above Graphite | | Fog | `#999999` | `--color-fog` | Supporting neutral for secondary UI, dividers, and muted labels. |

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

# Aaply — Style Reference > Digital sketchpad with electric highlighter **Theme:** light Aaply reads as a digital sketchpad on a light gray canvas: everything is flat, everything is rounded, and electric yellow carries the energy while black anchors the structure. The headline itself behaves like a whiteboard — bold black type interrupted by colorful emoji and icon stickers, signaling that this is a tool for creative work. Surfaces float as soft white cards on a cool gray field with a faint dot-grid texture, never relying on shadows for depth. Brand color appears as generous fills (buttons, accent shapes, logo marks) rather than thin strokes or tinted backgrounds. The overall feeling is energetic but unpretentious — a working surface, not a gallery. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Highlighter Yellow | `#e6e51e` | `--color-highlighter-yellow` | Primary brand accent — logo mark, filled pill buttons, accent shapes inside product mockups, highlight washes on feature cards | | Annotation Red | `#f34646` | `--color-annotation-red` | Red supporting accent for decorative details and low-frequency emphasis | | Signal Blue | `#466cf3` | `--color-signal-blue` | Product mockup logos, icon accents, connector arrows inside the flow diagram — the cool counterweight to warm yellow | | Peach Wash | `#ff8562` | `--color-peach-wash` | Soft tinted background blocks behind product mockup clusters — warm secondary surface that softens the gray canvas |

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

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

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

# Browserbase — Style Reference > editorial broadsheet kết hợp data terminal — một chấm cam nóng duy nhất tô điểm trên nền gần như đơn sắc với headline GT Planar cỡ lớn, bề mặt card pastel mềm, và metadata mono nhỏ. **Theme:** light Browserbase mang phong cách của một developer tool hướng dữ liệu nhưng khoác lên mình lớp áo editorial broadsheet: một canvas gần như đơn sắc được neo bởi một màu cam nóng duy nhất, chỉ dùng để nhấn mạnh typography chứ không bao giờ dùng cho button. Giao diện giữ sự yên tĩnh với các bề mặt đen, trắng và trắng ngà, trong khi card và feature block giới thiệu các tông pastel mềm — tím oải hương nhạt, xanh da trời, kem — để nhóm nội dung mà không cần dùng shadow. Display headline bằng GT Planar cỡ lớn nằm cạnh label GT Standard Mono nhỏ gọn, tạo nhịp điệu của một tạp chí kỹ thuật: những câu khẳng định mạnh mẽ xen kẽ với metadata chính xác. Pill button đen đặc (filled) đảm nhận mọi hành động chính; màu cam được dành riêng cho highlight box bên trong headline và footer band, biến màu thương hiệu thành dấu câu chứ không phải tín hiệu điều hướng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, filled action buttons, card borders, dividers — xương sống cấu trúc của toàn bộ giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, icon fills trên nền tối | | Faint Slate | `#f8fafc` | `--color-faint-slate` | Màu trắng ngà nhẹ cho logo strip cards, nền panel phụ, tông màu xen kẽ cho section | | Lavender Mist | `#e2e9f3` | `--color-lavender-mist` | Bề mặt feature card và tông nền section — xám lạnh mềm giúp nhóm nội dung mà không tạo cảm giác nặng nề |