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

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

# Ragged Edge — Style Reference > Editorial brutalism trên nền đá cẩm thạch trắng. Hãy tưởng tượng sự tự tin về typography của Vogue kết hợp với sự kiềm chế màu sắc của một gallery Berlin — toàn mực và khoảng không, với một mảng màu duy nhất dùng như dấu chấm than, không phải trang trí. **Theme:** light Ragged Edge là một website tư vấn thương hiệu đầy tự tin, vận hành dựa trên kỷ luật gần như đơn sắc hoàn toàn: mực gần-đen trên nền trắng, với một chút violet bão hòa được dùng rất tiết kiệm làm accent viền, và một hero gradient full-bleed duy nhất — sự kiện màu sắc duy nhất trên homepage. Typography là toàn bộ cá tính — một display face chữ hoa dãn cực rộng (ABCDiatypeExpanded) đảm nhiệm vai trò "hét to", trong khi một serif tinh tế (Grit) đảm nhiệm vai trò "nói chuyện", tạo ra sự căng thẳng giữa typography tạp chí editorial và letterforms display brutalism. Layout mang tính maximalist về tỷ lệ (hero full-bleed, khoảng cách section 180px) nhưng minimal về bảng màu, và mọi bề mặt tương tác đều có dạng pill với bán kính trong khoảng 40–64px, tạo cho mọi button và nav item một dạng capsule mềm mại tương phản với kiểu chữ expanded góc cạnh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Ink | `#181f1f` | `--color-obsidian-ink` | Primary text, đường viền mảnh (hairline), action buttons dạng fill — màu gần-đen chủ đạo chiếm 90% giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Canvas nền, inverted text trên khối tối, viền nav/button | | Fog | `#d1d2d2` | `--color-fog` | Đường phân cách nhẹ và viền phụ nơi Obsidian quá nặng | | Ash | `#a3a5a5` | `--color-ash` | Helper text mờ, viền button không hoạt động, metadata phụ |

# Flecto — Style Reference > Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ. **Theme:** mixed Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng | | Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính | | Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính | | Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |

# Lightship — Style Reference > Cinematic open-road diorama. Warm cream gallery walls with oversized landscape photographs pinned at gentle radii, thin black type whispering across the frames, one ember-orange accent breaking the monochrome like a campfire in a meadow. **Theme:** light Lightship is a photography-first editorial system built on a warm cream canvas (#faf6ef) with full-bleed cinematic imagery doing all the storytelling. The UI is deliberately invisible: a single custom geometric sans (F37Bolton) with tight negative tracking, hairline borders, 20px rounded photo cards, and pill-shaped navigation chips. The entire palette is near-monochrome with one warm orange (#fa5c40) reserved as a rare surface accent. Density is generous — large breathing room around elements, 100px section gaps — letting landscape photography and short editorial headlines command attention. No shadows, no gradients, no decorative chrome: the product and the places it goes are the interface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Cream | `#faf6ef` | `--color-warm-cream` | Primary page canvas, card surfaces — warm off-white replaces stark white to soften the photography-first layout and avoid the cold SaaS feel | | Pure White | `#ffffff` | `--color-pure-white` | Image borders, elevated card surfaces, contrast panel behind embedded media | | Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders, icon strokes, navigation typography — the structural anchor of the entire system | | Pebble | `#999999` | `--color-pebble` | Muted body text, secondary borders, disabled states — the one step above placeholder gray |

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

# Caldera — Style Reference > Risograph zine trên nền bê tông ấm **Theme:** light Caldera là một brand crypto mang phong cách editorial brutalist: nền canvas bê tông trắng kem ấm áp, display type condensed gần như đen kéo dài tới 189px, và một màu cam rực duy nhất đảm nhận toàn bộ tương tác. Ngôn ngữ thị giác vay mượn từ văn hóa zine thập niên 90 và kỹ thuật in risograph — các chấm halftone chuyển từ cam sang tím trên hero panels và card thumbnails, tạo cảm giác in phẳng thay vì product UI bóng bẩy. Các bề mặt giữ phong cách thấp và mờ: cream cards nổi trên nền đá ấm, border là hairline black thay vì đổ bóng, và góc bo tròn mạnh (40px là bán kính chủ đạo, không phải 8px). Màu sắc được phân bổ hạn chế — phần lớn giao diện là đơn sắc đen-trên-kem, và màu cam chỉ xuất hiện ở nơi người dùng phải hành động, một con số phải nổi bật, hoặc một card phải báo hiệu membership của brand. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Concrete Canvas | `#e2e2df` | `--color-concrete-canvas` | Nền trang — đá xám nhạt ấm áp, bề mặt chủ đạo mà toàn bộ site nằm trên đó | | Cream Card | `#f7f6f2` | `--color-cream-card` | Bề mặt card, stat panels, khối nội dung nâng cao — sáng hơn canvas một bậc | | Ink | `#070607` | `--color-ink` | Headlines, body text, hairline borders, và các đường viền cấu trúc tạo khung editorial cho layout | | Pure Black | `#000000` | `--color-pure-black` | Icon strokes, border dày, và văn bản tối nhất khi Ink chưa đủ đậm |

# Descript — Style Reference > Phòng thu phát thanh gặp tòa soạn báo — nền tối đỏ burgundy sân khấu, headline serif kiểu tòa soạn, tín hiệu on-air màu san hô. **Theme:** mixed Ngôn ngữ thị giác của Descript là mảng tối đỏ burgundy bị cắt bởi hành động đỏ san hô — giống như bên trong buồng thu âm, nơi tường hấp thụ mọi thứ và chỉ còn tín hiệu phát sáng. Màu đen-đỏ burgundy gần như đen `#390a1a` chiếm 70% hero, tạo ra độ tối sân khấu khiến CTA đỏ san hô (`#f73b3b`) trông như đèn báo on-air. Headline dùng Gamuth Display, một serif editorial custom ở 88px — một lựa chọn bất thường cho một sản phẩm SaaS, báo hiệu sự thủ công và sáng tạo nội dung hơn là tiện ích doanh nghiệp. Các phần sáng (`#faf8f7`, một màu trắng ấm) tạo độ tương phản giữa các dải tối mà không bao giờ dùng trắng tinh, giữ bảng màu thống nhất về độ ấm. Tag label như 'AI VIDEO EDITOR' dùng Brett, một typeface custom với tracking rộng 0.04em mô phỏng phong cách chyron phát thanh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Broadcast Burgundy | `#390a1a` | `--color-broadcast-burgundy` | Nền hero, bề mặt tối chính — tạo độ tối sân khấu khiến CTA san hô đọc như tín hiệu on-air | | On-Air Coral | `#f73b3b` | `--color-on-air-coral` | Nút CTA chính, label phần đang hoạt động — tín hiệu sống động duy nhất trên nền tối đỏ burgundy | | Hot Take Red | `#ff5340` | `--color-hot-take-red` | Highlight văn bản inline, nhấn phụ trong body copy | | Plum Mid | `#651a39` | `--color-plum-mid` | Trạng thái hover nav, nền nút phụ — sáng hơn Broadcast Burgundy một bậc để tạo chiều sâu tương tác |

# CLOU architects — Style Reference > mực trên giấy kem **Theme:** light CLOU architects vận hành trong một vũ trụ hai màu triệt để: kem ấm (#fffffc) và đen tuyệt đối (#000000). Không có màu nào khác được phép xuất hiện trong giao diện — mọi sắc thái còn lại đều đến từ ảnh kiến trúc tràn vào bố cục. Hệ thống được xây dựng trên một geometric sans-serif duy nhất (Circular Std) đẩy đến cực hạn: headline đạt 200px+, letter-spacing thắt chặt mạnh ở tỷ lệ lớn, và line-height nén xuống 0.80 cho display copy. Nền kem được chọn là off-white có chủ đích (không phải #ffffff), giúp tránh sự chói gắt khi đặt cạnh typography đen chủ đạo và mang lại cho trang cảm giác như giấy, như tường gallery ấm áp. Navigation là một thanh đen dày; body là khoảng kem rộng rãi; "trang trí" duy nhất chính là nhiếp ảnh — full-bleed, không khung, chính là dự án thực tế. Đây là một hệ thống thiết kế hầu như không nói gì về mặt thị giác để kiến trúc có thể nói lên tất cả. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Giấy Kem | `#fffffc` | `--color-cream-paper` | Page canvas, bề mặt card, button fills — màu off-white hơi ấm ngăn độ tương phản chói gắt với mực đen, mang lại cho toàn bộ site cảm giác ấm áp của giấy in thay vì cảm giác màn hình kỹ thuật số | | Mực Đen | `#000000` | `--color-ink-black` | Toàn bộ text, border, navigation background, button borders, icon strokes — màu foreground duy nhất trong hệ thống, dùng ở độ bão hòa hoàn toàn, không giảm opacity | ## Tokens — Typography

# Henry — Style Reference > Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed. **Theme:** mixed Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên | | Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper | | Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối | | Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |

# Creative Giants — Style Reference > oversized editorial poster on cream paper **Theme:** light Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffef7` | `--color-bone-white` | Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel | | Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Graphite | `#666666` | `--color-graphite` | Secondary body text, captions, metadata, helper copy — recedes so display type can dominate | | Ash | `#aaaaaa` | `--color-ash` | Input borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed |

# Freelance frontend UI developer và designer, Rou Hun Fan — Style Reference > Zine in Riso trên giấy construction đen **Theme:** dark Một portfolio editorial brutalism dành cho frontend developer độc lập: nền gần như đen, display type condensed cỡ lớn, và một khối accent bão hòa cao duy nhất bùng nổ giữa khoảng không. Layout hoạt động như một trang tạp chí in — text trải dài qua các cột bất đối xứng, type tiếp xúc với ảnh ở các cạnh cứng, và whitespace được dùng như một yếu tố cấu trúc thay vì padding. Điểm nhấn đặc trưng là card cyan với display text magenta trông như được dán lên trang giống một sticker, phá vỡ kỷ luật đơn sắc. Typography gánh toàn bộ trọng lượng: một monospaced geometric cho giọng hệ thống, một condensed sans nặng để "hét", và một script calligraphic cho các điểm nhấn editorial nhằm nhân tính hóa thẩm mỹ máy móc. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Carbon | `#0a0a0a` | `--color-carbon` | Nền trang và các section background — gần như đen thật giúp tối đa độ tương phản của white type và các khối accent bão hòa | | Bone | `#ffffff` | `--color-bone` | Text chính, display headlines, border, và link strokes — giọng duy nhất cho phần lớn trang | | Voltage Cyan | `#1ef0e4` | `--color-voltage-cyan` | Nền accent card, highlight panels — cyan phẳng bão hòa nổi bật trên nền tối, dành riêng cho project cards và editorial callout blocks | | Plasma Magenta | `#e91e8c` | `--color-plasma-magenta` | Display text trên cyan cards, decorative script flourishes — hồng/magenta nóng chỉ dùng làm ink-on-cyan contrast hoặc editorial accent |