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

# International Magic — Style Reference > bảo tàng gallery về đêm — một luồng sáng duy nhất, một tác phẩm, và một bức tường nhung đen **Theme:** dark International Magic hiện ra trong một khoảng không gần như đen tuyệt đối, nơi chỉ có tác phẩm được phép lên tiếng. Toàn bộ giao diện là achromatic — chữ off-white trên nền than, với xám là biến số duy nhất — để sự chú ý đổ dồn vào thứ mà agency đang trình diễn. Layout thưa thớt, canh giữa và dọc, với khoảng thở rộng lớn giữa các section; navigation nằm gọn như ba từ lặng lẽ trên một dòng duy nhất ở đầu trang. Các component mềm mại và bo tròn: 24px trên device và work containers, 9999px trên button và badge, cùng một bóng đổ khuếch tán lớn nhẹ nhàng nâng nội dung lên khỏi bóng tối thay vì khóa chặt bằng các góc sắc. Typeface Wand UI Pro tùy chỉnh gánh gần như toàn bộ giọng thương hiệu — negative tracking ở kích thước display và tracking hơi rộng hơn trên micro-label tạo ra cùng một độ tương phản như trang: lặng lẽ ở tỷ lệ lớn, có chủ đích ở tỷ lệ nhỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void | `#0a0a0a` | `--color-void` | Nền trang, canvas chính — trường tối chứa mọi tác phẩm | | Chalk | `#f7f7f7` | `--color-chalk` | Viền mảnh, divider, đường viền input và cạnh card trên bề mặt sáng. Không dùng làm màu CTA chính | | Ivory | `#ebebeb` | `--color-ivory` | Nhãn button và viền button — ấm hơn Chalk một chút, dùng trên pill button trung tính để tạo cảm giác được nhấn nhưng không lạnh lẽo | | Ash | `#7c7c7c` | `--color-ash` | Link phụ và body text, divider nhẹ — xám trung bình cho type bị giảm nhấn mạnh nhưng vẫn cần đọc được |

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

# OpenWeb — Style Reference > Editorial broadsheet trên nền giấy hồng ấm. Một canvas phớt hồng mang những headline serif khổng lồ và một điểm nhấn xanh điện duy nhất — toàn bộ trang đọc như một spread editorial in ấn được dựng lại trên màn hình, nơi trọng lượng chữ và khoảng trắng ấm áp thay thế cho panel, border và shadow. **Theme:** light OpenWeb mang phong cách một tờ broadsheet in trên giấy hồng ấm: một canvas phớt hồng duy nhất (#f1e9e7), chữ gần như đen tuyền trong một font serif chuyển tiếp sắc nét, và một màu xanh điện rực rỡ là điểm nhấn màu sắc duy nhất. Giao diện gần như hoàn toàn thuộc về typography — không có card shadow, không panel border, không divider trang trí — để những headline serif khổng lồ ở 70–90px với tracking âm cực mạnh làm toàn bộ công việc cấu trúc. Nút đen đặc và link xanh ghost là những dấu hiệu UI duy nhất; mọi thứ còn lại là khoảng trắng, ngắt dòng và tông màu giấy ấm. Tâm trạng mang tính văn chương và suy tư, không giống app; các trang gần với một spread tạp chí hơn là một SaaS dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Blush Paper | `#f1e9e7` | `--color-blush-paper` | Canvas trang, tất cả background section — nền tông hồng ấm tạo cảm giác in ấn, giấy cho toàn bộ site. Không bao giờ là trắng tinh, không bao giờ là xám lạnh | | Carbon Ink | `#000000` | `--color-carbon-ink` | Text chính, nút đặc, tất cả iconography, form label, footer rules. Màu chủ đạo không phải canvas — điều khiển mọi yếu tố typographic và interactive | | Bone White | `#ffffff` | `--color-bone-white` | Màu text bên trong nút đen đặc, bề mặt reverse-fill và contrast input form. Dùng tiết kiệm làm tông đối lập với Carbon Ink | | Fossil Gray | `#7b7f83` | `--color-fossil-gray` | Muted helper text, secondary metadata, placeholder form nhẹ. Màu trung tính duy nhất làm mềm Carbon Ink cho copy không chính |

# Stable Audio — Style Reference > Sunlit studio on warm paper. **Theme:** light Stable Audio sử dụng ngôn ngữ studio trên giấy ấm: canvas là màu kem (#f4f1ec) thay vì trắng lâm sàng, để các headline đen đậm và một CTA màu hổ phách duy nhất nằm trên bề mặt mang cảm giác analog và dễ tiếp cận, giống như bìa đĩa than. Các panel màu full-bleed — oải hương, mù tạt, xô thơm, kaki — hoạt động như background section cỡ lớn phía sau các product mockup, tạo nhịp điệu cho trang giống như các mẫu màu sơn phía sau bàn mixer. Mọi phần tử tương tác đều có dạng pill (9999px) và mọi bề mặt card đều có góc gần như vuông 4px, tạo sự tương phản có chủ đích giữa controls bo tròn và khối nội dung góc cạnh. Một đồ họa hình bán nguyệt "mặt trời" đặc trưng xuất hiện trong mọi track artwork, và một màu xanh neon rực rỡ (#a0f32f) đánh dấu mọi phần tử âm thanh đang hoạt động, làm cho âm thanh hiện hữu trên toàn bộ giao diện. Product screenshots đảm nhận vai trò giải thích; illustration và lifestyle photography được cố tình loại bỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Amber Pulse | `#f9a916` | `--color-amber-pulse` | Accent vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính | | Lime Signal | `#a0f32f` | `--color-lime-signal` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. | | Lavender Wash | `#c4bae3` | `--color-lavender-wash` | Background panel tính năng text-to-audio — full-bleed section tint cỡ lớn | | Mustard Field | `#e1ca46` | `--color-mustard-field` | Background panel tính năng audio-to-audio — full-bleed section tint |

# Aevi Wellness — Style Reference > Nordic apothecary, weightless type. A muted slate-blue accent interrupts an otherwise achromatic, light-as-air editorial layout where product photography overlaps hairline-bordered cards on warm white. **Theme:** light Aevi Wellness reads like a Nordic editorial spread translated into e-commerce: generous product photography overlapping a warm off-white canvas, whisper-weight typography that gives headlines room to breathe, and a single muted slate-blue accent that appears only where the brand needs to signal action or section shift. The palette is almost entirely achromatic — warm near-black text (#231f20), pure white surfaces, and a powder-blue band (#d5e0ea) that structures the page into editorial chapters. Components are barely-there: ultra-thin hairline borders, 2px corner radii on most elements, and 60px pill buttons for primary actions. The overall feel is clinical-luxury — the products themselves are the visual subject, and the interface stays out of their way. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Powder Blue | `#d5e0ea` | `--color-powder-blue` | Section bands, card borders, decorative dividers — the brand's secondary canvas, used to segment the page into editorial chapters without introducing contrast | | Slate Bloom | `#a3bfdb` | `--color-slate-bloom` | Primary action buttons, active states — the single chromatic accent; its low saturation keeps it feeling clinical rather than commercial | | Warm Ink | `#231f20` | `--color-warm-ink` | Primary text, hairline borders, card outlines, icon strokes — near-black with a warm undertone that softens the high-contrast text against white | | True Black | `#000000` | `--color-true-black` | Icon fills, occasional heavy borders — used sparingly for graphical weight when maximum contrast is needed |

# Caserne — Style Reference > black gallery wall with white type whispers **Theme:** dark Caserne hoạt động như một portfolio đẳng cấp gallery: một canvas gần như đen tuyền, nơi ảnh editorial cỡ lớn đảm nhận vai trò chính, còn giao diện tự lùi về những đường viền mảnh như sợi tóc và kiểu chữ siêu mỏng. Ngôn ngữ thị giác mang sự kiềm chế của gallery — màu đen thật chiếm ưu thế, chữ đặt ở 13–14px trong custom ABC Oracle, và chuyển động duy nhất là scroll trang để lộ ra những ảnh dự án đồ sộ. Mọi UI element đều phải xứng đáng với vị trí của nó: không có navigation chrome, không button fill, không gradient trang trí — chỉ có text, image và một đường 1px. Dấu « » guillemet đặt trước nhãn dự án là một signature editorial kiểu Pháp-Canada, gợi về nguồn gốc Montreal của studio và neo thương hiệu vào một cảm quan curatorial, gần như typographic. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang, nền section full-bleed, hero containers | | Paper | `#ffffff` | `--color-paper` | Text chính, nhãn dự án, link navigation, icon strokes trên nền tối | | Frost | `#f2f2f2` | `--color-frost` | Viền mảnh (hairline borders), đường viền ảnh, grid dividers, nav separators — toàn bộ đường nét cấu trúc của giao diện | | Smoke | `#858484` | `--color-smoke` | Text phụ tắt tiếng, mô tả dự án, chú thích metadata |

# Vivid Spain — Style Reference > Lavender dusk over white marble — a soft violet wash on a clean white surface, where one vivid purple accent does all the work. **Theme:** light Vivid is a lavender-lit fintech canvas: a white marble surface washed in soft violet gradients, where the only chromatic decision a designer makes is how much purple to pour on. The system is radically monochromatic — a single vivid violet (#7d33f6) carries every interactive moment, from logo to CTA to active toggle, while the rest of the interface stays in a disciplined gray-on-white scale. Components breathe through soft pastel card backgrounds (#f4edff, #e9d4fb) and pill-shaped controls (100px radius) that feel like rounded candy, never corporate. Typography is geometric Satoshi at every weight, with aggressive negative letter-spacing on display sizes pulling the headlines tight, and generous positive tracking on small uppercase labels. The visual signature is restraint: no shadows, no borders on hero surfaces, no decorative noise — just purple light, white space, and confident type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vivid Violet | `#7d33f6` | `--color-vivid-violet` | Primary CTAs, logo, active nav, toggle thumb, link emphasis — the single chromatic decision that powers all interactivity. Deeply saturated against white to command attention without the corporate-blue cliche | | Lilac Veil | `#f4edff` | `--color-lilac-veil` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Orchid Whisper | `#e9d4fb` | `--color-orchid-whisper` | Muted violet wash for feature card backgrounds and decorative fills. Sits between Lilac Veil and Vivid Violet to create tonal depth in card grids | | Periwinkle Glow | `#9292ff` | `--color-periwinkle-glow` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Airbnb — Style Reference > Ảnh kỳ nghỉ ghim trên bảng liệu trắng — ảnh sáng được đặt trong khung bo tròn trên nền gần trắng, với một chiếc ghim màu san hô duy nhất giữ mọi thứ lại với nhau. **Theme:** light Giao diện của Airbnb là một marketplace ấm áp, thoáng đãng được xây dựng trên nền gần trắng và một điểm nhấn thương hiệu màu đỏ san hô duy nhất. Canvas #f7f7f7 với bề mặt card #ffffff tạo ra chiều sâu rất nhẹ — giấy xếp chồng lên giấy — nơi nhiếp ảnh đảm nhận toàn bộ trọng lượng thị giác. Font biến thiên tùy chỉnh Airbnb Cereal VF chạy ở các weight 400–700 trên một thang đo chặt chẽ, nhỏ gọn với letter-spacing âm ở kích thước lớn, mang lại cho UI sự tự tin nhẹ nhàng mà không cần yếu tố trang trí. Màu đỏ san hô #ff385c duy nhất xuất hiện tại các điểm chạm thương hiệu (logo, trạng thái active, nút tìm kiếm), khiến nó giống như một chữ ký hơn là một màu hệ thống. Ảnh card tràn cạnh (edge-to-edge) với góc bo 20px — bán kính bo tròn duy nhất hào phóng trong một layout thông tin dày đặc, nhỏ gọn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Rausch Coral | `#ff385c` | `--color-rausch-coral` | Tô màu logo brand, gạch chân nav active, nền icon nút tìm kiếm, trạng thái active của carousel dot — chữ ký màu sắc duy nhất giúp nhận diện giao diện | | Rausch Deep | `#e00b41` | `--color-rausch-deep` | Làm tối màu Rausch Coral ở trạng thái hover trên các phần tử brand tương tác | | Carbon | `#222222` | `--color-carbon` | Văn bản chính, heading, border, icon stroke — màu trung tính chủ đạo cho hầu hết nội dung typographic | | Slate | `#6a6a6a` | `--color-slate` | Văn bản phụ (metadata, subtext, nhãn phụ), icon fill phụ |

# Obviously — Style Reference > Claymation vui nhộn trên nền giấy trắng. Zams đặt những sinh vật play-doh hình học thân thiện lên nền trắng sạch, gần như phòng thí nghiệm, để một màu tím rực rỡ duy nhất làm toàn bộ công việc về màu sắc, và một serif ấm áp đảm nhiệm phần ấm áp của typography. **Theme:** light Zams vận hành một hệ thống thị giác song ngữ: một thẩm mỹ doanh nghiệp tối giản nghiêm ngặt, lấy serif làm đầu, kết hợp với dàn nhân vật claymation mũm mĩm, màu kẹo ngọt — chính là hiện thân của các AI worker. Nền trắng là một sân khấu có chủ đích — nó để CTA tím (#7451f2), các pattern chấm chấm tinh tế, và các linh vật pastel gánh vác toàn bộ cá tính thị giác, trong khi phần chrome xung quanh (tab, logo tích hợp, huy hiệu tuân thủ) vẫn lặng lẽ hoạt động. Headline dùng serif ấm (Lustria) với negative tracking dày, body và UI chạy trên DM Sans, và các label như "COMING SOON", "EVAN", "YOUR NEXT HIRE" chuyển sang Martian Mono để tạo giọng kỹ thuật, gần như nhật ký build cho từng section. Các component có góc vuông: 4px corners, hairline borders, một button shadow nhẹ, và không có gradient trang trí. Tổng thể mang giọng doanh nghiệp đáng tin cậy nhưng không khô khan — các linh vật phá vỡ sự căng thẳng, và các meta-label monospace báo hiệu "sản phẩm này được kỹ thuật hóa, không phải lắp ráp." ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Iris Violet | `#7451f2` | `--color-iris-violet` | Nút CTA filled chính, active tab indicator, điểm nhấn màu duy nhất trong toàn bộ hệ thống. Một màu tím rực rỡ trên nền gần như không màu tạo sự hiện diện thương hiệu mà không gây nhiễu màu | | Deep Iris | `#5952a1` | `--color-deep-iris` | Viền action outlined/ghost, tím phụ cho secondary buttons và stroke accents. Tông tối hơn của primary — giữ nguyên hệ thương hiệu khi cần bề mặt nhẹ hơn | | Cobalt Info | `#0072c6` | `--color-cobalt-info` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. Không nâng lên làm màu CTA chính | | Powder Blue | `#d6e5ff` | `--color-powder-blue` | Form states trung tính, badge text, và UI feedback nhẹ nhàng khi màu cần giữ ở mức khiêm tốn. |

# Stocketa — Style Reference > Neon aurora on frosted glass — a light, weightless interface floating beneath a prism-washed sky. **Theme:** light Stocketa floats its product on a dreamy light canvas washed with a soft radial aurora — green, teal, purple, and pink bleeding from the top — where the color is felt as atmosphere rather than seen as decoration. The interface below stays calm and almost achromatic: white cards, hairline borders, and a signature three-layer shadow (a faint blue-tinted outer drop, a 1px white inner highlight, and a barely-there navy inset) that whispers elevation instead of declaring it. A single vivid magenta (#995bb9) does all the emotional work — painting headlines as a left-to-right gradient, filling icons, and pulling the eye through each section. Typography is a custom geometric sans (averta standard) cut for very tight negative tracking at display sizes up to 98px, giving even the biggest headlines a compressed, confident posture. The phone mockup is the hero: it sits at the visual center of every section, turning the product itself into the brand's primary visual asset. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aurora Magenta | `#995bb9` | `--color-aurora-magenta` | Headline gradient start, icon fills, decorative brand strokes — the single chromatic voice of the system, used as gradient text on display headings and as fill on small icon badges | | Deep Iris | `#5b638c` | `--color-deep-iris` | Muted violet used for decorative SVG strokes and secondary graphic outlines — sits behind the magenta as the system-wide line color | | Midnight Ink | `#1d2630` | `--color-midnight-ink` | Primary body and heading text on light surfaces — slightly warmer than pure black, reads softer at large sizes while keeping AAA contrast | | Obsidian | `#000000` | `--color-obsidian` | Highest-weight text and the densest border color — used where maximum contrast is required against the near-white canvas |

# Agence Foudre — Style Reference > Trang splash theo phong cách tạp chí với tông hồng son môi. **Theme:** light Agence Foudre sử dụng ngôn ngữ editorial-magazine táo bạo: nền cream ấm áp, display type condensed cỡ lớn màu magenta rực rỡ, và một màu xanh rừng sâu bất ngờ vừa làm body text vừa làm điểm nhấn. Giao diện được cố tình để thưa thớt — phần lớn viewport là khoảng trống, và nội dung xuất hiện dưới dạng các cụm typography dày đặc thay vì card grid hay hình ảnh sản phẩm. Màu sắc được dùng như dấu câu cảm xúc: hồng nóng gào thét, hồng nhạt thì thầm, xanh đậm neo giữ, và kem ấm làm mềm mọi bề mặt. Các component tối thiểu — nút hồng tròn, badge hình pill, và chữ to khỏe là toàn bộ chrome. Đây là một portfolio/expression site, không phải product UI: tính cách thương hiệu CHÍNH LÀ typography và màu sắc, mọi thứ khác đều lùi lại phía sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lipstick Magenta | `#db3c8a` | `--color-lipstick-magenta` | Display headlines, màu thương hiệu chính, icon buttons, heading accents — hồng rực mang 100% nhận diện thương hiệu | | Forest Ink | `#00522d` | `--color-forest-ink` | Body text, links, iconography, footer — xanh đậm bão hòa trên nền cream tạo sự trang trọng editorial mà không màu trung tính nào có được | | Blush Cream | `#fce5df` | `--color-blush-cream` | Nền mềm nhẹ, badge backgrounds, khối wash nhẹ, hover states — hồng kem ấm nằm giữa trang và điểm nhấn | | Warm Chalk | `#fff8f6` | `--color-warm-chalk` | Nền hỗ trợ sáng cho background nhẹ và phân cách section. Không dùng làm màu CTA chính |

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

# Joby Aviation — Style Reference > Golden hour cockpit over a sleeping city — every screen is a window seat. **Theme:** light Joby Aviation's design language is cinematic aviation editorial: full-bleed golden-hour photography carries the narrative, with a warm parchment canvas (#f5f4df) and near-black ink (#0e1620) doing all the structural work. The interface stays minimal and almost invisible so the imagery does the persuading — text overlays float over photographs with thin left-border accents rather than boxed containers. Vivid electric blue (#007ae5) appears only as functional punctuation on floating cards, the bottom tour strip, and select icon strokes, while the custom Joby Display type at near-200px sizes whispers the headline rather than shouts it. Components are light, floating, and round; even the tour card and small chips use generous 16px radii, and the navigation is reduced to a centered logomark with a hamburger and a single text link. The system never decorates — every surface is either a photograph, the warm cream canvas, or a single solid blue band. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Cream | `#f5f4df` | `--color-parchment-cream` | Page canvas, card surfaces, text color on dark imagery — the warm off-white that keeps photography from feeling cold | | Carbon Ink | `#0e1620` | `--color-carbon-ink` | Body text, headings, hairline borders, icon strokes — near-black with a cool blue undertone that pairs with the cream | | Pale Sky | `#c1dfef` | `--color-pale-sky` | Soft secondary surface wash, subtle section backgrounds when cream needs contrast | | Shadow Khaki | `#abab9c` | `--color-shadow-khaki` | Warm gray used in card box-shadow tinting — gives elevation a warm cast rather than a cold blue |

# Not Real — Style Reference > Một spread gallery biên tập trên nền vellum xám — giống catalog cao cấp, nơi chỉ có tác phẩm nghệ thuật mới được phép "hét" bằng màu sắc. **Theme:** light NotReal hoạt động như một gallery kiểu chữ: một tấm canvas gần như trống rỗng, màu trắng ngà, nơi các product render cỡ lớn và campaign stills đảm nhiệm phần kể chuyện bằng hình ảnh, trong khi hai bộ typeface tùy chỉnh gánh vác phần ngôn từ. Hệ thống được thiết kế thiếu màu sắc một cách có chủ đích — ba sắc thái xám chiếm 99% giao diện — để mỗi pixel bão hòa đều là tác phẩm của khách hàng, không phải UI chrome. Layout mang phong cách editorial, không giống app: một lưới hai cột bất đối xứng, nơi hero images được đặt ở các độ lệch dọc khác nhau để tạo luồng đọc hình chữ Z, với vertical running text và micro-metadata tạo nhịp điệu của một catalog in ấn. Sự kết hợp giữa ogg (một serif high-contrast chịu ảnh hưởng của didone) cho display và telegraf (sans hình học) cho mọi thứ khác là điểm nhấn đặc trưng — một sự đối lập thì thầm-và-nói, nơi serif công bố tác phẩm và sans ghi chép lại nó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Charcoal | `#292a2c` | `--color-ink-charcoal` | Văn bản chính, border strokes chủ đạo (635 lần xuất hiện dưới dạng borderColor), nav accents | | Vellum | `#f2f2f2` | `--color-vellum` | Canvas trang, bề mặt card — màu trắng ngà pha chút ấm, tạo cảm giác giấy thật thay vì digital white | | Full Black | `#000000` | `--color-full-black` | Link border underlines, footer text, icon strokes, image overlay text — được dùng như một neo màu sắc chỉ khi cần độ tương phản tối đa trên nền Vellum |

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

# DNCO — Style Reference > editorial gallery trên nền linen trắng. **Theme:** light DNCO vận hành dựa trên sự kiềm chế triệt để về mặt typographic: một sans-serif duy nhất ở một weight duy nhất (Neue Haas Unica Pro, 400) được triển khai trên thang đo từ 72px đến 16px, neo trên bảng màu gần như achromatic gồm trắng, trắng ngà và đen tuyền. Trang web mang phong cách như một ấn phẩm editorial in ấn — headline thở nhờ khoảng trắng rộng rãi, border là những đường hairline siêu mảnh (#e5e7eb), và màu sắc duy nhất trong hệ thống đến từ ảnh dự án, không bao giờ đến từ chrome hay accent fill. Navigation và các thành phần tương tác có dạng pill (border-radius 9999px), text luôn là nguyên thể tương tác chính, và brand wordmark đóng vai trò như một hero full-bleed đảo màu thành đen. Các component tối giản, không trọng lượng, được định hình bởi border thay vì shadow — thẩm mỹ là catalogue gallery, không phải SaaS dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt chính cho khối nội dung, đế card | | Hairline Mist | `#e5e7eb` | `--color-hairline-mist` | Hairline border, divider, lớp phủ bề mặt nhẹ, nền filter chip, placeholder ảnh | | Obsidian | `#000000` | `--color-obsidian` | Text chính, brand wordmark fill, nền hero tối, link text, màu heading | | Ash | `#a3a3a3` | `--color-ash` | Text phụ muted, caption, nhãn filter không hoạt động, helper text |

# Peppermint — Style Reference > Midnight canvas với streamers vui tươi — một khoảng không xanh đậm nơi các dải ribbon vẽ tay và chữ hình học nhảy múa trên bề mặt giấy kem ấm áp. **Theme:** dark Peppermint vận hành trên nguyên lý midnight-canvas: một màu indigo gần như đen (#0a1d4b) thấm đẫm trang web vừa làm nền vừa là DNA thương hiệu, tạo cảm giác như màn hình đại dương sâu thẳm nơi các minh họa đậm nét và chữ hình học trôi nổi tự do. Display cuts của Excon — hình học, editorial, tracking dày — là chữ ký thị giác, kết hợp với hơi ấm nhân văn của Generalsans cho mọi nội dung đối thoại. Hệ thống cố tình đan xen giữa các dải dark immersion và bề mặt giấy kem ấm (#fcf6ea, #faedd2), để các vùng nội dung nặng (FAQ, form) có cảm giác chạm vào sự ấm áp hữu hình thay vì trôi nổi trong khoảng không. Minh họa vẽ tay với các nét ribbon uốn lượn màu hồng, xanh ngọc và xanh băng đảm nhận phần nặng về không khí — không có photography, không gradient, không bóng đổ trang trí. Các component đều bo tròn tự tin (card 24px, pill button 48–100px) và nằm trên canvas chỉ nhờ tương phản màu sắc, không dùng elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Midnight Sapphire | `#0a1d4b` | `--color-midnight-sapphire` | Canvas chính cho hero và feature bands, body text trên bề mặt kem, đường viền action — khoảng không mà mọi thứ trôi nổi trên đó | | Bright Violet | `#9c8bf9` | `--color-bright-violet` | Màu nhấn hiếm cho highlight buttons và khoảnh khắc nhấn mạnh — một dấu câu sống động trên nền navy mờ | | Deep Indigo | `#162d67` | `--color-deep-indigo` | Bề mặt card nâng cao so với canvas chính — sáng hơn Midnight Sapphire một bậc, dùng cho nested feature cards | | Slate Violet | `#3a486b` | `--color-slate-violet` | Text mờ trên các section tối, border và divider phụ — một companion đã khử bão hòa cho màu navy chính |

# Udemy — Style Reference > Modern classroom whiteboard with violet ink. **Theme:** light Udemy reads as a calm, instructive marketplace: white canvas with soft cool-gray surfaces, a near-black ink scale for type, and two chromatic accents — a signature violet and a warm orange — that always appear as outlined borders or small marks rather than filled panels. Components are flat and lightweight, leaning on 8px radii and hairline borders instead of heavy elevation. A 3D-illustration vocabulary (soft clay-like product objects, isometric shapes, saturated accent pops) carries the personality, while the UI itself stays disciplined and instructional. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#2a2b3f` | `--color-ink` | Primary text, heading strokes, default icon strokes, body copy | | Obsidian | `#202230` | `--color-obsidian` | Card backgrounds in dark sections, inverted surfaces, footer panel | | Graphite | `#33364a` | `--color-graphite` | Body-level dark surfaces, secondary panel fills | | Slate | `#3d4055` | `--color-slate` | Card borders and muted dark backgrounds |

# Shelby — Style Reference > neon signage on cocoa leather **Theme:** dark Shelby runs on a warm-cocoa dark canvas punctuated by electric hot-pink type — a brutalist-cute aesthetic that swaps the typical fintech dark-gray for an almost edible brown background and turns contrast into spectacle. Typography is the hero: oversized GT-Planar display weights at 59-95px with aggressively tight tracking, set center-aligned on full-bleed color blocks that flip between deep umber, hot pink, and pale rose. Components are flat and undecorated — no shadows, tiny 4-10px radii, monospaced uppercase micro-labels in ABCReproMono that float above headlines like product codes. The rhythm is theatrical: each section is a color field change, not a card grid. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cocoa Husk | `#322312` | `--color-cocoa-husk` | Primary page canvas, body text on light surfaces, large display type on pink fields | | Neon Orchid | `#ff77c9` | `--color-neon-orchid` | Signature accent — massive display headlines on dark sections, body links, icon strokes, tag fills, the dominant brand voice | | Petal Wash | `#ffdfef` | `--color-petal-wash` | Light section canvas, button label text on dark fields, badge text | | Plum Velvet | `#470b64` | `--color-plum-velvet` | Deepest accent surface — section backgrounds that sit between the cocoa base and neon pink, creates tonal depth in the surface stack |

# Twocreate — Style Reference > gallery wall trên nền giấy kem **Theme:** light Twocreate vận hành theo logic của một gallery floor: nền canvas ấm màu kem, một màu mực gần đen duy nhất, một typeface, và tuyệt đối không gì khác. Mọi quyết định giao diện đều phục tùng typography — không có hệ thống màu sắc, không hệ thống đổ bóng, không hệ thống border, không hệ thống icon, không hệ thống button. Trang web mang phong cách như một catalogue triển lãm in ấn, được đặt trong PP Neue Montreal với những bước nhảy tỷ lệ cực đoan, từ label footer 10px đến display headline 111px chiếm nửa viewport. Các component không thực sự là component; chúng là những khối typographic được phân cách bởi whitespace. Ảnh sản phẩm xuất hiện là một ảnh editorial đơn lẻ — không card, không grid, không hiệu ứng — được đặt trong luồng nội dung với sự kiềm chế tương tự như text. Đây là một studio site tin tưởng vào tác phẩm và typeface để gánh toàn bộ trọng lượng thị giác, và coi mọi discipline thiết kế khác là trang trí cần loại bỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#0c0c0c` | `--color-ink` | Toàn bộ text, link, nav items, body copy, tên client, list items, và nét icon. Màu gần đen thay vì đen tuyền giúp type không bị gắt trên nền canvas ấm | | Paper | `#f9f7f4` | `--color-paper` | Nền trang và canvas chính. Màu trắng ngà ấm với ánh vàng-hồng nhẹ — thay thế sự lạnh lẽo của #fff bằng cảm giác xúc giác của giấy không tráng phủ | | Stone | `#e3e1dd` | `--color-stone` | Tông bề mặt phụ, đường phân cách tinh tế, và các section banded cần một nửa bước xa khỏi canvas mà không đưa vào màu tương phản thực sự | | Carbon | `#000000` | `--color-carbon` | Dành riêng cho những khoảnh khắc text có trọng lượng cao nhất cần màu đen tuyền — thường là display headline và nav lockups. Nặng hơn Ink một chút để nhấn mạnh typographic thay vì tương phản màu |

# Panxo — Style Reference > Data terminal trong tông mực ấm — mọi bề mặt đều gợi giấy sổ cái, mọi điểm nhấn đều giống như một ô được tô sáng trong bảng tính. **Theme:** light Panxo mang phong cách một data terminal khoác lên mình tủ đồ của startup — số liệu và chỉ số được đặt ở vị trí trung tâm, nhưng bảng màu lại là kem ấm và gần đen thay vì xanh lạnh. Bề mặt nền là #fafafa nghiêng về #f7f3eb (màu trắng ngà hơi ấm), trong khi khối text chính là màu gần đen đậm #1c1a17 — ấm hơn đen tinh khiết, gần như màu cà phê. Hero visualization sử dụng gradient màu kẹo (teal → violet → amber) làm điểm nhấn màu sắc duy nhất giữa cấu trúc achromatic. Mona Sans ở weight 700 và negative tracking mạnh (-0.04em ở 56px) khiến headline trông nén chặt và có chủ đích — giống nhãn dữ liệu hơn là tuyên bố. Interactive elements sử dụng một màu cam đậm duy nhất (#ff6020) cho CTA, khác biệt với màu violet dùng cho data-highlight (#777eff, #731fff) dùng cho tín hiệu phân loại ngữ nghĩa bên trong UI demo. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Coal Ink | `#1c1a17` | `--color-coal-ink` | Text chính, nền button CTA filled, bề mặt card tối — ấm hơn đen tinh khiết, tránh cảm giác lạnh dù có độ tương phản cao | | Ledger White | `#fafafa` | `--color-ledger-white` | Nền trang, bề mặt card, badge fill — bề mặt chủ đạo; hơi ấm hơn #ffffff, tạo cảm giác giấy mờ | | Parchment | `#f7f3eb` | `--color-parchment` | Lớp nền hero section — tông bề mặt ấm nhất, dùng cho vùng không gian lớn | | Ash | `#f1f1f1` | `--color-ash` | Border, đường kẻ phân cách, ghost button border |

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

# Ayaka B. Ito — Style Reference > Editorial spread on warm linen paper. A tactile, magazine-like atmosphere where oversized serif type and flat color planes replace the usual UI scaffolding. **Theme:** mixed Ayaka B. Ito presents an editorial portfolio language: full-bleed warm-toned pages flipping between a dust-pink cover collage, a terracotta-rust intro spread, and oversized serif display panels. The system reads like a printed magazine — flat color planes, hairline rules, and one custom display serif that swells to extreme positive tracking on hero copy. Color is used as whole-page atmosphere rather than UI accent: terracotta, olive, teal, gold, and dusty pink each take over entire sections to signal project boundaries. Components are reduced to their editorial primitives — a top bar of bare category links, tiny parenthesized section tags, and pill-shaped language toggles — with no shadows, no cards, and almost no raised surfaces. The page breathes with generous vertical rhythm and lets typography do all the structural work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Body text, hairline borders, and rule lines — the dominant structural color used everywhere text and dividers are drawn | | Bone White | `#ffffff` | `--color-bone-white` | Primary page canvas and base background for gallery and intro spreads |

# Sackville & Co. — Style Reference > Cobalt zine ép trên nền kem — một editorial spread vẽ tay, nơi illustration là chính và UI chỉ là text được sắp chữ trên giấy ấm. **Theme:** light Sackville & Co. mang phong cách một risograph zine editorial ép trên giấy kem: một illustration cobalt xanh vẽ tay chiếm một nửa, nửa còn lại là canvas trắng kem với grotesque type dày đặc và một oval cỡ lớn viền xanh. Hệ thống được thiết kế theo mã in ấn — màu phẳng, không gradient, không shadow, không button có fill — và dùng bảng màu phụ bão hòa (peach, fire-red, marigold, terracotta) làm điểm nhấn tông màu trong artwork và border, không phải UI fill chức năng. Typography đảm nhận toàn bộ hệ thống phân cấp: Founders Grotesk weight 400 với line-height âm mạnh (0.80–0.90) ở display size tạo áp lực masthead như bìa tạp chí, trong khi TimesNow SemiLight mang lại sự tương phản serif editorial cho một số heading. Mọi thứ đều mang cảm giác sắp chữ thủ công: outline mảnh, khoảng trắng rộng rãi, không elevation, không card bo tròn — chỉ là mực in tự tin trên giấy ấm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Paper | `#f3f4ee` | `--color-cream-paper` | Canvas trang, bề mặt card — nền trắng kem ấm áp khiến mọi màu mực trông như in | | Bone White | `#f8f8f8` | `--color-bone-white` | Lớp nền thay thế, phân biệt section nhẹ nhàng so với cream canvas | | Press Black | `#231f20` | `--color-press-black` | Text chính, border, divider, icon stroke — màu đen gần như mực in neo mọi màn hình | | Charcoal Headline | `#383435` | `--color-charcoal-headline` | Text heading hiển thị — hơi nhạt hơn press black để masthead mềm hơn |