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

# Hellotime — Style Reference > trung tâm chỉ huy biên tập đơn sắc **Theme:** light Hellotime là một bề mặt năng suất gần như đơn sắc: canvas trắng, chữ gần đen, và một điểm nhấn xanh điện xuất hiện hầu như chỉ dưới dạng gradient highlight trên hero headline và các từ khóa. Hệ thống thị giác dựa vào tương phản trọng số typographic thay vì đa dạng màu sắc — headline 700-weight khổng lồ (64–80px) nằm cạnh body text 400–500 nhỏ gọn, tạo phân cấp rõ ràng mà không cần trang trí nhiễu. Các bề mặt phẳng với đường viền mảnh (1px, #c8cad0) và border-radius 16px; elevation bị loại bỏ để ưu tiên các cạnh sắc nét và khoảng trắng rộng rãi. Nút tối màu (#25272d) là UI element có màu sắc duy nhất ngoài logo màu xanh lá và accent gradient xanh dương, khiến mọi hành động đều có chủ đích thay vì trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#151619` | `--color-ink` | Văn bản chính, đường viền icon, đường viền mảnh, chân trang — màu non-background chiếm ưu thế trong hệ thống | | Smoke | `#7f8491` | `--color-smoke` | Văn bản phụ/mờ, văn bản link, đường viền nhẹ, placeholder label — lùi lại để body copy được đọc trước | | Fog | `#c8cad0` | `--color-fog` | Đường viền card và component, divider nhẹ, đường viền icon ở trạng thái nghỉ — hairline mặc định | | Ash | `#e1e2e5` | `--color-ash` | Divider giữa các section, tint bề mặt phụ, đường viền input ở trạng thái nghỉ |

# OhDada — Style Reference > Editorial gallery wall **Theme:** light OhDada vận hành trên ngôn ngữ thị giác gallery-catalog: hai tông neutral nhẹ, phấn (warm cream và lavender-gray) đan xen làm canvas full-bleed cho từng section, và một màu saddle brown bão hòa duy nhất đảm nhận toàn bộ công việc typographic và cấu trúc. Điểm nhấn typographic đặc trưng là sự kết hợp GrandSlang-Roman weight 100 — một display serif siêu mảnh — với Neue Haas Grotesk, khiến tên thương hiệu thì thầm qua những nét calligraphic mảnh như sợi tóc, trong khi text hỗ trợ nằm gọn trong nét grotesque sắc sảo, có cấu trúc. Đây là layout mật độ thấp, ưu tiên hình ảnh, nơi product photography (các tác phẩm điêu khắc động học với tông xanh dương và nâu trên nền trắng) cung cấp toàn bộ màu sắc mà UI từ chối sử dụng. Giao diện tối giản đến mức kiềm chế của editorial: viền mảnh như sợi tóc, hầu như không có shadow, không gradient, và các component cảm giác như những tấm catalog in ấn chứ không phải bề mặt phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Chalk Cream | `#e6e0d9` | `--color-chalk-cream` | Canvas trang chính và nền section phụ; tông trắng ấm giúp chữ nâu và ảnh điêu khắc trông có chủ đích hơn là vô cảm | | Lavender Stone | `#b7b3be` | `--color-lavender-stone` | Nền section thay thế và canvas hero; tạo điểm nhấn lạnh, phấn làm đối trọng với cream ấm mà không phá vỡ kỷ luật achromatic | | Saddle Brown | `#5d3a19` | `--color-saddle-brown` | Tất cả heading, body copy, link text, và viền mảnh — giọng màu duy nhất trong hệ thống, được dùng như điểm nhấn vẽ bằng mực trên nền neutral nhạt; viền tương tác ghost và outlined; link và navigation control mang stroke nâu 1px thay vì nền đầy, giữ bề mặt yên tĩnh | | Ink Black | `#000000` | `--color-ink-black` | Chỉ dùng cho decorative SVG fill; không bao giờ dùng cho UI text hoặc surface element |

# Discover — Style Reference > Type museum trên nền marble trắng — wordmark gần như đen, một thì thầm của san hô, và mọi thứ khác đều lùi về phía sau. **Theme:** light Fonts Ninja là một gallery gần như đơn sắc dành cho letterforms, nơi điểm nhấn màu duy nhất là một tông san hô ấm áp dùng để đánh dấu các hành động. Canvas gần như trắng và luôn giữ yên lặng; type là nhân vật chính, được trình bày ở tỉ lệ cực lớn và kết hợp với khoảng trống rộng rãi. Cards là các panel trắng bo góc mềm nổi trên nền đổ bóng nhẹ, và mọi element tương tác đều phải "kiếm" được màu sắc của nó — hầu hết UI là mực trên giấy, và màu san hô chỉ xuất hiện khi có thứ gì đó muốn được click. Mật độ dày nhưng bố cục vẫn thoáng vì margin lớn và nhịp điệu được đo bằng các bước tăng 10px và 24px thay vì các chồng 4-8px chặt chẽ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#121212` | `--color-ink` | Văn bản chính, border card, icon strokes, divider mảnh. Màu gần đen pha ấm được chọn thay vì #000 để làm mềm độ tương phản trên nền trắng mà không mất đi tính uy quyền | | Canvas | `#ffffff` | `--color-canvas` | Border mảnh, divider, đường viền input, và cạnh card trên nền sáng. Không dùng làm màu CTA chính | | Fog | `#dbdada` | `--color-fog` | Tông đổ bóng xung quanh, nền mờ nhạt, tạo độ nổi bề mặt tinh tế. Mang theo đổ bóng alpha 0.16 giúp nâng card lên khỏi canvas | | Slate | `#8e8e93` | `--color-slate` | Body text phụ, metadata đã giảm độ nổi bật, border nav không active, copy trợ giúp |

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

# Vercel — Style Reference > Khối đơn sắc lăng kính trên giấy kẻ ô — một tam giác tối duy nhất khúc xạ toàn bộ quang phổ hình nón trên nền lưới kỹ thuật mờ, và mọi thứ còn lại trên trang là độ chính xác thuần đen-trên-trắng. **Theme:** light Vercel hoạt động như một không gian làm việc kỹ thuật gần như đơn sắc: canvas trắng ngà (#fafafa), text và filled actions gần đen (#171717, không bao giờ là #000 thuần), đường viền siêu mảnh (#ebebeb) đảm nhận cấu trúc thay vì đổ bóng, và một điểm nhấn lăng kính đầy màu sắc duy nhất từ logo prism conic-gradient xuất hiện đúng một lần trên mỗi màn hình. Hệ thống chữ hoàn toàn là Geist — một geometric grotesque với tracking âm rất chặt ở kích thước lớn (-0.06em ở 48px) và không có decorative weights — mang lại cho toàn bộ UI cảm giác chính xác như thiết bị phòng thí nghiệm. Mật độ giao diện là compact: bán kính 6px chiếm ưu thế trên cards và buttons, padding 12px bao phủ hầu hết các bề mặt, và khoảng cách 2–8px kiểm soát nhịp điệu. Màu sắc được phân bổ hạn chế — chromatic blue, red, và teal chỉ xuất hiện dưới dạng điểm nhấn trang trí minh họa; product chrome hoàn toàn achromatic với prism gradient là dấu câu màu sắc duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Graphite | `#171717` | `--color-graphite` | Primary text, filled action buttons, primary borders. Màu gần đen có chủ đích — không phải #000000 — giúp các bề mặt có cảm giác ấm hơn, mực hơn so với đen thuần | | Marble White | `#fafafa` | `--color-marble-white` | Page canvas, card surfaces, elevated panels. Không phải trắng thuần — độ ấm nhẹ đọc như giấy thay vì màn hình | | Pearl | `#ffffff` | `--color-pearl` | Inset surface white dùng bên trong cards, button text trên nền tối, và inner panel highlights | | Hairline | `#ebebeb` | `--color-hairline` | Màu border mặc định cho cards, nav, inputs, dividers. Đảm nhận phân cách cấu trúc thay vì đổ bóng |

# Maciej Zadykowicz — Style Reference > phòng trưng bày nửa đêm với bức tranh kính vạn hoa — một mảng tường studio gần như đen, nơi một tác phẩm typographic đầy màu sắc rực rỡ chiếm trọn sự chú ý, còn mọi thứ khác đều giữ sự yên tĩnh và có chủ đích. **Theme:** dark Portfolio của Maciej Zadykowicz vận hành như một studio thiết kế nửa đêm: một canvas gần như đen với slate đậm (#25262d) để một tác phẩm nghệ thuật typographic duy nhất ngoạn mục — bức tranh tường nhiều màu 'I build things' — chiếm trọn ấn tượng đầu tiên. Bên dưới hero, hệ thống rút lui vào sự kiềm chế yên tĩnh: chữ bone-white nhạt (#f2f2f3) trên card tối phẳng, typography Replica chặt chẽ, pill controls, và một màu indigo nhẹ duy nhất (#384270) dành riêng cho indicator trạng thái 'Open' live. Trang đọc như một bức tường gallery — tác phẩm CHÍNH là trang trí, vì vậy chrome được giữ nhỏ gọn, metadata được mono-typed, và điểm nhấn màu duy nhất mang ý nghĩa ngữ nghĩa (availability, live state). Mật độ thông tin cao nhưng vẫn thoáng — các project entry xếp chồng dưới dạng year/title/description/tags với padding trong 24px rộng rãi, và card radius 16px làm mềm bề mặt tối vốn khắc nghiệt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Bone White | `#f2f2f3` | `--color-bone-white` | Primary text, nav links, button labels, footer copy — ánh sáng duy nhất trên trang, dùng cho mọi thứ cần đọc | | Slate Dark | `#25262d` | `--color-slate-dark` | Page canvas, bề mặt nền cho tất cả card và section | | Graphite | `#383a42` | `--color-graphite` | Elevated surface — card lồng nhau, button hover fills, secondary panels nằm trên Slate Dark | | Fog | `#858893` | `--color-fog` | Secondary text, metadata labels, inactive nav items, mô tả nhẹ |

# Join Parker — Style Reference > Banker's ledger meets indie magazine — white paper, electric blue ink, one italic flourish that rewrites the headline. **Theme:** light Parker operates as a confident fintech command center: white parchment canvas, single electric-blue primary, and a quiet italic serif that interrupts the all-sans orthodoxy. The dual-typeface system — Inter for everything functional, Gambetta italic for a single word of emphasis — is the signature: a sans headline reads as utility, but 'Powers Your Growth' in italic serif turns the value prop into editorial copy. Components are generously rounded (24px cards, 9999px pills) giving the dense financial UI a soft, approachable feel. A full-bleed electric-blue feature section breaks the white rhythm and re-establishes the brand as the visual anchor. Color is used sparingly and functionally: blue for action and brand surfaces, orange for one conversion-critical CTA, warm parchment and sand for soft surfaces that keep the page from feeling sterile. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Blue | `#5196fe` | `--color-electric-blue` | Primary brand color — filled CTAs, full-bleed feature section background, icon accents, the credit card product visual's gradient. Carries 80% of brand recognition | | Ember Orange | `#f9754e` | `--color-ember-orange` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#1b1d20` | `--color-ink-black` | Primary text, dark card surfaces (the credit card mockup, the dark feature section), heavy borders. Not pure black — sits slightly warm | | Midnight | `#101828` | `--color-midnight` | Secondary text and dark borders when Ink Black feels too heavy in tight contexts |

# Windsurf — Style Reference > Midnight aurora command center — a deep navy terminal where a single mint teal action glows and a chromatic ribbon is the only permitted spectacle. **Theme:** dark Windsurf's visual system is a midnight IDE that walked out into a marketing site: deep navy canvas (#011c42) with one bioluminescent teal accent (#34e8bb) that makes every action glow against the dark. Display headlines use tomatoGrotesk at weight 300 — size does the heavy lifting while weight stays whisper-thin, an anti-convention choice that creates authority through restraint. An aurora ribbon (blue→purple→pink gradient) sweeps across the hero as the sole moment of color spectacle; everywhere else the palette stays disciplined. Components lean pill-shaped (9999px) for actions and gently squared (6px) for cards, with shadows used sparingly because contrast on the dark canvas already creates depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Navy | `#011c42` | `--color-midnight-navy` | Page background, section canvas, footer — the dominant surface that gives the entire site its terminal-like confidence | | Canvas White | `#ffffff` | `--color-canvas-white` | Primary text on dark surfaces, icon strokes, card text in light contexts | | Obsidian | `#0b100f` | `--color-obsidian` | Near-black text for light-context sections, logo mark, high-contrast headings | | Warm Sand | `#f8f1e5` | `--color-warm-sand` | Secondary text on dark surfaces, warm accent surface, card borders in light contexts — adds cream warmth that prevents the dark UI from feeling sterile |

# Index — Style Reference > Bản thiết kế trên bàn vẽ có đèn nền — toàn bộ giao diện là một bản vẽ wireframe, với một cây bút chú thích màu xanh hoa cà tím. **Theme:** dark Index hoạt động như một bản vẽ wireframe kỹ thuật trên không gian âm bản: một canvas gần như đen được bao quanh bởi các đường viền đứt nét, một điểm nhấn màu xanh hoa cà tím nhạt (#7089ba) được dùng như chú thích nhẹ nhàng, và display type ở weight tối đa (Raveo 1000) neo giữ mọi phần. Logic thị giác là "bản thiết kế trên bàn đèn" — các component không được trang trí mà chỉ được phác họa đường viền, khiến giao diện đọc giống như một sơ đồ kỹ thuật hơn là một sản phẩm hoàn thiện. Bề mặt luôn mờ và phẳng; chiều sâu được gợi ý bằng các đường viền đứt nét mảnh và độ nâng nhẹ từ #1c1c1c lên #808080, không bao giờ dùng bóng đổ. Khoảnh khắc mềm mại duy nhất là vùng sáng radial của hero, hoạt động như một ngọn đèn bàn tập trung chiếu lên bàn vẽ. Màu sắc được phân bổ hạn chế — 99% thời gian là không màu (achromatic), chỉ dùng xanh tím cho các dấu câu màu nhỏ (các nút kết nối dữ liệu, icon fill, lớp phủ nhẹ). Typography đảm nhận phần tạo cảm xúc chính: các dòng display weight 1000 chiếm ưu thế, được set tight (-0.04em) và lớn (70px) để tạo cảm giác kiến trúc thay vì biên tập. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Nền trang, tất cả đường viền cấu trúc, text chính trên bề mặt sáng — màu đen tuyệt đối khiến các đường viền đứt nét đọc như mực trên giấy | | Carbon | `#1c1c1c` | `--color-carbon` | Bề mặt nâng lên — nền card, fill section, canvas nơi hero spotlight đổ xuống; nâng lên một bước từ Void nhưng gần như không đáng kể | | Graphite | `#4d4d4d` | `--color-graphite` | Viền cấp ba và đường viền disabled, divider trong danh sách dày | | Steel | `#808080` | `--color-steel` | Body text phụ, metadata label, viền mờ, đường checkbox/divider trên nền tối |

# Concrete Club Studio — Style Reference > zine biên tập phai màu nắng trên giấy hồng phấn — bố cục là một trang in, không phải màn hình **Theme:** mixed Concrete Club là một zine biên tập ấm áp trên nền hồng phấn: wordmark serif cỡ lớn chiếm ưu thế trên các mảng hồng và trắng ngà rộng rãi, các thẻ sans-serif viết hoa nhỏ dẫn dắt ánh nhìn, và một mảng mực cam-đỏ ấm duy nhất thấm xuyên suốt bố cục như điểm nhấn màu duy nhất. Các section xen kẽ giữa hồng phấn, canvas trắng ngà và than đậm — mỗi section hoạt động như một trang in riêng biệt được đóng thành một ấn phẩm. Typography chính là giao diện: một humanist serif đặc trưng (DaVinci) đảm nhận toàn bộ trọng lượng display, trong khi Helvetica Neue Light thì thầm ở tỷ lệ body và nav. Các minh họa đường nét vẽ tay phá vỡ grid ở lề phải của wordmark, làm mềm đi uy quyền typography đậm nét bằng nét duyên dáng lo-fi. Mọi thứ khác đều tiết chế — không button, không card, không shadow — trang web hoạt động như một cuốn sách nghệ thuật in, không phải một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Ink | `#d9462b` | `--color-ember-ink` | Màu wordmark hero, nét accent, và là văn bản màu duy nhất — một tông cam-đỏ ấm mang cảm giác mực in tay trên nền hồng. Dùng trên display headline và chi tiết minh họa chọn lọc | | Dusty Rose | `#e296bb` | `--color-dusty-rose` | Nền section chính — một tông hồng bão hòa thấp, ấm áp, làm nền cho hero band và các panel nội dung full-width. Thiết lập tông màu biên tập của site | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, tô màu wordmark trên section sáng, nét vẽ minh họa và đường viền. Màu trung tính chủ lực | | Charcoal | `#212121` | `--color-charcoal` | Bề mặt section tối — dùng cho các panel full-bleed đảo ngược trang thành các spread biên tập trắng trên nền đen |

# Garden Eight — Style Reference > Editorial trên nền giấy kem hoành tráng. Một headline serif 215px đơn độc trên nền parchment ấm áp, bao quanh bởi các khối điêu khắc lơ lửng và khoảng trắng thoáng đãng như gió biển — trang web hoạt động như bìa của một art monograph, không phải dashboard. **Theme:** light Garden Eight vận hành như một editorial spread trong sách nghệ thuật: nền canvas parchment kem ấm làm bệ đỡ cho serif type hoành tráng, đóng vai trò như gallery wall text chứ không phải product UI. Bảng màu cực kỳ nhị phân — bề mặt trắng xương, chữ đen mực — và mọi màu bổ sung đều bị xem như sự xâm phạm. Layout thở ở quy mô gần như bảo tàng, với gutter margin 180px và khoảng trắng quá khổ, biến type và các đối tượng 3D điêu khắc thành nội dung duy nhất. Không có ngôn ngữ màu chức năng: không có alert red, success green hay info blue. Mọi quyết định đều dựa trên weight, scale và sự im lặng. Hệ thống mang phong cách masthead của tạp chí thời trang cao cấp hơn là giao diện SaaS, và bất kỳ agent nào tái tạo nó nên ưu tiên kịch tính typographic và sự kiềm chế về không khí hơn là các affordance UI thông thường. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#dbd6d0` | `--color-parchment` | Canvas trang, bề mặt card, divider nhạt, border link — tông màu xương desaturated ấm áp thay thế màu gần trắng thông thường, mang đến nhiệt độ editorial cho toàn bộ hệ thống | | Carbon Ink | `#1e1f1f` | `--color-carbon-ink` | Text chính, display headline, nav rules, border card, icon strokes — gần như đen với một chút ấm nhẹ hài hòa với parchment thay vì tương phản | | Pitch Black | `#000000` | `--color-pitch-black` | Dành riêng cho các khoảnh khắc display tương phản tối đa và text sâu nhất trên bề mặt sáng nhất — được dùng tiết kiệm để Carbon Ink giữ trọng lượng đọc mặc định |

# ClickUp™ — Style Reference > Buồng lái năng suất ánh tím trên nền trắng **Theme:** light ClickUp trình bày một trung tâm chỉ huy năng suất trên nền canvas trắng tinh — một thương hiệu SaaS dùng một màu tím rực rỡ duy nhất làm giọng nói chính, đặt trên giao diện gần như không màu. Nhịp điệu thị giác dày đặc và giàu thông tin: headline display cỡ lớn, tự tin (Plus Jakarta Sans ở 60-76px, weight 800) chiếm khoảng trắng rộng rãi, kết hợp với body text nhỏ gọn và UI sản phẩm được xếp chặt chẽ, đóng vai trò chính trong hero. Các bề mặt phẳng với bóng đổ pha xanh lam nhẹ thay vì độ nâng cao rõ rệt, và màu tím thương hiệu (#7b68ee) xuất hiện tiết kiệm trên các hành động chính, logo, và một vài điểm nhấn. Tổng thể mang cảm giác thực dụng nhưng cao cấp — một buổi trình diễn sản phẩm nơi phần mềm CHÍNH LÀ ngôi sao, được đóng khung bởi hệ thống phân cấp kiểu chữ sạch sẽ và bảng màu hạn chế, điểm xuyết bằng màu tím đặc trưng duy nhất đó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Brand Violet | `#7b68ee` | `--color-brand-violet` | Màu thương hiệu chính cho logo, CTA chính, trạng thái active, và điểm nhấn thương hiệu — một màu tím duy nhất này mang 90% bản sắc sắc độ | | Signal Blue | `#0091ff` | `--color-signal-blue` | Điểm nhấn phụ cho badge, icon, và các điểm nổi bật của tính năng Agents/Brain — một điểm đối lập mát mẻ với tím, thường xuất hiện trong các dải conic-gradient | | Ultra Violet | `#6647f0` | `--color-ultra-violet` | Biến thể tím đậm hơn cho trạng thái hover và bề mặt selected/active — tạo chiều sâu tối hơn cho thương hiệu khi cần | | Muted Violet | `#514b81` | `--color-muted-violet` | Tím bão hòa thấp cho secondary text, border nhẹ, và nền có tông màu khi cần sự hiện diện của thương hiệu mà không cần bão hòa hoàn toàn |

# FRANKY'S — Style Reference > Retro arcade kiosk trên quầy skate-shop. **Theme:** light Franky's là một ngôn ngữ thị giác retro arcade kết hợp skate-shop: nền canvas màu kem ấm (#f3e5df) được bọc trong viền pixel-art cứng, bàn cờ đen-trắng xuất hiện khắp nơi, và một font Arcade pixel duy nhất mang mọi chữ trên site. Bảng màu được cố tình làm nghèo nàn — chỉ có hai màu sắc tồn tại (signal-orange #faa21f cho thanh marquee và một màu xanh nổi bật #128e44 cho nút mua hàng), toàn bộ hệ thống phân cấp được thể hiện qua sự chuyển đổi weight của font Arcade từ 400 lên 700 và qua độ tương phản đen-trên-kem. Các bề mặt luôn phẳng và nguyên khối; chiều sâu chỉ đến từ đường viền inset 1px màu kem trên nút và sự chơi tông màu của bàn cờ. Các component trông như sprite shopfront thập niên 1990: viền đen dày, border-radius 6–12px chặt chẽ, internal padding 4–8px gọn gàng, và các toggle 3D/AR trông như pixel icon thay vì chrome. Các trang mới nên giữ nguyên cảm giác arcade cabinet: không gradient ngoại trừ thanh marquee màu cam, không soft shadow, không typography trang trí — chỉ có giấy kem, pixel rule đen, và một màu cam ấm làm điểm nhấn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Arcade Cream | `#f3e5df` | `--color-arcade-cream` | Nền trang, bề mặt product card, inset highlight trên nút | | Ink Black | `#000000` | `--color-ink-black` | Text chính, ô bàn cờ, toàn bộ viền UI, đường viền card, icon stroke | | Pixel Gray | `#e5e7eb` | `--color-pixel-gray` | Viền mảnh, đường phân cách card, structural rule giữa các ô grid | | Charcoal | `#333333` | `--color-charcoal` | Tông bề mặt phụ, ô bóng của bàn cờ, màu shadow |

# Charlie Phipps — Style Reference > oversized editorial gallery wall — một headline Helvetica khổng lồ duy nhất và một bức ảnh full-bleed, không gì khác **Theme:** mixed Charlie Phipps là portfolio của một graphic designer London, được thể hiện như một hệ thống poster editorial cỡ lớn: ảnh full-bleed làm hero canvas, một headline Helvetica Neue đồ sộ trên mỗi màn hình, và sự im lặng gần như tuyệt đối về màu sắc. Trang web mang phong cách như một zine in ấn được phóng to lên kích thước tường — weight 400 ở 162px là một sự phá vỡ quy tắc có chủ đích (không có tiếng hét in đậm, chỉ là những chữ cái mỏng manh tự tin) kết hợp với negative tracking mạnh, khiến headline cắt vào viewport. Canvas nền gần như đen (#101011) để những mảng màu chụp ảnh bùng nổ mạnh hơn, nhưng các content section lại chuyển sang trắng với cùng sự kiềm chế đầy kịch tính. Không có nút bấm, không góc bo tròn, không đổ bóng, không color token — tương tác được gợi ý bằng gạch chân mảnh và trạng thái con trỏ, navigation được rút gọn thành ba link mảnh ở một góc. Khoảng trắng là công cụ cấu trúc chính, không phải card hay divider. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas Black | `#101011` | `--color-canvas-black` | Canvas nền trang bên dưới ảnh full-bleed và các dải tối; màu chữ chính trên bề mặt sáng; gạch chân link trong ngữ cảnh tối | | Paper White | `#ffffff` | `--color-paper-white` | Màu chữ chính trên nền tối/ảnh chụp; background content section; màu border chủ đạo (đường kẻ mảnh và divider xuyên suốt layout) | | Ink Black | `#000000` | `--color-ink-black` | Màu heading và body text trên bề mặt sáng; màu border cấu trúc thứ hai — được dùng ở bất cứ đâu cần một cạnh cứng hơn #101011 | | Fog Gray | `#ededed` | `--color-fog-gray` | Surface tint nhẹ để phân tách content block khỏi nền trắng; border mềm trên body text và card nơi đường kẻ trắng tinh sẽ biến mất |

# Typewolf — Style Reference > Warm parchment typography atelier. Every element is a brownish-ink stamp on dusty rose paper, with no color allowed to compete with the type. **Theme:** light Typewolf reads as a warm, editorial type specimen magazine pressed into a website: a dusty rose canvas (#f8f5f5) supports white rectangular cards in a two-column grid, all anchored by brownish-ink text rather than any chromatic accent system. The palette is deliberately near-monochromatic — a dark warm brown (#443235) for body copy and headlines, a slightly lighter brown (#654a4e) for nav and secondary links, and a single muted dusty rose (#916a70) reserved for borders and quiet emphasis. Typography carries the entire identity: a transitional serif (Domaine Text) for body, an ultra-heavy condensed sans (Dia) for ALL-CAPS micro-labels with -0.03em tracking, and a high-contrast display serif (Domaine Display Narrow) for editorial headlines. Surfaces are sharp-cornered, elevated only by a warm-tinted diffuse shadow (rgba(145,106,112,0.15) 0 6px 24px) that ties the elevation back to the brand palette. The result is a site that feels more like a printed specimen catalog than a web product — restrained, content-first, and quietly opinionated. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Rose | `#f8f5f5` | `--color-parchment-rose` | Page canvas and section backgrounds — the warm off-white ground that gives the whole system its dusty, paper-like atmosphere | | Specimen White | `#ffffff` | `--color-specimen-white` | Card surfaces and image wells — clean white plates that sit on the parchment canvas, carrying typographic specimens and editorial imagery | | Ink Brown | `#443235` | `--color-ink-brown` | Primary text, headlines, and dominant body copy — the warm near-black that reads as ink rather than pure black against the rose canvas | | Walnut | `#654a4e` | `--color-walnut` | Navigation text, secondary links, and muted metadata — one step lighter than Ink Brown for hierarchy without leaving the brown family |

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

# BlueYard Capital — Style Reference > Sunset editorial observatory. Một đường chân trời đào ấm loang dần vào trắng tinh, một headline cỡ lớn nổi giữa khoảng âm bản, và một thiên thể 3D duy nhất treo bên dưới như hành tinh trong một monograph in ấn. **Theme:** light BlueYard Capital mang phong cách một ấn phẩm editorial in ấn được ngụy trang thành homepage của quỹ đầu tư mạo hiểm: một canvas trắng rộng lớn được neo bởi một mảng màu đào ấm, một headline Instrument Sans cỡ lớn duy nhất, và một tác phẩm hình cầu được render 3D hoạt động như ảnh bìa tạp chí. Bảng màu 98% là achromatic — một màu gần đen ấm (#3a3a3e) đảm nhận toàn bộ trọng lượng chữ trên nền trắng tinh — với ba sắc thái màu nhạt (đào, oải hương, hồng) chỉ xuất hiện làm nền card và đường viền mảnh, không bao giờ là nút chức năng. Cards phẳng, không viền hoặc viền mảnh, nổi trên whitespace thay vì nằm trong hộp đổ bóng. Navigation gần như không có: một wordmark hai dòng nhỏ và một ô hamburger. Toàn bộ site thu hút sự chú ý qua sự tiết chế và tỷ lệ, chứ không phải chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, fill nút ghost — sân khấu chính cho mọi thứ khác | | Graphite Ink | `#3a3a3e` | `--color-graphite-ink` | Chữ chính, màu link, stroke icon, viền mảnh, viền nút ghost — màu gần đen ấm mang 97% trọng lượng typography | | Deep Carbon | `#090b11` | `--color-deep-carbon` | Chữ nhấn, stroke nav, viền card đậm — hơi lạnh và cứng hơn Graphite Ink, dành cho những khoảnh khắc tương phản tối đa | | Ash Veil | `#b5b0b0` | `--color-ash-veil` | Nền body mờ, viền mềm — xám ấm dùng cho các dải nền phụ bên dưới canvas chính |

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

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

# PLATFORM — Style Reference > white cube gallery dưới ánh đèn spotlight **Theme:** light PLATFORM là một vitrine gallery đơn sắc: nền trắng tinh, chữ đen tuyền, và một giọng typography duy nhất để tác phẩm nghệ thuật mang toàn bộ màu sắc. Giao diện mang phong cách editorial hơn là thương mại — khoảng trống âm bản rộng rãi, đường viền mảnh như sợi tóc, và cỡ body 15px gọn gàng giúp catalog dày đặc mà không cảm giác tiện dụng. Mọi thành phần đều được rút gọn về dạng hình học cốt lõi: không đổ bóng, không bo góc, không gradient trang trí. Trọng lượng thị giác đến từ typography đơn thuần, với cỡ display 72px và line-height 1.00 tiết chế tạo nên nhịp điệu chậm rãi, có chủ đích của một catalog triển lãm in ấn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Bone White | `#ffffff` | `--color-bone-white` | Nền trang, bề mặt card, khoảng trống âm bản | | Lamp Black | `#000000` | `--color-lamp-black` | Văn bản chính, viền card và nav, màu link — màu cấu trúc duy nhất trong hệ thống | | Ash Gray | `#dddddd` | `--color-ash-gray` | Đường chia mảnh, phân tách bề mặt tinh tế | | Concrete Gray | `#cccccc` | `--color-concrete-gray` | Viền phụ, đường viền input, trạng thái disabled |

# Equals — Style Reference > Broadsheet gặp spreadsheet — serif mang hơi hướng tòa soạn trên nền kem ấm, điểm xuyết những ô dữ liệu pastel lơ lửng. **Theme:** light Equals mang cảm giác như một tờ báo broadsheet biết thở — headline serif uy quyền cỡ 110px đặt trên nền kem ấm (#FAF9F5), trong khi những mảng màu pastel vui tươi trôi nổi lỏng lẻo phía sau như các ô spreadsheet đang tan rã. Sự căng thẳng giữa trọng lượng editorial của Serrif Condensed và độ chính xác UI chặt chẽ của Unica77 tạo ra hai tầng âm vực: công cụ dữ liệu nghiêm túc và sản phẩm dễ tiếp cận. Màu vàng (#FFCC00) chỉ xuất hiện trên thanh thông báo trên cùng, màu tím orchid (#B074CE) chỉ xuất hiện trên nút CTA — hai màu nhấn không bao giờ cạnh tranh vì không bao giờ chung một khu vực. Các đường kẻ ngang mảnh phân chia section thay vì đệm whitespace, lấy cảm hứng từ đường kẻ lưới của spreadsheet như một ẩn dụ cấu trúc xuyên suốt trang. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Analyst Yellow | `#FFCC00` | `--color-analyst-yellow` | Chỉ dùng làm nền thanh thông báo — vàng bão hòa trên chữ gần đen tạo cảm giác khẩn cấp tối đa trên diện tích tối thiểu, không dùng ở nơi khác để giữ nguyên tín hiệu cảnh báo | | Orchid CTA | `#B074CE` | `--color-orchid-cta` | Nút CTA chính — tím ấm trên nền kem tạo cảm giác mời gọi thay vì khẩn cấp, phân biệt CTA với màu đỏ/cam thường thấy của SaaS | | Brand Green | `#20A277` | `--color-brand-green` | Mảng màu nhấn cho danh mục Finance — một trong ba khối chỉ báo theo vai trò (RevOps đỏ, Founders xanh navy, Finance xanh lá) nằm cạnh các dòng solution | | Glacier | `#2DCBDC` | `--color-glacier` | Khối màu trang trí nền trong hero, thuộc ngôn ngữ hình ảnh ô spreadsheet pastel nổi |

# Tana — Style Reference > Midnight gallery, single lime beacon — a dark editorial spread where one pale-green button is the only color on the entire page. **Theme:** dark Tana is a midnight editorial: pure black canvas, one pale-lime signal, nothing else. The entire interface is monochrome — warm off-white type, a quiet scale of grays for hairlines and secondary text — with a single chromatic accent (#e1f0bd) reserved exclusively for the primary action. Headlines come from a custom high-contrast serif (tanaClassic) set tight at negative tracking, which creates a magazine-spread authority against the void. Category labels are pentagon-shaped tags (pointed left edge, flat right) that orbit around imagery like marginalia, turning product features into a printed index. Layout is centered and generous, with editorial photography used sparingly as a single warm focal point in an otherwise typographic page. Everything else is restraint. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, section backgrounds, card surfaces — pure black, not near-black, makes the off-white type and the lime accent feel luminous | | Charcoal | `#0e0e0e` | `--color-charcoal` | Elevated surface layer, subtle borders, secondary backgrounds — one step off the void for depth without breaking the dark mode | | Bone | `#f0eded` | `--color-bone` | Primary text, pentagon tag fills, announcement bar background — slightly warm off-white, softer than pure white against deep black | | Ash | `#b3b3b3` | `--color-ash` | Secondary body text, muted helper copy, list dividers — the dominant mid-gray for all non-primary prose |

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

# Atlassian — Style Reference > Bản thiết kế kỹ thuật viền confetti. Một enterprise canvas trắng tinh khiết bị ngắt quãng bởi các editorial panel xanh navy đậm, được đóng khung trong hình học rách màu sắc — tím violet rực rỡ, vàng taxi, xanh dương điện, xanh lá — như những sơ đồ chính xác được ghim giữa các vách ngăn lem sơn. **Theme:** light Atlassian vận hành như một enterprise workshop khoác lên mình vẻ tự tin giản dị: một canvas trắng nơi giao diện sản phẩm dày đặc gặp những khoảnh khắc editorial táo bạo, đầy màu sắc. Hệ thống thị giác phân chia giữa các bề mặt chức năng yên tĩnh (trắng, xám nhạt, xanh dương nhẹ) và các dark hero block biểu cảm (navy gần như đen) được đóng khung bởi confetti hình học rời rạc với các màu tím violet, vàng, xanh dương và xanh lá rực rỡ. Typography là cặp custom sans — Charlie Text cho UI dày đặc, Charlie Display cho editorial headline có thể lên tới 80px với tracking thắt chặt. Các component lớn, bo tròn và không viền — pill cho action, border-radius 20px rộng rãi cho card, hầu như không có shadow. Màu sắc có kỷ luật: một màu xanh dương điện duy nhất điều khiển mọi primary action và link, trong khi năng lượng màu sắc chỉ tồn tại ở các cạnh trang trí và section divider, không bao giờ tràn vào functional UI. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Atlassian Blue | `#1868db` | `--color-atlassian-blue` | Primary action buttons, active links, focus states, icon accents — màu action duy nhất trong toàn bộ hệ thống, mang lại sự rõ ràng về hướng đi trên các bề mặt đơn sắc | | Midnight Navy | `#101214` | `--color-midnight-navy` | Primary text, heading fills trên bề mặt sáng, nền dark hero panel, link text — màu mực chủ đạo | | Carbon Edge | `#292a2e` | `--color-carbon-edge` | Card borders trên bề mặt sáng, body text, input borders, secondary heading text | | Slate Current | `#1c2b42` | `--color-slate-current` | Outlined action borders, icon strokes, list dividers, tertiary text — màu gần xám pha xanh lam gợi nhắc thương hiệu mà không cam kết màu sắc |