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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# 7shifts — Style Reference > không gian quầy bar ấm áp với điểm nhấn phấn neon — một quầy bar sáng sủa nơi nút indigo, gạch chân vẽ tay màu cam, và vệt highlight xanh chanh nổi bật trên bề mặt trắng tinh và kem ấm, thỉnh thoảng có các dải đen làm cho màu sắc phát sáng. **Theme:** light 7shifts là một canvas SaaS nhẹ nhàng, thoáng đãng với một màu indigo mạnh mẽ duy nhất làm call-to-action và một nhóm nhỏ các điểm nhấn ấm áp đảm nhận phần tạo cá tính. Trang web mang phong cách như một quầy bar sạch sẽ: bề mặt trắng, panel phụ kem ấm, các biến thể card pastel mềm mại, và đôi khi là dải đen full-bleed làm mọi thứ xung quanh trở nên sáng hơn. Màu cam là điểm nhấn đặc trưng — nó gạch chân các từ hero bằng nét vẽ tay, tràn ngập nền feature, và đánh dấu nội dung tab — trong khi xanh chanh đóng vai trò highlight text trong các phần tối. Các component rộng rãi và bo tròn (pill buttons, card 20px, hero plates 40px) với nhịp điệu dọc gọn nhẹ. Font script duy nhất, Nanum Pen Script, chỉ xuất hiện như một điểm nhấn cá tính bên dưới hero copy và không bao giờ dùng cho body hay UI controls. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Indigo Bolt | `#4570ff` | `--color-indigo-bolt` | Màu hành động violet cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi quan trọng. | | Ember Orange | `#ff6808` | `--color-ember-orange` | Điểm nhấn cam cho viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ | | Lime Highlighter | `#c6ff94` | `--color-lime-highlighter` | Điểm nhấn text xanh cho links, tags, và các cụm từ ngắn được nhấn mạnh. | | Lavender Mist | `#ebdcff` | `--color-lavender-mist` | Bề mặt card mềm, nền section nhẹ nhàng — biến thể pastel để phá vỡ canvas trắng mà không thêm nhiễu |

# Paradigm — Style Reference > midnight lab notebook opening to daylight — màn hình tối đầu tiên mở ra một trang scroll sáng, giàu dữ liệu. **Theme:** light Paradigm mở đầu trong bầu không khí đài quan sát tối — canvas gần như đen, display type serif trắng, và một bảng dữ liệu trực tiếp đã chứng minh sản phẩm — sau đó tan dần vào giao diện nghiên cứu ban ngày với giấy trắng, bề mặt pha màu nhẹ, và pastel status badges. Điểm nhấn đặc trưng là Atacama VAR serif ở 44–54px với tracking -0.06em, kết hợp với PP Neue Montreal — font chữ làm việc chính cho toàn bộ UI ở 14–22px với tabular numerals. Màu sắc được dùng có chừng mực: một màu xanh dương rực rỡ (#0a33ff) làm điểm nhấn thương hiệu qua active states và step indicators, trạng thái được thể hiện qua sáu cặp badge dark-ink + pastel-wash (forest, sapphire, mulberry, amber, crimson, plum), phần còn lại của hệ thống sống trong các gam xám ấm và lạnh được tinh chỉnh kỹ lưỡng. Các component trông như dụng cụ nghiên cứu — góc 4px, viền mảnh (hairline borders), hiệu ứng white inner-glow đặc trưng trên các product mockup cards, và gần như không có drop shadows. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Ink | `#080b12` | `--color-midnight-ink` | Primary text, hero background, card borders, table rules — màu gần như đen có tính cấu trúc, neo cả vùng tối và sáng | | Paper | `#ffffff` | `--color-paper` | Page background, card surfaces, inverted button fill trong dark hero | | Fog | `#f6f7f8` | `--color-fog` | Bề mặt nâng nhẹ cho secondary panels, table zebra rows, input wells | | Pearl | `#edeef1` | `--color-pearl` | Nền của quiet buttons, lớp phủ màu cho các thành phần lồng nhau |

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

# Paste — Style Reference > Đèn lồng hổ phách trên đá cẩm thạch trắng — logo gradient ấm áp của thương hiệu lơ lửng trong khoảng trắng rộng lớn, như một ô cửa sổ có ánh đèn duy nhất trong tòa nhà phủ đầy tuyết. **Theme:** light Mang cảm giác ánh nắng xuyên qua một gallery tối giản — khoảng trắng rộng lớn với typography đen và một điểm nhấn màu hổ phách ấm áp thu hút ánh nhìn như chiếc đèn lồng trong tuyết. Trang web bị chi phối bởi trắng tinh (#ffffff) và gần trắng (#f5f5f7) với chữ gần đen (#101010), tạo độ tương phản cực cao. system-ui ở kích thước display (54-80px) với letter-spacing chặt (-0.013em) và weight 400-700 mang lại cho headline cảm giác native-OS, củng cố bản sắc Mac-utility. Gradient logo màu hổ phách-cam (rgb(240,100,19) → rgb(254,171,48)) là yếu tố ấm áp duy nhất trên một canvas đơn sắc, khiến nó trở nên vô cùng thu hút. CTA button xanh (#0088ff) với border-radius 100px pill là lời kêu gọi hành động duy nhất — thương hiệu ấm, CTA mát, nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Amber Flame | `linear-gradient(0deg, rgb(240, 100, 19) -29.375%, rgb(254, 171, 48) 100%)` | `--color-amber-flame` | Logo, brand mark, gradient start — màu cam ấm áp neo giữ toàn bộ bản sắc như yếu tố màu sắc duy nhất trên canvas đơn sắc | | Honey Glow | `#feab30` | `--color-honey-glow` | Gradient end của logo, highlight ấm áp — nâng hổ phách lên vùng vàng, xuất hiện trong section headings và brand accents | | Signal Blue | `#0088ff` | `--color-signal-blue` | Primary CTA buttons, interactive links — xanh mát đối lập với thương hiệu hổ phách ấm, tạo sự tương phản nhiệt độ có chủ đích, phân tách bản sắc khỏi hành động | | Bright Blue | `#1c95ff` | `--color-bright-blue` | Hover/active state cho CTA xanh, secondary interactive highlights |

# Replay — Style Reference > editorial red-pen trên nền blueprint trắng. Một công cụ debug nói nhẹ nhàng và đánh dấu mục tiêu bằng màu coral. **Theme:** light Replay mang phong cách thương hiệu developer-tool nghiêm túc nhưng khoác lên mình vẻ tự tin trầm lặng: một canvas gần như hoàn toàn không màu, nơi chữ than và bề mặt trắng đảm nhận 95% công việc, và một màu coral-đỏ bão hòa duy nhất đóng vai trò như dấu chấm câu phẫu thuật trên headline, button và trạng thái nav active. Động tác typography đặc trưng là phân tách màu nhấn mạnh bên trong display headline — một dòng tối màu #111827 nối tiếp ngay sau đó bằng một dòng màu đỏ thương hiệu — khiến giọng văn mang chất editorial và có chính kiến thay vì kiểu doanh nghiệp. Các component vẫn nhẹ nhàng: pill buttons, đường viền mảnh như sợi tóc, card nổi trên bóng đổ mềm, và hầu như không có gradient trang trí nào ngoài một banner mỏng phía trên. Mọi bề mặt đều có lý do tồn tại; màu sắc được phân bổ như một tài nguyên, không phải vật trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Ink | `#111827` | `--color-midnight-ink` | Body text chính, nền headline, nav text — foreground mặc định trên mọi bề mặt | | Slate 600 | `#374151` | `--color-slate-600` | Secondary text, viền button dạng outlined/ghost, list markers | | Graphite 800 | `#1f2937` | `--color-graphite-800` | Surface fill tối cho secondary buttons, dark cards, reverse sections | | Steel 500 | `#6b7280` | `--color-steel-500` | Helper text mờ, secondary link text, nav không active |

# Modern Business Intelligence — Style Reference > Sunlit greenhouse editorial **Theme:** light Mode sử dụng ngôn ngữ editorial phong cách thực vật: nền sage nhạt (#eef2e3) thay thế cho màu trắng SaaS vô trùng thông thường, và một điểm nhấn chartreuse duy nhất (#c8f169) tạo điểm nhấn cho các hành động với một pop sắc nét, gần như huỳnh quang. Font headline là một serif tùy chỉnh (Grenette) ở kích thước 56–96px với negative tracking mạnh — các chữ có cảm giác được kéo chặt, gần như condensed, và đọc giống như bìa tạp chí hơn là dashboard. Chiều sâu đến từ một stack màu ba lớp (sage → forest green → chartreuse) thay vì đổ bóng; các bề mặt nằm phẳng cạnh nhau và dựa vào tương phản hue để tạo hierarchy. Các phần tử tương tác sử dụng border-radius nhỏ 4px trong khi card và bề mặt lớn dùng 16px, tạo nên một ngôn ngữ hình học nhất quán. Mood tự tin, ấm áp và trí tuệ — BI không có sự lạnh lẽo của doanh nghiệp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pale Sage | `#eef2e3` | `--color-pale-sage` | Canvas trang, bề mặt card sáng, nền eyebrow, mat ảnh hero | | Paper White | `#fcfcfc` | `--color-paper-white` | Bề mặt card nâng cao, nền nav, modal, footer | | Ink Black | `#000000` | `--color-ink-black` | Text chính, stroke icon, hairline border, đường viền ghost button | | Charcoal | `#242423` | `--color-charcoal` | Text phụ và fill icon — mềm hơn đen thuần cho các phần tử UI muted |

# Moonli — Style Reference > Vôi điện trên nền trắng — một căn phòng xanh rực rỡ được khoét ra từ không gian đơn sắc, đóng khung bởi những góc bo tròn rộng rãi. **Theme:** light Moonli vận hành trên chủ nghĩa tối giản màu sắc triệt để: canvas trắng, chữ đen, và một điểm nhấn vôi điện duy nhất xuất hiện như một khối không gian lớn thay vì rải rác trên các UI element. Màu vôi (#b8ff65) hoạt động như một căn phòng, không phải một highlight — nó tràn ngập toàn bộ hero và xuất hiện lại ở nền section, không bao giờ dùng làm button fill hay icon tint. Mọi thứ khác đều là đen thuần trên nền trắng, neo giữ bởi border-radius rộng 30-40px giúp làm mềm độ tương phản đơn sắc gay gắt. DM Sans đảm nhận toàn bộ hệ thống typography với dải weight rộng, letter-spacing dày đặc co lại mạnh ở kích thước display (-0.05em ở 58px). Minh họa nét đen trên bề mặt xanh lá thêm cá tính và sự ấm áp mà không phá vỡ kỷ luật hai màu. Kết quả mang phong cách tự tin, gần như poster — như một vật thể sáng duy nhất trong gallery toàn tường trắng. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lime Voltage | `#b8ff65` | `--color-lime-voltage` | Nền section mang tính không khí, hero block — giọng màu duy nhất của hệ thống, dùng ở quy mô full-section thay vì làm UI accent | | Obsidian | `#000000` | `--color-obsidian` | Text chính, tất cả border, tất cả icon, scroll-indicator fill, logo mark | | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nav element fills | | Fog White | `#f3f3f3` | `--color-fog-white` | Bề mặt card phụ, nền section xen kẽ |

# Aira — Style Reference > Sunday broadsheet lúc nửa đêm — ảnh ấm áp, chữ in mực, UI thì thầm. **Theme:** light Aira sử dụng ngôn ngữ editorial-monochrome: không khí nhiếp ảnh ấm áp trên nền UI gần như không màu, xây dựng từ một tấm canvas off-white duy nhất và chữ ink-black. Điểm nhấn đặc trưng là serif display face (Gestura) kết hợp với Inter cho mọi chức năng — một serif headline ở 56-72px khiến một AI tool fintech trông như tờ báo kinh doanh Chủ nhật, không phải dashboard. Giao diện giữ phong cách giấy tờ yên tĩnh: pill buttons, hairline borders, một dark surface mỗi section, và hầu như không có chromatic accent — một hero ảnh ấm áp duy nhất mang toàn bộ nhiệt độ cảm xúc. Màu sắc chỉ xuất hiện như sự vắng mặt của màu sắc, nên contrast (trắng → gần đen) và chất liệu (soft shadow, gentle radius) làm công việc nặng nhọc mà một bảng màu SaaS thông thường sẽ đảm nhận. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Bone White | `#fafafb` | `--color-bone-white` | Canvas chính, bề mặt card, chữ button, input fills | | Graphite Ink | `#2c2c2b` | `--color-graphite-ink` | Border chính, hairline dividers, link underlines, heading accents | | Deep Coal | `#1f1f1f` | `--color-deep-coal` | Action fill trung tính độ tương phản cao cho primary buttons trên nền sáng | | Obsidian | `#111111` | `--color-obsidian` | Body và heading text ở weight tối đa, dark hero overlays, icon strokes |

# Neuralink — Style Reference > obsidian laboratory with a single color synapse — a black void where only light, shadow, and one thin spectrum of color speak **Theme:** mixed Neuralink operates as a near-pure monochrome system: a near-black canvas, a white surface, and one off-white band, with no chromatic brand color at all. A single spectrum gradient — pink to violet — appears only as the announcement bar and as photo-card overlays, acting as the system's sole injection of warmth and life. Typography carries almost all of the brand voice: a geometric sans at weight 300 for display sizes with aggressively tight tracking (-0.165em at 48px) that gives headlines a compressed, engineered density. Pill-shaped controls (80px radius) sit against full-bleed black and white blocks, creating a cinematic, almost editorial rhythm where the only color signal is a faint synaptic glow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page hero canvas, primary text, section dividers, dark-mode blocks. The dominant structural color — used 931 times as backgrounds, borders, and text. Creates a void-like base that makes white type and the single gradient feel electric by contrast | | Paper | `#ffffff` | `--color-paper` | Content section background, card surfaces, ghost-button text and border. The light counterpart to Obsidian — every content section sits on Paper, and outlined/ghost buttons invert to Paper stroke on Obsidian backgrounds | | Ash | `#f5f5f5` | `--color-ash` | Soft off-white surface for the footer and secondary bands. Separates Paper from true white when a gentler contrast is needed — used for the meet-our-pioneers section background and the footer | | Fog | `#bababa` | `--color-fog` | Muted nav text and low-emphasis dividers. A desaturated mid-gray for inactive navigation labels and subtle hairline borders where black would feel too heavy |