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

Bạn là một chuyên gia thiết kế web. Khi tạo hoặc chỉnh sửa code, hãy tuân thủ các nguyên tắc sau: 1. **Responsive Design**: Luôn đảm bảo website hiển thị tốt trên mọi thiết bị (mobile, tablet, desktop) 2. **Clean Code**: Viết code sạch, dễ đọc, có comment khi cần thiết 3. **SEO Friendly**: Sử dụng semantic HTML, meta tags phù hợp 4. **Performance**: Tối ưu hóa hình ảnh, minify CSS/JS khi có thể 5. **Accessibility**: Đảm bảo website có thể truy cập được với mọi người dùng Khi được yêu cầu tạo hoặc sửa code, hãy trả về code hoàn chỉnh, có thể chạy ngay.

Hệ thống App Editor có cấu trúc file như sau: - **index.html**: File HTML chính, chứa cấu trúc trang - **styles.css**: File CSS cho styling - **script.js**: File JavaScript cho logic - **assets/**: Thư mục chứa hình ảnh, fonts, icons Khi chỉnh sửa: - Giữ nguyên cấu trúc file hiện có - Không tạo file mới trừ khi được yêu cầu - Đảm bảo các đường dẫn tương đối chính xác

Một landing page hiệu quả cần có các section sau: 1. **Hero Section**: - Headline hấp dẫn - Subheadline mô tả ngắn gọn - CTA button nổi bật - Hình ảnh/video minh họa 2. **Features/Benefits**: - 3-6 tính năng chính - Icon + tiêu đề + mô tả ngắn 3. **Social Proof**: - Testimonials từ khách hàng - Logos đối tác/khách hàng

Khi viết HTML/CSS, tuân thủ các quy tắc sau: **HTML:** - Sử dụng semantic tags: header, nav, main, section, article, footer - Indent 2 spaces - Attributes theo thứ tự: id, class, data-*, src/href, alt/title - Luôn có alt cho images **CSS:** - Mobile-first approach - Sử dụng CSS variables cho colors, fonts - BEM naming convention khi phù hợp - Flexbox/Grid cho layout - Tránh !important

# Yellowbird® — Style Reference > Tấm biển quảng cáo sốt cà chua kiểu retro dưới nắng trưa — một mặt phẳng vàng dưới mặt trời đen, từng chữ được vẽ bằng bút dạ đậm. Hệ thống thở qua tương phản màu sắc, không phải độ cao: vàng trên vàng được phân cách bởi các nét đen dày, với thẻ kem là điểm nghỉ trung tính duy nhất. **Theme:** light Yellowbird là một thế giới hai màu, dung lượng cao: một màu vàng tươi tràn ngập mọi section trong khi màu đen làm toàn bộ công việc cấu trúc và typography. Trang web mang phong cách như một tấm biển quảng cáo sốt vẽ tay — bề mặt phẳng, đường viền hairline dày thay vì đổ bóng, khoảng thở rộng rãi, và một custom display face chunky biến wordmark thành hero. Không có gradient depth, không glassmorphism, không xếp lớp card chồng card; sự phân cách không gian đến từ việc đổi màu (dải vàng → thẻ kem → nút đen) và padding rộng rãi. Interactive elements giữ ở mức tối thiểu và tự tin: hầu hết các bề mặt không có border trên nền vàng canvas, product cards dùng radius 30px và solid black stroke, và CTA thực sự duy nhất là nút pill đen đậm với chữ trắng. Màu xanh (#007aff) chỉ xuất hiện dưới dạng ghost-button border cho các hành động phụ, khiến nó có cảm giác như mượn tạm chứ không phải của riêng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Sunglow | `#ffe845` | `--color-sunglow` | Brand canvas — nền chủ đạo cho tất cả các section, hero, footer, và announcement bar; cũng dùng cho product category tags và sticker burst shapes | | Sauce Bottle Black | `#000000` | `--color-sauce-bottle-black` | Text chính, tất cả border và hairline, product card strokes, mascot linework, và nền của primary action button dạng filled — làm toàn bộ công việc cấu trúc và typography nặng nhọc |

# Mailchimp — Style Reference > Vintage press meets electric yellow — an editorial print house with one neon switch. **Theme:** light Mailchimp's visual language feels like a vintage newspaper printing house that discovered electric color — warm near-black (#231e15) dominates nearly every surface and typographic element, while a single voltage-yellow (#ffe01b) CTA button commands every page. The type system splits between Graphik Web (a geometric sans at tight -0.013em tracking) for all body/UI text and Means Web (a display serif-adjacent face at -0.021em) for headlines — a newspaper/magazine editorial duality that's rare in SaaS. Cards are flatly borderless or carry a soft warm shadow (rgba(35,30,21,0.15)), never the blue-tinted floating shadows common to other platforms. Section backgrounds alternate between #ffffff, #f5f5f5, the warm cream #ebe1cd, and near-black #231e15, creating a banded editorial rhythm. The pill CTA (26px radius, yellow fill, dark stroke, dark text) is the one rounded form in a system that otherwise uses 3px or zero radius everywhere. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Press Black | `#231e15` | `--color-press-black` | Primary text, headings, button borders, backgrounds of dark sections — the near-black with a warm brown undertone that prevents harshness and reads as ink rather than void | | Voltage Yellow | `#ffe01b` | `--color-voltage-yellow` | Primary CTA buttons and nav 'Iniciar gratis' — one saturated hit of color on an otherwise near-monochrome page; impossible to miss without competing for dominance | | Teal Ink | `#004e56` | `--color-teal-ink` | Links, icon fills, image accents — muted teal provides navigational contrast against warm-neutral backgrounds without reading as a generic blue | | Warm Parchment | `#ebe1cd` | `--color-warm-parchment` | Section backgrounds for GDPR and feature callout bands — warm cream that reads as aged newsprint, warmer than gray |

# NGLORA — Style Reference > NGLORA — Formulary của Apothecary. Một không gian được tổ chức tỉ mỉ, nơi typography và ảnh sản phẩm được xử lý với độ chính xác khoa học. **Theme:** light Thiết kế gợi lên một formulary apothecary học thuật, nơi mọi yếu tố đều được trình bày với độ chính xác tỉ mỉ. Nó vận hành trên một bảng màu hạn chế rõ rệt gồm kem ấm và than chì, tạo ra một môi trường tương phản cao, ưu tiên chữ. Bố cục kiến trúc cứng nhắc với góc 0px sắc nét chiếm ưu thế, củng cố cảm giác trật tự và chất lượng lâm sàng. Điểm nhấn của hệ thống là sự căng thẳng typographic giữa serif nhân văn 'Zapf-Humanist' cho headline biểu cảm và sans-serif trung tính 'SuisseIntl' cho toàn bộ văn bản chức năng, mang lại vẻ cổ điển cho giao diện kỹ thuật số hiện đại. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#fffef2` | `--color-parchment` | Nền trang chính, bề mặt sáng. | | Charcoal | `#333333` | `--color-charcoal` | Văn bản chính, icon UI, nút chính, đường viền. | | Ink Black | `#000000` | `--color-ink-black` | Văn bản hero section, yếu tố văn bản có độ nhấn mạnh cao. | | Carbon | `#252525` | `--color-carbon` | Nền footer, bề mặt tối phụ. |

# Doug–Alves — Style Reference > Oversized typographic monolith on warm charcoal **Theme:** mixed Doug Alves' portfolio treats every viewport like a gallery wall: one massive piece of typographic art dominates the dark hero, then the site steps down into compact, editorial information grids. The palette is ruthlessly achromatic — warm espresso black, bone white, and graphite — with no chromatic accent anywhere; all visual energy comes from type scale and contrast. Headlines run to 197px at weight 300 with aggressive negative tracking, while body copy stays at 16-18px, creating a 10:1 size ratio that makes the whole site feel like a single oversized poster surrounded by fine-print specifications. Layout is full-bleed with sections switching between warm-dark and white, and information always arranges into crisp multi-column grids separated by hairline graphite rules. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Espresso | `#1d1610` | `--color-espresso` | Hero and dark section background — warm-tinted near-black reads as architectural, not as raw #000, giving the oversized display type a gallery-wall feel | | Graphite | `#282828` | `--color-graphite` | Primary body text, structural borders, section dividers — the workhorse neutral that draws the hairline rules and most interface lines | | Slate | `#333333` | `--color-slate` | Secondary body and heading text — slightly lighter than Graphite, used for headings and emphasized body copy where Graphite is reserved for borders | | Obsidian | `#000000` | `--color-obsidian` | Display headings on light sections and pure-black accents — used sparingly for maximum impact on the white About and Latest sections |

# Opennote — Style Reference > cuốn sổ da ấm áp trên trang giấy ngập nắng — giao diện mang cảm giác đóng thủ công, không phải gia công máy **Theme:** light Opennote nói bằng giọng của một cuốn sổ tay được yêu thích: giấy kem ấm, serif headlines mang cảm giác sắp chữ thủ công, và CTA màu nâu đen đọc như bìa da chứ không phải nút SaaS. Bảng màu gần như hoàn toàn achromatic — canvas màu ngà, mực than, đường kẻ graphite mảnh — với bốn điểm nhấn màu đậm (nâu đen, mực tím, rừng xanh, đỏ sẫm) được dùng tiết kiệm như ghi chú lề, không bao giờ làm màu nền. Chrome tối giản: border-radius 10px, một tông viền duy nhất, gần như không có shadow. Whitespace dẫn dắt bố cục, được ngắt quãng bằng các hình minh họa nét vẽ tay trôi nổi như những hình vẽ nguệch ngoạc bên lề. Kết quả là một sản phẩm trông như được thiết kế trong một studio với ánh sáng tự nhiên đẹp, chứ không phải một dashboard được tối ưu trong một sprint. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ivory Page | `#fffdf8` | `--color-ivory-page` | Canvas chính, nền trang, bề mặt card. Màu trắng ngà ấm đọc như giấy, không phải màn hình | | Ink Charcoal | `#0a0a0a` | `--color-ink-charcoal` | Text chính, nét icon, body copy. Gần đen nhưng pha chút ấm khi đặt trên canvas màu ngà | | Pressed Black | `#000000` | `--color-pressed-black` | Màu tô illustration, SVG marks, chi tiết mực mảnh. Đen tuyền dành riêng cho lớp đồ họa vẽ tay | | Graphite Rule | `#e5e5e5` | `--color-graphite-rule` | Viền mảnh, divider, đường viền card, khung ảnh. Màu trung tính cấu trúc chủ đạo — mọi đường mảnh trên trang đều được vẽ bằng màu này |

# Super — Style Reference > Sunlit paper desk with one amber marker **Theme:** mixed Super runs on a near-monochrome warm-neutral canvas that borrows the tactile grammar of a notebook — cream paper backgrounds, charcoal ink text, hairline dividers — and punctuates it with a single saturated amber that acts as the page's only chromatic accent. The result reads like a well-typeset document that has been wired to one working button: quiet, considered, and immediately legible about where to click. Typography is custom (Beausite) set tight at display sizes and confident at body sizes, giving the page editorial weight without heaviness. Components are lightweight — soft white cards sitting on cream, no decorative gradients, minimal elevation, ghost nav links, and a bold amber filled button as the sole loud element on most screens. The visual system extends Notion's own canvas palette (#f9f9f8, #37352f) and adds a sunlit warm accent to distinguish the brand from its parent tool. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Amber Pulse | `#ffbe3c` | `--color-amber-pulse` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Cream Paper | `#f9f9f8` | `--color-cream-paper` | Page background and outer canvas. Borrowed from Notion's own workspace palette to position Super as its native publishing layer | | White Card | `#ffffff` | `--color-white-card` | Card and elevated surface that sits on Cream Paper. Provides subtle separation through brightness contrast rather than shadow | | Ink Charcoal | `#262a2e` | `--color-ink-charcoal` | Primary text, dominant foreground color, nav elements, and high-emphasis UI. The workhorse neutral of the entire system |

# Adora — Style Reference > impressionist museum behind frosted glass **Theme:** light Adora wraps a precise product-analytics interface inside an impressionist gallery — white cards and crisp dashboards sit on canvas-like backgrounds of swirling oil-paint color, with hand-drawn squiggle underlines giving headings a notebook-becoming-poster feel. The color story is white-surface discipline broken by a single vivid violet for action and a palette of pastel accents (sky blue, lime, bubblegum pink, hot magenta) that are used as small confetti, not washes. Shapes are confidently rounded: cards and the product frame are very generous (40-64px), badges and the floating nav pill are stadium-rounded, buttons are gently rounded (8-12px). Typography pairs a custom display face (PolySans) at heavy weights for headlines against Plus Jakarta Sans at 400-500 for UI, with universal -0.02em tracking pulling the whole system tight and contemporary. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Violet | `#592eff` | `--color-electric-violet` | Primary action background, filled CTA buttons, active link borders, selected badge strokes — the single saturated chromatic that drives every conversion and active state | | Midnight Plum | `#21164c` | `--color-midnight-plum` | Headline text color, display-weight typography — deep violet-ink that reads as near-black but carries a violet undertone matching the primary | | Obsidian Charcoal | `#353241` | `--color-obsidian-charcoal` | Body text, paragraph copy, list items, icon strokes, default borders and dividers — the workhorse neutral that defines almost all interface line work | | Slate Smoke | `#5f5f69` | `--color-slate-smoke` | Secondary body text, muted helper copy, supporting metadata |

# HoneyBook — Style Reference > creative studio ngập nắng trên nền kem ấm — một marquee vàng tươi mở ra những mảng workspace trắng và những con dấu pill tối màu. **Theme:** light HoneyBook sử dụng ngôn ngữ sunlit-creative-studio: hero vàng tươi bão hòa, text xanh navy đậm ấm áp, và bề mặt sản phẩm trắng. Hệ thống thị giác được xây dựng trên sự căng thẳng giữa giọng display serif (STK Bureau Serif) và một sans geometric đầy tự tin (STK Bureau Sans), với một mặt chữ eyebrow all-caps nhỏ xíu (STK Gerhard) thì thầm 'editorial' phía trên các section header. Các nút là pill tuyệt đối — bo tròn hoàn toàn, màu navy đậm, không đổ bóng — khiến mỗi hành động như một con dấu vật lý đóng lên trang giấy. Các bề mặt vẫn yên tĩnh và trắng bên dưới fold; màu vàng xuất hiện như một khối màu có chủ đích cho các khoảnh khắc hero/marquee thay vì trang trí rải rác, tạo ra nhịp điệu entry-and-rest dễ nhận biết trên các trang dài. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Honey Yellow | `#fffa77` | `--color-honey-yellow` | Yellow wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. | | Marigold | `#fffa56` | `--color-marigold` | Accent fills trên card, headline underline strokes, icon highlights, secondary callouts — phiên bản hơi mạnh hơn của Honey Yellow cho những khoảnh khắc cần nổi bật trên nền trắng | | Inkwell | `#142127` | `--color-inkwell` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính | | Carbon | `#131416` | `--color-carbon` | Body text và high-contrast borders trên light surfaces, alt dark fill cho emphasis blocks |

# Tech Barcelona — Style Reference > Editorial tech manifesto trên nền marble trắng **Theme:** mixed Tech Barcelona vận hành bằng ngôn ngữ typography-first: một font neo-grotesque độc quyền (FavoritPro) với weight 400 cực nhẹ chi phối toàn bộ giao diện, để scale và khoảng trắng đảm nhận vai trò cấu trúc thay vì độ tương phản weight. Canvas chủ yếu là trắng và tĩnh lặng, với một màu cobalt xanh lam đậm (#0075ff) duy nhất dành riêng cho hành động — nó xuất hiện một lần dưới dạng button filled trong nav và không trang trí ở nơi nào khác. Màu gần đen #090707 dùng cho headline và nội dung hình ảnh, tạo độ tương phản mạnh với bề mặt trắng. Hero band đảo ngược mối quan hệ này: canvas đen, type trắng, logo hình học cỡ lớn. Các component phẳng và tối giản — hairline borders, không shadow, không gradient — để nhiếp ảnh và type tỷ lệ lớn gánh vác trọng lượng thị giác. Nhịp điệu tổng thể mang phong cách editorial: khoảng trắng dọc rộng rãi, display size cỡ lớn lên đến 80px, letter-spacing chặt kéo các headline lớn thành những khối đậm đặc, tự tin. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, điểm nhấn màu duy nhất trong toàn bộ giao diện — một xanh lam rực rỡ trên nền trung tính đơn sắc, dùng có chừng mực để báo hiệu hành động mà không cạnh tranh với nội dung | | Ink Black | `#090707` | `--color-ink-black` | Màu headline, border ảnh, display text cỡ lớn — gần đen với chút ấm nhẹ, chọn thay vì đen thuần để tạo cảm giác in ấn thay vì kỹ thuật số | | Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — màu trung tính làm việc cho interface chrome và đoạn văn bản dễ đọc | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, text trên hero tối và nền logo tối — thiết lập nền light-mode và tất cả bề mặt nội dung |

# Raw Materials — Style Reference > brutalist editorial trên nền kem ấm **Theme:** light Raw Materials vận hành như một hệ thống typographic maximalist: một canvas kem ấm mang display type thường xuyên vượt quá 200px, với mọi phần tử bề mặt chính đều có màu sắc riêng biệt. Hệ thống từ bỏ một màu thương hiệu duy nhất để chọn bảy màu đánh dấu section (cam, tím, mực, xanh coban, đỏ thẫm, vàng, xanh lá) — những màu này gắn nhãn cho cả navigation lẫn content blocks, tạo nhịp điệu giống tạp chí zine, nơi màu sắc cho bạn biết mình đang ở chapter nào. Các bề mặt phẳng và bo tròn 16px — không shadow, không gradient, không elevation. Typography đảm nhận toàn bộ công việc phân cấp, nhảy từ caption 12px lên display headline 259px với bốn custom typefaces, tất cả đều dùng stylistic alternate "ss02". ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ember Orange | `#ff3d00` | `--color-ember-orange` | Accent màu cam hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Pulse Violet | `#5900cc` | `--color-pulse-violet` | Accent màu tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Cobalt Blue | `#2835f8` | `--color-cobalt-blue` | Accent màu xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Crimson | `#ff003d` | `--color-crimson` | Accent màu đỏ hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |

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

# Bōjka Studio — Style Reference > fluorescent gallery wall **Theme:** light Bōjka Studio operates on radical typographic confidence: a single custom display face blown up to poster dimensions, paired with a near-total absence of color until a saturated electric green detonates across the hero. The page reads as a printed art-poster dragged into a browser — oversized black wordmark, generous whitespace, a single chromatic explosion, then calm white again. Surfaces stay flat and unshadowed; weight comes from scale and contrast, never from elevation or gradients. Components are reduced to their typographic essence — nav is bare text on a white strip, cards are giant rounded rectangles, and decorative geometry is implied by oversized radii (68px) rather than by borders or shadows. An orange (#ff4600) accent threads through headings and rule lines as a warm counterpoint to the cold green, never enough to compete — it just keeps the eye moving. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all hairline borders, nav text, link underlines — the dominant ink. At 21:1 against white it carries the entire typographic system on its own | | Graphite | `#282828` | `--color-graphite` | Secondary text, image and card borders, soft structural strokes — slightly lifted from pure black to create a quieter border weight without losing contrast | | Bone | `#ffffff` | `--color-bone` | Page canvas, card surfaces, image backgrounds — the neutral ground that lets the green and oversized type do all the visual work | | Fluorescent | `#0af500` | `--color-fluorescent` | Full-bleed hero/feature band background, section color blocks — a near-lime pure green used sparingly as a single saturated field. Its only job is to shock the eye and establish the studio's visual voice; it should never appear on UI controls, text, or thin UI strokes |

# Handhold — Style Reference > giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu. **Theme:** light Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng | | Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng | | Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao | | Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |

# Dennis Snellenberg — Style Reference > Canvas editorial tối với headline khổng lồ, trầm lặng **Theme:** dark Ngôn ngữ portfolio editorial tối được xây dựng trên nền gần như đen, nơi màu sắc duy nhất có giá trị là một tông violet rực rỡ duy nhất. Toàn bộ giao diện thu gọn về hai tông — `#1c1d20` cho thế giới, `#ffffff` cho mọi chữ viết — với một custom sans-serif ở weight medium cố định làm tất cả công việc kể chuyện. Typography là nhân vật chính: một display name 216px tràn ra ngoài mép trang, trong khi body copy 12–15px nổi bên cạnh ảnh full-bleed. Violet xuất hiện như dấu câu hiếm hoi trên card và link fills, không bao giờ là trang trí. Các component phẳng, không viền, và lớn — rounded pills thay thế button, và một vòng trắng inset 1px duy nhất là toàn bộ ngôn ngữ shadow trong hệ thống. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Nền trang, bề mặt card, text trên nền sáng, viền mảnh — màu gần đen chiếm 95% giao diện | | Bone White | `#ffffff` | `--color-bone-white` | Text chính, bề mặt card đảo ngược, link text trên violet, viền inset nhẹ — tông sáng duy nhất trong hệ thống | | Fog | `#999d9e` | `--color-fog` | Text phụ mờ, chú thích, metadata — nằm giữa canvas và trắng trong thang neutral | | Graphite | `#494a4d` | `--color-graphite` | Lớp bề mặt nâng cao hơn canvas, nền card mềm, hiệu ứng hover của link — thêm nửa bậc chiều sâu mà không phá vỡ cảm giác đơn sắc |

# WalletConnect — Style Reference > Những khối cobalt trên nền giấy da — các monolith xanh lam bão hòa nổi trên sa mạc trắng ấm, với các góc bo tròn làm mềm vẻ kỹ thuật nghiêm túc. **Theme:** light WalletConnect Pay là một thương hiệu thanh toán crypto xanh điện nằm gọn trong một canvas sạch, sáng: bề mặt off-white ấm áp, typography indigo-đen, và các card bo tròn cỡ lớn mang cảm giác consumer fintech hơn là công cụ hạ tầng. Điểm nhấn đặc trưng là một hero panel cobalt rực rỡ (radius 40px) đặt trên nền gần trắng, neo giữ một layout xen kẽ giữa ảnh sản phẩm full-bleed và khoảng trắng rộng rãi. Typography sử dụng KHTeka, một geometric humanist mang giọng điệu kỹ thuật nhưng thân thiện ở các weight 400–700, với màu navy đậm #1b2045 thay thế cho đen thuần để tạo cảm giác đọc ấm hơn. Các component tối giản một cách tự tin — pill-shaped buttons, ghost CTA, hairline borders, và hầu như không có shadow, để màu xanh bão hòa làm tất cả công việc tạo cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Cobalt | `#006cff` | `--color-electric-cobalt` | Hero panels, filled buttons, active nav indicators, link accents — tín hiệu thương hiệu chính, được dùng như một bề mặt full-bleed thay vì màu nút nhỏ để chiếm ưu thế trên trang | | Indigo Action | `#4672ff` | `--color-indigo-action` | Primary filled action buttons và border của chúng — một màu xanh hơi sáng hơn, thiên về tím dành cho các bề mặt tương tác cần cảm giác được nhấn và có thể click | | Deep Indigo | `#1b2045` | `--color-deep-indigo` | Primary text, headings, và dark button borders — thay thế đen thuần bằng một navy ấm mang vẻ uy quyền mà không gay gắt như #000 | | Sky Tint | `#66a7ff` | `--color-sky-tint` | Hover states, subtle outlined button borders, secondary navigation accents — một companion desaturated của Electric Cobalt cho các khoảnh khắc xanh không chiếm ưu thế |

# Amie — Style Reference > Sunlit productivity dashboard — một workspace nơi mọi thứ đều trắng, phẳng và có chủ đích, với một công tắc xanh điện duy nhất để kích hoạt mọi thứ. **Theme:** light Amie mang cảm giác như một productivity workspace tràn ngập ánh sáng — bề mặt trắng sáng, gần như mang tính lâm sàng trong sự tiết chế, được điểm xuyết bằng một màu xanh da trời điện (#11a8ff) chỉ xuất hiện khi cần hành động. Trang web gần như hoàn toàn trung tính — 98% achromatic — khiến mọi khoảnh khắc có màu sắc (điểm nhấn amber trên 'without a bot', icon lịch xanh lá, tag tím) đều có chủ đích thay vì chỉ để trang trí. Inter với letter-spacing âm dày (-0.025em ở kích thước display) nén các headline thành những khối tự tin mà không cần đến weight cực đoan — weight 700 ở 56px đọc rất dứt khoát nhưng không hung hăng. Cards sử dụng border 1px siêu mảnh qua các lớp shadow gần như vô hình thay vì stroke nhìn thấy được, tạo cho các product UI previews cảm giác như đang nổi nhẹ trên trang. Nút ghost 'Request a demo' bên cạnh CTA đã tô màu tạo ra một cấu trúc lựa chọn theo cặp xuất hiện xuyên suốt trang. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, button fills cho các hành động phụ | | Fog Surface | `#fafafa` | `--color-fog-surface` | Nền card thay thế, phân biệt section nhẹ | | Ash Border | `#cdcdcd` | `--color-ash-border` | Tất cả border UI — input, card, divider, icon rings — ở dạng 1px solid | | Stone Divider | `#ebebeb` | `--color-stone-divider` | Nền tag (pill highlight 'Within 47 seconds:'), dải nền section |

# CHRISTOPHER IRELAND CREATIVE — Style Reference > bone-white gallery wall, editorial monograph in morning light **Theme:** light Portfolio của một nhiếp ảnh gia được dàn dựng như một editorial spread tĩnh lặng: nền bone canvas ấm áp, một cặp typeface duy nhất (serif đương đại cho display, geometric sans cho utility), và không hề có điểm nhấn màu sắc. Hệ thống thị giác hoàn toàn nhường chỗ cho nhiếp ảnh — chữ chỉ là giàn giáo mỏng manh gồm các nhãn danh mục và vài headline serif cỡ lớn, hoạt động như pull-quotes trên tạp chí. Cảm giác gần với một monograph in ấn hơn là một website: những khối khoảng trống lớn, bố cục split layout bất đối xứng (text trái, ảnh phải), và weight 400 ở mọi nơi — serif không bao giờ đậm lên, sans không bao giờ co lại, vì vậy hệ thống phân cấp đến từ kích thước và tracking thay vì độ nhấn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Bone | `#f2f1ec` | `--color-bone` | Canvas trang, bề mặt card — màu off-white ấm áp đọc như giấy, không phải màn hình; mang lại chất liệu xúc giác, in ấn cho trang | | Ink | `#000000` | `--color-ink` | Text chính, border, divider, dấu cộng, section rules — màu đen tuyền trên nền bone tạo độ tương phản cao nhất có thể cho cảm giác editorial posterized | | Graphite | `#333332` | `--color-graphite` | Text headline — gần như đen nhưng có thêm một phần tư bước ấm áp; giúp các heading serif có cảm giác được đặt (set) chứ không phải đóng dấu (stamped) | | Ash | `#5d5b5b` | `--color-ash` | Body text phụ, caption, sub-label — bước muted duy nhất trong một bảng màu nhị phân |

# Electronic Materials Office® — Style Reference > Incandescent ember in a charcoal gallery **Theme:** dark Electronic Materials Office is a nocturnal atelier: matte charcoal canvas, a single incandescent orange ember, and type that whispers rather than declares. The interface treats every screen like a darkened studio — the keyboard product photographs are the only true light source, and the UI surrenders to them. Headlines at weight 200 in GT-Flexa float in vast negative space; body text is deliberately small and humanist (Times). Color is rationed: pure white for type, a desaturated violet (#9e9eff) for links, and one orange (#f45500) CTA per page that glows with its own 30px bloom. Components stay flush to the 20px radius, borders whisper at #9d9d9d, and the only shadows in the system are those two colored halos around the primary action. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Studio Charcoal | `#202020` | `--color-studio-charcoal` | Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own | | Ash Gray | `#9d9d9d` | `--color-ash-gray` | Muted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud | | Mid Felt | `#eaeaea` | `--color-mid-felt` | Light surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas |

# Vana — Style Reference > Bản đồ chòm sao kỹ thuật số trên nền canvas nửa đêm — giao diện giao thức tối nơi ánh xanh điện truy vết địa hình dữ liệu do người dùng sở hữu trên một trường sao các ký tự ASCII. **Theme:** dark Vana vận hành như một canvas tối, nơi dữ liệu thuộc về người dùng: các bề mặt gần đen làm nền cho một màu xanh điện rực rỡ, hoạt động không chỉ như trang trí mà còn như tín hiệu. Bản đồ thế giới ASCII-art ở hero không phải là đồ họa mà là một kết cấu dữ liệu — mật độ ký tự tạo thành các lục địa, gợi ý rằng giao thức đang truy vết dữ liệu cá nhân trên toàn cầu. Typography mang phong cách hình học và tiết chế (Cofo Sans) với một biến thể pixel dành cho các nhãn metadata kỹ thuật, tạo ra sự căng thẳng giữa văn xuôi dễ đọc và ký hiệu máy móc chính xác. Các button có góc vuông (2px radius) và tối giản, để màu xanh đảm nhận ngôn ngữ hành động. Bảng màu được cố tình thu hẹp: một màu xanh thương hiệu, hai tông tím, và một chồng các bề mặt gần đen, với xanh lá và hồng chỉ xuất hiện như những dấu câu màu sắc hiếm hoi trên các control có viền và marker trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Indigo | `#0000ff` | `--color-electric-indigo` | Nền CTA chính, text thương hiệu, pattern ASCII trang trí — màu tín hiệu làm cho các hành động trở nên nổi bật trên nền canvas tối | | Cobalt Pulse | `#4141fc` | `--color-cobalt-pulse` | Viền button, điểm nhấn phụ — sáng hơn Electric Indigo một chút, dùng cho outlined controls và hover states | | Periwinkle Veil | `#8b8bfe` | `--color-periwinkle-veil` | Viền action dạng outline, điểm nhấn tím nhạt — viền ghost button và các nét trang trí nhẹ | | Lime Beacon | `#7fd579` | `--color-lime-beacon` | Dấu câu màu sắc hiếm — con trỏ, biến thể outlined button, chỉ thị vị trí trên bản đồ dữ liệu |

# Forner — Style Reference > Warm earthen atelier — hãy tưởng tượng một xưởng gốm vào giờ vàng, nơi mọi bề mặt đều là đất sét, xương, hoặc cà phê rang, và thứ chrome duy nhất là mảnh giấy ghi chú viết tay của người thợ gốm cài trên tường. **Theme:** light Forner hoạt động như một design atelier ngập nắng: bảng màu gần như hoàn toàn là tông đất ấm, một custom grotesque duy nhất đảm nhận 95% giọng điệu, và typography siêu lớn đến mức từ bỏ hệ thống phân cấp để tạo bầu không khí. Canvas là một tông kem khô; mực là một tông nâu rang đậm; mọi điểm nhấn đều nằm trong cùng một dải màu từ nâu đến xương. Không có màu thương hiệu chromatic — chính độ ấm là thương hiệu. Bề mặt phẳng với hairline borders, góc vuông sắc nét ở 4px, và khoảng thở rộng rãi (100px+ giữa các section). Custom serif italics xuất hiện tiết kiệm như những chú thích viết tay đặt cạnh nhịp điệu cơ học của grotesque. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, xương sống cấu trúc của mọi giao diện — nâu ấm đậm đóng vai trò như mực trên nền kem, màu foreground chủ đạo trên toàn bộ hệ thống | | Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Nền trang, trường kem ấm mà mọi bề mặt đặt trên đó | | Linen Surface | `#ecece4` | `--color-linen-surface` | Bề mặt card, panel nâng cao, content blocks — cách canvas một bước, hơi lạnh và xám hơn để lùi về phía sau | | Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — neutral có cảm giác chromatic nhẹ nhất, dùng khi Roast Ink có vẻ quá nặng |