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

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

# Passwords — Style Reference > Secure Airlock Behind Glass. A system that moves from the protective dark of an airlock to the bright clarity of a control room. **Theme:** mixed The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Brand Blue | `#145fe4` | `--color-brand-blue` | Primary CTAs, active links, focus indicators — the single point of interactive confirmation. | | Hero Fade | `linear-gradient(180deg, #1d1d21 25%, #145fe4 70%, #99beff 100%)` | `--color-hero-fade` | Hero background — creates a deep, atmospheric transition from dark space to brand blue. | | White | `#ffffff` | `--color-white` | Main content backgrounds, card surfaces, text on dark backgrounds. | | Onyx | `#000000` | `--color-onyx` | Primary text on light backgrounds. |

# 2.AG — Style Reference > Hiệu thuốc lâm sàng dưới ánh sáng teal — một thương hiệu wellness có tính đo lường, kê đơn, xử lý ảnh sản phẩm như một tiêu bản mẫu. **Theme:** light 2.AG mang phong cách hiệu thuốc lâm sàng kết hợp với thương hiệu khoa học hiện đại: nền gần trắng, bề mặt cấu trúc teal đậm, và một điểm nhấn mint tươi sáng kích hoạt các CTA và dữ liệu nổi bật. Inter Tight được thắt chặt để tạo giọng điệu dược phẩm — tracking hơi âm ở các kích thước display, tracking rộng rãi trên small caps cho danh sách thành phần và badge. Các component thiên về bo tròn lớn dạng pill (30–50px) cho button và bo góc mềm 12–20px trên card, báo hiệu một thương hiệu chính xác về liều lượng nhưng ấm áp trên cơ thể. Các section teal đậm (header Rapid Relief Cream, stat block) neo trang web vào thẩm quyền lâm sàng, trong khi dấu câu xanh lá tươi sáng tạo điểm nhấn năng lượng, gần giống như kệ thuốc. Layout chia đôi, thoáng rộng, tập trung vào sản phẩm: hero ghép một nửa editorial tối với một nửa sản phẩm sáng, các section xen kẽ trắng và teal, reviews/stats tạo thành lưới card dày đặc nhưng thoáng khí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Deep Teal | `#244d54` | `--color-deep-teal` | Màu cấu trúc chính — nền hero tối, bề mặt stat block, icon strokes, navigation wordmark, viền secondary button. Một teal gần xám đọc như mực hơn là đại dương, giúp định vị thương hiệu mà không trở nên lâm sàng-lạnh lẽo | | Mint Pulse | `#2ecea0` | `--color-mint-pulse` | Màu hành động chính — nền CTA dạng filled, badge fills, active dots, announcement bar, review star highlights. Xanh lá tươi sáng pha cyan, khiến mọi phần tử tương tác trông như được bật lên và mang tính sinh học | | Soft Teal | `#6dddbd` | `--color-soft-teal` | Teal text accent cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp lên màu CTA chính | | Carbon | `#000000` | `--color-carbon` | Body text, hairline borders, icon strokes, input borders. Màu trung tính cấu trúc chiếm ưu thế — hầu hết viền trên site là đen tuyền, tạo khung hình editorial sắc nét cho UI |

# 21 TSI — Style Reference > Crimson void, single silhouette — a high-fashion editorial spread where the UI dissolves into atmosphere. **Theme:** dark 21 TSI operates in the grammar of luxury fashion editorial: the interface itself is austere monochrome — white type, black canvas, hairline rules — while full-bleed crimson photography carries the entire emotional register. UI chrome is deliberately reduced to a single thin top divider, small uppercase wordmarks, and pill-bordered controls; nothing competes with the image. Typography is the structural skeleton: Saans at 12px for nav, then jumping to 106–245px for display — a near-vertical scale that makes individual headlines feel like runway installations rather than page headers. The system prefers silence over information density; every interactive element is a ghost, every frame is a photograph, and the only color that matters is whatever the lens captures. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Black Void | `#000000` | `--color-black-void` | Page canvas behind full-bleed imagery, button borders on inverted elements, deepest surface layer | | Paper White | `#ffffff` | `--color-paper-white` | Primary text, navigation labels, ghost-button borders, hairline rules, every UI stroke above imagery | | Smoke | `#4d4d4d` | `--color-smoke` | Muted secondary borders and dividers used when full white feels too hot against the photographic background | | Crimson Heat | `#b62b1a` | `--color-crimson-heat` | Dominant brand atmosphere from full-bleed editorial photography — the only chromatic note in the system, always carried by the image rather than applied to UI chrome |

# 70Materia — Style Reference > Bảng mẫu kiến trúc trên giấy trắng — UI là khung đỡ, không bao giờ là tác phẩm. **Theme:** light 70Materia là một khung trung tính được thiết kế để biến mất xung quanh nội dung — một thư viện vật liệu được tuyển chọn, nơi UI chrome được cố tình làm vô hình để các mẫu đá, terrazzo và bột màu chiếm ưu thế. Mọi thành phần kiểu chữ đều ở weight 400 trong một dòng sans-serif duy nhất (Matter), với một font monospace đồng hành (Matter Mono) dùng cho nhãn, navigation và các UI control nhỏ. Letter-spacing trên mono (0.02em–0.04em) cùng với chữ số dạng bảng (tabular numerals) mang lại cho giao diện chất bảng thông số kỹ thuật, bản vẽ kiến trúc — như thể trang web tự nó là một bảng mẫu kỹ thuật. Bảng màu hoàn toàn achromatic: chữ đen, bề mặt trắng, và một canvas xám ấm trung tính (#bababa) lùi về phía sau các bức ảnh. Button mỏng, vuông, và có viền; bề mặt được tô màu duy nhất là màu gần đen (#1e1e1e) dành cho một số hành động chọn lọc và footer. Không có màu nhấn nào trong hệ thống — toàn bộ năng lượng màu sắc được chuyển giao cho ảnh sản phẩm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Chữ chính, đường viền siêu mảnh, đường viền navigation — "mực" cấu trúc | | Bone | `#ffffff` | `--color-bone` | Điểm nhấn trang, bề mặt card, chữ trên nền tối, viền button | | Graphite | `#1e1e1e` | `--color-graphite` | Nền button được tô màu, bề mặt footer, khối UI tối — màu gần đen ấm thay thế đen tuyền cho các bề mặt không phải chữ | | Ash | `#bababa` | `--color-ash` | Canvas trang chính, divider mờ, tông bề mặt phụ |

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

# 8returns — Style Reference > Tia chớp xanh vôi trong phòng điều khiển nửa đêm — một điểm nhấn điện duy nhất đánh thức không gian làm việc đơn sắc vốn dĩ. **Theme:** mixed 8returns sử dụng ngôn ngữ thiết kế split-canvas: hero xanh navy gần như đen mở ra một nội thất trắng sáng, mang phong cách workspace. Bản sắc thị giác xoay quanh sự tương phản — một màu xanh vôi điện (#cfff69) là điểm nhấn màu duy nhất được phép phát sáng trên nền hero tối, trong khi các bề mặt sản phẩm trắng vẫn trung tính, rộng rãi và gần như mang tính phòng thí nghiệm. Các card nổi trên nền canvas thép-lạnh (#eef0f2) với góc bo 16px, và màu trang trí duy nhất bên trong các section trắng là cobalt iris (#6289ff) được dùng một cách tiết kiệm cho tag, icon và highlight chip. Typography là một geometric sans duy nhất (roobert) chạy trên một scale chặt chẽ, hơi positive-tracked từ caption 11px đến display 64px, không có serif, không mono, không script — một giọng nói duy nhất trên mọi bề mặt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Lime Volt | `#cfff69` | `--color-lime-volt` | Primary action — nút CTA dạng filled, gạch chân tab active, highlight chip. Màu sắc sống động duy nhất được phép trên nền hero tối; độ bão hòa gần như huỳnh quang của nó trên nền #051923 tạo cảm giác cấp bách mà không mang hơi hướng ấm áp hay hung hăng | | Cobalt Iris | `#6289ff` | `--color-cobalt-iris` | Điểm nhấn viền tím cho tag, divider và cạnh UI đang focus | | Midnight Abyss | `#051923` | `--color-midnight-abyss` | Primary text, nền hero, dark section canvas, text trên nút lime fill. Gần như đen với undertone teal mát — không phải đen tuyền, sắc xanh nhẹ giúp nó có cảm giác kỹ thuật hơn là phẳng | | Abyssal Teal | `#004853` | `--color-abyssal-teal` | Bề mặt card tối và gradient endpoint — màu cầu nối giữa Midnight Abyss và radial gradient teal đậm. Dùng cho elevated dark card và inset panel |

# AI for Business — Style Reference > Swiss editorial spread trên nền giấy lạnh **Theme:** light Dayos vận hành một hệ thống thị giác Swiss-editorial: nền canvas xám nhạt, display headline siêu đặc (ultra-condensed) cỡ lớn, body text grotesque tiết chế, và một giọng mono nhỏ xíu dành cho tag và micro-label. Trang hoạt động như một spread in ấn — mỗi section chỉ có một tuyên bố typography khổng lồ, set tight (line-height 0.90, tracking -3%), được hỗ trợ bởi khoảng trắng rộng rãi thay vì divider hay rule. Màu sắc gần như vắng bóng trong chrome và gần như bùng nổ trong 3D illustration; UI accent chỉ có một mint nhẹ và một vàng điện, được dùng như highlight wash một cách có chủ đích. Bề mặt phẳng — không shadow, không gradient — và dựa vào 5-level tonal stack (canvas → white card → mist → mint → yellow) để phân tách layer. Component nhỏ gọn và tự tin: nav bar hình pill màu trắng, button tối gần vuông, card bo tròn cỡ lớn. Cảm giác là sự tiết chế có tính toán, với một object vui tươi ở trung tâm trang. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas Mist | `#e5e7eb` | `--color-canvas-mist` | Nền trang, section canvas, hairline divider và UI border — mặt phẳng tĩnh lặng làm nền cho mọi display type | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, navigation pill background, elevated panel, button và nav text | | Surface Mist | `#f3f3f3` | `--color-surface-mist` | Secondary surface nhẹ, button hover wash, low-emphasis panel cách canvas một bước | | Ink Black | `#000000` | `--color-ink-black` | Heading chính, body text, icon fill trên nền sáng. Không dùng làm primary CTA color |

# ALSO — Style Reference > Tạp chí xe đạp trên giấy kem **Theme:** sáng ALSO mang phong cách một showcase sản phẩm editorial đầy tự tin — một tạp chí xe đạp được tái hiện cho web thay vì giao diện thương mại điện tử thông thường. Nền canvas kem ấm (#fcf7fa) bao phủ mọi bề mặt trong khi một màu tím điện duy nhất (#ac74fc) đảm nhận vai trò của cả một hệ thống màu sắc, xuất hiện trên link, border, highlight và phần fill của CTA chính. Typography cực kỳ chặt: ABCCameraPlainVariable đẩy negative tracking mạnh hơn khi kích thước lớn dần và line-height thu hẹp xuống 0.93 ở display, khiến ngay cả headline 60px cũng mang cảm giác kiến trúc thay vì ồn ào. Mono label in hoa (SerialC-Heavy) với positive tracking đóng vai trò là eyebrow, button text và section marker — nơi duy nhất hệ thống type được nới lỏng. Pill buttons (9999px) nằm trên hard shadow offset tím 2px không blur, trông như sticker ép lên giấy thay vì hiệu ứng elevation UI mềm. Các section full-bleed tím đảo ngược canvas sang chế độ accent mà không thay đổi typography, spacing logic hay component rules — cùng button, cùng shadow, cùng nhịp điệu, chỉ đảo màu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Paper | `#fcf7fa` | `--color-cream-paper` | Canvas trang, nền section mềm — off-white ấm với một chút hồng rất nhẹ, không bao giờ là trắng tinh | | Pure Card | `#ffffff` | `--color-pure-card` | Bề mặt card, panel nâng cao, button text trên fill tím | | Ash Mist | `#f1f1f1` | `--color-ash-mist` | Bề mặt cấp ba, divider nhạt, lớp nền mờ tinh tế | | Carbon Black | `#000000` | `--color-carbon-black` | Text chính, border mặc định, icon strokes — mực cấu trúc của hệ thống |

# ARTU — Style Reference > Gallery wall trên nền giấy trắng. ARTU xem trình duyệt như một bảo tàng trải rộng — ảnh sản phẩm cỡ lớn, đường kẻ mảnh (hairline rules), và một mảng xanh chanh duy nhất ở mép dưới để khép kín không gian. **Theme:** light ARTU hoạt động như một phòng trưng bày nội thất dưới dạng trình duyệt: một font neo-grotesque tùy chỉnh với một weight duy nhất, canvas trắng tinh, ảnh sản phẩm lấp đầy viewport, và hầu như không có UI chrome hiển thị. Sự kỷ luật ở đây là cực đoan — chỉ có một weight, một họ font, hai màu bề mặt, và khoảng trống âm (negative space) đảm nhận vai trò mà shadow và gradient thường làm ở nơi khác. Màu sắc được sử dụng một cách phẫu thuật: màu xanh chanh có độ bão hòa cao (#d7ff66) chỉ xuất hiện ở band footer như một tín hiệu kết thúc, trong khi màu đỏ thô (#ff1313) xuất hiện dưới dạng đường viền mảnh và nét icon — cố tình không đạt độ tương phản, nó hoạt động như nhịp điệu đồ họa, không phải thông tin. Kết quả mang phong cách giống một trang sách nghệ thuật hơn là một trang thương mại: sản phẩm là bố cục, bố cục là khoảng trắng, và UI là một đường đen mảnh của thanh navigation viết hoa ở mép trên. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, khung ảnh — toàn bộ site nằm trên nền trắng tinh | | Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, đường viền mảnh, navigation, gạch chân link, khung ảnh — màu cấu trúc duy nhất | | Terminal Lime | `#d7ff66` | `--color-terminal-lime` | Band footer, mảng highlight bề mặt, điểm nhấn kết thúc — màu xanh bão hòa cao báo hiệu ranh giới trang, giống như mép màu đóng một bức tường gallery | | Signal Red | `#ff1313` | `--color-signal-red` | Nét viền trang trí, đường viền icon, đường kẻ mảnh trong bố cục editorial — được dùng ở độ tương phản dưới ngưỡng đọc được, như dấu câu đồ họa, không bao giờ là body text |

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

# Aaron Poe & Co — Style Reference > Quiet white gallery — coral pink whispers float in vast considered silence, framed only by pill-shaped nav and tightly-tracked type. **Theme:** light Aaron Poe & Co operates as a curator's white room — a creative director's portfolio that strips interface to typography, whitespace, and a single accent. The canvas is pure white; the type stack pairs Geist (tightly tracked, negative letter-spacing) with system fonts for body copy; and a warm coral pink (#ea587d) surfaces only on heading text and hairline borders, never as a filled button. Components feel like gallery placards: a floating pill-shaped nav, centered bio blocks, and subtle 1px inset borders replacing the need for drop shadows. The rhythm is editorial — vast negative space punctuated by compressed, confident type and one whisper of color. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Coral Rose | `#ea587d` | `--color-coral-rose` | Accent for heading text, hairline borders, and active-state markers — the single chromatic signal in an otherwise achromatic system | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, and inverted backgrounds | | Cloud | `#f2f2f2` | `--color-cloud` | Pill nav background, subtle surface elevation, and inset border shadows | | Bone | `#d9d8d4` | `--color-bone` | Warm-toned secondary surface tint for alternating bands |

# Abel — Style Reference > Cream paper, black ink, breathing room — an editorial lookbook that smells of perfume. **Theme:** light Abel operates as an editorial fragrance house: one warm cream note against a near-total monochrome canvas, with photography doing the chromatic work. The interface is deliberately quiet — near-black ink on white paper, whisper-light sans-serif headlines (weight 300), and a monospaced voice for all functional microcopy that gives every label, button, and link the cadence of a typeset colophon. Spacing is generous and sectional, letting full-bleed photographic plates alternate with white product cards; the result reads like a printed lookbook rather than a retail UI. The single non-neutral (#f6eada, a warm parchment cream) appears as a subtle surface tint and accent border — never as fill or decoration — so the visual system stays austere while the imagery carries all the color temperature. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#030303` | `--color-ink-black` | Primary text, hairlines, ghost button borders, product card outlines, icon strokes — the dominant structural color; sets all copy and dividers against white and cream surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, product card backgrounds, inverse text on black buttons and dark imagery | | Parchment Cream | `#f6eada` | `--color-parchment-cream` | Warm accent surface, hairline borders, subtle highlight washes — the only chromatic note in the system; appears sparingly as tint, never as bold fill, to echo natural ingredient warmth without competing with photography | | Ash Gray | `#cccccc` | `--color-ash-gray` | Disabled/placeholder surfaces, secondary background panels behind product imagery |

# Ableton — Style Reference > Editorial workshop trên nền trắng tinh. Giấy trắng, chữ Futura đen, một vệt bút xanh cho tương tác, ảnh cắt sát mép như layout tạp chí. **Theme:** light Hệ thống visual của Ableton mang phong cách bảng editorial của một studio đang hoạt động: canvas trắng tinh, hình học Futura PT, và một màu xanh dương tự tin đánh dấu mọi văn bản tương tác. Site ưu tiên chữ và gần như phẳng một cách triệt để — không đổ bóng, không bo góc, không chrome trang trí — để ảnh chụp nhạc công, phần cứng và phần mềm tự tạo cảm xúc. Màu sắc xuất hiện như những dấu chấm câu chức năng nhỏ: xanh dương rực cho link, cùng tag fill san hô và xanh ngọc để phân loại nội dung mà không làm mềm layout. Navigation là một thanh mỏng phía trên với tên sản phẩm mang phong cách monospace. Tổng thể gợi cảm giác một cuốn technical manual được dàn trang đẹp — mật độ thông tin do typography và hình ảnh đảm nhiệm, không phải do container design. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Văn bản chính, nav label, logo, icon stroke, và mọi heading — thiết lập toàn bộ hệ thống phân cấp thông tin | | Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, và text overlay trên hero — background mặc định cho hầu hết mọi màn hình | | Fog | `#eeeeee` | `--color-fog` | Form input nhẹ, bề mặt tag, và nền panel phụ tĩnh lặng — neutral gần như vô hình | | Signal Blue | `#0000ff` | `--color-signal-blue` | Accent màu xanh tím cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |

# Aboard — Style Reference > pastel paper notebook on a white desk **Theme:** light Aboard là một workspace people-ops nhẹ nhàng, thoáng đãng sống trên nền gần trắng với một màu xanh dương đậm duy nhất đóng vai trò là brand color và bảng năm màu pastel làm bề mặt card để tạo cảm giác ấm áp. Typography dựa trên system-ui với tracking nén: headline rất to, rất tight (64px ở -0.64px) nằm trên body text xám trung tính, khiến trang đọc mang phong cách editorial tự tin thay vì marketing ồn ào. Các component mềm mại và bo tròn — card radius 24px, pill buttons 99px, 10px trên các element nhỏ — và elevation được thay thế bằng các lớp màu pastel thay vì đổ bóng, giữ cho interface mang cảm giác như giấy stationery hơn là kính. Emoji trang trí được inline trong copy và pastel product-mockup cards mang đến cho thương hiệu tính cách vui tươi, gần như notebook. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas | `#fafafa` | `--color-canvas` | Nền trang, surface mặc định — tạo nền off-white, giống giấy cho toàn bộ hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Product UI panels, card surfaces, các khối nội dung nâng cao — giữ nội dung sắc nét trên nền canvas off-white | | Ink | `#262626` | `--color-ink` | Heading chính và body text — màu đen làm mềm, đọc ấm áp thay vì gắt | | Graphite | `#757577` | `--color-graphite` | Secondary text, caption, nav labels, muted borders — màu xám hàng ngày cho supporting copy |

# Aboard — Style Reference > Editorial field journal under industrial light **Theme:** mixed Aboard reads as an editorial dossier drafted inside a working warehouse: Tobias serif headlines at weight 300 float over Atkinson Hyperlegible Mono body copy, a pairing that treats the page as a technical specification rather than a marketing surface. The system alternates full-bleed dark documentary bands with warm off-white reading sections, the rhythm controlled by a single vivid ember-orange that punctuates CTAs, icons, and active states against an otherwise achromatic palette. Components are deliberately thin: pill-shaped CTAs, translucent floating nav, hairline borders at 1px, almost no shadow or elevation — the interface recedes so the photography and the prose can carry the page. The warmth of the neutrals (bone white, linen, warm graphite) keeps the dark sections from feeling cold, while the orange never decorates — it always signals an action or a live status. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#de4c00` | `--color-ember-orange` | Primary CTAs, active nav items, icon fills, link accents — the only chromatic color in the UI, it acts as a power-switch indicator against the muted neutrals | | Soft Ember | `#efa680` | `--color-soft-ember` | Hover-state borders, subdued accent outlines, tag strokes — a desaturated echo of Ember Orange for quieter accents | | Bone White | `#fffefb` | `--color-bone-white` | Page canvas on light sections, text color on dark/image sections | | Linen | `#f3f2ee` | `--color-linen` | Warm secondary surface, elevated card backgrounds, subtle shadow tint |

# Acceptandproceed — Style Reference > editorial broadsheet trên nền giấy ấm **Theme:** light Accept & Proceed xem trình duyệt như một tờ broadsheet biên tập: một sans-serif một weight ở chín kích cỡ, nền canvas kem ấm, và một bảng màu gần như hoàn toàn không màu — để nhiếp ảnh và layout đảm nhận vai trò biểu cảm. Hệ thống phân cấp được xây dựng hoàn toàn từ kích thước — weight 400 được dùng cho mọi thứ, từ caption 8px đến display 72px, vì vậy độ tương phản đến từ bước nhảy kích thước, không phải độ đậm. Bề mặt mang tông giấy ấm: #f9f7f3 là trang giấy, #ecebe7 là nền button, và chrome cấu trúc duy nhất là đường viền đen 1px mảnh. Các component được thiết kế một cách nhẹ nhàng có chủ đích — pill buttons với border-radius 100px, badge nhỏ với góc 3.4px, card radius 8px — để hình ảnh dự án và nội dung editorial dài mang tải trọng của trang. Hệ thống mang cảm giác như đang lật giở một cuốn niên giám thiết kế được typeset kỹ lưỡng, chứ không phải lướt một dashboard SaaS. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Text chính, đường viền mảnh, icon strokes, badge outlines, card outlines — màu đường kẻ cấu trúc duy nhất trong hệ thống | | Paper Warm | `#f9f7f3` | `--color-paper-warm` | Canvas trang, bề mặt card, nền body — lớp nền kem ấm cho mọi nội dung | | Bone | `#ecebe7` | `--color-bone` | Bề mặt nổi, nền pill button, nền input, nền link — ấm hơn/tối hơn canvas một bước để tạo chiều sâu xúc giác mà không cần shadow | | White | `#ffffff` | `--color-white` | Màu headline trên overlay hero tối, highlight wash trên card, accent bề mặt đảo ngược |

# Active Theory — Style Reference > mái vòm đài thiên văn lúc nửa đêm — một thiết bị duy nhất phát sáng trong khoảng không, xung quanh là những micro-label bảng điều khiển **Theme:** dark Giao diện của Active Theory là một vực thẳm: canvas đen gần như tuyệt đối bị nuốt chửng bởi một artifact 3D phát sáng duy nhất, với chrome được thu gọn thành những label chữ hoa mỏng như thì thầm và những đường kẻ tóc (hairline rules). Ngôn ngữ thị giác vay mượn từ bản vẽ kiến trúc và vật lý hạt — một typeface hình học monospaced (nbarchitekt) gắn nhãn cho mọi phần tử giao diện, trong khi một serif (Times) xử lý những đoạn body text hiếm hoi, tạo ra sự căng thẳng giữa độ chính xác kỹ thuật và sự ấm áp biên tập. Các phần tử UI tồn tại ở vùng ngoại vi: một pill nav góc trên bên phải được kết nối bằng một đường kẻ, một cookie consent nhỏ neo ở góc dưới bên phải. Màu sắc gần như hoàn toàn không có sắc độ; điểm nhấn màu duy nhất là một màu tím nửa đêm bão hòa thấp (midnight violet) được sử dụng rất tiết kiệm trên affordance accept của cookie, không bao giờ vươn tới vị thế hero hay marketing. Hệ thống thiết kế về cơ bản nói rằng: bản thân tác phẩm 3D CHÍNH LÀ giao diện, và mọi phần tử chrome nên phục tùng nó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Canvas trang, phông nền modal, nền trường hạt | | Pure White | `#ffffff` | `--color-pure-white` | Văn bản chính, label nav, chữ trên nền tối | | Graphite Border | `#4d4d4d` | `--color-graphite-border` | Đường kẻ tóc (hairline dividers), đường viền cấu trúc mờ | | Steel Border | `#808080` | `--color-steel-border` | Viền nút outlined, đường chia thứ cấp |

# Ada — Style Reference > Phòng trưng bày ánh sáng ban ngày với điểm nhấn pastel — một căn phông nền trắng nhạt yên tĩnh, nơi bốn màu sắc quý được phép lên tiếng, và mọi thứ khác đều giữ tông than chì. **Theme:** light Ada hoạt động như một phòng trưng bày ánh sáng ban ngày: một canvas trắng nhạt với khoảng thở rộng rãi, một kiểu chữ humanist sans-serif duy nhất đảm nhận toàn bộ giọng nói, và các màu nhấn tông quý chỉ xuất hiện như những dấu chấm câu có chủ đích. Hệ thống thị giác kháng cự lại sự trang trí — không gradient trên button, không drop shadow trên card, không chrome cạnh tranh với nội dung. Thay vào đó, bản sắc đến từ một bảng màu nhỏ gọn, kỷ luật (xanh rừng, xanh periwinkle, hồng kẹo, vàng bơ) được dùng làm thanh nhấn cạnh trái trên stat card và làm pill button đặc. Hệ thống phân cấp được xây dựng qua tương phản kích thước và khoảng trắng, không phải khối lượng màu sắc. Các bề mặt nằm trên nền #f9f9f9 ấm áp với các card #ffffff nổi phía trên. Điểm xác định của hero là một nền ảnh được làm mờ mạnh, tạo cảm giác như nhìn qua kính mờ — nó thêm chiều sâu và độ ấm mà không cạnh tranh với headline trắng mang phong cách editorial typography. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Inkstone | `#0a0b0c` | `--color-inkstone` | Văn bản chính, body copy, heading, đường viền mảnh, bề mặt UI tối — xương sống gần như đen của toàn bộ giao diện, dùng ở tỷ lệ lớn cho đường viền và typography | | Bone | `#f9f9f9` | `--color-bone` | Canvas trang, nền section, lớp bề mặt tinh tế bên dưới card — một tông trắng nhạt ấm áp làm mềm độ tương phản của giao diện | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, panel nổi, container chat widget, input — lớp sáng nhất trong stack bề mặt | | Ash | `#d8d8d8` | `--color-ash` | Fill SVG trang trí, viền input bị vô hiệu hóa, divider trung tính |

# Adaline — Style Reference > botanical journal at dawn **Theme:** light Adaline renders as a contemplative workspace: a warm cream canvas draped over a painted landscape, with near-black forest text and one deep warm-brown action color. Typography stays geometric and humanist (Akkurat) with an experimental monospace (Fragment Mono) for micro-labels — never decorative, always functional. Surfaces layer as subtle sage tints, borders are hairline thin, and components whisper rather than shout: ghost buttons, outlined nav, 20px pill radii, almost zero elevation. The whole system behaves like a botanical journal — quiet, organic, deliberate — where the only saturated moment is the primary action and the only sharp edge is the cursor. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fbfdf6` | `--color-cream-paper` | Page canvas, card surfaces, inverted text on dark fills | | Botanical Ink | `#0a1d08` | `--color-botanical-ink` | Primary headings, body text, outlined/ghost button borders, nav text | | Bark Brown | `#31200b` | `--color-bark-brown` | Decorative fill, secondary text tone, SVG illustration depth | | Warm Loam | `#4a3212` | `--color-warm-loam` | Primary action button fill — the single chromatic CTA, deep earthy brown against cream |

# Adam Lippes — Style Reference > Monochrome editorial atelier trên nền cream paper — một trang Vogue nơi layout grid, chứ không phải bảng màu, là vật trang trí duy nhất. **Theme:** light Adam Lippes là một monochrome editorial atelier được xây dựng trên nền cream paper (#fefcf8) với typography Optima và ảnh thời trang full-bleed. Giao diện được kiềm chế có chủ đích: không điểm nhấn màu, không gradient trang trí, gần như không có bo góc — tấm ảnh chính là thiết kế. Hình ảnh sản phẩm mang toàn bộ trọng lượng thị giác bên trong một grid năm cột dày đặc; UI chrome lùi về sau những đường kẻ hairline và nav chữ hoa có tracking. Nút bấm là các khối đen tuyền hoặc outline ghost trên nền canvas ấm áp, và sự chuyển tông duy nhất giữa các trang đến từ chính nhiếp ảnh, không bao giờ đến từ UI chroma. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Canvas | `#fefcf8` | `--color-bone-canvas` | Nền trang chính — off-white ấm áp, toàn bộ site nằm trên canvas giống giấy này thay vì trắng tinh | | Press White | `#ffffff` | `--color-press-white` | Bề mặt thay thế cho product card, input field và overlay sắc nét cần tách biệt khỏi Bone Canvas | | Onyx Black | `#000000` | `--color-onyx-black` | Text chính, đường kẻ hairline, nút action đã fill, icon stroke và viền nav. Mực cấu trúc của hệ thống | | Graphite | `#403f3e` | `--color-graphite` | Text phụ và icon color — một màu đen đã làm mềm cho copy ít quan trọng hơn và viền outline button |

# Adaptive ML — Style Reference > Ấn phẩm in trên giấy kem ấm. Một phong cách editorial monochrome đầy tự tin, nơi màu sắc duy nhất là artwork trên các card và điểm trang trí duy nhất là serif. **Theme:** light Adaptive ML sử dụng ngôn ngữ editorial-monochrome ấm áp: mực gần đen (#272421) trên nền giấy kem trắng ấm (#ffffff, #edebe8), với headline serif cổ điển (Egyptienne F) mang phong cách typography ấn phẩm in hơn là web display text. Giao diện được thiết kế tối giản có chủ đích — không có điểm nhấn màu, không panel gradient trang trí, không badge màu — để mắt người xem bị thu hút vào một trong hai thứ: headline editorial, hoặc artwork gradient trừu tượng sống động trên các content card, vốn là màu sắc duy nhất trong hệ thống. Các component phẳng và đầy tự tin: dark filled buttons, hairline borders, 9px radii, và một shadow 12px gần như vô hình dành riêng cho elevated cards. Nhịp điệu tổng thể rộng rãi và phân chia theo section, với mono labels dạng uppercase có tracking rộng (Diatype Mono) đóng vai trò như 'typographic furniture' lặng lẽ bên cạnh serif display text uyển chuyển. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Ink | `#272421` | `--color-ink` | Primary text, filled buttons, dark inverse surfaces, hairlines, logo mark. Token tối nhất trong hệ thống — một màu gần đen ấm, đọc như mực in, không phải đen tuyền | | Paper Warm | `#edebe8` | `--color-paper-warm` | Hairline borders, dividers, input outlines, và card edges trên light surfaces. Không dùng làm màu CTA chính | | Paper Cool | `#e3e3e2` | `--color-paper-cool` | Tertiary surface tint, alternating row backgrounds, inset wells. Hơi lạnh hơn Paper Warm — dùng tiết kiệm để tạo chiều sâu phân lớp mà không cần màu sắc | | Mist | `#eeeeed` | `--color-mist` | Subtle dividers, low-contrast borders, badge fill backgrounds, hover wash trên neutral surfaces. Sáng hơn Paper Warm một bậc, dùng cho hairline detail work |

# Adcker — Style Reference > Poster brutalism khổng lồ trên nền giấy bảo tàng ấm áp **Theme:** light Adcker vận hành như một khối nguyên khối thuần typography: một nền cream ấm, một mực gần-đen, và display type lớn đến mức trở thành kiến trúc. Toàn bộ giao diện xoay quanh sự căng thẳng giữa headline editorial cỡ lớn và metadata siêu nhẹ, không có điểm nhấn màu sắc nào làm giảm tác động. Mọi quyết định thị giác đều mang tính editorial — trải nghiệm này giống như trang mở đầu của một tạp chí in, không phải một sản phẩm phần mềm. Độ bão hòa màu 0% là có chủ đích: màu sắc sẽ làm loãng đi sự uy quyền mà quy mô typography thuần túy đã tạo ra. Yếu tố phi chữ duy nhất phá vỡ không gian đơn sắc là một bức ảnh chân dung tự nhiên được nhúng trực tiếp vào bên trong headline, xem hình ảnh như dấu câu chứ không phải trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#191919` | `--color-ink-black` | Toàn bộ text, headline, border, link color — màu foreground duy nhất trong toàn bộ hệ thống. Gần-đen thay vì đen tuyền giúp thêm độ ấm, hài hòa với nền cream | | Bone Canvas | `#efedea` | `--color-bone-canvas` | Nền trang, bề mặt card, nav bar — nền trắng ngà ấm giúp mực gần-đen đọc với độ tương phản cao (15.1:1 AAA) mà không cảm thấy khô cứng hay lâm sàng | | Stone Veil | `#e3e1de` | `--color-stone-veil` | Biến thể bề mặt nhẹ so với Bone Canvas — dùng hạn chế cho panel phụ hoặc nền section để tạo chiều sâu mà không đưa màu sắc vào |

# Adora — Style Reference > impressionist museum behind frosted glass **Theme:** light Adora wraps a precise product-analytics interface inside an impressionist gallery — white cards and crisp dashboards sit on canvas-like backgrounds of swirling oil-paint color, with hand-drawn squiggle underlines giving headings a notebook-becoming-poster feel. The color story is white-surface discipline broken by a single vivid violet for action and a palette of pastel accents (sky blue, lime, bubblegum pink, hot magenta) that are used as small confetti, not washes. Shapes are confidently rounded: cards and the product frame are very generous (40-64px), badges and the floating nav pill are stadium-rounded, buttons are gently rounded (8-12px). Typography pairs a custom display face (PolySans) at heavy weights for headlines against Plus Jakarta Sans at 400-500 for UI, with universal -0.02em tracking pulling the whole system tight and contemporary. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Violet | `#592eff` | `--color-electric-violet` | Primary action background, filled CTA buttons, active link borders, selected badge strokes — the single saturated chromatic that drives every conversion and active state | | Midnight Plum | `#21164c` | `--color-midnight-plum` | Headline text color, display-weight typography — deep violet-ink that reads as near-black but carries a violet undertone matching the primary | | Obsidian Charcoal | `#353241` | `--color-obsidian-charcoal` | Body text, paragraph copy, list items, icon strokes, default borders and dividers — the workhorse neutral that defines almost all interface line work | | Slate Smoke | `#5f5f69` | `--color-slate-smoke` | Secondary body text, muted helper copy, supporting metadata |