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

# Shelby Kay — Style Reference > botanical editorial spread trên nền vải lanh ấm — hệ thống mực hai màu trên giấy cũ, với display type tràn ra ngoài mép trang và metadata thì thầm từ lề. **Theme:** light Shelby Kay là một portfolio editorial chủ đề thực vật: canvas vải lanh ấm, một màu mực olive đậm, và một điểm nhấn sage-green duy nhất làm toàn bộ công việc thể hiện thương hiệu. Typography cực đoan — Ranade display type kéo dài tới 265px và tràn edge-to-edge, trong khi Switzer xử lý mọi thứ còn lại ở dải compact 10–20px, tạo ra sự căng thẳng kiểu magazine-spread giữa header hoành tráng và metadata thì thầm. Navigation chỉ là text, không có button, không control bo tròn, không shadow — giao diện đọc như một cuốn sách nghệ thuật in, không phải phần mềm. Các section chuyển qua các lớp tông ấm (cream → tan → taupe) thay vì các khối màu cứng xen kẽ, và toàn bộ hệ thống tưởng thưởng cho sự kiềm chế: hierarchy đến từ kích thước, weight và whitespace, không bao giờ từ màu sắc hay chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Olive Ink | `#393c2a` | `--color-olive-ink` | Text chính, border và stroke cấu trúc — tất cả type từ body đến display headings, tất cả card và image borders, tất cả interactive outlines | | Sage Type | `#737955` | `--color-sage-type` | Display headings và brand voice — dùng cho wordmark SHELBY hoành tráng, section anchors, và các điểm nhấn heading chọn lọc mang bản sắc thực vật của thương hiệu | | Linen | `#efe6d9` | `--color-linen` | Canvas chính và bề mặt card — nền trang, card fills, tông ấm nền tảng mà toàn bộ hệ thống nằm trên | | Sienna | `#d6b292` | `--color-sienna` | Orange wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung |

# Schema — Style Reference > Sân khấu keynote đen mực với những bức tranh tường rực rỡ như confetti **Theme:** mixed Schema by Figma vận hành trên nền kiến trúc đơn sắc mạnh mẽ, bị xuyên thủng bởi các bức tranh tường hình học phẳng màu đậm. UI sử dụng đen tuyền, gần đen và trắng với viền xám mảnh — không có đổ bóng, bán kính tối thiểu, không có điểm nhấn màu trong chính giao diện. Màu sắc chỉ xuất hiện dưới dạng nghệ thuật trang trí (hình tròn, lục giác, hình chữ nhật với màu tím, xanh ngọc, đỏ rượu vang, xanh lá, cam) và làm nền cho ảnh chân dung diễn giả. Typography là yếu tố nổi bật nhất: custom display face của Figma ở kích thước 56–86px với tracking âm cực mạnh (-0.02em) và line-height chặt 0.90 khiến headline có cảm giác như được khắc chứ không phải sắp chữ. Phần hero đảo ngược quy ước với nền đen và nút Register viền ngoài cỡ lớn; các section nội dung sau đó xen kẽ qua các dải màu full-bleed trước khi kết thúc bằng grid diễn giả trắng sạch. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Nền hero, viền cấu trúc dày, nét vẽ icon — tạo không khí sân khấu keynote tương phản cao cho phần mở đầu | | Ink | `#0f0f0f` | `--color-ink` | Văn bản body và heading trên nền sáng, viền section tối | | Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card diễn giả, văn bản section sáng trên hero tối | | Ash | `#e2e2e2` | `--color-ash` | Viền mảnh, icon fill nhẹ, đường phân cách cấu trúc giữa các vùng UI |

# Dropbox.com — Style Reference > không gian làm việc ấm áp trên nền kem — phong cách editorial đầy tự tin trên giấy **Theme:** light Dropbox mang phong cách không gian làm việc editorial ấm áp hơn là một dashboard năng suất lạnh lẽo. Canvas là nền giấy kem (#f7f5f2), không phải trắng vô trùng; chữ là màu gần đen ấm (#1e1919), không phải mực nguyên chất. Thương hiệu thể hiện qua một màu xanh điện tự tin (#0061fe) tô lên mọi bề mặt tương tác, kết hợp với headline Sharp Grotesk và body copy Atlas Grotesk — một cặp Grotesk tùy chỉnh mang lại cảm giác độc quyền, được thiết kế riêng. Layout rộng rãi và thoáng, xây dựng trên base 6px, với lưới card 2 cột, hero chia text + visual, và elevation tối thiểu. Bề mặt phẳng với viền mảnh (hairline borders); góc bo mềm (8–16px). Tổng thể gần gũi, có chủ đích và tự tin một cách nhẹ nhàng — trái ngược hoàn toàn với UI doanh nghiệp vô cảm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Dropbox Blue | `#0061fe` | `--color-dropbox-blue` | Điểm nhấn màu tím hỗ trợ cho các 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 | | Cream Paper | `#f7f5f2` | `--color-cream-paper` | Canvas trang, nền section, bề mặt nav bar — màu trắng kem ấm thay thế màu trắng SaaS vô trùng để làm mềm hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card nâng cao, content panels, nền mockup sản phẩm — màu trắng thật duy nhất, dành riêng cho các bề mặt nằm trên canvas kem | | Warm Ink | `#1e1919` | `--color-warm-ink` | Text chính, chữ nút nav tối, màu heading — màu gần đen ấm đọc mềm hơn mực nguyên chất trên nền kem |

# Sleeve — Style Reference > floating dock trên marble **Theme:** light Trang web của Sleeve mang phong cách như một trang sản phẩm macOS được dàn dựng trong gallery: canvas trắng vô tận, một ảnh sản phẩm hero duy nhất nổi lơ lửng với các app-icon vệ tinh quay quanh, và typography làm toàn bộ công việc. Bảng màu gần như đơn sắc — đen, trắng, và đường viền xám mảnh là những màu cấu trúc duy nhất — trong khi năng lượng màu sắc duy nhất đến từ gradient xanh của chính ứng dụng và một bộ nhỏ các icon hệ thống nhiều màu dùng làm điểm nhấn trang trí. Headline cực lớn và tracking dày (96px display với letter-spacing -0.025em, section heading 48px), body text là system-sans ở 15-18px, và micro-label như 'THEMING' và 'FEATURE LIST' dùng tracking 0.05em để thì thầm thay vì la hét. Các component mềm mại và chunky: card radius 24px, pill buttons 9999px, inset 1px borders ở độ mờ 0.05 thay vì shadow nặng. Ngôn ngữ thiết kế là sự tự tin qua kiềm chế — không gradient trên UI, không màu trên button, chỉ có trọng lượng typographic và khoảng thở rộng rãi gánh vác mọi màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Midnight Ink | `#000000` | `--color-midnight-ink` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính | | Graphite | `#333333` | `--color-graphite` | Text phụ, icon fill, button text — mềm hơn đen tuyền cho body emphasis mà không mất trọng lượng | | Slate | `#374151` | `--color-slate` | Neutral hỗ trợ cho UI phụ, divider và muted label. Không nâng lên thành màu CTA chính | | Silver Mist | `#e5e7eb` | `--color-silver-mist` | Hairline borders, subtle divider, light surface washes — màu được dùng nhiều nhất trong hệ thống, định nghĩa cạnh ở độ mờ tương đương 0.05 |

# Mural — Style Reference > Blackboard flipping to whiteboard — same hand, same authority, opposite ground. **Theme:** mixed Mural hits like a blackboard in a bright studio — the hero opens pitch-black with oversized serif-adjacent display type bleeding edge to edge, then the page snaps into clinical white with the same confidence. The dual-font system is the signature move: STK Bureau (weight 300 only) handles all display and headline work with tight negative tracking (-0.04 to -0.05em), while ABC Social runs everything from captions to body in a humanist groove. Electric jade (#00c27a) is the single chromatic anchor — appearing on CTAs and key links against both black and white backgrounds, creating identical urgency in both contexts. Cards live in a borderless, shadow-free world where containment comes from background-color switches (#eeeeee, #ffffff) rather than depth. The Mural logomark's rainbow-spectrum identity is carefully quarantined from the page palette — the product itself runs monochromatic with jade as its only relief valve. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Jade CTA | `#00c27a` | `--color-jade-cta` | Primary CTA buttons, active links, key interactive highlights — jade against black in the hero and against white in body sections maintains equal visual force without changing hue | | Mint Surface | `#b4f5c8` | `--color-mint-surface` | Card backgrounds, feature highlight areas — pastel counterpoint to jade that reads as 'selected' or 'active' without the full saturation of CTA jade | | Forest | `#00843f` | `--color-forest` | Card accent backgrounds, deep green surface variant | | Badge Leaf | `#d5f8e0` | `--color-badge-leaf` | Blog/category badge backgrounds — near-white green tint that signals categorization without demanding attention |

# Laura Monin — Style Reference > editorial gallery wall, white marble, ink stamp **Theme:** light Laura Monin là một portfolio thời trang editorial được xây dựng trên sự kiềm chế màu sắc tuyệt đối: canvas trắng tinh, mực đen, và một display serif tùy chỉnh duy nhất mang toàn bộ giọng điệu thương hiệu. Bố cục hoạt động như một mood board được tuyển chọn — ảnh chụp phân tán bất đối xứng trên khoảng trống âm bản rộng rãi thay vì căn chỉnh theo grid thông thường, với overlay caption hoạt động như những nhãn dán thì thầm chứ không phải navigation. Typography đảm nhận toàn bộ hệ thống phân cấp: display serif khổng lồ ở 58–158px chiếm vị trí trung tâm, trong khi Neue Haas Grotesk ở 12–22px đóng vai trò là giàn giáo lặng lẽ cho navigation, metadata và văn bản hỗ trợ. Không có shadow, không có bo góc, không có gradient, không có màu sắc — hệ thống đạt được sự sang trọng thông qua những gì nó loại bỏ, chứ không phải thêm vào. Mọi element phải có cảm giác như được đặt bằng tay trên một bức tường gallery: chính xác, thong thả, và không bao giờ lấp đầy khung hình nhiều hơn mức cần thiết. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, viền ảnh, nền nav — tông bề mặt duy nhất trong hệ thống | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, mọi đường viền outline trên ảnh và nav, list markers — mỏ neo màu sắc duy nhất | ## Tokens — Typography

# Notion — Style Reference > Trung tâm chỉ huy làm việc đêm khuya — một studio tối lúc 2 giờ sáng, nơi những chiếc bàn màu kem mềm mại đỡ những tấm thẻ trắng phát sáng, được chiếu sáng bởi các bảng điều khiển màu xanh coban. **Theme:** mixed Notion vận hành như một trung tâm chỉ huy làm việc về đêm: một hero xanh navy nửa đêm bão hòa sâu chuyển dần vào các bề mặt nội dung màu kem ấm áp, với các hành động màu xanh coban nổi bật như những bảng điều khiển vừa được bật sáng. Thiết kế tự tin về mặt typography, sử dụng một sans humanist tùy chỉnh (Notion Inter) ở mọi cấp độ UI, kết hợp với các điểm nhấn serif Lyon Text thỉnh thoảng để tạo cảm giác ấm áp biên tập. Màu sắc được phân bổ có chừng mực — phần lớn trang sống trong mực gần như đen và trắng kem ấm, dành năng lượng màu sắc cho các phần tô CTA, điểm nhấn emoji-icon, highlight badge và đường viền thẻ trang trí. Các component mềm mại và bo tròn (thẻ 12px, input 5px, pill badges) hầu như không có drop shadow; chiều sâu đến từ độ tương phản bề mặt (navy đậm → kem → thẻ trắng) chứ không phải từ độ cao. Cảm giác tổng thể là một studio làm việc vẫn mở cửa sau giờ hành chính — chức năng, yên tĩnh, hơi mang hơi hướng về đêm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Navy | `#02093a` | `--color-midnight-navy` | Canvas cho hero và feature section — bề mặt tối đặc trưng khiến headline trắng và CTA xanh coban trông như những bảng phát sáng trong phòng điều khiển ca đêm | | Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Màu hành động tím cho filled buttons, trạng thái navigation được chọn và các khoảnh khắc chuyển đổi tập trung. | | Signal Blue | `#0075de` | `--color-signal-blue` | Đường viền hành động dạng outlined, inline text links và trạng thái hover có màu — một màu xanh mát hơn cho tính tương tác thứ cấp | | Ice Blue | `#62aef0` | `--color-ice-blue` | Điểm nhấn đường viền xanh cho tag, divider và cạnh UI đang focus |

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

# Recess — Style Reference > hoàng hôn pastel trên bể bơi **Theme:** mixed Recess sống trong một giấc mơ giữa ban ngày với bầu trời pastel: những canvas periwinkle mềm mại, ánh sáng chân trời màu hồng đào, và các hình mây lơ lửng tạo nên bầu không khí tĩnh lặng có chủ đích thay vì thương mại. Thương hiệu thể hiện qua một font sans-serif hình học đầy tự tin (Sharp Grotesk) kết hợp với logo script lockup — sự tương phản giữa chữ có cấu trúc và nét vẽ tay định hình nên cá tính. Màu sắc là tâm trạng, không phải trang trí: deep navy ink mang toàn bộ chữ, một màu xanh dương rực rỡ duy nhất nhấn mạnh, và phần còn lại của bảng màu là oải hương nhạt, kem, và san hô — tất cả gợi cảm giác như bên trong một buổi hoàng hôn. Các component có độ cao thấp và bo tròn nhẹ nhàng — đường viền và fill mềm làm nhiệm vụ, không phải shadow. Layout là centered, rộng rãi, và nhiều khoảng thở, với một marquee banner ngang ở trên cùng và nội dung luôn có cảm giác như một trang tạp chí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Twilight Navy | `#25385b` | `--color-twilight-navy` | Primary text, headings, body copy, links, icons — màu mực cấu trúc mang toàn bộ giọng nói | | Periwinkle Sky | `#a2b0ff` | `--color-periwinkle-sky` | Nền section chủ đạo, accent mềm, lớp phủ không khí — nền signature tạo nên bản sắc mơ màng của Recess | | Dusk Indigo | `#0a0a3a` | `--color-dusk-indigo` | Nền footer, bề mặt tối tương phản cao, fill accent đậm | | Cobalt Pop | `#3252f4` | `--color-cobalt-pop` | Accent rực rỡ hiếm hoi cho emphasis, active states, và heading nổi bật — dùng tiết kiệm để tạo một nhịp điện duy nhất giữa bảng màu trầm |

# BaseHub — Style Reference > midnight canvas, molten filament **Theme:** dark BaseHub nói một thứ tiếng gần như đơn sắc: một canvas gần đen, thang xám cho text, và một điểm nhấn cam nóng chảy làm tất cả công việc của cả một hệ màu hoàn chỉnh. Sản phẩm là hero — những ảnh chụp màn hình editor không viền, kích thước lớn, nổi trên nền tối thay vì illustration, và một đường kẻ dọc cam mảnh ở mép trái neo mọi section như một margin note. Typography nén gọn và lặng lẽ: Geist semibold cho headline, regular cho body, với negative tracking chặt ở mọi kích cỡ để chữ có cảm giác được gia công bằng máy hơn là sắp chữ. Các surface phẳng và có viền mảnh thay vì đổ bóng, bán kính card 12px và button 4px giữ hình học sắc nét và quen thuộc với developer tool. Nốt ấm duy nhất là màu cam — dùng cho CTA, section tags, khung sản phẩm phát sáng, và chú thích vẽ tay — và một màu xanh mát (#55c2ff) chỉ dành riêng cho informational badges. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Orange | `#ff6c02` | `--color-ember-orange` | Primary CTA, section tags, active nav, khung sản phẩm phát sáng, chú thích vẽ tay, và đường kẻ trang trí duy nhất ở lề trái — giọng ấm duy nhất trong một bảng màu lạnh | | Ember Glow | `linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81))` | `--color-ember-glow` | Gradient stop đi cùng Ember Orange cho các surface gradient hiếm hoi (ví dụ: thanh accent trên template card) | | Glacier Blue | `#55c2ff` | `--color-glacier-blue` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. | | Bone White | `#f3f3f3` | `--color-bone-white` | Neutral form states, badge text, và UI feedback nhẹ nhàng nơi màu sắc nên giữ kín đáo. Không nâng lên làm màu CTA chính |

# Yung Studio — Style Reference > nét vẽ phấn trắng trên tường gallery đen **Theme:** dark Yung Studio hoạt động trong không gian đơn sắc tuyệt đối: một khoảng đen thuần khiết, nơi type trắng và illustration trắng làm tất cả. Ngôn ngữ thị giác mang phong cách gallery — thưa thoáng, tự tin, editorial — với một chút violet (#c692ff) dành riêng làm accent nhẹ nhàng, chỉ xuất hiện ở trạng thái hover hoặc selection. Typography đảm nhận toàn bộ giọng điệu thương hiệu qua hệ thống optical-size PolySans: Slim thì thầm ở body text, Neutral lấp đầy các phần mid-scale, còn Bulky neo giữ hero như display cỡ lớn. Layout thở mạnh mẽ; các section cách nhau bởi khoảng trống 100+ pixel và được đóng khung bằng padding ngang rộng rãi, cho mỗi phần tử đủ không gian để tỏa sáng. Thẩm mỹ này gần với bìa zine hoặc sách nghệ thuật hơn là một SaaS dashboard — phẳng, đậm, biểu cảm qua typography, và không ngại khoảng trống âm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang, background full-bleed, bề mặt cho mọi nội dung chính | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt hỗ trợ sáng cho background nhẹ và phân cách section. Không nâng lên làm màu CTA chính | | Ultraviolet | `#c692ff` | `--color-ultraviolet` | Accent cho hover states, active link underline, và highlight dấu câu thỉnh thoảng — xuất hiện với tần suất gần như bằng không, nên hoạt động như sự bất ngờ, không phải trang trí |

# Andercore — Style Reference > Steel blueprint at midnight **Theme:** dark Andercore vận hành trên ngôn ngữ công nghiệp chiaroscuro: canvas gần như đen (#0b0405) với chữ trắng sắc nét, góc vuông 4px, và một màu đỏ duy nhất được phân bổ có kiểm soát (#e32735) làm tất cả công việc kể chuyện. Trang web xen kẽ giữa một dải navigation sáng và các section tối full-bleed, nơi đường viền (1px, #382e30) định nghĩa cấu trúc thay vì shadow hay độ cao. Archivo mang độ chính xác hình học ở mọi kích cỡ với tracking -0.02em chặt chẽ, trong khi Space Mono ở 12px đóng dấu nhãn kiểu dụng cụ công nghiệp lên badge và step counter. Màu đỏ không bao giờ trang trí — nó kích hoạt, đánh dấu hành động chính duy nhất, gạch chân step đang hoạt động, và các kết nối UI quan trọng. Toàn bộ hệ thống mang cảm giác như một phòng điều khiển: dày đặc, có chủ đích, và được thắp sáng bởi một đèn báo duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Red | `#e32735` | `--color-signal-red` | Màu hành động đỏ cho filled button, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung | | Carbon | `#0b0405` | `--color-carbon` | Nền section chính, canvas tối full-bleed, secondary button fill | | Graphite | `#150e0f` | `--color-graphite` | Bề mặt gần đen thay thế cho card và panel nâng cao trên section tối | | Steel | `#382e30` | `--color-steel` | Hairline border trên nền tối, cạnh card, đường chia bảng, đường viền UI mockup |

# Morflax — Style Reference > Porcelain gallery, one blue spark — a near-black nav bar hovers above a white room that briefly blushes lavender, while every action and border stays in grayscale until a single cobalt button confirms the moment. **Theme:** light Morflax reads as a monochrome showroom with a single blue beacon: a near-black navigation bar floats above a porcelain-white canvas that is briefly washed in soft lavender at the hero, then returns to a crisp neutral white for every content section. Color is rationed — vivid blue (#298ef5) earns its presence on exactly one filled action, while everything else (borders, body text, surfaces) is graded grays from #e5e7eb hairlines through #171718 ink. The typography pairs Inter's clinical neutrality at 400/500/600 with a wide-tracked display treatment (0.05em) reserved for the brand wordmark, and the hero exploits oversized type that bleeds off-canvas. Components are quiet and rounded: pill buttons, 16–24px card radii, soft 25px-blur shadows — the only visual noise comes from the 3D-rendered product cards, which carry the chromatic energy the interface refuses to. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt Spark | `#298ef5` | `--color-cobalt-spark` | Primary filled action, active states, brand accent — the sole chromatic voice in an otherwise monochrome system, so it must appear sparingly to retain its charge | | Obsidian Bar | `#333333` | `--color-obsidian-bar` | Navigation background — dark anchor that frames the light canvas below | | Ink | `#171718` | `--color-ink` | Primary headings and body text — near-black with a barely-warm cast that softens against pure #000 | | Carbon | `#25282b` | `--color-carbon` | Icon strokes, secondary text, UI graphics — a touch cooler than Ink for icon differentiation |

# Glein — Style Reference > Atelier lookbook on warm linen — full-bleed photography, hairline rules, one whisper-weight voice. **Theme:** light Glein operates as a monochromatic editorial canvas: oversized product and lifestyle photography fills nearly every viewport, with white sans-serif category labels floating directly on top of the imagery. The palette is a tight warm-achromatic system — Bone White, Midnight Black, a signature Warm Sand beige, and Concrete Gray — with zero chromatic accent, which forces the photography's natural tones (denim, linen, leather) to become the color story. Typography stays at weight 400 across both the grotesque and monospace companion; no bold weights exist, so hierarchy is built through size alone, culminating in a 111px display. Components are razor-thin: hairline black borders, zero radius, micro-padding, and no shadows. The result reads like an art-school lookbook — restrained, tactile, and quiet, where the absence of decoration is the signature. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, nav hairline borders, footer dividers, section rules, button text. Dominant structural color — defines the graphic skeleton against the warm canvas | | Bone White | `#ffffff` | `--color-bone-white` | Page canvas, card surfaces, overlay text on dark imagery, cookie dialog background. The breathing space | | Warm Sand | `#ebe6dc` | `--color-warm-sand` | Secondary surface and section bands — the warm beige that gives the atelier its linen-like tactility. Section dividers, footer wash, category card backgrounds | | Concrete Gray | `#8c8c8c` | `--color-concrete-gray` | Muted secondary text, tertiary borders, subdued image overlays. The recede color — present but never competing |

# Hume AI — Style Reference > Scientific pastel instrument panel. A calm white laboratory where near-black typography measures soft watercolor data washes. **Theme:** light Hume AI reads as a scientific pastel instrument panel: a near-white laboratory canvas where the only hard mark is a near-black #222222, and color enters as soft watercolor washes — rose, lavender, peach, mint, sky — that visualize data rather than decorate it. The headline typographic move is tight, low-contrast Fellix at 36–48px with negative tracking, set in a weight that whispers rather than shouts, framing emotional intelligence as measured restraint. Components are pill-shaped or softly rounded (8/12/16/24px radii), borders are invisible or hairline, shadows are absent — surfaces separate by hue and whitespace, not elevation. Monospace PP Fraktion Mono appears as the 'lab label' voice: uppercase column headers, tag chips, and data annotations carry a positive +0.025em tracking that contrasts the display sans's tight -0.025em. The overall rhythm is centered, generous, and editorial — sections breathe with 48–64px gaps, content never crowds, and the only saturated accent (#c094e4 violet) lives inside data bars and brand moments, never on chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#222222` | `--color-ink` | Primary text, filled buttons, nav strokes, icon fills — near-black rather than pure black to soften the interface | | Paper | `#ffffff` | `--color-paper` | Base canvas, card surfaces, button text on dark fills | | Bone | `#fff9f3` | `--color-bone` | Warm off-white secondary surface, subtle background tints behind sections | | Smoke | `#7a7876` | `--color-smoke` | Muted helper text, secondary button text, disabled labels |

# Gleap — Style Reference > Editorial serif trên nền pastel SaaS — như một trang tạp chí design được render trong product UI. **Theme:** light Gleap vận hành một hệ thống editorial trên nền sáng: tông kem ấm trắng ngà, chữ gần đen, và hai điểm nhấn pastel (oải hương hồng nhạt và xanh bột) đóng vai trò highlight nhẹ nhàng thay vì màu thương hiệu mạnh. Điểm đặc trưng là sự kết hợp giữa editorial serif tương phản cao (PP Editorial New) cho hero và section headline với một geometric grotesk (Switzer) cho mọi thành phần chức năng — điều này khiến giọng nói marketing giống như một trang tạp chí trong khi product UI vẫn giữ tính thực dụng. Bề mặt phẳng với shadow rất nhẹ, card bo tròn rộng (24–42px), button nằm ở radius nhỏ (10px) với fill đen đặc hoặc pastel — sự tương phản giữa geometric control cứng cáp và bề mặt product mềm mại, rộng lớn tạo nên nhịp điệu cho toàn bộ hệ thống. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, filled dark CTA, border tương phản cao. Tạo neo typographic trên nền kem | | Graphite | `#333333` | `--color-graphite` | Secondary text và màu hairline border chủ đạo (336 lần sử dụng). Mang hệ thống cạnh cấu trúc | | Slate | `#7b7b7b` | `--color-slate` | Muted helper text và inactive link text. Dùng khi thông tin phụ cần lùi lại | | Mist | `#bcbcbc` | `--color-mist` | Badge border nhẹ và soft body border. Nằm giữa Graphite cấu trúc và canvas trong hệ thống phân cấp border |

# KeepGrading — Style Reference > Polaroids rải rác trong phòng tối **Theme:** dark KeepGrading là một portfolio editorial mang phong cách phòng tối: một canvas gần như đơn sắc hoàn toàn, nơi các bức ảnh trôi nổi như những khung hình rải rác trong khoảng không sâu thẳm. UI được thiết kế lặng lẽ có chủ đích để hình ảnh lên tiếng — chỉ có display type Cabinet Grotesk, đường viền trắng mảnh 1px, và một pill-shaped ghost control duy nhất làm thành phần giao diện. Không có điểm nhấn màu sắc, không gradient, không đổ bóng; toàn bộ hệ thống phân cấp thị giác được dẫn dắt bởi độ tương phản, tỷ lệ và khoảng trắng giữa các bức ảnh. Mật độ thoải mái nhưng nhịp dọc lỏng lẻo, với khoảng thở 48px giữa các dải và các khung hình được giữ cố định bởi một đường viền trắng 1px duy nhất. Các component là tối giản — một nav toggle hình tròn, logo wordmark, các thẻ ảnh nổi với góc bo mềm 160px, và pill buttons với bán kính 9999px — để nhiếp ảnh chiếm ưu thế trong trải nghiệm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Studio White | `#f8f8f8` | `--color-studio-white` | Văn bản chính, viền ghost-button, đường viền khung ảnh, nét nav icon — giọng nói ánh sáng duy nhất trong căn phòng tối | | Void Black | `#080808` | `--color-void-black` | Canvas trang, nền phía sau mọi thứ, phần điền khung ảnh giữa các bức ảnh | | Pure Black | `#000000` | `--color-pure-black` | Phần điền SVG icon, lớp bề mặt sâu nhất cho đồ họa inline và các dấu trang trí | | Bone White | `#f0f0f0` | `--color-bone-white` | Văn bản phụ mềm mại và các nét viền mảnh hỗ trợ khi màu trắng tinh khiết cảm thấy quá lâm sàng |

# arte* — Style Reference > Golden hour harvest editorial — một tấm canvas màu kem nơi ảnh rừng ngập nắng hòa cùng display type bo tròn cỡ lớn, logo xanh chanh điện, và chữ đồng ấm áp mang cảm giác như được in chứ không phải render. **Theme:** light arte* là một harvest editorial tràn ngập ánh nắng: canvas kem ấm (#e5dccd) làm nền cho những display headline cỡ lớn bằng font Parafina — một sans-serif bo tròn mềm mại, hơi retro ở kích thước cực lớn (70–173px) với line-height dồn nén gần 0.8–0.9 — trong khi Poppins đảm nhận toàn bộ secondary copy ở line-height 1.4 chặt chẽ. Bảng màu mang phong cách vườn-nông trại: harvest copper nâu đồng cháy (#ab5700) cho primary text, chartreuse xanh chanh gây sốc (#e8e359) cho logo và hero overlays, và periwinkle xanh hoa chuông (#7997ff) đóng vai trò đối trọng mát mẻ cho các inline highlights. Hình ảnh là nửa còn lại của hệ thống — ảnh golden-hour full-bleed về rừng, đồ ăn và khuôn mặt, được xếp lớp với display type thay vì tách rời. Các component ít và mềm mại: pill buttons với radius 31px, card radii 20px, viền mảnh, gần như không có shadow. Ấn tượng tổng thể là một cuốn sách nấu ăn in ấn hoặc poster chợ nông sản được số hóa — display type tự tin, tông màu đất với một điểm nhấn vàng điện, và bản thân tên thương hiệu kết thúc bằng dấu hoa thị (*) báo hiệu sự tinh nghịch editorial. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Wheat Cream | `#e5dccd` | `--color-wheat-cream` | Canvas trang, bề mặt card, nền section — tông trắng kem ấm giữ mọi màn hình | | Harvest Copper | `#ab5700` | `--color-harvest-copper` | Primary text, body copy, list borders, card borders, decorative strokes — màu mực mặc định trên toàn bộ nội dung editorial | | Citron Beam | `#e8e359` | `--color-citron-beam` | Màu logotype, hero text overlays, accent borders, icon highlights — xanh chanh điện giúp thương hiệu nổi bật trên nền xanh rừng và kem | | Morning Glory | `#7997ff` | `--color-morning-glory` | Inline text highlights, links, secondary icon accents, input focus — periwinkle mát mẻ làm dịu bảng màu ấm khi xuất hiện trong body copy |

# Allfeat — Style Reference > Màn hình backstage lúc nửa đêm — một luồng sáng sân khấu màu teal xuyên qua dòng chữ màu kem ấm trên nền kính than chì. **Theme:** dark Allfeat là nền tảng hạ tầng âm nhạc dark-mode sử dụng bảng màu kem ấm trên than chì làm trạng thái nền tĩnh, sau đó thắp sáng canvas bằng hiệu ứng radial wash teal cho hero và gradient coral-red để tạo điểm nhấn cảm xúc. Hệ thống chỉ dùng một typeface duy nhất (TASA Orbiter) với ba font-weight tiết chế, các kích thước display được siết chặt bằng tracking -0.02em để headline đọc như những khối chữ tự tin thay vì những tuyên bố thoáng đãng. Hình học phân chia rõ rệt: bất cứ thứ gì có tính tương tác đều là pill tròn (900px), bất cứ thứ gì chứa nội dung đều là card bo góc 12px với viền hairline inset màu #383835 — không có drop shadow, không glass, không blur. Màu sắc được phân bổ có chủ đích: teal là màu duy nhất mang nghĩa 'hãy làm điều này', coral là màu duy nhất mang nghĩa 'hãy cảm nhận điều gì đó', và mọi bề mặt khác đều nằm trong họ warm-gray trung tính. Kết quả mang lại cảm giác như màn hình backstage của một phòng hòa nhạc — tối, chức năng, với một luồng sáng sân khấu xuyên qua. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Charcoal Stage | `#151515` | `--color-charcoal-stage` | Canvas trang, bề mặt chính, mọi nền tối — lớp nền cơ bản cho mọi màu sắc khác | | Warm Cream | `#fffbeb` | `--color-warm-cream` | Văn bản chính, nav links, heading copy, viền hairline trên nền tối — không bao giờ là trắng tinh, luôn hơi ánh bơ | | Card Edge | `#383835` | `--color-card-edge` | Viền card inset 1px, card ambient shadow, đường kẻ phân cách nhẹ trên bề mặt nâng cao | | Mute Cream | `#b8b8b8` | `--color-mute-cream` | Văn bản thân cấp hai, mô tả nhẹ nhàng, helper copy mờ |

# Nomen Nescio — Style Reference > mực trên giấy ấm **Theme:** light Nomen Nescio là một hệ thống editorial giấy và mực dành cho một nhãn hiệu thời trang ý niệm: một nền canvas trắng kem ấm (#fdfdfa) chứa ảnh thời trang cỡ lớn, trong khi mọi phần tử giao diện đều lùi về một màu mực gần đen duy nhất (#2b2b2e). Toàn bộ hệ thống typography chỉ dùng một sans-serif custom ở một weight duy nhất (400) — không bold, không light, không italic — vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua kích thước và negative letter-spacing thay vì tương phản. Các component là hình chữ nhật phẳng, không shadow, không bo góc, không màu sắc: bản sắc đến từ sự kiềm chế, từ tông trung tính ấm, và từ ảnh tràn cạnh (edge-to-edge). Hệ thống mang cảm giác như một zine in ấn được tái hiện dưới dạng website — khoảng trắng chính là layout grid, và mọi bề mặt UI đều có thể được cắt từ cùng một tờ giấy. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fdfdfa` | `--color-paper` | Canvas trang và bề mặt card — trắng kem ấm mang cảm giác giấy cũ, không phải digital white | | Bone | `#f5f3ee` | `--color-bone` | Bề mặt nâng cao và lớp phủ nhẹ — dùng cho nền card và hover state, ấm hơn canvas một bậc | | Ink | `#2b2b2e` | `--color-ink` | Text chính, navigation, border, và outlined action — gần đen với undertone ấm, không bao giờ là #000 thuần | | Ash | `#bebcb4` | `--color-ash` | Text mờ và border phụ — xám ấm dùng cho metadata, subtitle, và hairline divider |

# Geniestudio — Style Reference > bầu trời pastel vui tươi với doodle bay lượn **Theme:** light Geniestudio nói ngôn ngữ thị giác của một canvas thiết kế hiện đại: không gian làm việc xanh pastel thoáng đãng, nơi các nhân vật minh họa tinh nghịch trôi nổi trên khoảng trống rộng rãi. Hệ thống kết hợp một CTA gần-đen (#181d27) duy nhất trên nền canvas xanh nhạt (#ebf5ff) với bộ bốn điểm nhấn minh họa bão hòa — xanh hoa ngô, cam, tím, vàng mù tạt — mang lại hơi ấm mà không cạnh tranh với UI. Typography có chừng mực và hình học: Aeonik weight 500 dẫn dắt headline với tracking -0.02em chặt chẽ, trong khi Geist 500/600 xử lý mọi thứ từ caption 10px đến label nút bấm. Bề mặt phẳng, viền mảnh, bo góc rộng (32px là mặc định), và shadow là lớp rửa xanh nhạt gần như vô hình thay vì đổ bóng tối. Kết quả là một công cụ mang cảm giác sáng tạo, dễ tiếp cận và tự tin nhẹ nhàng — màu sắc dành cho kể chuyện, không phải chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sky Wash | `#ebf5ff` | `--color-sky-wash` | Canvas trang — xanh nhạt tạo không khí thoáng đãng thay vì trắng tinh, mang đến nền có chiều sâu nhẹ nhàng | | Paper White | `#fafdff` | `--color-paper-white` | Bề mặt card và elevated surface — mát hơn trắng tinh một chút, giúp bề mặt không bị lạnh lẽo trên nền sky canvas | | Cloud Veil | `#f6f7f8` | `--color-cloud-veil` | Bề mặt phụ nhẹ và fill wash cho các UI element mờ cần sự tách biệt mà không cần độ tương phản | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card lồng nhau, icon fills và button text — điểm sáng nhất trong hệ thống |

# Svelte — Style Reference > Editorial broadsheet trên nền marble trắng — giọng serif, điểm nhấn một tia lửa **Theme:** light Trang web của Svelte mang phong cách như một tờ broadsheet văn học được chuyển thể thành landing page của framework. Serif typography — EB Garamond cho body text, DM Serif Display cho hero headlines — giữ vai trò chủ đạo, trong khi một sans-serif gọn gàng (Fira Sans) xử lý phần chrome: nav, buttons, tags, search. Canvas là màu trắng tinh, surface hiếm khi xuất hiện, và elevation gần như không tồn tại; phân cấp đến từ kích thước và weight của type chứ không phải cards hay shadows. Một màu cam rực (#d43008) duy nhất tạo điểm nhấn cho trang đơn sắc: nó chiếm logo, mũi tên GET STARTED, wordmark /svelte/, và link documentary. CTA là text links có hậu tố mũi tên, không bao giờ là boxed buttons. Trang web thở — nhịp dọc rộng rãi, serif headlines căn giữa, logo tài trợ grayscale, và rất ít trang trí giữa các section. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Svelte Ember | `#d43008` | `--color-svelte-ember` | Accent màu cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Ink | `#262626` | `--color-ink` | Text chính, nav items, body copy, button labels — soft black tránh độ chói của #000 nhưng vẫn giữ tỷ lệ tương phản 15:1 trên nền trắng | | Carbon | `#141414` | `--color-carbon` | Headlines và display copy — hơi đậm hơn Ink để tạo trọng lượng thị giác cho serif wordmarks trên nền trắng | | Paper | `#ffffff` | `--color-paper` | Canvas trang, card surfaces, nav background — background chủ đạo ở mọi nơi |

# Frame.io — Style Reference > Midnight cinema projection room. A dark suite where a single blue spotlight does all the work and the UI recedes so creative content can project forward. **Theme:** dark Frame.io is a midnight projection room for creative teams: a near-black canvas layered with deep cosmic gradients, where large confident display type floats above product surfaces like film titles above a reel. The palette is almost entirely achromatic — only one vivid blue (#6199f6) and a muted violet border tone (#4f4f80) break the monochrome, used sparingly for icons, eyebrow labels, and card edges. Typography is the loudest voice: a single geometric sans (FrameGothic) carries everything from 80px display headlines to 14px body copy, with custom inktrap letterforms reserved for tiny all-caps section labels. Components stay thin and editorial: pill-shaped nav buttons, ghost CTAs, 10px-radius cards with violet-tinted borders, and zero decorative ornament — every element exists to frame the work, not compete with it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon Vellum | `#fcfcfc` | `--color-carbon-vellum` | Primary text, inverse button text, icon strokes — near-white reads as paper against the void | | Obsidian | `#0a0a13` | `--color-obsidian` | Primary page canvas and dominant background; the slight blue undertone keeps it from feeling flat black |

# robot.com — Style Reference > một trang editorial in ấn với bút highlight màu vàng Giấy off-white ấm áp, chữ đen mực in, và một điểm nhấn neon-vàng duy nhất đánh dấu những gì quan trọng — hệ thống hoạt động như một layout tạp chí tự tin, không phải dashboard phần mềm. **Theme:** light robot.com nói bằng giọng gần như đơn sắc — nền canvas off-white ấm áp, chữ đen mực in, và một điểm nhấn vàng chói duy nhất hoạt động như bút highlight trên trang giấy in. Hệ thống mang phong cách editorial và đầy tự tin: typography mạnh mẽ (custom Yellix lên đến 100px với negative tracking), pill controls (bán kính 24-30px chiếm ưu thế), và các khối màu cấp section đảo giữa off-white, gần-đen và vàng thay vì gradient nhẹ. Ảnh sản phẩm được xử lý như cinematic evidence full-bleed — không crop, không UI chrome xung quanh — trong khi các khối chữ nằm trong cột hẹp canh trái, để lại khoảng thở rộng bên phải. Nhịp điệu thị giác đan xen giữa các dải đơn sắc yên tĩnh với các khối accent đậm, khiến màu vàng có cảm giác xứng đáng chứ không chỉ để trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Yellix Yellow | `#fff65d` | `--color-yellix-yellow` | Primary action buttons, section accent blocks, highlight tags, decorative fills — màu sắc duy nhất, dùng tiết kiệm để làm nổi bật một phần tử duy nhất trên mỗi view | | Bone White | `#ffffff` | `--color-bone-white` | Page canvas, chữ inverted trên khối tối, chữ trên filled button |