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

# Applied Labs — Style Reference > Sunlit cream paper with cobalt punctuation and floating conversation cards **Theme:** light Applied Labs reads like a warm, sunlit editorial spread: cream paper backgrounds, near-black ink type, and a single vivid cobalt blue used as quiet punctuation rather than a shout. The visual signature is the contrast between photographic warmth (real people in real light, not illustrations or 3D renders) and restrained, typographically-driven UI chrome. Conversation fragments — translucent chat bubbles, message exchanges, agent replies — float as a design motif across hero and feature sections, making the product's nature legible without explaining it. Dark filled buttons (espresso-black) are the only hard shapes against the otherwise soft, hairline-divided surface stack; the entire system feels like reading a thoughtful magazine rather than scrolling a product page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Page canvas, base card surface, nav background | | Cream | `#f7f7f4` | `--color-cream` | Warm off-white section background, soft card fill — the secondary surface layer that gives the page its paper-like warmth | | Fog | `#f5f5f5` | `--color-fog` | Elevated card surfaces and subtle section bands | | Ash | `#e4e4e7` | `--color-ash` | Hairline borders, dividers, input underlines — the structural skeleton of the layout |

# Arc — Style Reference > Sân chơi editorial với đường cắt hình vỏ sò **Theme:** light Trang web của Arc mang phong cách một spread editorial ấm áp, được cắt bằng dao giấy thủ công: nền canvas màu kem vanilla, các đường viền hình vỏ sò (scalloped edges) lượn sóng giữa mỗi dải màu, và một mảng tím violet rực rỡ tràn ngập các khối lớn như một trang sách nhuộm màu. Headline serif (Marlin) kết hợp với UI sans-serif sạch sẽ (Inter) tạo ra sự căng thẳng giữa editorial và product, trong khi chính trình duyệt — chứ không phải ảnh chụp — mới là nhân vật chính, được thể hiện dưới dạng mockup tương tác lớn với sidebar spaces, thư mục và inline chat. Bảng màu chủ yếu là giấy và mực; màu violet mang bầu không khí hơn là màu tương tác, và các đường chia lượn sóng đảm nhận phần lớn công việc tạo cá tính mà shadow và gradient thường làm trên các trang web khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Iris | `#3139fb` | `--color-electric-iris` | Nền section full-bleed, bầu không khí thương hiệu, sidebar chrome bên trong browser mockup — một màu violet bão hòa cao tràn ngập toàn bộ dải màu, khiến trang đọc như color blocking kiểu editorial, không phải trạng thái UI | | Deep Violet | `#2702c2` | `--color-deep-violet` | Lớp accent tối hơn bên trong các section violet, trạng thái pressed hoặc active trong màu thương hiệu, heading phụ trên nền violet — làm sâu thêm iris mà không chuyển sắc | | Oat | `#fffadd` | `--color-oat` | Canvas trang chính và nền gradient hero — màu kem ấm đọc như giấy chứ không phải màn hình trắng, bề mặt mặc định cho mọi thứ khác | | Linen | `#fffcec` | `--color-linen` | Bề mặt ấm thứ cấp cho card, nền nav và footer — ấm hơn Oat nửa bước, dùng khi một lớp cần nổi lên khỏi canvas mà không chuyển sang trắng |

# Arcade — Style Reference > Gợn sóng xanh điện trên nền giấy trắng. Một editorial canvas sạch sẽ, nơi một mảng xanh dương đậm duy nhất chảy như chất lỏng từ góc này sang góc khác, khiến mọi phần tử tương tác đều có cảm giác như đang bật sáng. **Theme:** light Hệ thống thị giác của Arcade là một bề mặt sản phẩm trên nền canvas trắng, được điểm nhấn bằng một màu xanh điện bão hòa (#2142e7) và một gradient xanh chảy đặc trưng làm neo cho hero. Typography sử dụng Inter trên mọi kích thước, với trọng lượng tập trung ở dải 400–700 và tracking âm chặt trên các display size giúp chữ co lại một cách quang học khi phóng to. Giao diện mang phong cách chức năng và yên tĩnh: các khối nội dung xám trên nền trắng, border mảnh, border-radius nhỏ gọn 12–16px, và bóng đổ pha xám lạnh dựa trên rgba(17,24,39,...) giữ cho mọi bề mặt nâng lên luôn đúng thương hiệu. Màu sắc được phân bổ có chủ đích — một màu xanh duy nhất đảm nhận vai trò accent, CTA và focus — mọi thứ còn lại đều là thang màu trung tính. Mật độ thoải mái nhưng không quá rộng: khoảng cách vi mô chủ yếu là 8px và 12px, khoảng cách giữa các section là 32–48px. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Voltage Blue | `#2142e7` | `--color-voltage-blue` | Accent xanh tím hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp thành màu CTA chính | | Deep Voltage | `#182fa5` | `--color-deep-voltage` | Accent xanh tím hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp thành màu CTA chính | | Midnight Ink | `#111827` | `--color-midnight-ink` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp thành màu CTA chính | | Slate 600 | `#4b5563` | `--color-slate-600` | Body text, nav links, icon fills, card secondary copy — màu chữ chủ đạo trên toàn trang |

# Arsenijs Fabrica — Style Reference > Editorial beauty spread under gallery lights. Pure-white gallery walls, a single warm strobe pulsing orange against the monochrome, type set thin as glass and hung with generous negative space. **Theme:** light Arsenijs Fabrica operates as an editorial beauty spread: expansive white surfaces, whisper-weight display type that floats across the canvas, and a single vivid orange that cuts through monochrome like a studio strobe. The brand voice in type is restrained and continental — weights 200-300 at hero scale, near-black text on pure white, generous breathing room between sections. Orange appears as functional punctuation: filled CTAs, modal backgrounds, card borders, and link accents — never as a wash or gradient field. Components feel fashion-magazine lightweight: hairline 1px borders, 10px card corners, 600px pill buttons, and a deliberate absence of shadows across the structural layer. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#f15730` | `--color-ember-orange` | Filled CTA buttons, primary action backgrounds — deep saturated orange that reads as confident rather than playful, the only color with enough chroma to anchor a click target against the white field | | Tangerine Blaze | `#f7651a` | `--color-tangerine-blaze` | Promotional surface fills (email capture modal, featured product cards, stat callout backgrounds) — slightly brighter and more luminous than Ember, used where orange must own an entire region of the layout | | Apricot Whisper | `#ff8562` | `--color-apricot-whisper` | Borders on outlined cards, link underlines, icon strokes, accent hairlines — the lightest orange, functioning as a warm-tinted structural color rather than a fill | | Graphite Black | `#111111` | `--color-graphite-black` | Body text, default borders, the dominant structural color — a true near-black, not warm, used for the bulk of hairline rules and paragraph copy |

# Ashton Bespoke — Style Reference > Stone cathedral of craftsmanship — warm parchment surface, one whisper of burgundy, letterspaced serif that breathes. **Theme:** light Ashton Bespoke operates as an editorial gallery for craftsmanship rather than a traditional website: a warm parchment canvas, one custom serif voice, and near-zero UI chrome. The entire palette collapses to stone, ink, and white with a single restrained wine note reserved for footer gravity and atmospheric emphasis. Photography carries the brand — full-bleed workshop imagery with no decorative overlay competes with nothing because the interface refuses to compete back. Generous negative space, hairline borders, and letterspaced serif headlines give every page the cadence of a printed monograph. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Burnt Wine | `#38141b` | `--color-burnt-wine` | Footer background, sectional dark bands, atmospheric accent — the sole chromatic note in an otherwise achromatic palette, used sparingly to anchor gravity | | Ink Stone | `#262626` | `--color-ink-stone` | Primary text, hairline borders, image frames, nav links — the structural near-black that defines every edge and label | | Warm Parchment | `#e0ded8` | `--color-warm-parchment` | Dominant page canvas, section backgrounds, card surfaces — warm stone tone that gives the site its gallery-like, hand-made feel | | White | `#ffffff` | `--color-white` | Elevated surfaces, inverted text on dark sections, nav text over imagery, subtle highlight washes |

# Assembly Coffee London — Style Reference > Embers in a dark roastery. A near-black canvas with warm, low-lit product photography and italic serif labels — the feeling of a specialty coffee menu printed in a midnight zine. **Theme:** dark Assembly Coffee's visual system reads like an editorial magazine printed on black paper. The interface is overwhelmingly dark — near-black canvases carry everything — interrupted only by product photography lit against warm studio backdrops (ember-red, deep amber) and hairline typography in white. Two type families do all the work: a geometric sans (GT America) for UI scaffolding, navigation, and metadata, and a refined serif (ID00 Serif) for product names, section labels, and editorial copy, almost always in italic, which turns a functional nav list into a curated index. The palette is almost monochromatic: the chromatic vocabulary is rationed to badge fills (pale yellow, sage green, antique gold) and the occasional warm-tinted cream surface. Buttons are not loud — price chips and 'Shop Now' links live as small text or pill-shaped cream labels. Components are thin, sharp-cornered, and rely on borders and weight contrast rather than shadows or fills for separation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#0e1311` | `--color-obsidian` | Primary canvas — page backgrounds, hero sections, card surfaces. The near-black with a faint green undertone makes white type glow without feeling sterile | | Pure Black | `#000000` | `--color-pure-black` | Deepest surface, borders, and type. Used for maximum-contrast outlines, product box photography backgrounds, and the darkest UI strokes | | Ash Charcoal | `#1a1a1a` | `--color-ash-charcoal` | Secondary surface and border tone — slightly lifted from black for subtle layering on nav, dividers, and outlined button edges | | Graphite | `#333333` | `--color-graphite` | Mid-neutral for secondary text, input borders, and card outlines where pure black is too heavy |

# Astro — Style Reference > Deep space mission control with a single purple nebula glow **Theme:** dark Astro speaks in the language of a cosmic command bridge: near-black canvas, a single signature purple-magenta nebula gradient that blooms from the hero, and white display type that reads like mission copy. The system is overwhelmingly achromatic — 4% colorfulness — so every chromatic pixel is doing real work: a mint-aqua syntax highlight, a violet link, a sky-blue inline chip. Components are geometric and confident: pill-shaped interactive controls at 9999px radius, 16px cards, 8px chips, and thin hairline borders at 8% opacity rather than colored dividers. The custom display face 'Obviously' does the heavy lifting with its wide, open apertures and quirky alternates (salt, ss06, ss11) that give headlines a friendly, slightly retrofuturist swagger against the dark void. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Canvas | `#1f232e` | `--color-void-canvas` | Primary page background — the base layer for hero, sections, and footer. Slight cool-blue undertone, never pure black, so colored elements feel like they're floating in space rather than printed on paper | | Abyss | `#0c0f19` | `--color-abyss` | Deeper surface level for elevated cards, code blocks, and inset wells. One step darker than the canvas to create depth without using shadows | | Singularity | `#060913` | `--color-singularity` | Darkest surface for terminal windows, CLI boxes, and high-contrast containers. Almost pure black with a blue whisper | | Carbon | `#17191e` | `--color-carbon` | Mid-elevation card surface, sitting between canvas and abyss. Used for theme preview tiles and nested cards |

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

# Athletics — Style Reference > monograph on black velvet **Theme:** dark Athletics operates as a gallery-grade creative studio: the entire experience sits on a dark canvas, letting enormous light-weight serif display type breathe against deep charcoal and pure black. The system is ruthlessly monochromatic — zero chromatic color across the interface, with warmth and saturation living exclusively inside editorial photography and the brand mark. Typography does the heavy lifting: a high-contrast pairing of a delicate serif display (Feature Deck at 300 weight, 72–116px) against a quiet grotesque (Söhne at 300/400 for everything functional). The layout is full-bleed, generous, and editorial — wide section gaps of 128–144px, asymmetric two-column blocks, and a vertical service index annotated with A/B/C/D letter labels that evoke a printed specimen sheet. Components are minimal: pill-shaped tags, hairline borders, no shadows, no gradients, no elevation. It reads as confident, restrained, and considered — the design equivalent of a well-typeset monograph. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, deepest section backgrounds, hairline borders on text | | Charcoal | `#1d1d1d` | `--color-charcoal` | Elevated section surfaces, card backgrounds, input fields — the middle layer between pure black and white | | Paper White | `#ffffff` | `--color-paper-white` | Primary display and body text on dark surfaces, default borders, icon strokes, form controls | | Ash | `#d6d5d0` | `--color-ash` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |

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

# August Health EHR — Style Reference > Nền kem ấm với mực tím — một bề mặt clinical mang tính nhân văn, làm dịu đi sự khô khan thường thấy của healthcare. **Theme:** light August Health sử dụng ngôn ngữ thị giác warm-clinical: canvas kem mềm (#f8f3eb) thay thế cho nền trắng lạnh thường thấy trong healthcare SaaS, và shadow được pha màu nâu ấm rgba(75,68,57,0.1) thay vì xám lạnh. Sự kết hợp giữa serif mang phong cách editorial (Reckless Neue) và sans hình học (Saans) mang đến cho sản phẩm cảm giác dễ tiếp cận, nhân văn — phù hợp với lĩnh vực chăm sóc người cao tuổi — trong khi màu chàm rực rỡ (#4865ff) làm điểm neo cho mọi hành động chính. Màu sắc xuất hiện thành từng cụm tập trung — khung chân dung tròn, thẻ tính năng pha màu, và pill buttons — trên nền bảng màu neutral tiết chế, tạo nhịp điệu và hơi ấm mà không làm interface bị rối. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Primary Indigo | `#4865ff` | `--color-primary-indigo` | Primary action buttons, active nav state, icon accents — màu tập trung bão hòa duy nhất giúp CTA trông rõ ràng là có thể tương tác | | Deep Ink | `#080331` | `--color-deep-ink` | Headlines, body text, primary borders — gần như đen pha tím, kết hợp ấm áp với serif typeface | | Midnight Violet | `#1b1463` | `--color-midnight-violet` | Navigation borders, secondary surfaces, gradient terminus — phiên bản tối hơn của Primary Indigo để tạo chiều sâu phân lớp | | Forest | `#328a3b` | `--color-forest` | Green action color cho filled buttons, selected navigation states, và các thời điểm chuyển đổi tập trung |

# Aurora — Style Reference > chân trời tự chủ lúc bình minh — buồng lái trắng tinh nhìn ra xa lộ ngập nắng, một mặt đồng hồ xanh điện trên dashboard. **Theme:** light Giao diện của Aurora giống một xa lộ mở: canvas trắng trải rộng, chữ navy đậm đọc như vạch kẻ đường, và một điểm nhấn xanh điện duy nhất báo hiệu hành động giống như đèn xi-nhan. Hero là góc nhìn dashcam full-bleed với headline trắng 90px đè lên — ảnh chụp đảm nhận vai trò cảm xúc, UI đứng sang một bên. Bên dưới fold, bề mặt chuyển sang card xám nhạt mát, đoạn văn hiện dần từng chữ khi người dùng scroll, và gradient cyan-to-cobalt đặc trưng chỉ dành cho những khoảnh khắc xứng đáng với tên tuổi thương hiệu — hiếm hoi, sống động, luôn có chủ đích. Mọi thứ đều là hình chữ nhật với góc bo 8px, không đổ bóng, không trang trí hoa mỹ; chiều sâu đến từ việc xếp lớp màu sắc và tỷ lệ, không bao giờ đến từ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Horizon Navy | `#001733` | `--color-horizon-navy` | Văn bản chính, nav text, heading fills, viền ảnh tối, nền section — mực chủ đạo của hệ thống, không bao giờ là đen tuyền | | Signal Blue | `linear-gradient(269.64deg, #18dcdc -20.36%, #006aed 109.5%)` | `--color-signal-blue` | Nền action chính, nút CTA đã fill, trạng thái nav active, nút icon tròn, link accent trên bề mặt tối — cobalt sống động xứng đáng với cú click; Gradient đặc trưng cho những khoảnh khắc định nghĩa thương hiệu — nơi duy nhất cyan xuất hiện, neo giữ nhận diện thị giác | | Cyan Dawn | `#18dcdc` | `--color-cyan-dawn` | Gradient stop cho gradient đặc trưng của Aurora — không bao giờ dùng làm fill đặc, chỉ là nốt mở đầu của dải quang phổ | | Slate Whisper | `#68748d` | `--color-slate-whisper` | Body text phụ, helper copy mờ, meta không active — xám mát lùi lại phía sau Horizon Navy |

# Authkit — Style Reference > blueprint on midnight glass **Theme:** dark AuthKit hoạt động trong ngôn ngữ blueprint midnight: canvas gần như đen, typography xanh lam-xám mát, và một màu tím iris điện duy nhất đánh dấu thứ duy nhất bạn có thể nhấn. Bề mặt là matte và phẳng — không có glossy gradient, không có drop shadow nặng — thay vào đó, một chòm sao các ánh sáng xanh mềm (rgba(186, 207, 247, 0.32)) và các đường viền inset 1px mảnh gợi ý một giao diện được vẽ bằng ánh sáng trên giấy tối. Typography được kiềm chế và tự tin: một geometric workhorse (Untitled Sans) xử lý mọi thứ từ caption 12px đến section title 24px, trong khi một display face rộng hơn (aeonikPro) đảm nhận hero và section headline. Hầu như tất cả màu sắc trang trí đều nằm trong bóng đổ, không phải trong phần fill — kết quả mang phong cách kỹ thuật, chính xác và phát sáng nhẹ nhàng thay vì sặc sỡ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Ink | `#05060f` | `--color-midnight-ink` | Canvas trang và bề mặt chính — nền gần như đen mà mọi thứ khác được vẽ lên. Một chút sắc xanh mát giúp nó không cảm thấy đen tuyệt đối, tạo chất giấy blueprint | | Graphite Plate | `#2f343e` | `--color-graphite-plate` | Bề mặt card và panel được nâng lên — cao hơn canvas một bậc, dùng cho các UI mockup xem trước và form container. Matte, không bao giờ bóng | | Steel Border | `#3f4959` | `--color-steel-border` | Đường viền mảnh, divider, và đường cấu trúc mờ giữa các UI element | | Fog | `#81899b` | `--color-fog` | Helper text và secondary metadata được giảm nhấn mạnh, nên lùi lại phía sau nội dung chính |

# Automate Supplier Payments — Style Reference > butcher paper bakery ledger. Không gian làm việc màu kem, ấm áp dưới ánh nắng — nơi slab type dày, pill buttons và một điểm nhấn vàng xe buýt trường học duy nhất làm tất cả công việc: không shadow, không gradient, chỉ có giấy ấm và mực đen tự tin. **Theme:** light Apron mang thẩm mỹ quầy bánh ấm áp: canvas buttercream, display type slab-serif dày, CTA hình pill màu vàng xe buýt rực rỡ, và chữ đen xương (bone-black) nổi bật trên nền kem. Logic thị giác là "sổ cái trung thực trên giấy gói thịt" — tự tin, hơi retro, bão hòa không hề e dè. Các bề mặt xếp chồng trong tông kem ấm (không phải xám lạnh), đường viền là hairline đen thay vì shadow mềm, và điểm nhấn màu duy nhất là một tông vàng mang nghĩa "hành động ngay." Các component có cảm giác thủ công hơn là doanh nghiệp — card bo tròn, button chunky, và một display face tùy chỉnh (Champ) truyền tải brand voice trước khi ai kịp đọc bất kỳ copy nào. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Buttercream | `#fff6d2` | `--color-buttercream` | Page canvas, bề mặt card, và background ấm — neutral chủ đạo tạo nhiệt độ ấm áp cho toàn bộ UI | | Marigold | `#ffd801` | `--color-marigold` | Primary CTA fill, brand accent — màu vàng xe buýt trường học, giọng màu duy nhất trong hệ thống, chỉ dành riêng cho bề mặt hành động |

# Awesomic — Style Reference > Rounded midnight marketplace — a portfolio gallery cut from matte black tiles on a white tablecloth, where large rounded corners and a single custom typeface do all the expressive work. **Theme:** light Awesomic operates on a white-and-near-black canvas with maximum roundness — 36px cards and pill-shaped containers dominate every surface, creating a soft, approachable tension against the very dark #09090b fills used for primary actions. The neutral scale is dense and graduated (gray-50 through gray-950), but only 3-4 steps appear in any single view, keeping contrast high without complexity. The single custom typeface, Cosmica, spans the entire system from 10px badge labels to 64px display headlines — its weight range (300–700) does all tonal work that color doesn't. Accent color is almost entirely absent from the UI layer: vivid orange (#ff5a00) surfaces only on YC badge labels, and the vivid pink (#fe45e2) is a single decorative card wash — the system's restraint makes these moments land harder. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#09090b` | `--color-obsidian` | Primary filled button backgrounds, display heading text on white surfaces — the system's anchor dark, nearly true black | | Ink | `#18181b` | `--color-ink` | Body text, nav text, badge text on light surfaces — one shade lighter than Obsidian, used for reading-weight text | | Graphite | `#3f3f46` | `--color-graphite` | Button borders, badge backgrounds (dark variant), border strokes across components — the dominant UI border tone | | Slate | `#52525b` | `--color-slate` | Mid-dark card backgrounds in dark sections, subtle icon fills |

# Axiom — Style Reference > Cửa sổ terminal lúc nửa đêm — nền đen phẳng, text monospaced, và một con trỏ màu cam nhấp nháy **Theme:** dark Axiom là giao diện tối mang phong cách terminal, nơi mọi ký tự đều monospaced, mọi bề mặt đều gần như đen tuyền, và một gam cam ấm duy nhất đảm nhận toàn bộ công việc tạo điểm nhấn màu sắc. Ngôn ngữ thiết kế vay mượn từ code editor và CLI tools — không gradient, gần như không đổ bóng, không bo tròn mềm mại — thay vào đó, thông tin được phân tầng qua những chuyển dịch tinh tế giữa các gam tối trung tính (từ nền #000000 đến card #191919, rồi border #202020) để UI trông giống như một file log được định dạng gọn gàng. BerkeleyMono đảm nhận toàn bộ giọng điệu, từ hero headline đến nav label, mang đến cho sản phẩm một cảm giác engineering-native, báo hiệu đối tượng người dùng trước khi báo hiệu thương hiệu. Màu cam xuất hiện như một công cụ chính xác: phần nền của primary CTA, log-bar visualization, và border trái 2px đánh dấu các editorial case-study card — không bao giờ mang tính trang trí, luôn luôn có chức năng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#000000` | `--color-void` | Nền trang, nav fill, bề mặt terminal | | Carbon | `#111111` | `--color-carbon` | Bề mặt chính, nền card, hero canvas | | Graphite | `#191919` | `--color-graphite` | Nền card nâng cao, fill case-study card | | Iron | `#202020` | `--color-iron` | Hairline border, divider, phân cách tinh tế |

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

# BUTT STUDIO — Style Reference > gallery wall với một serif wordmark khổng lồ **Theme:** light BUTT Studio là một portfolio mang phong cách editorial, nơi chữ được xem như kiến trúc: một wordmark Caslon khổng lồ trải dài từ mép này sang mép kia ở đầu trang, bị cắt ngang bởi một hình minh họa hữu cơ đan xuyên qua các ký tự. Bên dưới hero, hệ thống thu gọn thành một ledger ba cột mang phong cách clinical với thông tin liên hệ, khách hàng và tính năng bằng sans-serif nhẹ nhàng, sau đó mở ra thành grid dự án hai cột rộng rãi. Màu sắc gần như vắng bóng hoàn toàn — mực đen mờ trên nền giấy xám ấm, với một badge chàm đậm duy nhất làm điểm nhấn màu sắc duy nhất. Cảm giác như một tạp chí in bỗng nhiên sống động: serif display đầy tự tin, sans body tiện dụng, không gradient, không chrome bo tròn, không bóng đổ trang trí. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền, button outlines, structural strokes — màu duy nhất mang thông tin | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, thumbnail covers, văn bản đảo màu trên nền tối | | Carbon | `#131313` | `--color-carbon` | Nền tile dự án tối, bề mặt gần đen cho video panels | | Bone Gray | `#e0e0e0` | `--color-bone-gray` | Canvas trang, neutral button fills — nền xám ấm mà toàn bộ bố cục nằm trên đó |

# Backlight — Style Reference > Con dấu đỏ son trên nền giấy kem ấm — bìa catalog in ấn nơi một gam mực đỏ làm chủ trang giấy kem, còn mọi thứ khác nằm yên trong thang xám tĩnh lặng. **Theme:** light Backlight sử dụng ngôn ngữ editorial ấm áp xây dựng trên nền giấy kem (cream vellum) và một điểm nhấn đỏ son (vermillion). Hero full-bleed màu cam-đỏ đóng vai trò như trang bìa của một catalog in ấn, với chữ trắng và một nút pill trắng duy nhất là những thành phần được phép xuất hiện. Bên dưới hero, canvas chuyển sang màu kem ấm (#e4ddd5) mang các card trắng, chữ tối, và một đường kẻ mảnh màu đào (#f3b8a9) chạy dọc theo grid như một đường kẻ in. Chat-bubble cards được dùng như một signature device để làm nổi bật các cuộc hội thoại nhóm và pain points. Hệ thống typography tự tin nhưng nhẹ nhàng — Instrument Sans với negative tracking đồng nhất tạo độ dày đặc mà không nặng nề, và Fragment Mono dùng để đánh dấu timestamp và metadata. Bảng màu không bao giờ leo thang: không shadow, không gradient, không điểm nhấn phụ — chỉ có warm neutrals, một gam đỏ đậm, và một dải đen full-bleed duy nhất để tạo tương phản tonal. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Vermillion | `#dd3508` | `--color-vermillion` | Điểm nhấn cam cho viền action dạng outline, linked labels, và emphasis tương tác nhẹ. Không nâng cấp lên màu CTA chính | | Peach Hairline | `#f3b8a9` | `--color-peach-hairline` | Viền outline cam cho tags, divider, và cạnh UI khi focus. Không nâng cấp lên màu CTA chính | | Cream Vellum | `#e4ddd5` | `--color-cream-vellum` | Canvas trang bên dưới hero, viền input, lớp nền surface nhẹ — chất giấy ấm mà mọi thứ khác nằm trên đó | | Bone White | `#ffffff` | `--color-bone-white` | Bề mặt card, nền button trên hero cam, chữ nav trên nền tối/cam, typography inverted — lớp surface sáng |

# Balsa — Style Reference > engineering notebook on white drafting paper **Theme:** light Balsa's design language is an engineering notebook on white drafting paper: an almost exclusively achromatic canvas interrupted only by amber highlighter-pen annotations and one deep purple accent. The hero voice is Van Condensed Pro Bold set uppercase at extreme negative tracking (-0.047em at 48px) — industrial, compressed, shouting in a whisper. Inter handles every secondary voice at compact sizes (11–18px), with the entire interface reading as product-first: a large embedded product screenshot is the real hero, flanked by floating yellow callout cards that explain the screenshot like margin notes. Black filled buttons with 6px radius and 12px-radius flat white cards with hairline borders carry the entire component vocabulary. Shadows are barely there (0.5px black at 10% or a single 1px line at 5%), the palette does almost no decorative work, and the layout breathes with generous 60–80px section gaps so each annotation card and product crop can do its job. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, filled action buttons, icons — the only assertive color in the system carries all interactive and typographic weight | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, product screenshot backgrounds, button labels on filled buttons | | Drafting Gray | `#f7f7f7` | `--color-drafting-gray` | Page canvas, the base surface every component sits on; sets the off-white tone that makes cards read as elevated without shadow | | Graphite | `#313131` | `--color-graphite` | Secondary headings and body emphasis, slightly softer than pure black for hierarchical depth |

# Bang & Olufsen — Style Reference > Scandinavian gallery trên nền sứ. Khi một trang B&O chuyển tối, sản phẩm được chiếu sáng như một tác phẩm điêu khắc trong hốc tường lúc nửa đêm; khi chuyển sáng, sản phẩm nổi trên lụa trắng, không có gì khác cạnh tranh sự chú ý. **Theme:** light Bang & Olufsen vận hành theo logic gallery-museum: những canvas sứ trắng gần như tinh khiết với sản phẩm nổi lên như các vật thể điêu khắc, bị ngắt quãng bởi những khoang màu full-bleed hiếm hoi — một màu tím ultramarine đậm nuốt chửng màn hình, thỉnh thoảng là một khoảnh khắc đỏ terracotta bão hòa — để tạo điểm nhấn cảm xúc. Typography là một neo-grotesque tùy chỉnh duy nhất (BeoSupreme) làm tất cả công việc kể chuyện: siêu khít ở kích thước display, uppercase với tracking rộng ở micro-labels, không cần typeface nào khác. Các component được tước bỏ đến tận xương: ghost controls hình pill, đường viền mảnh như sợi tóc, không bóng trang trí, không gradient button, không icon cầu kỳ. Grid rộng rãi, negative space là sự xa hoa. Mỗi sản phẩm có bệ đỡ nổi riêng; khoảng trắng xung quanh chính là căn phòng. Màu sắc được phân bổ như một vật liệu quý — khi xuất hiện, nó chiếm toàn bộ khung hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Porcelain Canvas | `#ffffff` | `--color-porcelain-canvas` | Nền trang, bề mặt product card, navigation bar — nền chủ đạo mà mọi sản phẩm nổi lên trên đó | | Bone | `#fcfaee` | `--color-bone` | Bề mặt phụ cho các khối ấm trung tính, chữ trên nền tối, canvas thay thế khi màu trắng có vẻ vô trùng | | Obsidian | `#191817` | `--color-obsidian` | Văn bản chính và thân sản phẩm — màu gần đen ấm, đọc mềm hơn #000000 thuần trên nền trắng | | Pure Ink | `#000000` | `--color-pure-ink` | Đường nét icon, micro-labels, đường viền mảnh, và những khoảnh khắc tương phản văn bản mạnh nhất |

# Bareis + Nicolaus — Style Reference > White chalk on black slate. A typographic control panel and a full-bleed visual index share one strict monochrome stage, with pill-shaped outlines as the only punctuation. **Theme:** dark Bareis + Nicolaus operates as a monochrome editorial grid: pitch-black canvas, bone-white outlines, and a single typeface carrying the entire voice. The interface is a split workspace — a typographic control column on the left filters and indexes, a full-bleed visual index on the right showcases the work. Every interactive element is a pill: 120px radius, 1px white stroke, no fill, no shadow, no hover fill — the geometry does the work. Typography is the protagonist: 72px display at weight 400 with a 1.0 line-height gives headlines architectural presence without weight, while 24px body text reads as quiet annotation. The system refuses decoration — no gradients, no brand color, no elevation, no rounded cards — and that absence is the identity. Every element earns its pixel by being typographic, structural, or navigational. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page background, card surface, filled button fill — the flat black ground that all white typography and outlines sit on | | Bone | `#ffffff` | `--color-bone` | Primary text, pill button borders, link text, section dividers, card hover overlays — every outlined and typographic element | | Ash | `#a9a9a9` | `--color-ash` | Muted borders and secondary structural strokes where pure white would compete with primary controls |

# Base44 — Style Reference > Sunlit workspace with a single lime spark. Warm off-white canvas, white product surfaces, pill controls, whisper-weight display type, and one electric lime accent that powers every action. **Theme:** light Base44 speaks in warm off-white daylight: a sunlit canvas (#faf9f7) with white product surfaces, whisper-weight display type that feels engraved rather than stamped, and one electric lime accent (#ebffb1) that makes the primary action feel switched on. Section transitions are painted as soft gradient bands — cool blue-to-white in the hero, warm orange-to-coral in the mid-page — creating a horizon-line effect between content blocks rather than hard dividers. Components stay featherlight: pill-shaped controls (999px radius), ~10px card corners, hairline borders, and almost no shadow. The lime-green is the only saturated color allowed on interactive elements; everything else is achromatic or carried inside gradients, which keeps the interface quiet and gives the single accent real authority. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lime Spark | `#ebffb1` | `--color-lime-spark` | Primary action background, active highlights — soft electric lime that reads as energy/switched-on without aggression | | Lime Bolt | `#ade900` | `--color-lime-bolt` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color | | Ember Outline | `#d8723c` | `--color-ember-outline` | Outlined button border, secondary warm-orange action variant | | Solar Orange | `linear-gradient(rgba(250, 249, 247, 0) 2.69%, rgb(255, 240, 222) 24.16%, rgb(255, 174, 83) 56.55%, rgba(255, 174, 83, 0) 98.02%)` | `--color-solar-orange` | Mid-stop of section gradient bands — warm coral that anchors horizon-line transitions; Mid-page section transition — warm orange-to-coral horizon |

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