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

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

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

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

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

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

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

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

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

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

# 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

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

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

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

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

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

# Forner — Style Reference > Warm earthen atelier — hãy tưởng tượng một xưởng gốm vào giờ vàng, nơi mọi bề mặt đều là đất sét, xương, hoặc cà phê rang, và thứ chrome duy nhất là mảnh giấy ghi chú viết tay của người thợ gốm cài trên tường. **Theme:** light Forner hoạt động như một design atelier ngập nắng: bảng màu gần như hoàn toàn là tông đất ấm, một custom grotesque duy nhất đảm nhận 95% giọng điệu, và typography siêu lớn đến mức từ bỏ hệ thống phân cấp để tạo bầu không khí. Canvas là một tông kem khô; mực là một tông nâu rang đậm; mọi điểm nhấn đều nằm trong cùng một dải màu từ nâu đến xương. Không có màu thương hiệu chromatic — chính độ ấm là thương hiệu. Bề mặt phẳng với hairline borders, góc vuông sắc nét ở 4px, và khoảng thở rộng rãi (100px+ giữa các section). Custom serif italics xuất hiện tiết kiệm như những chú thích viết tay đặt cạnh nhịp điệu cơ học của grotesque. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, xương sống cấu trúc của mọi giao diện — nâu ấm đậm đóng vai trò như mực trên nền kem, màu foreground chủ đạo trên toàn bộ hệ thống | | Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Nền trang, trường kem ấm mà mọi bề mặt đặt trên đó | | Linen Surface | `#ecece4` | `--color-linen-surface` | Bề mặt card, panel nâng cao, content blocks — cách canvas một bước, hơi lạnh và xám hơn để lùi về phía sau | | Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — neutral có cảm giác chromatic nhẹ nhất, dùng khi Roast Ink có vẻ quá nặng |

# Vana — Style Reference > Bản đồ chòm sao kỹ thuật số trên nền canvas nửa đêm — giao diện giao thức tối nơi ánh xanh điện truy vết địa hình dữ liệu do người dùng sở hữu trên một trường sao các ký tự ASCII. **Theme:** dark Vana vận hành như một canvas tối, nơi dữ liệu thuộc về người dùng: các bề mặt gần đen làm nền cho một màu xanh điện rực rỡ, hoạt động không chỉ như trang trí mà còn như tín hiệu. Bản đồ thế giới ASCII-art ở hero không phải là đồ họa mà là một kết cấu dữ liệu — mật độ ký tự tạo thành các lục địa, gợi ý rằng giao thức đang truy vết dữ liệu cá nhân trên toàn cầu. Typography mang phong cách hình học và tiết chế (Cofo Sans) với một biến thể pixel dành cho các nhãn metadata kỹ thuật, tạo ra sự căng thẳng giữa văn xuôi dễ đọc và ký hiệu máy móc chính xác. Các button có góc vuông (2px radius) và tối giản, để màu xanh đảm nhận ngôn ngữ hành động. Bảng màu được cố tình thu hẹp: một màu xanh thương hiệu, hai tông tím, và một chồng các bề mặt gần đen, với xanh lá và hồng chỉ xuất hiện như những dấu câu màu sắc hiếm hoi trên các control có viền và marker trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Indigo | `#0000ff` | `--color-electric-indigo` | Nền CTA chính, text thương hiệu, pattern ASCII trang trí — màu tín hiệu làm cho các hành động trở nên nổi bật trên nền canvas tối | | Cobalt Pulse | `#4141fc` | `--color-cobalt-pulse` | Viền button, điểm nhấn phụ — sáng hơn Electric Indigo một chút, dùng cho outlined controls và hover states | | Periwinkle Veil | `#8b8bfe` | `--color-periwinkle-veil` | Viền action dạng outline, điểm nhấn tím nhạt — viền ghost button và các nét trang trí nhẹ | | Lime Beacon | `#7fd579` | `--color-lime-beacon` | Dấu câu màu sắc hiếm — con trỏ, biến thể outlined button, chỉ thị vị trí trên bản đồ dữ liệu |

# Electronic Materials Office® — Style Reference > Incandescent ember in a charcoal gallery **Theme:** dark Electronic Materials Office is a nocturnal atelier: matte charcoal canvas, a single incandescent orange ember, and type that whispers rather than declares. The interface treats every screen like a darkened studio — the keyboard product photographs are the only true light source, and the UI surrenders to them. Headlines at weight 200 in GT-Flexa float in vast negative space; body text is deliberately small and humanist (Times). Color is rationed: pure white for type, a desaturated violet (#9e9eff) for links, and one orange (#f45500) CTA per page that glows with its own 30px bloom. Components stay flush to the 20px radius, borders whisper at #9d9d9d, and the only shadows in the system are those two colored halos around the primary action. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Studio Charcoal | `#202020` | `--color-studio-charcoal` | Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own | | Ash Gray | `#9d9d9d` | `--color-ash-gray` | Muted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud | | Mid Felt | `#eaeaea` | `--color-mid-felt` | Light surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas |

# CHRISTOPHER IRELAND CREATIVE — Style Reference > bone-white gallery wall, editorial monograph in morning light **Theme:** light Portfolio của một nhiếp ảnh gia được dàn dựng như một editorial spread tĩnh lặng: nền bone canvas ấm áp, một cặp typeface duy nhất (serif đương đại cho display, geometric sans cho utility), và không hề có điểm nhấn màu sắc. Hệ thống thị giác hoàn toàn nhường chỗ cho nhiếp ảnh — chữ chỉ là giàn giáo mỏng manh gồm các nhãn danh mục và vài headline serif cỡ lớn, hoạt động như pull-quotes trên tạp chí. Cảm giác gần với một monograph in ấn hơn là một website: những khối khoảng trống lớn, bố cục split layout bất đối xứng (text trái, ảnh phải), và weight 400 ở mọi nơi — serif không bao giờ đậm lên, sans không bao giờ co lại, vì vậy hệ thống phân cấp đến từ kích thước và tracking thay vì độ nhấn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Bone | `#f2f1ec` | `--color-bone` | Canvas trang, bề mặt card — màu off-white ấm áp đọc như giấy, không phải màn hình; mang lại chất liệu xúc giác, in ấn cho trang | | Ink | `#000000` | `--color-ink` | Text chính, border, divider, dấu cộng, section rules — màu đen tuyền trên nền bone tạo độ tương phản cao nhất có thể cho cảm giác editorial posterized | | Graphite | `#333332` | `--color-graphite` | Text headline — gần như đen nhưng có thêm một phần tư bước ấm áp; giúp các heading serif có cảm giác được đặt (set) chứ không phải đóng dấu (stamped) | | Ash | `#5d5b5b` | `--color-ash` | Body text phụ, caption, sub-label — bước muted duy nhất trong một bảng màu nhị phân |

# Amie — Style Reference > Sunlit productivity dashboard — một workspace nơi mọi thứ đều trắng, phẳng và có chủ đích, với một công tắc xanh điện duy nhất để kích hoạt mọi thứ. **Theme:** light Amie mang cảm giác như một productivity workspace tràn ngập ánh sáng — bề mặt trắng sáng, gần như mang tính lâm sàng trong sự tiết chế, được điểm xuyết bằng một màu xanh da trời điện (#11a8ff) chỉ xuất hiện khi cần hành động. Trang web gần như hoàn toàn trung tính — 98% achromatic — khiến mọi khoảnh khắc có màu sắc (điểm nhấn amber trên 'without a bot', icon lịch xanh lá, tag tím) đều có chủ đích thay vì chỉ để trang trí. Inter với letter-spacing âm dày (-0.025em ở kích thước display) nén các headline thành những khối tự tin mà không cần đến weight cực đoan — weight 700 ở 56px đọc rất dứt khoát nhưng không hung hăng. Cards sử dụng border 1px siêu mảnh qua các lớp shadow gần như vô hình thay vì stroke nhìn thấy được, tạo cho các product UI previews cảm giác như đang nổi nhẹ trên trang. Nút ghost 'Request a demo' bên cạnh CTA đã tô màu tạo ra một cấu trúc lựa chọn theo cặp xuất hiện xuyên suốt trang. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, button fills cho các hành động phụ | | Fog Surface | `#fafafa` | `--color-fog-surface` | Nền card thay thế, phân biệt section nhẹ | | Ash Border | `#cdcdcd` | `--color-ash-border` | Tất cả border UI — input, card, divider, icon rings — ở dạng 1px solid | | Stone Divider | `#ebebeb` | `--color-stone-divider` | Nền tag (pill highlight 'Within 47 seconds:'), dải nền section |

# WalletConnect — Style Reference > Những khối cobalt trên nền giấy da — các monolith xanh lam bão hòa nổi trên sa mạc trắng ấm, với các góc bo tròn làm mềm vẻ kỹ thuật nghiêm túc. **Theme:** light WalletConnect Pay là một thương hiệu thanh toán crypto xanh điện nằm gọn trong một canvas sạch, sáng: bề mặt off-white ấm áp, typography indigo-đen, và các card bo tròn cỡ lớn mang cảm giác consumer fintech hơn là công cụ hạ tầng. Điểm nhấn đặc trưng là một hero panel cobalt rực rỡ (radius 40px) đặt trên nền gần trắng, neo giữ một layout xen kẽ giữa ảnh sản phẩm full-bleed và khoảng trắng rộng rãi. Typography sử dụng KHTeka, một geometric humanist mang giọng điệu kỹ thuật nhưng thân thiện ở các weight 400–700, với màu navy đậm #1b2045 thay thế cho đen thuần để tạo cảm giác đọc ấm hơn. Các component tối giản một cách tự tin — pill-shaped buttons, ghost CTA, hairline borders, và hầu như không có shadow, để màu xanh bão hòa làm tất cả công việc tạo cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Cobalt | `#006cff` | `--color-electric-cobalt` | Hero panels, filled buttons, active nav indicators, link accents — tín hiệu thương hiệu chính, được dùng như một bề mặt full-bleed thay vì màu nút nhỏ để chiếm ưu thế trên trang | | Indigo Action | `#4672ff` | `--color-indigo-action` | Primary filled action buttons và border của chúng — một màu xanh hơi sáng hơn, thiên về tím dành cho các bề mặt tương tác cần cảm giác được nhấn và có thể click | | Deep Indigo | `#1b2045` | `--color-deep-indigo` | Primary text, headings, và dark button borders — thay thế đen thuần bằng một navy ấm mang vẻ uy quyền mà không gay gắt như #000 | | Sky Tint | `#66a7ff` | `--color-sky-tint` | Hover states, subtle outlined button borders, secondary navigation accents — một companion desaturated của Electric Cobalt cho các khoảnh khắc xanh không chiếm ưu thế |

# Dennis Snellenberg — Style Reference > Canvas editorial tối với headline khổng lồ, trầm lặng **Theme:** dark Ngôn ngữ portfolio editorial tối được xây dựng trên nền gần như đen, nơi màu sắc duy nhất có giá trị là một tông violet rực rỡ duy nhất. Toàn bộ giao diện thu gọn về hai tông — `#1c1d20` cho thế giới, `#ffffff` cho mọi chữ viết — với một custom sans-serif ở weight medium cố định làm tất cả công việc kể chuyện. Typography là nhân vật chính: một display name 216px tràn ra ngoài mép trang, trong khi body copy 12–15px nổi bên cạnh ảnh full-bleed. Violet xuất hiện như dấu câu hiếm hoi trên card và link fills, không bao giờ là trang trí. Các component phẳng, không viền, và lớn — rounded pills thay thế button, và một vòng trắng inset 1px duy nhất là toàn bộ ngôn ngữ shadow trong hệ thống. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Nền trang, bề mặt card, text trên nền sáng, viền mảnh — màu gần đen chiếm 95% giao diện | | Bone White | `#ffffff` | `--color-bone-white` | Text chính, bề mặt card đảo ngược, link text trên violet, viền inset nhẹ — tông sáng duy nhất trong hệ thống | | Fog | `#999d9e` | `--color-fog` | Text phụ mờ, chú thích, metadata — nằm giữa canvas và trắng trong thang neutral | | Graphite | `#494a4d` | `--color-graphite` | Lớp bề mặt nâng cao hơn canvas, nền card mềm, hiệu ứng hover của link — thêm nửa bậc chiều sâu mà không phá vỡ cảm giác đơn sắc |

# Handhold — Style Reference > giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu. **Theme:** light Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng | | Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng | | Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao | | Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |

# Bōjka Studio — Style Reference > fluorescent gallery wall **Theme:** light Bōjka Studio operates on radical typographic confidence: a single custom display face blown up to poster dimensions, paired with a near-total absence of color until a saturated electric green detonates across the hero. The page reads as a printed art-poster dragged into a browser — oversized black wordmark, generous whitespace, a single chromatic explosion, then calm white again. Surfaces stay flat and unshadowed; weight comes from scale and contrast, never from elevation or gradients. Components are reduced to their typographic essence — nav is bare text on a white strip, cards are giant rounded rectangles, and decorative geometry is implied by oversized radii (68px) rather than by borders or shadows. An orange (#ff4600) accent threads through headings and rule lines as a warm counterpoint to the cold green, never enough to compete — it just keeps the eye moving. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all hairline borders, nav text, link underlines — the dominant ink. At 21:1 against white it carries the entire typographic system on its own | | Graphite | `#282828` | `--color-graphite` | Secondary text, image and card borders, soft structural strokes — slightly lifted from pure black to create a quieter border weight without losing contrast | | Bone | `#ffffff` | `--color-bone` | Page canvas, card surfaces, image backgrounds — the neutral ground that lets the green and oversized type do all the visual work | | Fluorescent | `#0af500` | `--color-fluorescent` | Full-bleed hero/feature band background, section color blocks — a near-lime pure green used sparingly as a single saturated field. Its only job is to shock the eye and establish the studio's visual voice; it should never appear on UI controls, text, or thin UI strokes |