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

# Adaline — Style Reference > botanical journal at dawn **Theme:** light Adaline renders as a contemplative workspace: a warm cream canvas draped over a painted landscape, with near-black forest text and one deep warm-brown action color. Typography stays geometric and humanist (Akkurat) with an experimental monospace (Fragment Mono) for micro-labels — never decorative, always functional. Surfaces layer as subtle sage tints, borders are hairline thin, and components whisper rather than shout: ghost buttons, outlined nav, 20px pill radii, almost zero elevation. The whole system behaves like a botanical journal — quiet, organic, deliberate — where the only saturated moment is the primary action and the only sharp edge is the cursor. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fbfdf6` | `--color-cream-paper` | Page canvas, card surfaces, inverted text on dark fills | | Botanical Ink | `#0a1d08` | `--color-botanical-ink` | Primary headings, body text, outlined/ghost button borders, nav text | | Bark Brown | `#31200b` | `--color-bark-brown` | Decorative fill, secondary text tone, SVG illustration depth | | Warm Loam | `#4a3212` | `--color-warm-loam` | Primary action button fill — the single chromatic CTA, deep earthy brown against cream |

# Mercury — Style Reference > Mountain Top Command Center **Theme:** dark Thiết kế mang cảm giác của một trung tâm chỉ huy lúc hoàng hôn, vừa rộng lớn vừa tập trung. Bảng màu trung tính tối gần như đen (#1e1e2a, #171721) tạo nên một canvas điện ảnh sống động, nơi dòng chữ trắng nhẹ (#ededf3) mang lại độ rõ nét sắc sảo. Mọi năng lượng đều được dồn vào một điểm nhấn xanh tím duy nhất (#5266eb), được dành riêng cho các call-to-action chính, giống như đèn báo hiệu trên bảng điều khiển công nghệ cao. Typography là yếu tố định hình chính, với các custom font được sử dụng ở weight nhẹ cho headline, tạo nên giọng điệu vừa có thẩm quyền vừa dễ tiếp cận. Sự tương phản giữa hình ảnh hero rộng lớn, đầy không khí và giao diện text-driven bên dưới tạo ra một hành trình từ khát vọng đến hành động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Mercury Blue | `#5266eb` | `--color-mercury-blue` | Nút CTA chính — điểm nhấn sống động duy nhất trong bảng màu trung tính, tập trung hành động của người dùng. | | Ghost Blue | `#cdddff` | `--color-ghost-blue` | Nền nút phụ, hover states — màu xanh nhạt, hư ảo gợi ý tương tác. | | Deep Space | `#171721` | `--color-deep-space` | Lớp nền trang ngoài cùng, tạo chiều sâu. | | Midnight Slate | `#1e1e2a` | `--color-midnight-slate` | Nền chính của trang và các section. |

# Walden — Style Reference > A still forest floor — every product is a stone, every pixel is moss and silence. **Theme:** light Walden is a meditation and ritual-object brand whose interface behaves like a quiet gallery wall. The canvas is pure white; nearly every surface, border, and control is rendered in warm grayscale, with no chromatic accent anywhere in the system. Type is small, tight, and lowercase-leaning, and the only structural cues are hairline strokes in stone-gray (#d3cec5) — no drop shadows, no elevation tricks, no gradients. Full-bleed nature and product photography carries the entire emotional load, so the chrome around it must stay almost invisible. Components feel handmade, not templated: a 2px button radius, a 16px max radius on cards, and 1px inset rings as the only shadows in the system. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal Ink | `#3f3f3f` | `--color-charcoal-ink` | Primary text, default borders, link underlines, icon strokes — the workhorse gray that carries almost every label and divider in the system | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav background, card surfaces, button text — the absolute ground of the interface | | Stone Veil | `#d3cec5` | `--color-stone-veil` | Hairline borders, inset focus rings, soft separator lines — the warm gray that makes every edge feel like a seam in paper or stone, not a UI stroke | | Sumi Black | `#030302` | `--color-sumi-black` | Filled button backgrounds, active state borders, highest-emphasis text — the near-black ink, warmer than pure black, used when a control must be pressed or selected |

# Aaron Poe & Co — Style Reference > Quiet white gallery — coral pink whispers float in vast considered silence, framed only by pill-shaped nav and tightly-tracked type. **Theme:** light Aaron Poe & Co operates as a curator's white room — a creative director's portfolio that strips interface to typography, whitespace, and a single accent. The canvas is pure white; the type stack pairs Geist (tightly tracked, negative letter-spacing) with system fonts for body copy; and a warm coral pink (#ea587d) surfaces only on heading text and hairline borders, never as a filled button. Components feel like gallery placards: a floating pill-shaped nav, centered bio blocks, and subtle 1px inset borders replacing the need for drop shadows. The rhythm is editorial — vast negative space punctuated by compressed, confident type and one whisper of color. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Coral Rose | `#ea587d` | `--color-coral-rose` | Accent for heading text, hairline borders, and active-state markers — the single chromatic signal in an otherwise achromatic system | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, and inverted backgrounds | | Cloud | `#f2f2f2` | `--color-cloud` | Pill nav background, subtle surface elevation, and inset border shadows | | Bone | `#d9d8d4` | `--color-bone` | Warm-toned secondary surface tint for alternating bands |

# Front — Style Reference > Phòng điều khiển màu plum đậm, một tia sáng xanh vôi. Tường aubergine sâu thẳm, viền sương lavender, và một ngọn hải đăng chartreuse duy nhất kéo mọi ánh nhìn. **Theme:** dark Front vận hành trong ngôn ngữ command-center màu plum đậm: một màu tím bão hòa duy nhất (#300c41) làm nền chính cho trang, các card lavender nhạt hơn nổi bên trên, và một điểm nhấn xanh vôi điện tử đâm xuyên qua bóng tối — màu ấm duy nhất. Typography là neo-grotesque với tracking chặt, display size ở weight 500 kéo vào trong -0.02em khiến headline mang cảm giác gia công máy móc thay vì vẽ tay. Các bề mặt phẳng — không drop shadow, chỉ có một viền inset 1px mảnh màu lilac nhạt (#d0c6f0) để xác định cạnh tương tác. Nhịp điệu tổng thể tự tin và dày đặc: pill controls bo tròn (bán kính 40-64px), spacing 8/16/24px gọn gàng, và xếp lớp dark-on-dark khiến CTA xanh vôi như được bật sáng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Aubergine | `#300c41` | `--color-aubergine` | Canvas trang, hero backgrounds, nav background — bề mặt màu chủ đạo duy nhất tạo nên bản sắc không thể nhầm lẫn của Front | | Royal Plum | `#5b1f76` | `--color-royal-plum` | Accent tím hồng hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính | | Lime Spark | `#dee948` | `--color-lime-spark` | Accent xanh lá hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính | | Bright Violet | `#8034bf` | `--color-bright-violet` | Accent tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |

# Active Theory — Style Reference > mái vòm đài thiên văn lúc nửa đêm — một thiết bị duy nhất phát sáng trong khoảng không, xung quanh là những micro-label bảng điều khiển **Theme:** dark Giao diện của Active Theory là một vực thẳm: canvas đen gần như tuyệt đối bị nuốt chửng bởi một artifact 3D phát sáng duy nhất, với chrome được thu gọn thành những label chữ hoa mỏng như thì thầm và những đường kẻ tóc (hairline rules). Ngôn ngữ thị giác vay mượn từ bản vẽ kiến trúc và vật lý hạt — một typeface hình học monospaced (nbarchitekt) gắn nhãn cho mọi phần tử giao diện, trong khi một serif (Times) xử lý những đoạn body text hiếm hoi, tạo ra sự căng thẳng giữa độ chính xác kỹ thuật và sự ấm áp biên tập. Các phần tử UI tồn tại ở vùng ngoại vi: một pill nav góc trên bên phải được kết nối bằng một đường kẻ, một cookie consent nhỏ neo ở góc dưới bên phải. Màu sắc gần như hoàn toàn không có sắc độ; điểm nhấn màu duy nhất là một màu tím nửa đêm bão hòa thấp (midnight violet) được sử dụng rất tiết kiệm trên affordance accept của cookie, không bao giờ vươn tới vị thế hero hay marketing. Hệ thống thiết kế về cơ bản nói rằng: bản thân tác phẩm 3D CHÍNH LÀ giao diện, và mọi phần tử chrome nên phục tùng nó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Canvas trang, phông nền modal, nền trường hạt | | Pure White | `#ffffff` | `--color-pure-white` | Văn bản chính, label nav, chữ trên nền tối | | Graphite Border | `#4d4d4d` | `--color-graphite-border` | Đường kẻ tóc (hairline dividers), đường viền cấu trúc mờ | | Steel Border | `#808080` | `--color-steel-border` | Viền nút outlined, đường chia thứ cấp |

# Podia — Style Reference > Buổi chiều ấm áp với giấy thủ công. Những khối blob hữu cơ trôi nổi trên nền canvas trắng mờ với tông màu terracotta, lavender và xanh bụi, bao quanh các headline hình học nén chặt và các thẻ sản phẩm màu rộng rãi. **Theme:** light Podia là một buổi chiều ấm áp với giấy thủ công: một canvas sáng rải rác các khối blob hữu cơ màu terracotta, lavender và xanh bụi, tạo khung cho giao diện marketplace thân thiện với người sáng tạo. Font StabilGrotesk tùy chỉnh được kéo chặt với tracking âm ở kích thước display, tạo cho headline cảm giác nén, gần như cắt bằng tay — củng cố phép ẩn dụ studio-xưởng thủ công. Màu sắc được triển khai như một vùng chức năng: ba vùng sản phẩm màu sắc (xanh da trời, terracotta, lavender) báo hiệu các khả năng nền tảng riêng biệt, trong khi màu gần đen pha tím đảm nhận mọi hành động chính. Bề mặt mờ và phẳng — không gradient, không glow, không kính — để bảng màu pastel trầm làm công việc tạo cảm xúc. Các component rộng rãi và bo tròn: bán kính 24–56px, pill buttons, thẻ màu, và khoảng thở section rộng 36–80px. Hệ thống mang cảm giác như bàn làm việc của một người thợ thủ công lặng lẽ, không phải dashboard doanh nghiệp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#06040e` | `--color-ink` | Văn bản chính, nền CTA chính, nền nav, heading copy — gần đen pha tím, kết nối các thành phần tối với bảng màu thương hiệu | | Deep Teal | `#10242f` | `--color-deep-teal` | Heading phụ, nhấn mạnh body, biến thể bề mặt tối — đồng dẫn với Ink cho hệ thống phân cấp typography tương phản cao | | Graphite | `#452623` | `--color-graphite` | Văn bản cấp ba và biến thể bề mặt tối — nâu đen ấm làm mềm thang typography bên dưới hai màu chính | | Fog | `#f5f5f5` | `--color-fog` | Canvas trang, nền section — trắng ấm mang lại cho toàn bộ giao diện chất lượng giấy ngập nắng |

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

# Going™ — Style Reference > Sun-bleached travel journal with electric ink **Theme:** light Going is a warm-paper travel companion: a parchment canvas (#fffef0, never pure white) carries deep lagoon teal body text and pill-shaped electric iris CTAs, with soft mint wash bands organizing content sections. PP Mori's slightly off-axis 475 weight gives paragraphs a friendlier gravity than standard 400, while display sizes push tracking outward (up to 0.10em at 80px) for an editorial-poster feel. Surfaces stack: parchment base → mint wash content bands → ink-bordered cards with a whisper shadow. The design refuses cold SaaS conventions — black is used sparingly as a hairline border accent, not as primary type, and the single violet CTA carries all interactive weight across the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Deep Lagoon | `#004449` | `--color-deep-lagoon` | Primary text, body copy, icon strokes, navigation — deep teal replaces black for all running text and primary iconography, lending a warm printed feel rather than digital harshness | | Electric Iris | `#483cff` | `--color-electric-iris` | Violet action color for filled buttons, selected navigation states, and focused conversion moments. | | Parchment | `#fffef0` | `--color-parchment` | Page canvas, card surfaces on mint sections, inverted text on dark elements — warm off-white background replaces clinical #ffffff, reducing glare and adding editorial softness | | Ink Black | `#000000` | `--color-ink-black` | Hairline borders, card outlines, structural dividers, footer strokes — used as 1px boundary lines rather than as primary type, creating crispness against the cream base |

# Tracky — Style Reference > Doodled planner trên nền giấy ấm **Theme:** light Tracky mang phong cách bullet journal của một người sáng tạo được biến thành sản phẩm: một nền canvas sáng ấm (#f2f2f2) làm chỗ dựa cho navy gần đen (#151b31) — màu chủ lực cho text, border và primary actions, trong khi coral đỏ (#ff5858) và mint xanh (#86e0c1) xuất hiện như những dấu câu chức năng nhỏ để nhấn mạnh và thể hiện trạng thái live. GRIFTER đảm nhận giọng thương hiệu ở display scale — chunky, hand-printed, tracking hơi lỏng — còn Inter xử lý toàn bộ UI và body text ở kích thước compact, tracking chặt. Các component nằm trên nền soft 8px và 16px radii với shadow siêu nhẹ, khoảng cách section rộng rãi, và các điểm nhấn minh họa vẽ tay (doodles, organic blobs, bunny mascot) khiến việc quản lý dự án giống như vẽ vời trong sổ tay chứ không phải ghi ticket. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Inkwell Navy | `#151b31` | `--color-inkwell-navy` | Primary buttons, text và border chủ đạo, nền dark feature card — màu gần đen chủ lực, đọc mềm và ấm hơn #000 thuần | | Coral Emphasis | `#ff5858` | `--color-coral-emphasis` | Accent text cho từ khóa trong headline, điểm nhấn nổi bật, và link chọn lọc — đỏ ấm kết hợp navy tạo năng lượng vui tươi không mang tính công ty | | Mint Pulse | `#86e0c1` | `--color-mint-pulse` | Green state accent cho badge, bề mặt xác nhận, và status label ngắn | | Butter Yellow | `#fedf89` | `--color-butter-yellow` | Top announcement banner, highlight washes — pastel vàng ấm cho thông báo thân thiện không la hét |

# Fonts In Use — Style Reference > White gallery wall for letterforms **Theme:** light Fonts In Use operates as a typographic museum: an editorial archive where the interface is deliberately invisible so the letterforms being catalogued can speak. Every surface is white or near-white, every stroke is black, and the only typographic personality comes from the custom BentonSansRE UI sans and RelayCond display — never from decoration. The 5-column thumbnail grid functions as the page's primary content unit, each card pairing a photographic evidence image with a live sample of the typeface it documents (Baste, Proxima Nova, Zilla Slab…). Density is compact and newspaper-like rather than spacious-SaaS: tight vertical rhythm, 5px gaps, hairline 2px radii on controls, no shadows, no gradients, no accent color. The whole system reads as a printed specimen sheet rendered for the screen — restrained, factual, anti-decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all borders, logo wordmark, nav links, search input border — the sole ink color in the entire system | | Paper | `#ffffff` | `--color-paper` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Bone | `#f0f0f0` | `--color-bone` | Alternate row striping, search input fill, subtle list separators — a barely-there warm gray for differentiation | | Mist | `#dddddd` | `--color-mist` | Input borders, subtle dividers — the lightest functional border tone |

# Charlie — Style Reference > Typography khắc đá tu viện trên nền obsidian. Một portfolio dùng một mảng tường đỏ để khiến sự im lặng trở nên chói tai. **Theme:** dark Portfolio của Charlie Le Maignan là một canvas editorial brutalism: khoảng đen thuần khiết làm nền trang, chữ trắng cỡ lớn là kiến trúc duy nhất, và một tấm đỏ dữ dội nổ tung trên nền đơn sắc. Ngôn ngữ thị giác là sự va chạm giữa một display face custom bị cắt xẻ (Brasparz) ở tỷ lệ phi lý với một neo-grotesque kiềm chế (NeueHaas) làm công việc thầm lặng. Mọi thứ đều được phép trở nên khổng lồ — line-height nén xuống 0.70, letter-spacing đẩy đến -0.079em — để chữ tràn ra ngoài viewport thay vì nằm gọn bên trong. Khối hero đỏ duy nhất hoạt động như dấu câu màu sắc duy nhất trong toàn bộ hệ thống; mọi thứ khác đều giữ sắc độ xám. Bề mặt phẳng, không có elevation, không gradient, không shadow trang trí — thiết kế giao tiếp qua tỷ lệ, độ tương phản, và một vụ nổ sắc độ duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang, bề mặt sâu — khoảng không mà mọi thứ nổi trên đó | | Bone White | `#ffffff` | `--color-bone-white` | Chữ chính, viền nav pill, fill trạng thái active, đường kẻ mảnh, iconography | | Ash Gray | `#838383` | `--color-ash-gray` | Chữ phụ muted, nhãn nav inactive, metadata thứ cấp | | Alarm Red | `#ed1c24` | `--color-alarm-red` | Khối detonation hero — khoảnh khắc sắc độ duy nhất, dùng làm bề mặt full-bleed trên nền đen. Khiến đơn sắc như một hơi thở nín trước tiếng hét |

# Everlane — Style Reference > Minimalist atelier trên nền vải linen thô. Tường trắng, kiến trúc trần trụi, một dải ánh sáng xanh sage duy nhất. **Theme:** light Everlane hoạt động như một catalogue thời trang biên tập tối giản: bảng màu gần như hoàn toàn achromatic, một điểm nhấn sage mềm duy nhất dành cho thông điệp khuyến mãi, và Maison Neue được đặt gần như hoàn toàn ở dạng uppercase với tracking rộng. Nhiếp ảnh gánh gần như toàn bộ trọng lượng thị giác — ảnh editorial full-bleed và ảnh sản phẩm crop sát đặt trên nền trắng, không trang trí, không đổ bóng, không chrome. Typography là vật trang trí duy nhất: heading uppercase có tracking nổi trên hình ảnh, body text tối giản và lặng lẽ. Các component được lược bỏ đến mức tối thiểu — text link mảnh, product tile góc sắc, không button, không card, không panel. Kết quả đọc giống một cuốn lookbook in ấn được chuyển lên màn hình hơn là một cửa hàng trực tuyến. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Onyx | `#000000` | `--color-onyx` | Primary text, icon, hairline border, nav typography, footer text — mực chủ đạo trên mọi bề mặt | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nền product card, hero text overlay, input fill | | Soot | `#121212` | `--color-soot` | Dark feature section, inverted text trên bề mặt sáng, khối tương phản cao | | Ink | `#161912` | `--color-ink` | Biến thể body text gần đen, deep border — gần như không phân biệt được với Onyx nhưng mang một chút ấm nhẹ |

# General Intelligence Company — Style Reference > thành phố minh họa ẩn sau lớp kính mờ **Theme:** light General Intelligence Company mang phong cách ấn phẩm biên tập về AI ứng dụng: nền canvas ấm áp màu trắng kem (#fefffc) kết hợp headline serif gần như đen và body text sans-serif gọn gàng, với một điểm nhấn xanh dương duy nhất (#0081c0) được dùng rất tiết chế. Tranh minh họa full-bleed (phong cảnh thành phố chạng vạng, cánh đồng hoa) tạo không khí, trong khi các thẻ text kính mờ nổi trên đó để truyền tải thông điệp — hero là một tableau văn học, không phải ảnh chụp sản phẩm. Serif display tùy chỉnh 'ppmondwest' với tracking -0.02em chặt chẽ tạo giọng điệu đo lường, gần như học thuật; sans-serif 'af' giữ mọi bề mặt khác yên tĩnh và chức năng. Các component có cảm giác như giấy và nhẹ: viền hairline, ring shadow mềm, border-radius lớn trên thẻ (12-24px), và pill controls nổi thay vì panel đặc nặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Hudson Blue | `#0081c0` | `--color-hudson-blue` | Blue wash cho highlight background, decorative bands, và điểm nhấn mềm phía sau nội dung. Không nâng lên thành màu CTA chính | | Slate Cyan | `#41a1cf` | `--color-slate-cyan` | Blue accent cho viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. Không nâng lên thành màu CTA chính | | Graphite Night | `#282834` | `--color-graphite-night` | Fill của floating navigation island và icon strokes — bề mặt tối làm neo cho pill-shaped nav trên nền canvas sáng | | Ink | `#171717` | `--color-ink` | Text chính và màu viền chủ đạo. Chiếm 619 occurrences — xương sống cấu trúc của giao diện |

# Readwise — Style Reference > Một cuốn nhật ký có chú thích của người đọc — nền trắng giấy yên tĩnh, headline serif, và một cây bút xanh. **Theme:** light Readwise mang đến một không gian làm việc văn chương cho productivity: canvas gần như trắng với một điểm nhấn editorial blue duy nhất và những mảng highlight vàng ấm, thể hiện trực quan mục đích của sản phẩm. Hệ thống typography kết hợp serif chuyển tiếp (Charter) cho headline với humanist sans (Mulish) cho mọi thứ còn lại, tạo ra bầu không khí phòng đọc sách vở nhưng hiện đại, thay vì cảm giác dashboard SaaS điển hình. Các bề mặt phẳng và yên tĩnh — card nổi trên nền giấy trắng mát (#f1f5f8) với viền mảnh, hầu như không có shadow, và bo góc tròn trông giống như những tấm thẻ in hơn là app tiles. Màu vàng (#fff7ca) hoạt động như một highlighter thực thụ phía sau văn bản được nhấn mạnh trong dòng, không phải là một điểm nhấn trang trí — bản sắc của sản phẩm CHÍNH LÀ hành động đánh dấu những điều quan trọng. Các component luôn gọn nhẹ và tập trung vào chữ, với một nút blue filled duy nhất mang toàn bộ trọng lượng, mọi thứ còn lại được thể hiện dưới dạng ghost hoặc text-link. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Pen Blue | `#478cd0` | `--color-pen-blue` | Điểm nhấn blue hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Highlighter Yellow | `#fff7ca` | `--color-highlighter-yellow` | Điểm nhấn vàng hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. | | Reader Orange | `#fb9100` | `--color-reader-orange` | Điểm nhấn cam hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, nền ảnh chụp màn hình sản phẩm, màu chữ trên nút filled, và nền nav. Tầng bề mặt cao nhất |

# Browserbase — Style Reference > editorial broadsheet kết hợp data terminal — một chấm cam nóng duy nhất tô điểm trên nền gần như đơn sắc với headline GT Planar cỡ lớn, bề mặt card pastel mềm, và metadata mono nhỏ. **Theme:** light Browserbase mang phong cách của một developer tool hướng dữ liệu nhưng khoác lên mình lớp áo editorial broadsheet: một canvas gần như đơn sắc được neo bởi một màu cam nóng duy nhất, chỉ dùng để nhấn mạnh typography chứ không bao giờ dùng cho button. Giao diện giữ sự yên tĩnh với các bề mặt đen, trắng và trắng ngà, trong khi card và feature block giới thiệu các tông pastel mềm — tím oải hương nhạt, xanh da trời, kem — để nhóm nội dung mà không cần dùng shadow. Display headline bằng GT Planar cỡ lớn nằm cạnh label GT Standard Mono nhỏ gọn, tạo nhịp điệu của một tạp chí kỹ thuật: những câu khẳng định mạnh mẽ xen kẽ với metadata chính xác. Pill button đen đặc (filled) đảm nhận mọi hành động chính; màu cam được dành riêng cho highlight box bên trong headline và footer band, biến màu thương hiệu thành dấu câu chứ không phải tín hiệu điều hướng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, filled action buttons, card borders, dividers — xương sống cấu trúc của toàn bộ giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, icon fills trên nền tối | | Faint Slate | `#f8fafc` | `--color-faint-slate` | Màu trắng ngà nhẹ cho logo strip cards, nền panel phụ, tông màu xen kẽ cho section | | Lavender Mist | `#e2e9f3` | `--color-lavender-mist` | Bề mặt feature card và tông nền section — xám lạnh mềm giúp nhóm nội dung mà không tạo cảm giác nặng nề |

# beehiiv — Style Reference > midnight observatory with neon plasma **Theme:** dark beehiiv uses a midnight-canvas language: near-black surfaces with subtle violet undertones, tight geometric display type in Clash Grotesk, and a signature electric-indigo-to-hot-magenta gradient that injects energy into an otherwise restrained layout. The page behaves like a product launch site — dark always, with content cards floating on the dark canvas using thin violet borders and faint glows rather than heavy shadows. Satoshi carries all interface text with comfortable spacing, while Clash Grotesk delivers the headline voice at 60-72px with zero letter-spacing for confident geometric authority. Accent color appears sparingly: as a gradient on hero text, as a full-bleed highlight on one testimonial card, and as small chromatic icons — never as large filled buttons. Components are flat and precise, relying on border-weight and inner glow rather than elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Abyss Ink | `#060419` | `--color-abyss-ink` | Page background, deepest surface — the void that everything floats on | | Deep Violet | `linear-gradient(to right bottom, rgba(6, 4, 25, 0.4), rgba(47, 57, 186, 0.8))` | `--color-deep-violet` | Card and panel surfaces — one step lifted from the canvas; Atmospheric gradient overlay — blends canvas into indigo accent | | Twilight Plum | `#141230` | `--color-twilight-plum` | Elevated surfaces, active nav backgrounds, deeper card variants | | Dark Plum | `#1b0e27` | `--color-dark-plum` | Hover states, inset surface, tooltip backgrounds |

# Kobu — Style Reference > Travel gazette đơn sắc trên nền giấy ấm **Theme:** light Kobu hoạt động như một editorial travel portfolio: nền cream ấm áp, gần như không có tạp âm màu sắc, và nhiếp ảnh là yếu tố màu duy nhất. Wordmark display khổng lồ KOBU trải dài gần như edge-to-edge — chính tên thương hiệu là tuyên bố thị giác, không phải một logo mark. Mọi thứ khác đều lùi lại: Gill Sans nhân văn tạo giọng văn văn chương, mang phong cách guidebook, trong khi Fira Mono xử lý các label uppercase nhỏ đọc như thẻ bảo tàng in ấn. Cards nằm sát mép trang với hairline borders, không shadow, không fill, và badges bo tròn 5px nổi ở góc trên bên trái mỗi bức ảnh. Hệ thống có chủ đích tối giản — không CTA, không accent color, không gradient — để kiến trúc và cảnh quan trong ảnh trở thành yếu tố biểu cảm duy nhất trên màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#242429` | `--color-obsidian` | Primary text, icon strokes, hairline borders toàn hệ thống — màu tối chủ lực thay thế pure black để đọc ấm hơn một chút | | Parchment | `#f9f5f2` | `--color-parchment` | Page canvas, hero và footer backgrounds — off-white ấm báo hiệu giấy editorial thay vì digital mặc định | | Gallery White | `#ffffff` | `--color-gallery-white` | Card surfaces, image borders, badge backgrounds — màu trung tính sáng hơn dùng để nâng nội dung khỏi nền parchment | | Ink Black | `#000000` | `--color-ink-black` | Headings, navigation borders, và các khoảnh khắc typographic tương phản cao cần độ đậm tối đa |

# Peloton — Style Reference > Red beacon on charcoal runway. A fitness showroom where one electric red CTA cuts through vast dark exhibition space into clean white product galleries. **Theme:** mixed Peloton runs a disciplined two-mode visual system: cinematic charcoal hero surfaces that make product photography glow, followed by bright white product grids that let the merchandise speak. The palette is almost entirely achromatic — gunmetal, white, and warm grays — with one vivid red accent that acts as the only chromatic punctuation on the page, reserved exclusively for primary actions, brand marks, and the persistent chat widget. Inter carries the entire typographic voice at a wide range of weights, from whisper-light 300 display headlines to confident 500 nav labels, creating a calm, premium fitness-retail atmosphere. Components are generous: 28px pill buttons, 6px inputs, 24px image corners, and minimal elevation — surfaces do the structural work, shadows stay absent or near-invisible. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Peloton Red | `#df1c2f` | `--color-peloton-red` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Carbon Black | `#181a1d` | `--color-carbon-black` | Primary text color, dark hero surfaces, navigation bar, footer backgrounds, heading color — the structural anchor of the entire system | | Pure White | `#ffffff` | `--color-pure-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Mist Gray | `#f7f7f7` | `--color-mist-gray` | Page canvas, subtle section backgrounds behind product grids, alternate band separator |

# Aaply — Style Reference > Digital sketchpad with electric highlighter **Theme:** light Aaply reads as a digital sketchpad on a light gray canvas: everything is flat, everything is rounded, and electric yellow carries the energy while black anchors the structure. The headline itself behaves like a whiteboard — bold black type interrupted by colorful emoji and icon stickers, signaling that this is a tool for creative work. Surfaces float as soft white cards on a cool gray field with a faint dot-grid texture, never relying on shadows for depth. Brand color appears as generous fills (buttons, accent shapes, logo marks) rather than thin strokes or tinted backgrounds. The overall feeling is energetic but unpretentious — a working surface, not a gallery. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Highlighter Yellow | `#e6e51e` | `--color-highlighter-yellow` | Primary brand accent — logo mark, filled pill buttons, accent shapes inside product mockups, highlight washes on feature cards | | Annotation Red | `#f34646` | `--color-annotation-red` | Red supporting accent for decorative details and low-frequency emphasis | | Signal Blue | `#466cf3` | `--color-signal-blue` | Product mockup logos, icon accents, connector arrows inside the flow diagram — the cool counterweight to warm yellow | | Peach Wash | `#ff8562` | `--color-peach-wash` | Soft tinted background blocks behind product mockup clusters — warm secondary surface that softens the gray canvas |

# Ko-fi — Style Reference > Không gian ấm cúng như quán café phấn viết trên giấy kem. **Theme:** light Ko-fi mang phong cách menu indie café ấm áp in trên giấy tái chế. Nền cream canvas thay thế màu trắng lạnh lẽo thường thấy ở các công cụ creator, và một custom chunky display font tạo dấu ấn cho hero headlines với năng lượng zine thủ công, trong khi DM Sans giữ mọi thứ dễ đọc. Mọi phần tử tương tác đều được bo tròn tối đa — pill buttons, pillow-soft cards, capsule inputs — tạo cảm giác xúc giác, như một cuốn sticker-book. Viền đen 2-3px bao quanh ảnh và bề mặt card thay vì đổ bóng, củng cố thẩm mỹ thủ công cắt-dán. Một màu xanh periwinkle nhẹ duy nhất tạo điểm nhấn trên bảng màu trung tính ấm, chỉ dành riêng cho primary actions để chúng luôn là thứ quan trọng nhất trên màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Oat Cream | `#e9dfd2` | `--color-oat-cream` | Secondary surface — nền feature card, warm button fills, nền tag | | Morning Fog | `#e5e7eb` | `--color-morning-fog` | Page canvas, viền nhẹ, đường kẻ mảnh — nền tảng cho mọi thứ | | Ink Black | `#202020` | `--color-ink-black` | Primary text, dark filled buttons, dark icon fills | | Sticker Black | `#000000` | `--color-sticker-black` | Viền dày trên card, ảnh và logo wordmark — đường viền signature khiến phần tử trông như cắt từ giấy |

# SoundCloud — Style Reference > concert darkroom with neon blue signal — a near-black gallery where album art and one cool accent color do all the work, and the chrome around them stays invisible. **Theme:** dark SoundCloud is a dark-stage media environment: near-black canvas (#121212) sets the venue, album artwork and photography carry the color, and a single cool blue (#699fff) punctuates links and interactive moments. The interface stays flat and almost shadowless — definition comes from inset hairlines and gray scale shifts rather than elevation, which keeps the focus on the visuals (artists, track artwork, lifestyle photography). Typography is a custom geometric sans (Söhne) with an unusually wide weight range including a 100-weight for whisper-thin display moments, paired with comfortable 8–16px padding and squared 4px corners that feel utilitarian and unfussy. Components are rectangular and content-dense — buttons are flat fills, cards are bare containers for cover art, inputs are minimal — letting the music content be the visual hero. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#121212` | `--color-obsidian` | Page background, hero overlay base, primary dark surface | | Graphite | `#303030` | `--color-graphite` | Elevated dark surfaces — input fields, card backgrounds over the dark canvas, nested panels | | Mid Gray | `#666666` | `--color-mid-gray` | Mid-tone dividers, secondary surface tier above Graphite | | Fog | `#999999` | `--color-fog` | Supporting neutral for secondary UI, dividers, and muted labels. |

# Fruitful — Style Reference > Vườn thảo mộc bếp ngập nắng — bề mặt kem ấm, một điểm nhấn xanh đậm duy nhất, sự mềm mại của cây cỏ xuyên suốt. **Theme:** light Fruitful hoạt động như một dịch vụ tài chính bên bàn bếp ngập nắng: bề mặt kem ấm thay thế tông xám lạnh của fintech điển hình, và một màu xanh rừng đậm duy nhất đóng vai trò là giọng màu sắc duy nhất. Typography gánh trọng lượng — display size lớn, tracking dày (lên đến 91px) có cảm giác như được sắp chữ thủ công hơn là được tạo ra bằng máy, tạo nền tảng cho một giao diện vốn dĩ nhẹ nhàng. Các component bo tròn và mềm mại (12px trên hầu hết container, 80px trên pill), với ảnh chân dung thật của các Guide trong khung bo tròn lớn thay thế ảnh sản phẩm trừu tượng thường thấy trong ngành. Elevation gần như vô hình — một shadow đa lớp duy nhất dành cho card sâu nhất — và border mảnh và nhẹ nhàng. Nhịp điệu tổng thể là: whitespace rộng rãi, headline band căn giữa, card grid 2–3 cột, và bảng màu ấm-nhưng-sáng giúp trải nghiệm có cảm giác như lời khuyên từ bạn bè, không phải dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Floor | `#0b7443` | `--color-forest-floor` | Primary action buttons, active nav state, brand links — xanh đậm trên nền kem ấm tạo cảm giác tự tin nhưng không mang tính công ty | | Deep Moss | `#054f31` | `--color-deep-moss` | Green outline accent cho tag, divider, và cạnh UI được focus. Không dùng làm màu CTA chính | | Vivid Leaf | `#61bc76` | `--color-vivid-leaf` | Green decorative accent cho icon, mark, và chi tiết đồ họa nhỏ. Không dùng làm màu CTA chính | | Bright Sprout | `#039855` | `--color-bright-sprout` | Green outline accent cho tag, divider, và cạnh UI được focus |

# Cycle — Style Reference > Xưởng gốm nhuốm mực với nhãn màu ngọc **Theme:** light Ngôn ngữ thị giác của Cycle mang phong cách một không gian làm việc analog ấm áp — nền canvas hơi ngả trắng, chữ đen như mực, và bảng màu ngọc đậm gợi cảm giác lọ mực cổ điển hơn là accent SaaS. Headline dùng Eudoxus Sans weight nặng với tracking dày, tạo cho mọi tiêu đề cảm giác có khối lượng vật lý; body và UI mặc định dùng Inter ở cỡ 14–16px thoải mái. Các component nằm trên hệ thống shadow rất mềm (warm gray độ trong suốt thấp) thay vì đường viền cứng, và border-radius 20px lớn khiến card trông như gạch men. Màu sắc mang tính chức năng và phân loại — mỗi product agent hoặc cụm tính năng có một màu đậm riêng (teal, violet, amber, maroon) và nền pha màu riêng, không bao giờ dùng gradient trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#171618` | `--color-ink-black` | Văn bản chính, icon, bề mặt tối — màu trung tính chủ đạo; không bao giờ dùng pure #000 cho text | | Pure Black | `#000000` | `--color-pure-black` | Màu trung tính hỗ trợ tối 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` | Bề mặt card, modal panel, text trên nút tối — bề mặt sáng nhất trong hệ thống | | Warm Canvas | `#f7f7f7` | `--color-warm-canvas` | Nền trang, đường phân cách section nhẹ — màu trắng ngà tạo cảm giác analog ấm áp |