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

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

# Officevibe — Style Reference > Editorial journal trên giấy kem ấm. Hãy nghĩ về một bài luận HR sâu sắc được thể hiện dưới dạng sản phẩm — serif italics thì thầm xuyên qua giao diện xanh hiện đại. **Theme:** light Workleap Officevibe nói bằng giọng editorial điềm tĩnh: một canvas kem ấm, khoảng trắng rộng rãi, và display type serif mang lại cho sản phẩm cảm giác văn học, gần như viết tay đầy uy tín. Bảng màu xoay quanh hai tông xanh — một xanh navy đậm như mực cho heading, thẻ tối, và trọng lượng editorial, và một xanh electric rực rỡ dành riêng cho button và các điểm nhấn tương tác. Bề mặt mềm mại như giấy với đường viền kem thay vì xám; các góc được bo tròn nhẹ nhàng (thẻ 16px, pill button 100px). Những từ serif in nghiêng nằm giữa headline sans-serif ("not paying attention", "Everything") là điểm nhấn đặc trưng: chúng phá vỡ giọng SaaS doanh nghiệp và khiến giao diện giống như một tạp chí được biên tập kỹ lưỡng. Mật độ thoải mái; widget chat được neo ở cuối mỗi màn hình là một phần của bản sắc, không phải thứ thêm vào sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Navy | `#0c1754` | `--color-ink-navy` | Display heading, thẻ tính năng tối, nền footer, body text trên canvas sáng — màu có trọng lượng editorial, dùng ở bất cứ đâu trang cần cảm giác được cân nhắc thay vì trang trí | | Electric Cobalt | `#2545ff` | `--color-electric-cobalt` | Điểm nhấn tím phụ 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 | | Charcoal | `#171417` | `--color-charcoal` | Body text và heading chính, nav text, icon stroke trên bề mặt sáng | | Warm Canvas | `#f9f8f6` | `--color-warm-canvas` | Nền trang, bề mặt footer, thẻ fill mềm, nền input — màu trắng kem ấm thống nhất |

# Fingerprint — Style Reference > warm CRT terminal on cream paper — a fraud-detection lab notebook where code blocks are the main characters **Theme:** light Fingerprint reads as a developer tool that has been deliberately warmed up: a cream-paper canvas (#fafaf8) sits beneath sharp black type, a single vivid orange (#f35b22) does the work of a highlighter on key nouns, and the rest of the accent palette is borrowed from an IDE — teal, blue, pink, green as code-syntax tokens. Surfaces are flat with hairline borders; elevation is whispered, not announced. The hero alternates between editorial typography (Inter, tight tracking) and a dark CRT-style terminal panel, establishing a two-mode visual rhythm: light prose, dark code. Orange never decorates — it annotates, turning one word per headline into a call-to-action, and turning the primary button into the only filled rectangle on the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fafaf8` | `--color-cream-paper` | Page canvas and primary surface — warm off-white that softens the otherwise stark black/orange system | | Card White | `#ffffff` | `--color-card-white` | Elevated card surfaces and input backgrounds — sits one step above the cream canvas | | Pebble Gray | `#f0f0ef` | `--color-pebble-gray` | Secondary surface for section bands, subtle backgrounds behind grouped content | | Linen Border | `#e4e5e1` | `--color-linen-border` | Hairline dividers, card borders, and table separators — the dominant structural line color |

# Varo Bank — Style Reference > sao kê ngân hàng neon trên tờ ghi chú dán — display type đậm nén chặt in trên giấy bìa màu sáng, được giữ với nhau bằng đường viền đen mảnh **Theme:** light Varo Bank mang phong cách một series poster tài chính tiêu dùng tự tin in trên giấy bìa màu: canvas trắng tinh bị cắt ngang bởi các dải màu full-bleed tím, xanh chanh, san hô và kem, mỗi dải mang display type siêu nén dày. Hệ thống thị giác cố tình ồn ào — National 2 Compressed ở 96–147px dẫn dắt mọi headline với leading gần như bằng 0, khiến chữ hoạt động như một khối đồ họa thay vì văn xuôi. Một màu tím bão hòa duy nhất (#8c58d0) là màu tương tác thực sự duy nhất; mọi thứ chromatic khác đều là bầu không khí trang trí, và các neutral duy nhất có giá trị là đen thật và trắng thật. Border là hairline và tối, radius đồng nhất 4px, và shadow không tồn tại — chiều sâu đến từ sự va chạm màu phẳng, không phải độ cao. Toàn bộ sản phẩm mang cảm giác Gen-Z: vui tươi, hướng đến kiến thức tài chính, và đồ họa quyết đoán mà không mang vẻ doanh nghiệp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Varo Violet | `#8c58d0` | `--color-varo-violet` | Primary action buttons, active nav, brand logo — màu tím vừa bão hòa duy nhất cung cấp năng lượng cho mọi trạng thái tương tác | | Deep Plum | `#42185f` | `--color-deep-plum` | Dark accent surfaces, chữ đậm trên thẻ sáng, nền dải tối full-bleed — gần như đen với undertone tím | | Lilac Mist | `#cdb0fa` | `--color-lilac-mist` | Fill tím nhạt cho trạng thái surface đã chọn/phụ, tag backgrounds | | Coral Ember | `#ed6c52` | `--color-coral-ember` | Decorative section fills, icon highlights, dotted ticker text — dấu câu chromatic ấm phá vỡ sự thống trị của tím |

# Bpowell — Style Reference > type as architecture on white plaster **Theme:** mixed Một portfolio chỉ gồm chữ, để typography đảm nhận mọi vai trò — không hình ảnh, không trang trí, không chrome. Trang đọc như một danh sách kiến trúc: những label nhỏ được set dày đặc đóng vai trò đánh dấu section, sau đó tên dự án cỡ lớn xếp chồng lên nhau như những khối bê tông trên tường. Hai bề mặt xen kẽ — canvas trắng sáng cho tác phẩm design, canvas gần đen đảo ngược cho film — và sự tương phản giữa chúng là nhịp điệu thị giác duy nhất. Layout bất đối xứng triệt để: một cột duy nhất gồm text cỡ lớn neo bên trái, gutter rộng rãi của negative space, và top nav trải dài trên toàn bộ chiều rộng viewport thay vì dồn vào một góc. Hệ thống không có button, không có card, không có border theo nghĩa truyền thống — thứ gần nhất với border là một đường kẻ mảnh 1px màu đen, và ngay cả đường đó cũng được dùng rất hạn chế. Kết quả mang cảm giác như đọc một credits sequence in trên tường gallery: khắc khổ, có chủ đích, và đầy tự tin rằng chính những cái tên đã mang đủ sức nặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Plaster White | `#ffffff` | `--color-plaster-white` | Canvas chính cho các section sáng; màu text trên section tối; đường kẻ mảnh (hairline) trên section tối | | Carbon | `#111111` | `--color-carbon` | Nền trang cho section tối/film; body text chính trên section sáng; fill cấu trúc cho tên dự án dạng typography | | Ink Black | `#000000` | `--color-ink-black` | Text phụ và fill trên section sáng; dùng khi cần độ tương phản tối đa trên canvas trắng | | Graphite | `#2b2b2b` | `--color-graphite` | Border tối nhẹ cho các đường kẻ ít quan trọng trên bề mặt sáng |

# Fonts In Use — Style Reference > White gallery wall for letterforms **Theme:** light Fonts In Use operates as a typographic museum: an editorial archive where the interface is deliberately invisible so the letterforms being catalogued can speak. Every surface is white or near-white, every stroke is black, and the only typographic personality comes from the custom BentonSansRE UI sans and RelayCond display — never from decoration. The 5-column thumbnail grid functions as the page's primary content unit, each card pairing a photographic evidence image with a live sample of the typeface it documents (Baste, Proxima Nova, Zilla Slab…). Density is compact and newspaper-like rather than spacious-SaaS: tight vertical rhythm, 5px gaps, hairline 2px radii on controls, no shadows, no gradients, no accent color. The whole system reads as a printed specimen sheet rendered for the screen — restrained, factual, anti-decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all borders, logo wordmark, nav links, search input border — the sole ink color in the entire system | | Paper | `#ffffff` | `--color-paper` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Bone | `#f0f0f0` | `--color-bone` | Alternate row striping, search input fill, subtle list separators — a barely-there warm gray for differentiation | | Mist | `#dddddd` | `--color-mist` | Input borders, subtle dividers — the lightest functional border tone |

# Ease Health — Style Reference > Sunlit clinic on white linen. A muted, light-first healthcare surface where one deep forest green does the work of accent, action, and trust, framed by sage washes, dusty-blue panels, and whisper-weight serif headlines. **Theme:** light Ease Health uses a clinical-calm language: warm sage and dusty blue surfaces on a near-white canvas, with a single deep forest green carrying every action, icon, and heading accent. The page breathes — generous whitespace, no shadows, thin gray hairlines, and pill-shaped tags that feel like medical labels rather than UI chrome. Typography pairs a delicate serif (Faire Octave) for headline moments with a quiet grotesque (Suisseintl) for everything operational, both set in weight 300 with tight negative tracking so type whispers rather than shouts. Color is rationed: most surfaces are achromatic or barely tinted, and the dark green appears only where the user should act, look, or trust. Components feel light, flat, and confident — the system reads as a calm, premium clinic, not a noisy SaaS dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Forest Ink | `#0f3e17` | `--color-forest-ink` | Primary action buttons, heading text, brand icons, footer, active states — the only saturated color in the system; deep enough to read as serious clinical authority against the pale surfaces | | Sage Wash | `#b1dbb8` | `--color-sage-wash` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color | | Mist Blue | `#b6ced5` | `--color-mist-blue` | Hero panel background, secondary surface tint, pill badge background — the cool counterpoint to sage, used for product/showcase bands | | Mint Veil | `#cfe7d3` | `--color-mint-veil` | Soft card surface tint, subtle highlight wash |

# Contractbook — Style Reference > "Warm cream atelier với dấu chấm câu màu tím điện và một tia sáng vàng" — một không gian làm việc hợp đồng thân thiện với designer, mang cảm giác như studio Scandinavia hơn là văn phòng luật. **Theme:** light Contractbook hoạt động như một editorial SaaS canvas: nền linen-cream ấm áp (#f0f0ec) tràn ngập các card bề mặt trắng off-white, được neo bởi một màu tím điện duy nhất (#1009f6) làm chủ đạo cho các action chính và bầu không khí hero hình học. Màu vàng mặt trời (#ffba09) đóng vai trò accent thứ cấp ấm áp cho điểm entry 'Request a demo' hấp dẫn nhất, tạo ra hệ thống phân cấp hai nút, nơi màu vàng đại diện cho sự gần gũi và màu tím đại diện cho doanh nghiệp. Hệ thống kết hợp display type weight 700 tự tin ở 40-48px với body text weight 400 thoáng đãng, sử dụng geometric sans tùy chỉnh (Abcwhyte) mang lại cho giao diện cảm giác như một ấn phẩm thiết kế thay vì một dashboard điển hình. Các hình minh họa vẽ tay vui nhộn (mắt, bảng phi tiêu, nguệch ngoạc) trong bảng màu thương hiệu truyền tải sự nhân văn giữa các khối chức năng. Các component ưa chuộng bán kính rộng 24-40px, pill controls (999px) và độ nâng tối thiểu — bản thân bề mặt cream làm công việc mà shadow thường làm ở nơi khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Violet | `#1009f6` | `--color-electric-violet` | Màu thương hiệu chính — nền hero, panel hình học, nút action chính, navigation đang hoạt động — xanh tím đậm vừa đáng tin cậy vừa độc đáo trên nền cream ấm | | Solar Yellow | `#ffba09` | `--color-solar-yellow` | Màu action vàng cho nút filled, trạng thái navigation được chọn và các thời điểm chuyển đổi tập trung. | | Ink Black | `#1a1a1a` | `--color-ink-black` | Văn bản chính, đường viền icon, nút tối, border mặc định — gần như đen với một chút ấm áp để hài hòa với bề mặt cream | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, input fills, văn bản trên nền tối — lớp nâng cao nổi trên nền cream |

# GitHub — Style Reference > violet aurora trên vũ trụ developer — bề mặt nửa đêm sâu thẳm được thắp sáng bởi những vệt sáng tím lơ lửng và chữ trắng tĩnh lặng **Theme:** dark GitHub vận hành trong vũ trụ dark-mode, nơi những canvas gần-đen sâu thẳm (#0d1117) lùi lại phía sau các vệt sáng radial tím và xanh dương lơ lửng — trông giống aurora hơn là UI. Giao diện gần như hoàn toàn achromatic — chữ trắng và trắng-lạnh trên các bề mặt tối nhiều lớp — với màu sắc xuất hiện như những dấu câu chức năng thưa thớt: xanh da trời nhạt cho link, mint tươi cho thành công/code, và một emerald CTA duy nhất neo giữ chuyển đổi. Typography là custom (Mona Sans) với dải weight rộng bất thường và negative tracking mạnh ở display sizes, khiến headline cỡ lớn trông nén chặt và đầy tự tin. Các component phẳng và có elevation thấp — 6px radii trên controls, 24px trên cards — với border và surface lift tinh tế đảm nhận công việc cấu trúc mà shadow thường làm ở nơi khác. Nhịp điệu tổng thể rộng rãi, mang phong cách editorial và tĩnh lặng, với 3D character illustrations và gradient halos là những khoảnh khắc duy nhất của sự phấn khích thị giác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Canvas | `#0d1117` | `--color-midnight-canvas` | Nền trang, canvas chính — signature near-black của GitHub với một chút cool tint hầu như không nhận thấy | | Abyss Surface | `#090d0a` | `--color-abyss-surface` | Overlay sâu nhất, button base, nền modal — tối hơn canvas một bậc để tạo độ tương phản | | Void Black | `#000000` | `--color-void-black` | Input fields, nav fills, lớp tối tuyệt đối — dùng khi cần pure black để phân tách | | Elevated Surface | `#151a22` | `--color-elevated-surface` | Button fills, bề mặt card phụ — cao hơn canvas một bậc cho các phần tử tương tác |

# Coinbase Spain — Style Reference > Digital Trust, Blueprinted. Một hệ thống được xây dựng dựa trên sự rõ ràng của bản thiết kế kiến trúc, được thổi hồn bởi một nơ-ron xanh điện tử duy nhất. **Theme:** light Design system này tạo nên cảm giác tin cậy mang tính kỹ thuật số, dựa trên bảng màu tối giản, tương phản cao. Nền tảng chính xác gồm trắng tinh (#ffffff) và gần đen (#0a0b0d) tạo ra môi trường rõ ràng và tập trung. Toàn bộ cá tính của hệ thống được truyền tải qua một màu xanh điện tử duy nhất — `Coinbase Blue` (#0052ff) — chỉ dành riêng cho các hành động chính và brand marks, hoạt động như một hướng dẫn đầy tự tin. Bộ font tùy chỉnh (Coinbase Display, Sans, Text) mang đến giọng điệu typography độc đáo và nhất quán trên mọi tỷ lệ. Chiều sâu đạt được không phải bằng shadow mà bằng các khối màu full-width đậm nét, xen kẽ giữa các phần trắng sáng và xanh đậm, tạo nhịp điệu kiến trúc sạch sẽ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Coinbase Blue | `#0052ff` | `--color-coinbase-blue` | CTA chính, logo, trạng thái active — định danh thương hiệu cốt lõi. | | Interactive Blue | `#578bfa` | `--color-interactive-blue` | Link phụ và các thành phần tương tác. | | Pure White | `#ffffff` | `--color-pure-white` | Nền trang chính, text trên nền tối. | | Midnight | `#0a0b0d` | `--color-midnight` | Nền section tối, text chính. |

# LUNCH — Style Reference > velvet runway on warm parchment **Theme:** mixed LUNCH CONCEPT mang phong cách một ấn phẩm thời trang in ấn được đưa lên web: một hero ảnh tối full-bleed với brand wordmark xuất hiện dưới dạng chữ chrome 3D cỡ lớn, tiếp theo là một product gallery nhẹ nhàng, giống catalogue trên nền warm parchment. Trang web luân phiên giữa sự đối đầu điện ảnh và sự kiềm chế tĩnh lặng — hero tấn công thị giác, phần body thì thì thầm. Một màu lavender nhẹ duy nhất chỉ xuất hiện trên announcement bar, trạng thái 'Sold Out' và footer, đóng vai trò như một dấu chấm câu thương hiệu hơn là một tiếng hét. Typography chủ yếu là một custom sans-serif duy nhất (Good Sans) ở kích thước khiêm tốn, với hero wordmark là khoảnh khắc typographic đặc sắc duy nhất. Tương tác chỉ là text-link: không có filled buttons, không gradient, không chrome trang trí ngoài 3D logotype ở hero. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lilac Veil | `#b8aad0` | `--color-lilac-veil` | Lớp phủ tím nhạt cho highlight backgrounds, decorative bands và soft emphasis phía sau nội dung | | Ink Black | `#000000` | `--color-ink-black` | Tất cả body text, navigation text, link borders, card borders và badge borders — đường nét cấu trúc của toàn bộ giao diện | | Warm Parchment | `#f4f1e4` | `--color-warm-parchment` | Page và section backgrounds trong khu vực editorial/product — canvas tĩnh lặng để ảnh sản phẩm đặt lên | | Ivory Mist | `#fcfaf1` | `--color-ivory-mist` | Navigation text color trên hero tối, subtle surface variant và hairline borders — một giải pháp ấm hơn so với trắng tinh cho dark-section UI |

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

# Ragged Edge — Style Reference > Editorial brutalism trên nền đá cẩm thạch trắng. Hãy tưởng tượng sự tự tin về typography của Vogue kết hợp với sự kiềm chế màu sắc của một gallery Berlin — toàn mực và khoảng không, với một mảng màu duy nhất dùng như dấu chấm than, không phải trang trí. **Theme:** light Ragged Edge là một website tư vấn thương hiệu đầy tự tin, vận hành dựa trên kỷ luật gần như đơn sắc hoàn toàn: mực gần-đen trên nền trắng, với một chút violet bão hòa được dùng rất tiết kiệm làm accent viền, và một hero gradient full-bleed duy nhất — sự kiện màu sắc duy nhất trên homepage. Typography là toàn bộ cá tính — một display face chữ hoa dãn cực rộng (ABCDiatypeExpanded) đảm nhiệm vai trò "hét to", trong khi một serif tinh tế (Grit) đảm nhiệm vai trò "nói chuyện", tạo ra sự căng thẳng giữa typography tạp chí editorial và letterforms display brutalism. Layout mang tính maximalist về tỷ lệ (hero full-bleed, khoảng cách section 180px) nhưng minimal về bảng màu, và mọi bề mặt tương tác đều có dạng pill với bán kính trong khoảng 40–64px, tạo cho mọi button và nav item một dạng capsule mềm mại tương phản với kiểu chữ expanded góc cạnh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Ink | `#181f1f` | `--color-obsidian-ink` | Primary text, đường viền mảnh (hairline), action buttons dạng fill — màu gần-đen chủ đạo chiếm 90% giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Canvas nền, inverted text trên khối tối, viền nav/button | | Fog | `#d1d2d2` | `--color-fog` | Đường phân cách nhẹ và viền phụ nơi Obsidian quá nặng | | Ash | `#a3a5a5` | `--color-ash` | Helper text mờ, viền button không hoạt động, metadata phụ |

# Enter GmbH — Style Reference > Bauhaus poster workshop, midday sun **Theme:** mixed Enter GmbH reads like a Bauhaus-influenced IT services brochure printed on warm stock: bold full-bleed color panels (seafoam, cream, signal orange) stack like poster sheets, and a monospaced face (Maax Mono) carries nearly every word, giving the whole site the cadence of a technical readout rather than a marketing page. The visual rhythm is theatrical — each horizontal band changes color and mood, with no soft transitions, just hard seams between cream, teal, white, and orange. A single abstract geometric illustration of stacked blocks on poles lives in the hero, and every interactive control is a dark pill on a colored ground. Neutrality is the default (black on white for text, #282828 for filled buttons), with orange and teal used as architectural surfaces rather than accents — they ARE the layout, not decoration on it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Orange | `#ff5000` | `--color-signal-orange` | Full-bleed section surfaces, geometric illustration caps, partner section canvas — carries warmth and authority across an otherwise achromatic text system | | Seafoam Panel | `#a5d3d4` | `--color-seafoam-panel` | Hero canvas and alternating section ground — a cool counterweight to the warm orange, used as full-bleed background, never as a text highlight | | Cream Stock | `#f9f8ea` | `--color-cream-stock` | Soft band surfaces between content sections — a paper-like off-white warmer than pure #ffffff, signals a transition zone | | Charcoal | `#282828` | `--color-charcoal` | Filled button background, dark illustration blocks, heading accents — the loaded weight of the palette, softer than pure black |

# 큰그림컴퍼니 — Style Reference > Tuyên ngôn typographic trên nền bê tông. Một press kit đen-trên-trắng, nơi Helvetica cỡ lớn đảm nhiệm vai trò của nhiếp ảnh, và kết cấu duy nhất là một tờ giấy nhàu duy nhất nằm dưới body type. **Theme:** light Bigpicture Company là một hệ thống editorial đơn sắc, xử lý trang web như một press kit in ấn được trải trên giấy thô. Giao diện loại bỏ mọi màu sắc và hoàn toàn dựa vào mực đen, khoảng trắng, đường kẻ mảnh (hairline rules) và một kết cấu giấy nhàu duy nhất để tạo bầu không khí. Typography chính là sản phẩm: display headlines đạt tới 274px với Helvetica Neue 700 và negative tracking mạnh, biến chữ thành khối thị giác chủ đạo trên mọi màn hình. Monospace labels ([01-N INTRODUCTION], CREATIVE/AGENCY) hoạt động như caption kiểu in ấn, trong khi các biểu tượng sparkle bốn cánh là vật trang trí duy nhất giữa các section. Layout rộng rãi, mang phong cách zine — section gap 72px, horizontal padding 144–250px, và các khối ảnh full-bleed với góc bo 288px giúp trang thở như một bức tường gallery thay vì một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Press Ink | `#121212` | `--color-press-ink` | Primary text, hairlines, section borders, icon strokes, footer text — sắc thái tối duy nhất mang 95% toàn bộ thông tin foreground | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav pill background, heading-bordered surfaces | | Newsprint | `#f1f1f1` | `--color-newsprint` | Surface fills nhẹ, soft borders, hairline dividers, tông màu nền cho kết cấu giấy nhàu | | Foil Gray | `#e1e1e1` | `--color-foil-gray` | Light borders, icon stroke accents, secondary dividers |

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

# Perplexity AI — Style Reference > Terminal nghiên cứu ấm áp. Một thanh tìm kiếm màu kem nổi trên nền giấy cũ, bao quanh bởi các control đơn sắc yên tĩnh — sự tĩnh lặng của bàn đọc thư viện được cô đọng vào một ô nhập liệu duy nhất. **Theme:** light Giao diện của Perplexity vận hành như một terminal nghiên cứu yên tĩnh: một canvas ấm áp off-white (#faf8f5) mang cảm giác giấy cũ hơn là app-white vô trùng, một giọng văn typographic đơn sắc duy nhất, và một điểm nhấn teal kiềm chế (#016a71) chỉ xuất hiện như dấu câu chức năng. Toàn bộ hệ thống thị giác thu gọn lại thành một thanh tìm kiếm làm hero — mọi control xung quanh (sidebar, top nav, model selector, voice button) đều là vệ tinh phụ thuộc. Mật độ gọn nhưng không chật: 8px là gap chủ lực, 12–16px là padding tiêu chuẩn, với 9999px pill rounding trên tất cả interactive controls. Hầu như không có elevation — thiết kế cố tình flat, dùng border 1px gần như vô hình ở #d1d1cd và một shadow cực nhẹ để tách card layer khỏi canvas. Typography là custom (pplxSans) với đúng hai weight (400, 500) và ba kích thước (12, 14, 16) — scale được thu hẹp có chủ đích, khiến giao diện giống một tài liệu hơn là một dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Aged Paper | `#faf8f5` | `--color-aged-paper` | Canvas trang và bề mặt card — off-white ấm thay thế pure white vô trùng, tạo chất liệu giấy cho giao diện | | Ink Black | `#000000` | `--color-ink-black` | Text chính, icon strokes, và fill chủ đạo trên navigation và body copy | | Charcoal | `#27251e` | `--color-charcoal` | Nền action button chính và text emphasis cao — near-black ấm kết hợp với cream canvas tạo độ tương phản mềm hơn pure-black | | Ash Gray | `#72706b` | `--color-ash-gray` | Text phụ, icon muted, và nav fill không hoạt động — mang tông ấm của bảng màu |

# Microsoft — Style Reference > Corporate blue retail catalog — tưởng tượng logo 4 ô vuông trên nền sàn trưng bày trắng với một điểm nhấn xanh duy nhất dẫn dắt mọi tương tác. **Theme:** light Microsoft.com là một bề mặt store-and-marketing doanh nghiệp: một canvas gần trắng được điểm xuyết bởi một màu xanh doanh nghiệp sống động duy nhất, với các product card nổi trên độ cao nhẹ (subtle elevation) và hero banner một màu. Segoe UI vận hành toàn bộ hệ thống — một humanist grotesque mang phong cách tiện dụng và tự tin, không mang tính editorial. Nhịp điệu thị giác tuân theo grid: hàng sản phẩm 4 cột, các dải max-width căn giữa, và các hero section xen kẽ giữa ảnh chụp lifestyle pha xanh và card overlay trắng tinh. Các component cảm giác nhẹ, phẳng và chức năng — radii tối thiểu, border mảnh, một shadow stack duy nhất, không có decorative gradient — để ảnh sản phẩm đảm nhận phần nặng về thị giác, trong khi accent xanh đánh dấu mọi hành động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Microsoft Blue | `#0067b8` | `--color-microsoft-blue` | Primary action background, link text, navigation accents, icon strokes — thẩm quyền màu sắc duy nhất trong hệ thống, dùng cho mọi CTA dạng filled và interactive highlights | | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, button text trên nền xanh, surface elevation | | Mist Gray | `#f2f2f2` | `--color-mist-gray` | Footer background, subtle surface tone, page canvas bên dưới card | | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, card borders, hairline dividers — màu typographic và cấu trúc chủ đạo |

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

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

# Josh Warner — Style Reference > black void gallery wall **Theme:** dark Portfolio của Josh Warner hoạt động như một bức tường gallery gần như đen tuyền: giao diện lùi lại để các 3D render, product mockup và ảnh chụp sáng tạo chiếm trọn mọi viewport. Typography siêu mảnh và đồng nhất ở weight 400 trên toàn bộ scale, dùng một dòng sans-serif duy nhất không hề lớn tiếng — hierarchy được xây dựng qua kích thước và letter-spacing rộng (0.04em) thay vì tương phản weight. Toàn bộ palette là achromatic ngoại trừ một chấm trạng thái xanh neon (#08ff00) — tín hiệu sống duy nhất của site giữa khoảng không. Các bề mặt phẳng hoặc gần phẳng; chiều sâu hoàn toàn mượn từ tác phẩm nghệ thuật, không từ drop shadow hay gradient. Components thưa thớt, hình pill, gần như không trọng lượng — ghost buttons, viền mảnh trên #000, avatar tròn, và nav items hình pill. Hệ thống là một khung, không phải chủ thể. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#0f0f0f` | `--color-void` | Canvas trang và bề mặt chính — lớp nền bên dưới mọi artwork, hơi sáng hơn đen tuyền để tránh hiện tượng banding OLED trong khoảng tối | | Absolute | `#000000` | `--color-absolute` | Viền mảnh, image container, icon strokes, footer dividers — đen tuyền đóng vai trò mực cấu trúc, định hình các cạnh khi không có bề mặt card hiện hữu | | Charcoal | `#1a1a1a` | `--color-charcoal` | Bề mặt footer nâng cao và các UI panel sâu hơn — một bước lên từ canvas để phân vùng mà không phá vỡ khoảng tối | | Faint | `#080808` | `--color-faint` | Shadow base cho hiệu ứng elevation nhẹ — gần như vô hình trên canvas, dùng trong box-shadow composition để tạo độ nâng môi trường mềm mạ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 |

# Tech Barcelona — Style Reference > Editorial tech manifesto trên nền marble trắng **Theme:** mixed Tech Barcelona vận hành bằng ngôn ngữ typography-first: một font neo-grotesque độc quyền (FavoritPro) với weight 400 cực nhẹ chi phối toàn bộ giao diện, để scale và khoảng trắng đảm nhận vai trò cấu trúc thay vì độ tương phản weight. Canvas chủ yếu là trắng và tĩnh lặng, với một màu cobalt xanh lam đậm (#0075ff) duy nhất dành riêng cho hành động — nó xuất hiện một lần dưới dạng button filled trong nav và không trang trí ở nơi nào khác. Màu gần đen #090707 dùng cho headline và nội dung hình ảnh, tạo độ tương phản mạnh với bề mặt trắng. Hero band đảo ngược mối quan hệ này: canvas đen, type trắng, logo hình học cỡ lớn. Các component phẳng và tối giản — hairline borders, không shadow, không gradient — để nhiếp ảnh và type tỷ lệ lớn gánh vác trọng lượng thị giác. Nhịp điệu tổng thể mang phong cách editorial: khoảng trắng dọc rộng rãi, display size cỡ lớn lên đến 80px, letter-spacing chặt kéo các headline lớn thành những khối đậm đặc, tự tin. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, điểm nhấn màu duy nhất trong toàn bộ giao diện — một xanh lam rực rỡ trên nền trung tính đơn sắc, dùng có chừng mực để báo hiệu hành động mà không cạnh tranh với nội dung | | Ink Black | `#090707` | `--color-ink-black` | Màu headline, border ảnh, display text cỡ lớn — gần đen với chút ấm nhẹ, chọn thay vì đen thuần để tạo cảm giác in ấn thay vì kỹ thuật số | | Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — màu trung tính làm việc cho interface chrome và đoạn văn bản dễ đọc | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, text trên hero tối và nền logo tối — thiết lập nền light-mode và tất cả bề mặt nội dung |

# Render — Style Reference > Blueprint on brushed aluminum. The interface reads as a clean, geometric engineering document — white space, hairline rules, and one violet marker line drawing the eye to the action. **Theme:** light Render presents a clinical, paper-white canvas for cloud infrastructure — an interface that feels like a well-organized technical schematic rather than a marketing surface. The system is overwhelmingly achromatic: #0d0d0d text on #ffffff surfaces, separated by hairline #e3e3e3 borders, with one vivid violet (#8a05ff) acting as the singular brand punctuation and a warm-to-cool gradient (violet→orange) reserved for hero emphasis. Typography is the primary expressive tool — Roobert at light weight 300 with tight tracking carries headlines with geometric quietness, while PPNeueMontreal handles UI with workmanlike neutrality. Code-adjacent elements use PPNeueMontrealMono, lending technical credibility without resorting to cliché terminal aesthetics. Components are square-cornered, border-defined, and low-elevation; the interface reads as a grid of confident panels rather than floating cards. Color appears sparingly — a violet step number, a soft tinted surface, a gradient text phrase — so when it does appear, it carries weight. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#0d0d0d` | `--color-obsidian` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on dark fills — the dominant base against which all content rests | | Graphite Hairline | `#e3e3e3` | `--color-graphite-hairline` | Borders, dividers, subtle surface tints — the workhorse neutral at 4000+ occurrences that defines structural edges throughout the UI | | Smoke | `#4d4d4d` | `--color-smoke` | Secondary text, muted nav, footer copy — the soft mid-gray for de-emphasized but still readable text |