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

# Heavyweight — Style Reference > Kho lưu trữ mẫu giấy. Một bức tường các letterform được chụp ảnh trên nền giấy có họa tiết, treo trên tường gallery màu trắng ngà mát với khung viền siêu mảnh. **Theme:** light Heavyweight xử lý các typeface của mình như những vật thể bảo tàng: mỗi card trưng bày một mẫu chụp ảnh của chữ cỡ lớn đặt trong không gian vật lý, tràn đầy card từ mép này sang mép kia. Phần chrome xung quanh tan biến thành một thanh navigation mỏng, các đường viền siêu mảnh, và một sans tùy chỉnh duy nhất (Nuckle) ở cỡ chỉ 14–16px — để các mẫu chữ đảm nhận mọi quyết định thị giác. Bảng màu gần như đơn sắc: canvas trắng ngà mát (#f3f5fa), bề mặt card trắng, mực gần đen (#222222), với một màu xanh bạc hà tươi sáng duy nhất (#39d17f) dành riêng cho các tag phát hành mới. Một border-radius 11px khác thường nằm giữa phong cách editorial và soft-modern, và grid 3 cột thở với khoảng cách 12px thoải mái trong khi mật độ specimen dày đặc giữ cho trang luôn đầy đặn về mặt thị giác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas Mist | `#f3f5fa` | `--color-canvas-mist` | Nền trang, bề mặt cơ sở chứa mọi thứ. Trắng ngà mát với một chút xanh nhẹ — khác biệt so với trắng tinh khiết để các card trắng trông như được nâng lên mà không cần đổ bóng | | Card White | `#ffffff` | `--color-card-white` | Bề mặt card, vùng chứa specimen, nền navigation. Tạo bước nâng từ canvas → card thông qua tương phản bề mặt đơn thuần | | Press Black | `#222222` | `--color-press-black` | Văn bản chính, đường viền cấu trúc, khung card, đường viền nút. Gần đen (không phải #000 thuần) để trông như mực in thay vì khoảng trống trên nền canvas mát | | Hairline Char | `#2d2d2d` | `--color-hairline-char` | Đường viền phụ, dải phân cách nav, đường kẻ cấu trúc tinh tế. Tối hơn Press Black một bậc để tạo phân cấp giữa khung chính và phụ |

# Letterboxd — Style Reference > Darkened cinema lobby with neon rating glow **Theme:** dark Letterboxd reads as a darkened cinema lobby: a near-black canvas tinted blue, content stacked in quiet horizontal bands, and one unmistakable acid-green accent that fires only at moments of action or rating. The dual-typeface system pairs a utilitarian neo-grotesque (Graphik) for chrome with a literary serif (Tiempos) for editorial moments, creating a tension between product UI and magazine. Density is comfortable, never crowded — the grid breathes around film posters and review cards, with 3px micro-radii keeping the geometry sharp and the green CTA as the only curve that matters. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Black | `#14181c` | `--color-void-black` | Page canvas, app background | | Carbon | `#202830` | `--color-carbon` | Elevated surface — cards, modals, popovers | | Slate | `#2c3440` | `--color-slate` | Borders, dividers, subtle separators | | Graphite | `#445566` | `--color-graphite` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |

# Orderful — Style Reference > industrial command deck — a logistics dispatcher's printed control sheet in black ink and surgical vermillion, every page restrained enough to let a single CTA shout. **Theme:** light Orderful reads as an industrial command deck: a near-pure achromatic surface where black-and-white typography and 8px radii meet a single surgical vermillion accent that punctuates actions rather than decorates. The typographic voice belongs to telegraf, a custom grotesk spanning weights 100–700 and sizes 12–72px, tightened with −0.025em to −0.03em tracking on display and expanded 0.025em on uppercase eyebrows, with modernGothic at 14px/300 handling a specific small-text register via the ss02 alternate. Geometry is disciplined — one universal 8px radius, one two-layer shadow stack used sparingly, and a base 8px spacing scale that breathes at 40–64px section gaps. The result is a calm, information-rich B2B surface that treats color as a scarce commodity: most screens stay monochrome, letting the single red-orange mark function as the only signal that something is actionable. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vermillion Signal | `linear-gradient(94deg, rgb(255, 2, 1) -33.85%, rgb(255, 120, 2) -1.54%, rgb(255, 2, 1) 73.55%)` | `--color-vermillion-signal` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#000000` | `--color-ink-black` | Hairline borders, logo marks, high-contrast icon strokes, strong body emphasis | | Carbon | `#1f1f1f` | `--color-carbon` | Dark card backgrounds, inverted feature panels, footer surface | | Slate 900 | `#101828` | `--color-slate-900` | Display and heading text, hero headlines — the dominant typographic color |

# sweetgreen — Style Reference > bảng phong cách farm-stand vào giờ vàng **Theme:** light Hệ thống thiết kế của sweetgreen là một thẩm mỹ ấm áp, pha trộn giữa farm-stand và typography hiện đại: nền cream (#f4f3e7) bắt nguồn từ chất liệu tự nhiên, với deep forest green làm neo cấu trúc và electric lime (#e6ff55) làm màu hành động đơn lẻ, năng lượng cao. Nhiếp ảnh là yếu tố dẫn dắt thương hiệu — những shot đồ ăn overhead, bão hòa màu, trên nền gạch ấm, gốm sứ và bê tông — được xử lý như hero, không bao giờ là trang trí. Typography đảm nhận phần nặng trên chrome: một geometric sans tùy chỉnh (SweetSans) thể hiện các nhãn danh mục cỡ lớn và hero headline ở weight cực đoan (400 ở 70–80px, với line-height 0.85 khiến các chữ gần như chạm nhau), trong khi một display face siêu nhẹ thứ cấp (Grenette ở 200) tạo sự tương phản qua sự kiềm chế. Các component được thiết kế tối giản có chủ đích — pill-shaped buttons, ghost text links với mũi tên, product cards không badge — để đồ ăn và headline typography chiếm trọn mọi màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Forest | `#00473c` | `--color-deep-forest` | Màu thương hiệu chính, nav logo, dark pill buttons, text accents, badge borders, link colors — màu xanh cấu trúc neo giữ bảng màu | | Lime Glow | `#e6ff55` | `--color-lime-glow` | Màu hành động xanh cho filled buttons, trạng thái điều hướng được chọn, và các thời điểm chuyển đổi tập trung. | | Sage Mist | `#d8e5d6` | `--color-sage-mist` | Nền section, card surfaces, content band xen kẽ — màu xanh thực vật nhẹ nhàng báo hiệu sự tươi mới mà không cạnh tranh với ảnh đồ ăn | | Warm Sand | `#e8dcc6` | `--color-warm-sand` | Accent surface cho các section band xen kẽ — màu be ấm kết hợp với ảnh đồ ăn và thêm sự đa dạng earthy vào bảng màu xanh chủ đạo |

# Poly — Style Reference > Ember trên nền sứ — một chấm gradient ấm lơ lửng trên trang editorial trắng tinh, bao quanh bởi headline serif nhẹ nhàng và ảnh full-bleed. **Theme:** light Poly là phần mềm editorial: nền canvas off-white ấm (#f4f4f4), mực gần đen cho text và UI, và một gradient duy nhất từ cam ember sang đỏ dành riêng cho brand mark. Nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí — ảnh full-bleed về bàn làm việc với chất liệu tự nhiên và ánh sáng định hướng ấm thay thế cho illustration và trang trí. Display type là humanist serif (Haffer ở weight 450, với tính năng liga và ss04) được kéo chặt ở -0.02em, kết hợp với Inter cho UI. Hệ thống mang cảm giác kiềm chế như cách một trang tạp chí kiềm chế: một khoảnh khắc màu sắc duy nhất, đường viền mảnh thay vì đổ bóng, bán kính 8px ở mọi nơi, và lưới cột để ảnh có không gian thở. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Gradient | `linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%)` | `--color-ember-gradient` | Brand mark, logo Poly, điểm nhấn màu duy nhất — cam ấm chuyển sang đỏ tín hiệu, chỉ dùng trên identity, không bao giờ dùng trên body UI | | Porcelain | `#f4f4f4` | `--color-porcelain` | Canvas trang, bề mặt card, text inverted trên nền ảnh tối | | Onyx | `#000000` | `--color-onyx` | Viền tối và separator cho bề mặt nâng cao và UI inverted. Không dùng làm màu CTA chính | | Graphite | `#292930` | `--color-graphite` | Text phụ, viền mảnh, icon fill, độ ấm nhẹ giúp gần đen không bị lạnh lẽo |

# Dock — Style Reference > Nắng sớm trên giấy kem, nhịp đập cobalt **Theme:** light Dock vận hành trong ngôn ngữ không gian làm việc ngập nắng, ấm áp màu kem: nền #faf9f7 mềm mại thay thế phông nền SaaS trắng tinh thông thường, mang đến cho mọi màn hình cảm giác như giấy, gần gũi. Typography là yếu tố tạo trọng lượng — headline Roobert 84px đặt cạnh body text 16px với khoảng thở rộng rãi, khiến nội dung trông như những dòng chữ in tự tin thay vì UI chrome. Một màu xanh cobalt điện (#0068f9) duy nhất điểm xuyết vào bảng màu trung tính tĩnh lặng, là màu tương tác duy nhất: filled CTA, active state, và link đều dùng chung sắc xanh sống động này, trong khi màu violet phụ (#6736eb) xuất hiện tiết kiệm làm decorative accent. Các component vẫn siêu nhẹ — pill-shaped buttons, hairline borders, card nâng nhẹ, không shadow nặng — để ảnh chụp sản phẩm trở thành visual hero thay vì chrome bao quanh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas Cream | `#faf9f7` | `--color-canvas-cream` | Nền trang — màu trắng ngà ấm thay vì trắng tinh, mang đến cảm giác như giấy, gần gũi cho toàn bộ hệ thống | | Surface Ivory | `#fbfaf7` | `--color-surface-ivory` | Bề mặt card và panel — sáng hơn canvas một bước để tạo độ nâng nhẹ mà không cần shadow | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt nâng cao, nền nav, text trên button filled CTA | | Lavender Mist | `#f4f0ff` | `--color-lavender-mist` | Lớp phủ trang trí phía sau icon hoặc highlight badge — sắc lạnh đối trọng với nền kem ấm |

# NEON Rated — Style Reference > cinematic gallery behind crimson neon **Theme:** light NEON hoạt động như một bức tường poster điện ảnh dưới dạng trình duyệt: sự kiềm chế gần như tuyệt đối với gam màu achromatic, chỉ bị phá vỡ bởi một sắc đỏ thẫm (crimson) duy nhất xuất hiện ở những khoảnh khắc mang tính thương hiệu — thanh wordmark, thẻ ngày phát hành và các micro-accents. Giao diện về cơ bản là một khung hình; các bộ phim mới là nội dung. Một kiểu chữ grotesque tùy chỉnh (Flatspot) xử lý mọi phần UI ở kích thước nhỏ gọn với negative tracking dày đặc, trong khi một kiểu chữ display ấn tượng (Girott) được dành riêng cho các tiêu đề section khổng lồ, tràn qua 100px và neo giữ toàn bộ trang. Các component ở mức tối thiểu: card là khung ảnh thô với viền mảnh, button là pill phẳng hoặc hình chữ nhật sắc cạnh, và không có ngôn ngữ shadow nào đáng kể — chiều sâu đến từ chính nhiếp ảnh điện ảnh, không phải từ chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Crimson Marquee | `#821e1e` | `--color-crimson-marquee` | Thanh wordmark thương hiệu, thẻ ngày phát hành, viền trạng thái được chọn, và điểm nhấn chromatic duy nhất neo giữ một hệ thống vốn đơn sắc — đỏ thẫm, hơi oxy hóa, không bao giờ là cam, không bao giờ sáng | | Ink | `#000000` | `--color-ink` | Văn bản chính, nét icon, màu heading, text button, và các fill bề mặt tối (hero overlay, footer) | | Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card, text button trên fill tối, trường input, text badge | | Bone | `#f3f3f3` | `--color-bone` | Bề mặt card và nền section thay thế, dùng để phân cách một hàng film tile với hàng tiếp theo mà không cần divider cứng |

# Nike.com — Style Reference > monochrome gallery of athletic performance — tường trắng, sản phẩm như tác phẩm nghệ thuật, chrome tan vào nền. **Theme:** mixed Nike.com vận hành như một gallery đơn sắc lấy sản phẩm làm trung tâm: UI gần như vô hình để ảnh sản phẩm dẫn dắt mọi màn hình. Toàn bộ giao diện được xây dựng từ đen, trắng và ba sắc thái xám — không có màu nhấn, không gradient trang trí, không brand chrome ấm áp. Bản sắc Nike sống trong swoosh và ảnh chụp, không bao giờ xuất hiện trong UI. Typography gọn nhẹ và thực dụng, dựa trên custom Helvetica Now family ở 12-20px với một khoảnh khắc Nike Futura ND cỡ lớn 76px cho hero headlines. Các component tối giản: pill-shaped buttons với radius 30px, flat product cards, hairline borders, gần như không có elevation. Trang web xen kẽ giữa bề mặt sản phẩm trắng tinh và các editorial hero section tối full-bleed, tạo nhịp điệu qua tương phản thay vì trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#111111` | `--color-obsidian` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, text button trên nền tối, icon strokes — canvas mặc định cho product grids và category sections | | Concrete Gray | `#e5e5e5` | `--color-concrete-gray` | Borders, dividers, hairline separators giữa các grid section, input outlines nhẹ | | Soft Mist | `#f5f5f5` | `--color-soft-mist` | Nền tint nhẹ cho secondary surfaces, nav search field fill, tag backgrounds |

# SwimClub — Style Reference > Hồ sơ lâm sàng ẩn sau màn hình LCD pixel **Theme:** mixed SwimClub vận hành một hệ thống thị giác mang phong cách tạp chí lâm sàng: gần như hoàn toàn achromatic (trắng, đen, xám lạnh) với một màu cam rực duy nhất (#ff9e00) được dùng làm điểm nhấn full-bleed thay vì màu nút. Typography đảm nhiệm vai trò chính — một geometric grotesque (Px Grotesk) cho body và headline, một monospace (Apercu Mono) cho data labels và navigation micro-copy, và một custom pixelated display face (Swimclub) chỉ dành cho logo và các con số thống kê cỡ lớn trông giống như màn hình LCD. Các bề mặt xen kẽ giữa nền canvas trắng ngà lạnh, thẻ sản phẩm trắng tinh, hero block xanh navy đậm với ảnh sản phẩm, và các panel thống kê cam bão hòa. Giao diện mang cảm giác như một hồ sơ y tế được nhìn qua màn hình arcade retro: lâm sàng, biên tập, hơi vui tươi, với các góc 0px sắc cạnh và đường viền đứt nét mảnh (hairline dashed borders) giúp mọi thứ đọc giống như biểu đồ hơn là trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Tabloid Orange | `#ff9e00` | `--color-tabloid-orange` | Nền section full-bleed (announcement bar, statistic panels) — màu thương hiệu có sắc độ duy nhất, dùng ở độ bão hòa tối đa để phá vỡ dòng chảy đơn sắc | | Deep Capsule Navy | `linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%)` | `--color-deep-capsule-navy` | Màu gradient cuối của hero và nền ảnh sản phẩm — gần như đen với tông xanh lam, không phải đen thuần | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền mảnh, navigation dividers, đường viền thẻ, chữ trên nút — màu cấu trúc chủ đạo trên toàn bộ giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt thẻ, overlay ảnh sản phẩm, nền nút và chữ trên panel tối hoặc cam |

# Freitag — Style Reference > Catalog công nghiệp Thụy Sĩ — một bản in manifest của những tấm bạt xe tải trải phẳng trên nền bê tông đổ, nơi màu sắc duy nhất chính là sản phẩm tái chế. **Theme:** light Freitag hoạt động như một catalog công nghiệp Thụy Sĩ đơn sắc: một hệ thống gần như không màu, nơi bề mặt có sắc độ duy nhất là chính sản phẩm (túi bạt xe tải với các mảng đỏ, vàng, xanh dương, xanh lá). UI là một grid gồm đen, trắng và xám bê tông, đóng vai trò sân khấu trung tính cho hàng hóa kinh tế tuần hoàn. Typography được nén và viết hoa (Akkurat Standard), line-height chặt như máy móc, letter-spacing rộng trên label, và các thành phần tương tác có dạng pill ngang với đường viền 1px sắc cạnh. Layout tuân theo modular grid nghiêm ngặt — hero full-bleed 50/50, tiếp đến là khối danh mục 3 cột, rồi ma trận sản phẩm 6 cột. Thủ thuật đặc trưng: trang web đọc như một bảng thông số kỹ thuật hoặc vận đơn, không phải cửa hàng thời trang. Các component có cảm giác như được dập lên trang thay vì thiết kế — pill buttons, đường kẻ mảnh, hairline grids, và hầu như không có độ sâu đổ bóng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Carbon Black | `#000000` | `--color-carbon-black` | Văn bản chính, logo plate, pill-button fills, hairline borders, icon strokes — mực in chủ đạo mang mọi label, heading và đường viền | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, nền ảnh sản phẩm, văn bản trên nền tối, văn bản đảo màu trên overlay danh mục | | Concrete Gray | `#cacaca` | `--color-concrete-gray` | Card borders, thumbnail dividers, đường phân cách thứ cấp giữa các ô sản phẩm — màu trung tính cấu trúc tạo khung cho grid | | Mist Gray | `#f1f1f1` | `--color-mist-gray` | Màu nền nhẹ cho trạng thái nút không hoạt động và các lớp fill mềm, không bao giờ dùng làm nền trang |

# Basic.Space — Style Reference > curated gallery on white marble **Theme:** light Basic.Space is a curated gallery-commerce platform built on near-total achromatic restraint. White gallery walls, 2px-sharp product frames, and one electric blue (#0700ff) that appears only on the top announcement strip — a single chromatic interruption in an otherwise monochrome world. Typography is a custom geometric humanist (FTBasicSpace) used in three restrained weights, with tight negative letter-spacing that gives headlines a quietly confident voice. Components are gallery-light: pill-shaped controls, hairline #ebebeb dividers, no shadows, no rounded card corners. Layout is full-bleed horizontally-scrolling rails of product cards, evoking the experience of walking through a design museum where the objects are the heroes and the interface disappears. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Cobalt | `#0700ff` | `--color-electric-cobalt` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color | | Gallery Black | `#000000` | `--color-gallery-black` | Primary text, product titles, prices, navigation links, icon strokes, and dominant fill on collection overlay labels | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, product image backgrounds, and inverse text on dark imagery and the cobalt announcement bar | | Hairline Gray | `#ebebeb` | `--color-hairline-gray` | Primary border color, page canvas background, card dividers, list separators, input field backgrounds — the dominant structural neutral |

# sunday — Style Reference > white gallery với một nhịp neon — một poster Helvetica sạch sẽ, nơi một đường hồng neon cắt ngang sự tĩnh lặng đen-trắng. **Theme:** light Sunday là một thương hiệu thanh toán trên nền canvas trắng dành cho ngành hospitality, với một điểm nhấn neon hồng duy nhất hoạt động như dấu câu điện giữa một hệ thống gần như không màu. Logic thị giác mang phong cách editorial: typography đảm nhiệm vai trò chính, nhiếp ảnh mang lại hơi ấm, và màu sắc chỉ xuất hiện ở nơi cần thu hút sự chú ý. Màu đen là mặc định cấu trúc — text, border, card, primary button, thậm chí cả background của feature section — trong khi #ff17e9 được dành riêng cho các tín hiệu thương hiệu (logo, active nav, heading được tô sáng, badge border). Hệ thống type được thống nhất dưới một font chữ duy nhất (Helvetica Neue) nhưng trải dài trên một dải cực rộng từ caption 12px đến stat numeral 200px, với negative tracking mạnh ở kích thước lớn và positive tracking trên các label uppercase nhỏ. Bề mặt phẳng — hầu như không có shadow, dựa vào hairline border và độ tương phản. Các component có xu hướng bo tròn: 16px cho card và input, pill 64px cho primary button, 100px cho tag. Cảm giác tổng thể là minimalism đầy tự tin, được sưởi ấm bởi ảnh chụp nhà hàng thực tế và một nhịp neon không thể nhầm lẫn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, hairline, primary button dạng fill, background section tối, và bề mặt card trên các band tối — mặc định cấu trúc mang toàn bộ hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, button text trên fill tối, form input fill — khoảng không gian âm làm khung cho mọi thứ | | Warm Gray | `#736f7c` | `--color-warm-gray` | Body text trên bề mặt sáng, border nhẹ, helper text mờ — một màu gần xám làm ấm bảng màu trung tính một chút | | Mist | `#dedede` | `--color-mist` | Hairline divider, input border, disabled state — đường cấu trúc sáng nhất trong hệ thống |

# Granola — Style Reference > Field notes on warm parchment — Granola reads like a well-worn Moleskine open on a sunlit desk: serifed headlines with editorial gravity, organic green accents like ink from a plant-based pen, and hairline-ruled card borders that suggest hand-drawn note margins. **Theme:** light Granola pairs a serif editorial headline face (Quadrant) with a humanist mono-inflected UI face (Melange) on a near-white canvas — the tension between old-print warmth and digital utility is the defining atmosphere. The chromatic system is almost entirely olive-green: a single muted-yellow-green (#b2c248 surface, #5b6f00 filled CTA, #788c15 border accents) against hairline-bordered white cards and an off-white page. Everything else is achromatic — dark ink, mid-gray text, and 0.5px solid borders that whisper rather than rule. Typography does the heavy lifting: Quadrant at -0.015em tracking for display sizes drops weight at 68px to feel like editorial print, while Melange's 0.01em tracking at UI sizes keeps body text crisp and warm. The result is a notepad-like surface — quiet, high-contrast text on parchment-adjacent white — punctuated by bursts of organic chartreuse green. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Canvas | `#f7f7f2` | `--color-parchment-canvas` | Page background and disabled input surfaces — the barely-warm off-white that reads as paper, not screen | | Pure Surface | `#ffffff` | `--color-pure-surface` | Card backgrounds, nav surface, input fills, elevated overlays | | Midnight Ink | `#0e0f0c` | `--color-midnight-ink` | Primary heading and body text — near-black with the faintest warm undertone that keeps it from feeling harsh | | Deep Charcoal | `linear-gradient(90deg, #292929 0px, #292929 33.33%, #febe29 40%, #ff91e0 45%, #cebef8 50%, #d2e4f8 55%, #d1e043 60%, rgba(0,0,0,0) 66.67%, rgba(0,0,0,0))` | `--color-deep-charcoal` | Nav text, footer text, secondary headings, filled icon fills; Decorative gradient on AI-enhanced copy indicators — transitions from dark charcoal through amber, pink, lavender, sky, chartreuse, then fades transparent |

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

# Gumroad — Style Reference > Đồng xu hồng trên sketchbook màu kem. Nền canvas ấm áp, type hình học mực đen, và một linh vật đồng xu hồng neon đóng dấu khắp mọi trang như một sticker trên quyển vở. **Theme:** light Gumroad là một canvas màu kem ấm được đóng dấu bằng một motif đồng xu hồng vẽ tay duy nhất và một sans-serif hình học mực đen. Nền #f4f4f0 trắng kem gợi cảm giác như trang sketchbook; chữ đen và button đen đặc nổi bật trên nền với độ nặng như một nét bút dạ. Các bề mặt phẳng — thẻ trắng nằm trên canvas ấm với viền xám mảnh thay vì đổ bóng. Màu bão hòa xuất hiện ở những điểm nhấn nhỏ, có chủ đích: linh vật đồng xu hồng, các mảng màu vàng và xanh lá dùng làm marker màu nội dòng, và đôi khi là highlight đỏ. Giọng điệu thân mật, ưu tiên người sáng tạo, chống doanh nghiệp — typography dày, tracking âm trên display sizes, và type scale kéo dài từ 14px body đến 192px hero type, tất cả từ một font family duy nhất. Các component có hình dạng tiện ích (4px radii trên input và button, 16–24px trên card lớn hơn) và không bao giờ được trang trí bằng gradient hay glow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Canvas Cream | `#f4f4f0` | `--color-canvas-cream` | Nền trang, input fills, và lớp nền ấm mà mọi bề mặt khác đặt lên | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card và product-tile nâng lên trên canvas kem | | Ink Black | `#000000` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho chữ, icon, và độ tương phản mạnh. Không dùng làm màu CTA chính | | Graphite | `#242423` | `--color-graphite` | Chữ phụ và input borders; đọc như màu đen đã làm mềm khi màu đen thật quá gắt trên nền kem |

# amra — Style Reference > iridescent sphere on white void — the lavender accent is the only chromatic pulse against an almost perfectly achromatic page, and a single gradient orb does the work that a hero illustration usually does. **Theme:** light Amra is a near-monochrome white canvas with a single soft lavender accent (#acafff) and an iridescent gradient sphere as its signature visual anchor. The interface stays almost completely achromatic — text, dividers, and borders all share a family of near-blacks and grays — so the lavender feels like a small electric pulse rather than a brand color. Photography is never raw: subjects are silhouetted and dropped onto the same teal-to-violet gradient as the hero sphere, making imagery feel like part of the same substance as the product. Typography is custom, geometric, and weight-400 throughout — no bold ever appears, and authority comes from size and tight tracking rather than weight. Components are large-radius and floating: a pill-shaped nav drifts over content, image cards have 44px corners, and the page breathes with 100–160px vertical gaps between sections. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#141414` | `--color-ink-black` | Primary text, all heading and body color, dominant border color, nav text and structural dividers. The near-black (not pure black) keeps the monochrome system from feeling harsh against white | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, icon fills on dark backgrounds, nav pill surface when over light sections | | Mist Gray | `#a1a1a1` | `--color-mist-gray` | Secondary text, subheadings, muted body copy, lighter hairline borders. The middle step in the achromatic scale | | Smoke Gray | `#8a8a8a` | `--color-smoke-gray` | Nav link text at rest, medium-weight borders, tertiary text |

# Studio Few — Style Reference > monochrome letterform sanctuary — a white gallery where black ink is the only ornament **Theme:** light Studio Few is a type foundry where the product is the alphabet, so the design recedes entirely. The interface is pure achromatic: white canvas, black ink, a single mid-gray for inactive controls, and almost no decorative chrome. Every screen is a vertical sequence of full-width specimen rows — a tiny label, two thin slider tracks for size and weight, an outlined Trial button, a solid black View button, and then enormous custom type rendered at 115–158px as the hero. The custom Sterling family carries all UI text at 12–14px, while the specimen displays use the foundry's own faces (Formative, Voyager, Anthro, Blok, ArbeitPro, Apex), each shown solo with no surrounding art. The result feels like a gallery wall: the only thing with visual weight is the letterform itself. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Body text, button fills, hairline borders, slider tracks, active states — the single dominant tone that gives every specimen its anchor | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, input fills, button text on dark fills | | Foam Gray | `#ebedee` | `--color-foam-gray` | Subtle surface lift and low-contrast dividers when a row needs to separate from pure white without using ink | | Concrete Gray | `#b7b7b7` | `--color-concrete-gray` | Medium-contrast borders, control outlines, and structural separators. |

# 8returns — Style Reference > Tia chớp xanh vôi trong phòng điều khiển nửa đêm — một điểm nhấn điện duy nhất đánh thức không gian làm việc đơn sắc vốn dĩ. **Theme:** mixed 8returns sử dụng ngôn ngữ thiết kế split-canvas: hero xanh navy gần như đen mở ra một nội thất trắng sáng, mang phong cách workspace. Bản sắc thị giác xoay quanh sự tương phản — một màu xanh vôi điện (#cfff69) là điểm nhấn màu duy nhất được phép phát sáng trên nền hero tối, trong khi các bề mặt sản phẩm trắng vẫn trung tính, rộng rãi và gần như mang tính phòng thí nghiệm. Các card nổi trên nền canvas thép-lạnh (#eef0f2) với góc bo 16px, và màu trang trí duy nhất bên trong các section trắng là cobalt iris (#6289ff) được dùng một cách tiết kiệm cho tag, icon và highlight chip. Typography là một geometric sans duy nhất (roobert) chạy trên một scale chặt chẽ, hơi positive-tracked từ caption 11px đến display 64px, không có serif, không mono, không script — một giọng nói duy nhất trên mọi bề mặt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Lime Volt | `#cfff69` | `--color-lime-volt` | Primary action — nút CTA dạng filled, gạch chân tab active, highlight chip. Màu sắc sống động duy nhất được phép trên nền hero tối; độ bão hòa gần như huỳnh quang của nó trên nền #051923 tạo cảm giác cấp bách mà không mang hơi hướng ấm áp hay hung hăng | | Cobalt Iris | `#6289ff` | `--color-cobalt-iris` | Điểm nhấn viền tím cho tag, divider và cạnh UI đang focus | | Midnight Abyss | `#051923` | `--color-midnight-abyss` | Primary text, nền hero, dark section canvas, text trên nút lime fill. Gần như đen với undertone teal mát — không phải đen tuyền, sắc xanh nhẹ giúp nó có cảm giác kỹ thuật hơn là phẳng | | Abyssal Teal | `#004853` | `--color-abyssal-teal` | Bề mặt card tối và gradient endpoint — màu cầu nối giữa Midnight Abyss và radial gradient teal đậm. Dùng cho elevated dark card và inset panel |

# Healthy Together — Style Reference > Xanh nửa đêm với dải ribbon màu violet dạng nét cọ. **Theme:** dark Healthy Together là một nền tảng gov-tech lấy tối làm chủ đạo: canvas xanh nửa đêm sâu thẳm làm nền cho những headline cỡ lớn đầy tự tin, bị phá vỡ bởi các section accent màu violet điện rực rỡ và những khoảng thở màu oải hương nhạt. Một dải ribbon hồng-tím đặc trưng lướt qua hero như một nét cọ, mang đến cho dark UI vốn nghiêm ngặt một khoảnh khắc năng lượng hữu cơ duy nhất. Cards được bo tròn rộng rãi (42px), buttons có dạng pill hoàn toàn, và tracking dày đặc của Inter ở kích thước lớn (64–92px) tạo cho headline một cảm giác nén chặt, có cấu trúc kiến trúc. Nhịp điệu thị giác luân phiên dark → vivid → soft, không bao giờ trắng trên trắng đơn thuần — mọi bề mặt đều là một nhiệt độ được chủ ý. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Ink | `#101722` | `--color-midnight-ink` | Primary text, hero canvas, nav bar, nền tối cấp trang — mỏ neo cấu trúc của toàn bộ hệ thống | | Linen Lavender | `#f9f0ff` | `--color-linen-lavender` | Section canvas, card fills, lớp highlight mềm — bề mặt thở giữa các khối hero tối | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, nav dividers, button text — bề mặt nội thất sạch sẽ | | Muted Graphite | `#6c6c7a` | `--color-muted-graphite` | Secondary text, helper copy, muted headings, đường viền nhẹ |

# Atelier Deux-Cé — Style Reference > Sunlit editorial gallery **Theme:** light Atelier Deux-Cé tự giới thiệu như một phòng trưng bày editorial ngập nắng — một creative agency có trụ sở tại Paris, với website mang phong cách tạp chí được biên tập kỹ lưỡng hơn là một sản phẩm phần mềm. Hệ thống ưu tiên nhiếp ảnh: ảnh full-bleed chiếm ưu thế trên mọi màn hình, chữ đóng vai trò như caption và nhãn nhẹ nhàng thay vì chrome giao diện. Bảng màu ấm áp, phai nắng của tông đất (cream, linen, sage, taupe, olive stone) thay thế canvas SaaS trắng/xám điển hình, mang đến cho mỗi trang sự ấm áp của một biệt thự Provençal. Chữ đen nằm ở độ tương phản gần như tối đa trên các bề mặt ấm này, và một màu xanh bão hòa duy nhất được dành riêng cho footer như một khu vườn ở cuối con đường. Các component có chủ đích ít và không trọng lượng — không shadow, không gradient, không border dày hơn hairline, không bo góc nào phá vỡ cảm giác in ấn editorial. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Body text, heading, nav link, hairline border và link underline — màu chữ duy nhất trong toàn bộ hệ thống | | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, chữ đảo màu trên vùng ảnh tối | | Warm Linen | `#eee5da` | `--color-warm-linen` | Nền section mềm mại, bước đầu tiên ra khỏi trắng tinh — mang đến cho trang giấy sự ấm áp của giấy chưa tẩy trắng | | Pale Sage | `#d8ddc6` | `--color-pale-sage` | Panel section pha màu, tông canvas không trắng chiếm ưu thế |

# AgentQL — Style Reference > Aurora glow over a midnight terminal **Theme:** dark AgentQL operates in a deep-space command-center register: near-black canvas, tightly letter-spaced Figtree display headlines, and a single pair of violet aurora glows (purple + pink radial gradients) that bleed from the hero into the background. The interface is overwhelmingly achromatic — white type, cool-gray secondary text, hairline borders in dark navy — with color reserved for two specific jobs: product surface highlights (a few cards lift into a slightly violet-tinted dark) and accent CTAs (a single blue→violet gradient pill). Components sit on flat dark surfaces with generous padding, rounded to 12px, and rely on heavy dark drop shadows rather than glow for depth. The overall feel is closer to a dark IDE theme than a marketing site — Inter carries the UI, IBM Plex Mono owns code blocks, and Figtree whispers the headlines at weight 500 with tight tracking. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#0b0c0e` | `--color-void` | Deepest surface layer, page base under hero — the floor of the dark stack | | Abyss | `#0e111b` | `--color-abyss` | Primary page canvas and most card backgrounds; cool blue-black anchors the whole system | | Deep Sea | `#0d172b` | `--color-deep-sea` | Elevated card surface — sits one step above the canvas, used for feature and pricing cards | | Cobalt Panel | `#12244f` | `--color-cobalt-panel` | Highlighted card surface for feature spotlights; a violet-tinted lift that breaks the monochrome rhythm without becoming decorative |

# Vetric — Style Reference > Iridescent prism refracting clarity — a white room with one glass diamond that throws pink, blue, yellow, and green light across every surface. **Theme:** light Vetric uses an iridescent-prism visual language: a bright white canvas, near-black ink for text and actions, and a four-color rainbow accent set (blue, pink, yellow, green) that refracts across soft pastel washes like light through a glass diamond. The system pairs a humanist serif (Noto Serif) for headlines with a geometric sans (Manrope) for UI, creating a deliberate tension between editorial calm and technical confidence. Components stay light and flat — thin borders, gentle radii, no drop shadows — so the prismatic gradients and colored accents carry all the visual energy. The result reads as 'data made luminous': the chrome recedes, the color talks. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#090a1e` | `--color-midnight-ink` | Primary text, primary CTA fill, strong borders — the dominant brand dark; a slightly blue-tinted near-black that reads warmer than pure black on white | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on dark fills | | Ash Border | `#e0e0e0` | `--color-ash-border` | Default hairline borders, button outlines, icon strokes | | Carbon Nav | `#222222` | `--color-carbon-nav` | Navigation text and thin nav borders — sits one step lighter than Midnight Ink |

# Warp — Style Reference > obsidian command center — một IDE cockpit dành cho developer, nơi ánh sáng duy nhất là một tia phosphor tím trên nền đen mờ, và typography mang mọi tín hiệu **Theme:** dark Warp nói bằng ngôn ngữ của một terminal cao cấp: một canvas đen obsidian nơi hầu như mọi bề mặt đều không màu, typography đảm nhiệm vai trò chính, và một tia tím nhẹ (#cbb0f7) hoạt động như dấu câu chức năng thay vì trang trí. Hệ thống được xây dựng cho mật độ gọn — tracking chặt, cỡ body nhỏ, và khoảng cách hẹp tạo cảm giác tự tin như một IDE, tôn trọng thời gian và diện tích màn hình của người dùng. Custom typeface Matter với negative tracking cực đoan ở cỡ display (lên đến -0.04em ở 56px) tạo ra những headline có cảm giác được kỹ thuật hóa thay vì thiết kế, trong khi màu trắng ấm (#faf9f6) thay vì trắng tinh khiết giữ cho bề mặt tối không bị lạnh lẽo. Ngôn ngữ button được định nghĩa bằng hình pill (33-50px radius) trên nền trung tính — không có chromatic CTA, vì vậy thứ bậc hành động chỉ đến từ độ tương phản giữa filled và ghost. Các bề mặt nâng lên qua các bước xám tinh tế (#121212 → #1e1e1d → #333333) thay vì đổ bóng kịch tính, tạo ấn tượng về các panel phẳng xếp chồng trong không gian âm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang chính, nền nav, cửa sổ preview terminal — khoảng không mà mọi bề mặt khác nổi trên đó | | Graphite | `#121212` | `--color-graphite` | Bề mặt trang thứ cấp, nền body phía sau hero section, footer base | | Onyx | `#1e1e1d` | `--color-onyx` | Bề mặt card và panel nâng cao — bước đầu tiên từ canvas cho product cards và testimonials | | Carbon | `#333333` | `--color-carbon` | Bề mặt trung cấp cho nested UI, secondary buttons, và nền tag/badge |

# Anthropic — Style Reference > Research journal in trên nền đá ấm — bố cục typographic mang tính uy quyền, nơi gạch chân từng từ thay thế màu sắc làm cơ chế nhấn mạnh chính, và hơi ấm duy nhất đến từ chính tờ giấy. **Theme:** light Site của Anthropic chạy trên nền giấy ngà ấm (#faf9f5) — không phải trắng, không phải xám, mà là màu giấy cũ dưới ánh sáng tốt. Bảng màu gần như hoàn toàn achromatic, với toàn bộ ngân sách màu sắc dồn vào một điểm nhấn terracotta đất duy nhất (#d97757) được giữ trong CSS tokens nhưng phần lớn vắng mặt trên UI hiển thị. Hai hệ chữ custom đảm nhiệm toàn bộ công việc tạo cá tính: Anthropic Sans dẫn dắt navigation và UI với tracking khít, trong khi Anthropic Serif mang lại trọng lượng editorial trong headline và nội dung nổi bật — sự kết hợp serif-plus-grotesque báo hiệu viện nghiên cứu, không phải startup. Headline sử dụng gạch chân đôi dày trên các từ khóa (có thể thấy ở 'research' và 'products') làm thiết bị trang trí duy nhất — nó thay thế màu sắc làm cơ chế nhấn mạnh. Các feature card khổng lồ chuyển sang nền gần đen (#141413), tạo ra các dải bề mặt cứng cáp xen kẽ với gradient bằng 0 và không có shadow làm mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Slate Dark | `#141413` | `--color-slate-dark` | Văn bản chính, border, nav items, icon fills, nền card — màu gần đen xuất hiện trên cả bề mặt sáng và tối, khiến nó hoạt động như cả foreground lẫn background | | Ivory Light | `#faf9f5` | `--color-ivory-light` | Nền trang, button fills, bề mặt sáng cơ bản — màu trắng ngà ấm mang lại cho site đặc tính giấy da thay vì trắng lâm sàng | | Ivory Medium | `#f0eee6` | `--color-ivory-medium` | Nền nav, bề mặt cấp hai, border highlights | | Ivory Dark | `#e8e6dc` | `--color-ivory-dark` | Văn bản body trên nền tối, divider, border nhẹ |