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

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

# Secure — Style Reference > European café conversation in soft daylight — a warm, editorial take on video calling where serif headlines read like a thoughtful magazine spread rather than a tech product page. **Theme:** light Whereby presents a warm, humanized SaaS aesthetic that feels more like a thoughtful European brand than a tech tool. The system is defined by a custom condensed serif (Roslindale) used for display headlines, giving every section an editorial, considered feel — paired with Inter for body and UI to keep the interface functional and calm. A single deep violet (#2b189b) carries brand intent on CTAs and active states, while a warm blush (#f8dbd5) provides section-level atmosphere without competing with content. The visual rhythm alternates between full-bleed blush hero, white content sections, and soft gray cards — creating a gentle cadence rather than a stark corporate grid. Photography is warm and lifestyle-driven (people on laptops in real homes), and the overall feeling is unhurried, private, and European. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, nav links, icons, body copy — near-absolute dominance means the system runs on contrast, not on color | | Paper White | `#ffffff` | `--color-paper-white` | Page background and card surfaces; the default canvas everything sits on | | Mist Gray | `#f4f4f4` | `--color-mist-gray` | Soft surface for secondary cards and section bands; lifts content off the white canvas without introducing a new hue | | Pale Blush | `#f8dbd5` | `--color-pale-blush` | Warm section background (hero, accent bands) — the signature warmth of the brand, not a tint of any other color |

# COS — Style Reference > phòng trưng bày thời trang tường trắng **Theme:** light COS sử dụng ngôn ngữ thị giác của một phòng trưng bày nghệ thuật đương đại: những bức tường trắng rộng lớn, ảnh đơn sắc khổ lớn, và typography không cản trở người mẫu. Giao diện gần như không màu — 97% achromatic — dùng màu gần đen (#080808) trên nền trắng tinh (#ffffff) làm điểm tương phản cấu trúc duy nhất, với một điểm đỏ duy nhất (#c80000) dành riêng làm điểm nhấn nhẹ nhàng cho những khoảnh khắc cần sự khẩn trương nhưng không ồn ào. Khoảng cách rộng rãi và mang phong cách editorial, section padding lên tới 135px, và các component hòa vào trang: đường viền siêu mảnh (hairline) màu #dadada, không đổ bóng, không gradient, không bo góc. Typography (SuisseIntl) là vật trang trí duy nhất — một họ grotesque duy nhất xuyên suốt từ micro-label 12px đến category statement 35px, tracking hơi dương để tạo cảm giác như bảng chỉ dẫn in ấn trong gallery. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Bề mặt nền sáng cho các nền phụ và phân cách section. Không dùng làm màu CTA chính | | Ink Black | `#080808` | `--color-ink-black` | Text chính, icon, link, navigation type, viền button, logo, footer text — mềm hơn đen tuyền để ảnh không bị chói khi đặt cạnh | | True Black | `#000000` | `--color-true-black` | Text overlay trên ảnh tối, body copy, label button — màu đen tuyền dành cho những khoảnh khắc typography tương phản cao nhất | | Mist Gray | `#dadada` | `--color-mist-gray` | Đường viền hairline, gạch chân input, divider nhẹ, outline trạng thái disabled — màu trung tính nhẹ nhất, chỉ thấy được nhờ những gì nó phân cách |

# Quo (formerly OpenPhone) — Style Reference > highlighter trên giấy báo — một nét vẽ chartreuse duy nhất trên nền layout editorial đen trắng tương phản mạnh. **Theme:** light Quo vận hành trên một hệ thống gần như đơn sắc triệt để — canvas trắng và trắng ngà, mực đen, viền siêu mảnh (hairline), gần như không có độ nâng (elevation) — với một điểm nhấn chartreuse duy nhất hoạt động như highlighter, chứ không phải vật trang trí. Headline có tỉ lệ editorial (Roobert lên đến 88px, tracking chặt -0.02em) trong khi UI vẫn gọn gàng với Inter, tạo ra nhịp điệu báo-in-gặp-app: display type lớn, tự tin bên trên các bề mặt chức năng dày đặc. Các component phẳng và hình chữ nhật với góc 10px; chiều sâu được thể hiện qua product screenshots và một soft shadow thay vì xếp chồng. Màu chartreuse (#edfc47) không bao giờ lấp đầy một button — nó làm nổi bật từ ngữ bên trong headline, tô icon, và thu hút ánh nhìn vào điểm nhấn, khiến cho primary action (một button đen đặc) trở thành mặc định thay vì một ngoại lệ sặc sỡ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Newsprint | `#f7f6f5` | `--color-newsprint` | Canvas trang và nền xung quanh — nền trắng ngà ấm áp làm dịu đi chữ đen tương phản mạnh | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, khung product screenshot, nền nav — lớp nâng cao, sạch sẽ phía trên canvas | | Press Black | `#000000` | `--color-press-black` | Action fill tương phản cao cho primary button trên bề mặt sáng. | | Midnight | `#0a0a0c` | `--color-midnight` | Nền announcement bar và dark band — gần như đen cho dải quảng cáo mỏng phía trên |

# Firecrawl — Style Reference > Technical blueprint on warm vellum. A developer tool that swaps cold gray for a single burning orange signal, sitting on near-white surfaces stitched together by hairline grid lines. **Theme:** light Firecrawl operates as a developer-first workspace: a pale near-white canvas overlaid with a fine grid of hairline borders, a single vivid orange accent (#ff4d00) that acts as functional punctuation, and typography set in Suisse — a humanist grotesque whose tight tracking and generous x-height keep everything feeling engineered rather than editorial. Components are flat and quiet: pill-shaped controls (999px radius), 8px card corners, and shadow stacks that are barely perceptible (black at 2-3% alpha) so that depth comes from layering and the orange border-glow, not from drop shadows. The orange is never decorative — it appears on the CTA, the fire icon, highlight words in headlines, badge dots, and tab underlines. Everything else is a calibrated gray scale, with #e5e7eb doing the work of a thousand borders and #262626 carrying the full weight of body and heading text at AAA contrast against the off-white surfaces. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#ff4d00` | `--color-ember-orange` | Primary action background, accent text, highlight words in headlines, fire icon, active tab underline, badge dots, link strokes — the system's only chromatic signal | | Ember Glow (light) | `#fcddcc` | `--color-ember-glow-light` | Soft orange-tinted shadow halos behind orange buttons and badges, giving them a warm bloom without raising elevation | | Ember Wash (deep) | `#febec2` | `--color-ember-wash-deep` | Secondary warm-tinted shadow wash, used for outer glow rings on highlighted cards and code windows | | Gridline | `#e5e7eb` | `--color-gridline` | Dominant hairline border, card outlines, input strokes, code window dividers, grid background lines — the structural skeleton of every screen |

# Privy — Style Reference > Editorial spread dạng ink-on-marble. Canvas đá cẩm thạch trắng, headline serif đen nén chặt, một dải violet duy nhất cắt ngang phía trên — sự kiềm chế thể hiện quyền lực. **Theme:** light Privy hoạt động như một hệ thống editorial crypto-fintech: một canvas gần như đơn sắc bị ngắt quãng bởi một dải thông báo violet rực rỡ và một nút gần như đen nặng. Typography gánh thương hiệu nhiều hơn màu sắc — một custom display face (ABC Favorit) đặt headline ở weight 400 với tracking cực kỳ chặt (-0.03em) và line-height rất chặt (1.03–1.15), mang lại cho những từ 56px+ một cảm giác nén, báo chí thay vì cảm giác tech-SaaS. Các bề mặt phẳng và tương phản cao: canvas trắng, mực gần đen (#010110) cho body và primary actions, dark mode được áp dụng có chọn lọc dưới dạng các dải full-bleed chứ không phải bề mặt có thể chuyển theme. Các component tối thiểu — pill buttons (100px radius), 8px-radius cards, 1px hairline borders — để custom serif và điểm nhấn violet đảm nhận phần nặng nhọc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas | `#ffffff` | `--color-canvas` | Nền trang, bề mặt card, input fields — màu trung tính chủ đạo mà mọi thứ khác đặt lên | | Obsidian Ink | `#010110` | `--color-obsidian-ink` | Text chính, nav borders, icon strokes, filled primary buttons, input borders — màu gần đen mang tính cấu trúc, đọc như đen thuần ở kích thước body | | Carbon | `#111117` | `--color-carbon` | Bề mặt card dark mode, dark panels nâng cao, nền tối thứ cấp | | Graphite | `#22222a` | `--color-graphite` | Cao nhất trong dark mode — nền feature card, overlaid panels |

# Postevand — Style Reference > editorial gallery on bone paper **Theme:** light Postevand operates as an editorial gallery on bone paper — a completely achromatic environment where the product IS the color. Every interface element reduces to black, white, and a single warm off-white (#f0f1ef), creating a Scandinavian exhibition aesthetic where photography and oversized typography carry all the visual weight. The system is aggressively minimal: hairline black rules divide the canvas into grid cells, buttons are black rectangles that feel like printed labels, and there are zero decorative gradients or chromatic accents. Typography is the only expressive tool — a single sans-serif (Nimbus Sans) speaks in whisper-weight headlines and tight tracking, with the brand wordmark scaled to fill the viewport. Components are skeletal: ghost inputs, black filled buttons that double as text, and cards that are just rectangles on the bone-colored surface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, filled button backgrounds, navigation rules — the structural line weight of the entire system | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, input fills, modal surfaces, inverted text on black buttons | | Bone | `#f0f1ef` | `--color-bone` | Card surfaces, secondary canvas tone — gives the white-on-white system a warm paper-like quality rather than sterile digital white | | Graphite | `#333333` | `--color-graphite` | Secondary borders, subdued text — used when pure black is too heavy for hairline elements |

# Nile Postgres — Style Reference > infra sunset on black velvet — a quiet command center where three pastel tiles glow in the dark **Theme:** dark Nile operates in the visual language of an infrastructure command center: a near-black canvas (#0e0e0e) with elevated surface cards (#1c1c1c) and a trio of pastel feature blocks — cyan #6fe2ff, amber #ffba6a, and lavender #d8d3ff — that function as colored tiles floating in deep space. Typography is geometric and precise: Aeonik at weights 400/500/600/700, with display sizes stretching to 96px on tight negative tracking, giving headlines an architectural, engineered feel. A signature sunset gradient (amber → lavender → cyan) threads through the hero wordmark and likely other moments, providing the only moment of continuous color flow. Components stay flat and quiet — hairline borders (#2f3336) over heavy elevation, pill buttons (9999px), rounded 16-20px cards, and no decorative shadows. The overall atmosphere is restrained infrastructure: developer-facing, confident through restraint rather than spectacle, with chromatic accents used sparingly as functional category tags rather than decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Deep Void | `#0e0e0e` | `--color-deep-void` | Page canvas, deepest surface — the black that everything floats on | | Carbon | `#1c1c1c` | `--color-carbon` | Card surfaces, elevated panels, testimonial tiles | | Graphite | `#2b2b2b` | `--color-graphite` | Mid-elevation surfaces, subtle layering above cards | | Smoke | `#3f3f3f` | `--color-smoke` | Borders, dividers on elevated elements, button outlines |

# Woven — Style Reference > Mực đen trên giấy da kem. Một editorial spread của nhà chưng cất, nơi nền cream ấm, một màu mực đen duy nhất và chữ in hoa giãn rộng tạo nên toàn bộ cấu trúc thị giác; ảnh sản phẩm mang lại mọi sắc màu. **Theme:** light Woven là một nhãn hiệu whisky mang phong cách editorial, gợi cảm giác giấy da trên máy in: nền cream ấm, một màu mực đen duy nhất cho mọi dòng chữ và đường viền mảnh (hairline border), cùng tracking rộng rãi giúp chữ thở như masthead của tạp chí xa xỉ. Toàn bộ giao diện là đơn sắc — không có điểm nhấn màu sắc — nên ảnh sản phẩm (chai hổ phách, nắp giấy bạc, chất lỏng) trở thành màu sắc duy nhất mắt người dùng thấy. Layout rộng rãi và căn giữa, với micro-copy điều hướng viết hoa xếp thành cột hẹp và tiêu đề phần được đặt cách xa nội dung bên dưới. Các component phẳng và tĩnh lặng: thẻ sản phẩm trắng với đường viền mảnh, text link có gạch chân, ghost controls, không có đổ bóng hay gradient — bề mặt cream chính là độ cao duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#eeede5` | `--color-parchment-cream` | Canvas trang, bề mặt footer, và nền chủ đạo — màu trắng ngà ấm tạo cảm giác editorial, giống giấy cho toàn bộ site | | Ink Black | `#232323` | `--color-ink-black` | Văn bản chính, mọi đường viền mảnh, mực footer, và màu gần đen tạo nên mọi đường nét cấu trúc trên trang | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ sản phẩm, nền section xen kẽ, và văn bản tương phản cao trên nền tối hoặc ảnh | | Iron Gray | `#4a4a4a` | `--color-iron-gray` | Body text phụ, đường viền nhẹ, và lớp văn bản trung tính nằm giữa mực chính và nền |

# Steep — Style Reference > Bình minh dịu nhẹ trên dashboard bằng đá cẩm thạch **Theme:** light Steep là một workspace phân tích dữ liệu ban ngày: một canvas gần như không màu với các bề mặt trắng và xám ấm, được sưởi ấm bởi một điểm nhấn màu rust-peach duy nhất, tiết chế, và được làm mềm mại bởi cặp serif/sans mang phong cách editorial hơn là doanh nghiệp. Hero là một bình minh rực ánh đào — một vùng sáng radial mềm mại phía sau headline Signifier hoành tráng và các thẻ sản phẩm nổi — sau đó màn hình chuyển sang một dashboard mát mẻ như đá cẩm thạch, nơi sản phẩm tự lên tiếng. Signifier đảm nhận toàn bộ trọng lượng display (một sự tương phản có chủ đích với body text Sohne mang tính tiện dụng), radii được làm rộng rãi (các thẻ 24px có cảm giác như gạch men, không phải cửa sổ), và toàn bộ bảng màu coi màu sắc như dấu câu: chrome là đơn sắc, data visualization chỉ có hai giọng màu (rust ấm và xanh lam mát), và một nút filled dark duy nhất làm tất cả việc kêu gọi hành động. Kết quả mang cảm giác gần với layout tạp chí hơn là một SaaS dashboard — tĩnh lặng, mang phong cách editorial, đầy tự tin. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#17191c` | `--color-ink` | Văn bản chính, nút CTA filled, bề mặt tối — gần như đen với một chút hơi ấm, kết hợp tự nhiên với điểm nhấn peach | | Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt thẻ, văn bản trên nút tối | | Fog | `#f7f7f8` | `--color-fog` | Canvas phụ và nền section, bề mặt sidebar | | Ash | `#4c4c4c` | `--color-ash` | Body text mờ, stroke phụ |

# Quicken — Style Reference > electric violet trên nền white marble **Theme:** mixed Design system của Quicken xoay quanh một màu electric violet duy nhất — #471cff rực rỡ — đóng vai trò là nguồn năng lượng cho mọi thành phần tương tác trên nền canvas trắng sạch. Cá tính thị giác mang phong cách fintech đầy tự tin: một custom geometric sans (Haffer) tạo giọng điệu với negative tracking dày đặc, càng thắt chặt hơn khi type lớn dần, tạo cảm giác đậm đặc và uy quyền mà không cần weight nặng. Các section màu violet đậm (#0f0733) xen kẽ với các dải trắng để tạo nhịp điệu, trong khi viền card màu lavender nhẹ (#dbd3ff, #bbc5fa) thay thế các divider xám thông thường và củng cố brand identity ở mọi cạnh. Các component thiên về bo tròn và hình pill: card dùng góc 16px, button kéo dài đến bán kính 400px, và shadow gần như vắng mặt — chiều sâu đến từ độ tương phản màu sắc và xử lý viền, không phải từ elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Voltage Violet | `#471cff` | `--color-voltage-violet` | Primary action buttons, nav items đang active, key links, brand emphasis — xung điện màu duy nhất của giao diện; mọi thứ khác đều phải nhường chỗ | | Deep Iris | `#0f0733` | `--color-deep-iris` | Nền section tối, hero canvas, text tương phản cao trên nền sáng — đối trọng màu nửa đêm neo giữ các dải tối xen kẽ | | Signal Red | `#eb0130` | `--color-signal-red` | Điểm nhấn khuyến mãi, chỉ báo giảm giá/khẩn cấp, stroke nổi bật — dùng có chừng mực để thu hút sự chú ý mà không cạnh tranh với violet chính | | Lilac Whisper | `#dbd3ff` | `--color-lilac-whisper` | Viền card và container mềm mại — cạnh violet tương phản thấp tạo thương hiệu cho đường viền mà không thêm trọng lượng thị giác |

# Travelperk — Style Reference > Vôi xanh trên giấy da ấm — xanh CTA điện tử trên nền kem giấy cũ, không đổ bóng, mọi thứ đều bo tròn ở chính xác 26px. **Theme:** light Perk tỏa ra năng lượng có kiểm soát — một trường đen-và-kem nạp đầy vôi xanh, nơi màu điện #beff50 xuyên thủng các bề mặt gần-đen và trắng ấm. Nền hero trắng ấm (#f5f5eb) mang cảm giác như giấy cũ bên cạnh vôi xanh điện tử, khiến bảng màu trở nên xúc giác hơn là kỹ thuật số. Một custom sans duy nhất, OTSono, đảm nhận mọi công việc ở mọi tỉ lệ từ label UI 10px đến glyph display 200px, với leading chặt 0.89-0.90 và tracking -0.03em ở kích thước display khiến các headline cỡ lớn trông nén chặt và có chủ đích. Radius 26px là ngôn ngữ hình khối chủ đạo của hệ thống — được áp dụng đồng nhất cho buttons, cards và image frames — tạo sự nhất quán bo tròn làm mềm bảng màu tương phản cao đen/vôi xanh/kem. Không đổ bóng, không gradient — các bề mặt chỉ khác nhau bởi giá trị nền, với dark cards #14140f, white cards #ffffff và warm-cream cards #f5f5eb đều dùng chung radius 26px và không có phép ẩn dụ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Lime | `#beff50` | `--color-electric-lime` | Primary CTA buttons, active UI chips, icon accent fills — điểm nhấn màu duy nhất bùng nổ trên mọi bề mặt (gần-đen, trắng và kem), tạo cảm giác cấp bách mà không cần báo động đỏ | | Near Black | `#14140f` | `--color-near-black` | Màu chữ chính, nền dark card, nav borders — màu đen ấm (không phải #000000 thuần) kết hợp với kem tạo cảm giác hơi analog | | Pure Black | `#000000` | `--color-pure-black` | Chữ tương phản cao, icon fills, button borders ở độ tương phản tối đa | | Pure White | `#ffffff` | `--color-pure-white` | Nền card, overlay surfaces, chữ button inverted |

# VSCO® — Style Reference > Monochrome gallery wall — a black-and-white photo exhibition where a single warm spotlight makes the next action glow. **Theme:** mixed VSCO's visual system reads as a monochrome photography gallery: a near-pure black-and-white canvas where a single warm amber accent punctuates action. Display type is narrow, geometric, and enormous — hero headlines push 89-98px, commanding attention through scale and tight tracking rather than through color or ornament. The palette stays disciplined: white sections frame black product bands, and full-bleed photography carries emotional weight that decoration never tries to. Buttons are pill-shaped and unflinching — black fills for default actions, amber for the single moment of warmth. The design is deliberately flat: no shadows, no gradients, no skeuomorphic depth. Elevation comes from surface contrast (white → black bands) and image bleed, not from layered depth effects. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Photo Black | `#000000` | `--color-photo-black` | Body text, filled buttons, dark section backgrounds, nav text, borders, icon strokes — the dominant structural color across all surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, hero background, footer background, text on dark surfaces, nav fill — the primary light surface | | Fog Gray | `#f2f2f2` | `--color-fog-gray` | Subtle alternate section backgrounds, hairline washes — barely-there surface differentiation | | Graphite | `#737373` | `--color-graphite` | Secondary text, footer link text, muted labels — the first step down from body black |

# Simon Riisnæs Emmen — Style Reference > Word-shaped confetti on white paper **Theme:** light A studio portfolio that treats the page as a poster: a white canvas, two oversized word-shaped color blocks (coral and chartreuse), and a list of projects pinned beneath hairline rules. The visual logic is anti-UI — there are no buttons, no cards, no component grids. Type does the heavy lifting at 67px and 173px, set tight (-0.015em) in a single humanist sans-serif. Every structural line is a 1px black border; every accent surface is a 720px-radius pill that functions as a typographic container rather than a button. The mood is editorial, restrained, and slightly playful — the bold color appears only when a word needs to become an object. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Press Black | `#000000` | `--color-press-black` | All text, hairlines, list dividers, and the 1px structural borders that organize the page | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas and the surface beneath the accent pills | | Coral Slip | `#fd8878` | `--color-coral-slip` | Primary accent pill surface — wraps the first word-block. Warm pink against black ink keeps it readable at 9:1 contrast | | Chartreuse Strike | `#e8fe04` | `--color-chartreuse-strike` | Secondary accent pill surface — wraps the second word-block. The highest-contrast fill on the page at 18.6:1 with black text |

# Viewport — Style Reference > Sticky notes mint trên bàn kính. Một không gian làm việc sạch sẽ, nơi một nút indigo rực rỡ là thứ duy nhất 'bật sáng' trên nền bề mặt teal nhạt và tường trắng. **Theme:** light Viewport sử dụng ngôn ngữ workspace sáng, thoáng: canvas trắng tinh, khoảng thở rộng rãi, và bề mặt mint-teal đặc trưng làm mềm các section mà không làm tối chúng. Toàn bộ câu chuyện màu sắc là một bộ đôi hai màu chặt chẽ — indigo rực rỡ cho các hành động và mint-teal cho bề mặt — được kết nối bởi một gradient cyan-to-violet chỉ xuất hiện trên primary CTA. Typography mang phong cách hình học, nhẹ nhàng: HK Sentiments Bold cho headline ở weight 700 nặng, Silka cho mọi thứ chức năng ở 14–18px, tracking được siết chặt trên toàn bộ scale. Các component trông như những tile mượt mà: border-radius 16px lớn trên card, 12px trên button, pill 100px cho tag, và shadow hoặc là màu xám nhạt gần như không thấy hoặc là cyan glow có thương hiệu — không bao giờ dùng mid-tone trung tính. Layout tập trung một headline duy nhất cho mỗi section, sau đó để ảnh chụp màn hình sản phẩm rộng làm nhiệm vụ chính, thường nổi trên bề mặt mint như sticky notes trên bàn kính. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Indigo Voltage | `linear-gradient(0deg, rgb(0,202,242) 0%, rgb(77,77,255) 100%)` | `--color-indigo-voltage` | Primary action buttons, active nav states, accent borders, heading highlights — màu thương hiệu duy nhất, khiến mọi phần tử tương tác đều không thể nhầm lẫn; Primary CTA button fill — gradient duy nhất trong hệ thống, chảy từ cyan sang indigo theo chiều dọc | | Mint Whisper | `radial-gradient(102% 82% at 50% 107.7%, rgba(0,202,242,0.3) 0%, rgb(241,243,245) 100%)` | `--color-mint-whisper` | Bề mặt section đặc trưng — thay thế màu xám cho feature panels, product wrappers, và comparison cards; một teal nhẹ đọc như một canvas có màu thay vì một card có màu; Radial hero wash — cyan nở ra thành xám trung tính tạo bầu không khí xung quanh cho các showcase section | | Cyan Pulse | `#00caf2` | `--color-cyan-pulse` | Điểm gốc gradient và link glow shadow; chỉ xuất hiện bên trong gradient button cyan→indigo và radial brand wash | | Cyan Mist | `#66dff7` | `--color-cyan-mist` | Cyan nhẹ dùng làm link-focus glow ring; cầu nối giữa Mint Whisper và các điểm cuối gradient |

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

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

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

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

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

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

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

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

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