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

# GUSTAVO Faria © — Style Reference > Editorial monograph on white paper **Theme:** light Gustavo Faria's portfolio operates as a printed monograph on white paper: an editorial spread where one massive serif date range dominates the right column while a compact bio and portrait anchor the left. The system is almost aggressively monochrome — four grays/black on white, no decorative color, no shadows, no rounded corners. Typography does all the heavy lifting: a custom display serif at 125-142px creates scale contrast against 16px system body text, and negative letter-spacing tightens the display letters into a single confident statement. Content is organized as a work selection table — project name, category, year — separated by hairline rules. The atmosphere is that of an art director's contact sheet: restrained, intentional, every element earning its space. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces — the foundational surface on which all content sits | | Charcoal | `#282828` | `--color-charcoal` | Primary text, hairline borders, structural rules — softer than pure black, reduces glare for long reading | | Ink Black | `#000000` | `--color-ink-black` | Display text fill, link borders, maximum contrast elements | | Ash Gray | `#dcdcdc` | `--color-ash-gray` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |

# Compound — Style Reference > Ink-on-paper wealth journal — một hệ thống editorial nhẹ nhàng, nơi một font chữ duy nhất ở một weight duy nhất làm tất cả, và màu sắc duy nhất là dải ribbon màu kem ở đầu trang. **Theme:** light Compound vận hành trên sự im lặng gần như tuyệt đối về màu sắc: một typeface (Monument Grotesk) ở một weight duy nhất là 400, bảng màu hoàn toàn achromatic, và đổ bóng mờ đến mức chỉ còn là bầu không khí chứ không phải chiều sâu. Các bề mặt gần như vô hình — canvas trắng, viền mảnh #e5e7eb, và card bo tròn 20px — nên hệ thống phân cấp được truyền tải hoàn toàn bằng sự chênh lệch kích thước mạnh mẽ (body 14px nhảy lên display 60–72px) và khoảng trắng rộng rãi. Ghi chú màu sắc duy nhất trong hệ thống là thanh thông báo màu kem ấm (#ffe9bf) nằm sát mép trên cùng. Các yếu tố tương tác được cố tình làm yên tĩnh: một nút pill gần như đen duy nhất và các link text có gạch chân mờ, trông giống như chữ được sắp chữ hơn là UI chrome. Card xem trước sản phẩm — với đổ bóng bốn lớp tinh tế và border-radius 20px — là khoảnh khắc duy nhất có độ dày thị giác trong bố cục, thứ duy nhất mắt có thể nắm bắt như một vật thể. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#171717` | `--color-ink` | Text chính, nút pill đặc, điểm nhấn navigation, logo wordmark — mỏ neo tối duy nhất trong hệ thống trắng | | Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, nền xem trước sản phẩm — nền mặc định cho mọi nội dung | | Graphite Hairline | `#e5e7eb` | `--color-graphite-hairline` | Mọi đường viền cấu trúc, divider, cạnh card, viền input — màu được dùng nhiều nhất trong hệ thống, định nghĩa mọi container | | Vellum | `#f3f3f3` | `--color-vellum` | Lấp đầy bề mặt phụ, hiệu ứng hover nhẹ, nền panel cấp ba — xám nhạt nhất vẫn phân biệt được với trắng |

# Shares — Style Reference > Terminal ngà với nhịp tím — một không gian làm việc trắng lâm sàng, nơi một màu duy nhất đánh dấu mọi hành động có chủ đích. **Theme:** light Một giao diện fintech đơn sắc trên nền gần trắng, nơi một màu tím rực rỡ làm tất cả cuộc trò chuyện. Ngôn ngữ thị giác thưa thớt và tự tin: không gradient trang trí, không trang trí màu sắc, không hiệu ứng bóng đổ. Mọi thứ nằm trên nền phẳng porcelain với chữ than đen đậm, và màu sắc duy nhất đáng được chú ý là Signal Violet (#594ff4), được dành riêng cho hành động — nút đã điền, link đang hoạt động, brand marks. Các component dựa vào hình học thay vì chiều sâu: pill controls (99px radius), card bo góc rộng rãi (36px), và divider xám 1px mềm thay vì elevation. Typography mang tính hình học và tracking chặt chẽ, với headline lớn ở line-height nén (1.05–1.15) mang cảm giác kiến trúc hơn là editorial. Product mockup nổi trong các bố cục xếp lớp, hơi chồng lên nhau — phone + dashboard + code panel — được neo bởi một màu thương hiệu duy nhất. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Violet | `#594ff4` | `--color-signal-violet` | Primary action fill, active links, brand iconography — màu sắc duy nhất trong hệ thống, tạo độ tương phản cao và cảm giác cấp bách trên nền đơn sắc | | Inkstone | `#1f1f1f` | `--color-inkstone` | Primary headings, body text emphasis, dark surface fills — màu trung tính tối chủ đạo | | Graphite | `#333333` | `--color-graphite` | Secondary text, dense borders, icon strokes — màu trung tính được dùng nhiều nhất | | Slate | `#5d5d5d` | `--color-slate` | Muted body text, navigation subtext, secondary borders |

# Sandclock — Style Reference > Terminal lệnh DeFi lúc nửa đêm — đèn tín hiệu xanh mint trên bảng điều khiển đen mờ **Theme:** dark Sandclock là một terminal yield DeFi khoác lên mình màu đen mờ: chrome gần như bằng không, một màu tín hiệu xanh mint rực rỡ, và typography đảm nhận mọi công việc. Giao diện mang phong cách Bloomberg terminal được tái hiện cho DeFi — canvas tối (#0a0a0a), viền graphite mảnh (#222222), bề mặt phẳng không có độ nâng trang trí, và Inter cho text tiện ích kết hợp với custom Aeonik display face cho headline 72px hiếm hoi. Màu xanh (#3fe280) chỉ xuất hiện như dấu câu chức năng: gạch chân nav active, primary CTA, và viền accent trên các thẻ số liệu trực tiếp. Mọi bề mặt khác đều giữ achromatic để màu xanh đọc như tín hiệu trực tiếp, không phải trang trí. Các component có cảm giác như một trading dashboard — gọn gàng, nhiều thông tin số, nhưng thoáng đãng nhờ khoảng cách section rộng. Không gradient, không drop shadow ngoại trừ một hiệu ứng nâng nhẹ duy nhất trên button, không có chrome minh họa màu sắc. Sự tin tưởng được truyền tải qua sự kiềm chế: thiết kế nói 'tiền của bạn ở đây' bằng cách giữ im lặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyss | `#0a0a0a` | `--color-abyss` | Canvas trang và nền chính — toàn bộ site sống trên bề mặt gần như đen này để accent mint đọc như tín hiệu trực tiếp giữa bóng tối thuần khiết | | Carbon | `#171717` | `--color-carbon` | Bề mặt card và panel được nâng lên — dùng cho stat cards, security badges, và announcement containers cần tách khỏi canvas mà không đưa thêm màu sắc | | Graphite | `#222222` | `--color-graphite` | Viền mảnh, divider, và màu cấu trúc xuất hiện nhiều nhất trong hệ thống. Mang 356 borderColor uses — nó là khung dây (wireframe) định nghĩa mọi container | | Ash | `#9b9b9b` | `--color-ash` | Secondary text mờ, helper labels, và nav items được giảm chú ý. Màu text không phải trắng duy nhất — dành #ffffff cho nội dung cần được đọc trước |

# Vucko — Style Reference > Type cỡ lớn trên nền gallery trắng — một cuốn sách mẫu chữ (type-specimen book) nơi wordmark chính là căn phòng. **Theme:** light Vucko hoạt động như một editorial canvas đơn sắc, nơi type chính là kiến trúc. Bề mặt trắng tinh gặp mực đen tuyền, với một sắc xám nhạt duy nhất dành cho secondary text và ghost-list items trong service lists. Custom typeface Suisse ở kích thước display — lên đến 211px — tạo ra sự hiện diện hoành tráng, gần như kiến trúc, nơi wordmark một mình có thể lấp đầy viewport. Màu sắc (chromatic color) hoàn toàn vắng mặt trong bản thân hệ thống, chỉ xuất hiện bên trong nội dung showcase dự án (gradient rực rỡ, thẻ vàng) — những điểm nhấn xuyên suốt trang vốn tối giản khác. Giao diện cực kỳ mảnh: border 1px mảnh như sợi tóc, không shadow, khoảng cách section rộng rãi 58px, và các nav element hình pill. Mọi màn hình nên đọc như một trang trong sách nghệ thuật cao cấp — kiềm chế, tự tin, và chống trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#000000` | `--color-ink` | Primary text, tất cả border, khối nền tối, và hero wordmark — xương sống cấu trúc của mọi màn hình | | Paper | `#ffffff` | `--color-paper` | Border dạng hairline, divider, input outline, và cạnh card trên nền sáng. Không dùng làm màu CTA chính | | Faint Ash | `#eeeeee` | `--color-faint-ash` | Màu nền nhẹ cho secondary cards hoặc khối nội dung giảm nhấn, hầu như không phân biệt được với Paper | | Steel | `#888a8b` | `--color-steel` | Secondary text mờ và ghost-list items trong service lists — màu chữ duy nhất không phải đen, dùng để tạo phân cấp tông màu (tonal hierarchy) mà không cần thêm sắc độ |

# Spotify — Style Reference > Cửa hàng đĩa tối om lúc nửa đêm — mọi bề mặt lùi dần để ảnh bìa album có thể phát sáng. **Theme:** dark Spotify hoạt động như một rạp chiếu phim tối dành cho âm nhạc: nền gần như đen tuyền để ảnh bìa album và ảnh nghệ sĩ cung cấp toàn bộ màu sắc, trong khi phần chrome gần như đơn sắc để giữ sự tập trung vào nội dung. Giao diện gọn nhẹ, giàu thông tin, được xây dựng xung quanh các hàng ngang cuộn (horizontal scrolling rails) gồm thẻ album vuông và chân dung nghệ sĩ hình tròn. Một màu xanh lá đặc trưng (#1ed760) tạo điểm nhấn cho các hành động chính, trạng thái phát và nhận diện thương hiệu, trong khi gradient tím-xanh chỉ xuất hiện trong banner quảng cáo Premium. Nút bấm có dạng pill (9999px), thẻ có border-radius 6px khiêm tốn cùng drop shadow rộng, và typography là sans-serif hình học chặt chẽ, nói ở âm lượng trò chuyện — không bao giờ la hét, luôn luôn hữu dụng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void Black | `#000000` | `--color-void-black` | Canvas chính, nền trang — lớp sâu nhất trong ngăn xếp bề mặt tối | | Obsidian | `#121212` | `--color-obsidian` | Bề mặt thẻ, panel nổi, nền modal — một bước lên từ canvas | | Graphite | `#1f1f1f` | `--color-graphite` | Control nâng cao, bề mặt hover, nền nút filled — tầng bề mặt tương tác | | Ash Gray | `#333333` | `--color-ash-gray` | Viền input, đường phân cách nhẹ, đường viền control không hoạt động |

# Micro — Style Reference > bình minh trên đồng cỏ số — một gradient chân trời êm dịu bên dưới là không gian làm việc tĩnh lặng, mang phong cách mực trên giấy. **Theme:** light Micro là một workspace năng suất mang cảm giác bình minh: bầu trời gradient từ xanh lam đến xanh ngọc mở đầu trang, sau đó chuyển xuống một neutral canvas ấm áp với màu nền trắng ngà và màu chữ gần như đen mực. Điểm nhấn typography đặc trưng là sự kết hợp giữa một display face editorial dày (perfectlyNineties) cho headline cỡ lớn với một font chữ neutral đa năng (haffer) cho product UI dày đặc — mang lại cho trang marketing sức nặng của trang bìa tạp chí và cho màn hình sản phẩm một mật độ dễ đọc, êm dịu. Màu sắc được dùng như dấu câu chức năng: một màu xanh lam azure (#518bdb) cho hành động, cùng một hệ thống accent pastel (mint, peach, lavender, teal-mist) cho các mảng nền mềm mại và một bảng màu icon đa sắc nhỏ (teal, hồng, đỏ, cam, xanh lá) báo hiệu kết nối và danh mục. Các component ưu tiên phẳng, có viền và đổ bóng nhẹ thay vì nâng cao mạnh; bán kính bo tròn tập trung ở 8px và 14px, với 18px cho các product card lớn hơn. Cảm giác tổng thể là một sản phẩm phần mềm được "thở" — thoáng đãng, thân thiện, hơi hoài niệm ở display type, nhưng chính xác trên các bề mặt sản phẩm giàu dữ liệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#221f1c` | `--color-ink-black` | Văn bản chính, nền CTA tối, icon fill tối — màu gần đen ấm thay vì đen trung tính giúp palette không bị cảm giác lâm sàng | | Paper White | `#f5f5f5` | `--color-paper-white` | Canvas trang, nền card, mảng nền mờ — màu trắng ngà ấm tạo nền tảng như giấy cho sản phẩm | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt product card nâng cao bên trong app UI (inbox, context graph nodes) — cao hơn Paper White một bậc | | Stone Gray | `#797267` | `--color-stone-gray` | Văn bản phụ, icon strokes, body copy mờ — màu xám ấm cùng họ với Ink Black |

# Neon — Style Reference > Server Room After Dark. A deep black environment where data and interactions are the only sources of light. **Theme:** dark The design feels like a high-end server room after dark — a pure black void where information glows. A strict monochrome palette of pure black (#000000) and white (#ffffff) creates maximum contrast, ensuring text and UI are starkly legible. All visual energy comes from a single, electric green (#34d59a) that mimics terminal output and data visualizations, used exclusively for accents and decorative, code-like background graphics. The system achieves depth not with shadows but with subtle, layered near-black surfaces. A unique tension exists between the pill-shaped buttons and the sharp, 4px corners of all other UI containers. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Neon Glow | `#34d59a` | `--color-neon-glow` | Key brand accent, active state indicators, data visualizations — injects a vibrant, code-like energy. | | Neon Muted | `#285d49` | `--color-neon-muted` | Subtle background tones in visualizations, less prominent brand elements. | | Scanline Fade | `linear-gradient(90deg, rgba(57, 165, 125, 0.6) 50%, rgba(0, 0, 0, 0) 50%)` | `--color-scanline-fade` | Special effect for highlighting code or UI elements, mimicking a terminal scanline. | | System Warning | `#ff3621` | `--color-system-warning` | Used sparingly for icons or highlights requiring urgent attention. |

# Sprig — Style Reference > sổ tay nghiên cứu editorial trên giấy ấm — yên tĩnh, gần như không mực, với ánh sáng ấm hắt vào từ rìa **Theme:** light Sprig hoạt động trong một không gian editorial gần như đơn sắc: nền canvas bone-white ấm áp, đường viền siêu mảnh, và một tông mực duy nhất tối đến mức đọc như đen nhưng mang một chút xanh navy thoảng qua. Hệ thống mang phong cách như một cuốn sổ tay nghiên cứu — yên tĩnh, tự tin, và cố tình không trang trí — được ngắt quãng bởi các gradient hoàng hôn ấm áp đóng vai trò như điểm đánh dấu section chứ không phải trang trí. Typography là cuộc đối thoại giữa hai bộ chữ custom: ABC Diatype cho các khoảnh khắc editorial (heading, display) và TT Commons Pro cho UI chức năng (nav, button, label). Các component có dạng pill và được spacing rộng rãi; card có thể gần như hình tròn (100px radius) cho các khoảnh khắc feature, tạo sự tương phản thị giác giữa cực mềm và cực có cấu trúc. Màu sắc được phân bổ có chủ đích: màu sắc duy nhất trong giao diện là tông mực gần như đen, và gradient chỉ dành riêng cho hero và event imagery — không bao giờ trên button, không bao giờ trên control. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Abyssal Ink | `#0b2330` | `--color-abyssal-ink` | Primary text, nav links, borders, icon strokes — màu gần như đen với một chút navy, là workhorse của hệ thống. Mang mọi bề mặt đọc trong hệ thống | | Bone | `#faf9f8` | `--color-bone` | Page canvas, card surfaces, button text trên nền tối — màu off-white ấm, không bao giờ là #fff thuần | | Obsidian | `#141312` | `--color-obsidian` | Headings, display text, strong UI fills — ấm hơn Abyssal một chút, dùng khi heading cần thêm chút ấm | | Espresso | `#272420` | `--color-espresso` | Filled button background (primary action), dark surface sections — màu CTA chính, gần như đen pha ấm |

# Lattice — Style Reference > Botanical field journal trên nền giấy ấm — một canvas kem nhẹ nhàng, nơi mực rừng tối làm nhiệm vụ kể chuyện và các thẻ mẫu vật pastel mang đến màu sắc. **Theme:** light Lattice mang phong cách một cuốn nhật ký thực địa thực vật học được thể hiện dưới dạng sản phẩm: canvas giấy ấm (#f7f6f2) làm nền cho toàn bộ site, với một màu mực rừng gần như đen (#001f1f) đảm nhận vai trò chính — vừa là text chính vừa là bề mặt action chính. Điểm đặc trưng là hệ thống các thẻ tính năng pastel — mint, lime, lavender, buttercream — mỗi thẻ mã hóa màu cho một module sản phẩm như một khay mẫu vật, kết hợp với các nút filled và outlined tối cùng màu xanh rừng. Typography là một geometric sans duy nhất (Matter) ở kích thước gọn nhẹ, với tracking dày trên display copy cỡ lớn và tracking rộng trên các label uppercase nhỏ. Mọi thứ đều nằm trên các góc bo tròn rộng rãi (14–29px), shadow mềm 1px pha màu, và không có chi tiết trang trí thừa — màu sắc xuất hiện như dấu câu chức năng, không phải vật trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Parchment | `#f7f6f2` | `--color-parchment` | Nền trang — canvas trắng ngà ấm áp mang lại cảm giác như giấy, không lâm sàng. Không bao giờ dùng màu trắng tinh khiết cho nền body | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, product UI mockups, và container media nhúng — màu trắng tinh khiết nổi lên trên nền parchment để tạo độ cao tinh tế mà không cần shadow | | Forest Ink | `#001f1f` | `--color-forest-ink` | Trạng thái form trung tính, text badge, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp nó thành màu CTA chính | | Lichen Gray | `#5c7070` | `--color-lichen-gray` | Text phụ và border có độ nhấn trung bình. Nằm giữa Forest Ink và các màu xám nhạt hơn — dùng cho mô tả body, supporting copy, và divider tinh tế |

# Tatem — Style Reference > trung tâm chỉ huy chạng vạng tĩnh lặng — một không gian làm việc tối tăm, êm đềm, tràn ngập một gradient xanh dương nhạt pha than chì duy nhất, với một tia nắng ấm áp là điểm nhấn màu sắc duy nhất. **Theme:** dark Tatem vận hành trong một bảng màu chạng vạng tối tăm, êm đềm, nơi gần như toàn bộ giao diện được thể hiện bằng các bề mặt xám trung tính và gần như đen, tạo ra một môi trường tập trung, tĩnh lặng cho một ứng dụng email. Phần hero phá vỡ sự đơn sắc với một gradient xám-xanh dương nhạt duy nhất chuyển dần sang đen, đóng khung một headline căn trái cỡ lớn và một bản xem trước ứng dụng được xoay nhẹ. Typography chỉ dùng duy nhất Inter weight 400, dựa vào kích thước và letter-spacing để tạo hệ thống phân cấp thay vì tương phản weight. Các component vẫn phẳng và tối giản: ghost button với viền mảnh, card bo góc 6px, chip phím tắt, và các hàng trong inbox dùng khoảng cách và đường kẻ xám tinh tế thay vì viền hay đổ bóng. Dấu ấn thị giác là sự kiềm chế — một icon tia nắng ấm áp là điểm nhấn màu sắc duy nhất, phần còn lại của hệ thống giao tiếp qua không gian âm, gradient trung tính và màu chữ thì thầm nhẹ nhàng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Chữ chính, logo mark, viền ghost button trên nền tối — màu có độ tương phản cao nhất, dùng có chọn lọc cho headline và label đang hoạt động | | Ash Gray | `#c2c2c2` | `--color-ash-gray` | Heading phụ, chữ nhấn mạnh trên bề mặt tối | | Mist | `#b5b5b5` | `--color-mist` | Body text nhẹ nhàng, sub-label, metadata | | Smoke | `#919191` | `--color-smoke` | Chữ cấp ba, nét icon, mục điều hướng không hoạt động, chữ trên secondary button |

# Desktop.fm — Style Reference > Chrome disc in a laser grid — Apple keynote restraint meets cyberpunk CD-ROM nostalgia. **Theme:** light Desktop.fm is a near-monochrome product page that treats a single 3D-rendered object as the entire hero. The canvas is a cold light gray, the chrome disc floats centered, and the interface furniture is reduced to a single macOS-style window card with one black button. Typography is aggressive: system fonts pushed to weights 700-800 with tight tracking, never thin or light. The page is 1% chromatic by design — the only color comes from the rendered scene (neon green laser lines across a silver CD), and that color is not part of the UI token system, it is the product. Components are compact, radii are mostly sharp (1.5px), and the only soft radius belongs to the app-window card itself (25px) and the pill-lozenge button (20px). The result reads as an Apple product page filtered through a cyberpunk CD-ROM era — restrained chrome surfaces, one bold interactive element, and atmosphere carried entirely by a 3D asset rather than by gradient or illustration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas Mist | `#f1f2f3` | `--color-canvas-mist` | Page background, dominant surface across hero and surrounding space | | Carbon Black | `#111111` | `--color-carbon-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Pure White | `#ffffff` | `--color-pure-white` | Elevated card surface (app window mockup), inverse text on dark buttons | | Graphite | `#2d2d2d` | `--color-graphite` | Secondary dark surfaces, icon strokes, muted dark UI elements |

# Voicenotes — Style Reference > cream-paper notebook with a single inkwell. A warm parchment workspace where oversized editorial serifs meet whisper-quiet Inter UI, and almost every pixel is neutral except a single green check that says "you're safe." **Theme:** light Voicenotes operates as a quiet, editorial note-taking workspace: a warm cream canvas with nearly zero chroma, where the only vivid mark is a single green check used as a tiny trust signal. The visual identity is a conversation between a humanist display serif (Instrument Serif) and a utilitarian sans (Inter) — the serif sings the marketing headlines while the sans does all the interface labor. Components are low-elevation, generously rounded, and pill-shaped for actions, giving every screen the feel of paper notebook pages laid out on a desk rather than a chrome-heavy SaaS dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment | `#faf9f5` | `--color-parchment` | Page canvas, hero backgrounds, section bands — the warm off-white that makes the whole product feel like paper rather than a screen | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, modal backgrounds, elevated panels — pure white sits on top of Parchment to create depth without shadows | | Soft Sky | `#eaf2f8` | `--color-soft-sky` | Soft section background, alternate surface, and quiet card fill | | Hairline | `#e5e7eb` | `--color-hairline` | Primary border color for cards, dividers, and input fields — the most-used neutral in the system |

# Flowmapp — Style Reference > White blueprint desk with one blue pen **Theme:** light Flowmapp sử dụng ngôn ngữ sáng sủa, thoáng đãng, gần giống như một cuốn lab-notebook: nền gần như trắng tinh, headline đen đậm cỡ lớn, CTA hình pill màu xanh dương, và một chùm các mockup sản phẩm nhỏ nổi lơ lửng — đóng vai trò như bằng chứng chứ không phải trang trí. Hệ thống chỉ dùng một màu xanh dương sống động duy nhất (#0080ff) làm tín hiệu bão hòa, mọi thứ còn lại giữ achromatic hoặc gần xám để màu sắc được hiểu là hành động, không phải nhiễu. Hình dạng được bo tròn mạnh — card bo 20–32px, button và tag thành pill tròn ở 1600px, và hero CTA còn có đuôi vẽ tay lượn sóng khiến hành động chính trông như được phác thảo chứ không phải dùng template. Layout được giới hạn max-width với nhiều khoảng thở; nội dung được ngắt quãng bằng các screenshot sản phẩm nhỏ, mảnh UI nổi, và một hàng icon badge tròn pastel dùng để chấm câu cho các đoạn văn dài. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Blue | `#0080ff` | `--color-signal-blue` | Accent xanh dương hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính | | Voltage Violet | `#0050ff` | `--color-voltage-violet` | Viền card trang trí phát sáng, hero gradient bloom, accent outline màu trên mockup nổi — nằm sâu hơn Signal Blue một bậc cho các khoảnh khắc thương hiệu phân lớp | | Sky Wash | `#c5e0fb` | `--color-sky-wash` | Accent xám hỗ trợ cho chi tiết trang trí và nhấn nhá tần suất thấp. Không nâng lên làm màu CTA chính | | Pencil Gray | `#8c9baa` | `--color-pencil-gray` | Body text mờ, border mảnh, nav divider, step badge, metadata cấp ba |

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

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

# Little Amps — Style Reference > Bìa đĩa than dưới nắng chiều. Giấy kem, mực cam cháy, một con tem xanh bụi bặm, mọi nhãn đều được đặt bằng monospace — giao diện hoạt động như một tạp chí cà phê in ấn: xúc giác, mang tính editorial, không bao giờ vô trùng. **Theme:** light Little Amps là một thế giới quán cà phê analog ấm áp: canvas giấy kem, chữ espresso nâu đậm, và điểm nhấn cam cháy gợi cảm giác mực nhãn phai màu nắng. Giao diện mang phong cách một tạp chí in hoặc tờ rơi đĩa than — một custom display serif dày dặn xử lý headline trong khi monospace (Necto Mono, Roboto Mono) gắn nhãn mọi thứ mang tính cấu trúc: nav, button, giá cả, ngày tháng, callout. Ảnh chụp mang phong cách tài liệu và xúc giác (tay trên đĩa than, quầy cà phê, quả cà phê) và neo mọi section. Màu sắc ít nhưng dứt khoát: một màu đỏ cam rực rỡ duy nhất làm nhiệm vụ link và highlight, một màu xanh bụi bặm và vàng cúc vạn thọ xuất hiện như tín hiệu phụ nhẹ nhàng. Bề mặt phẳng, border là đường kẻ tóc màu taupe ấm, radius nhỏ (3–8px) — thẩm mỹ được tuyển chọn và mang tính editorial, không mềm mại hay bo tròn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Espresso | `#522c25` | `--color-espresso` | Text chính, icon, card borders, nav, footer, input fields — màu tối cấu trúc giữ mọi màn hình, ấm thay vì đen để giữ đúng thương hiệu cà phê rang | | Burnt Orange | `#c03001` | `--color-burnt-orange` | Filled action buttons, active links, key highlights, badge fills — điểm nhấn rực rỡ duy nhất khiến các phần tử tương tác cảm giác như được bật lên trên nền cream canvas | | Amber Ink | `#c46500` | `--color-amber-ink` | Điểm nhấn phụ cho emphasized text, hover states, và warm callouts — một màu cam sẫm hơn kết hợp với Burnt Orange để tạo chiều sâu tông màu | | Marigold Wash | `#febf6f` | `--color-marigold-wash` | Nền highlight mềm, tag fills, và decorative washes — dùng tiết kiệm để thêm khoảnh khắc ánh nắng ấm vào các layout trung tính |

# Honk — Style Reference > Billboard xanh coban với một vệt highlight vàng **Theme:** light Honk vận hành trên hệ thống thiết kế nền xanh bão hòa dành cho một sản phẩm nhắn tin muốn năng lượng, không phải kiềm chế. Toàn bộ viewport là một khung xanh điện (#008fff) với typography trắng và vàng tín hiệu nổi trên đó — không có xám ấm, không thẻ mềm, không chrome light-mode. Headlines là một custom heavy display face ở 52px, tracking chặt, với một hoặc hai từ được chuyển sang vàng rực (#ffe400) để các từ khóa bật ra khỏi headline. Bề mặt tối giản: mọi thứ hoặc nằm trực tiếp trên nền xanh, hoặc dùng một panel trắng cứng với border-radius 16px làm notification/UI element. Phone mockup mang màu phụ duy nhất (game-green) và nổi với các chi tiết trang trí tinh tế — speech bubbles, emoji-shaped UI nubs. Hệ thống mang phong cách vui tươi, tự tin, và cố tình ồn ào: nó chống lại phong cách doanh nghiệp, chống lại tối giản, và dùng độ bão hòa màu làm phương tiện thương hiệu chính thay vì typography hay layout cầu kỳ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Honk Blue | `#008fff` | `--color-honk-blue` | Full-viewport page canvas, hero background, tất cả section cấp cao nhất — màu xanh điện CHÍNH LÀ bề mặt thương hiệu, không phải accent phụ | | Honk Sky | `#00a0ff` | `--color-honk-sky` | Xanh phụ cho dải gradient, hình trang trí lớn, và lớp chiều sâu phía sau canvas chính | | Signal Yellow | `#ffe400` | `--color-signal-yellow` | Từ nhấn trong headlines, gạch chân heading border, và dấu câu highlight — điểm nhấn màu duy nhất trên nền xanh, dùng tiết kiệm để nhấn mạnh thay vì trang trí | | Honk White | `#ffffff` | `--color-honk-white` | Viền siêu mỏng, divider, input outlines, và card edges trên bề mặt sáng. Không nâng nó lên thành màu CTA chính |

# Apple — Style Reference > Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product. **Theme:** light Apple's MacBook Neo product page radiates cool luminosity — a gallery-white canvas where enormous weight-700 headlines at 80-96px dominate above feather-light body copy, creating a tension between mass and air. The page background stays #f5f5f7, one step off pure white, giving cards and content wells a surface-lift effect without any shadows. Negative letter-spacing tightens progressively with size — display headlines track at -0.022em while body text breathes at -0.003em, a signature move that makes large type feel chiseled rather than loose. The single interactive accent (#0071e3 CTA blue) appears only on the 'Buy' pill button and nav links, rationed so every appearance reads as an instruction to act. Product gradients — dark-to-citrus-green, dark-to-blue, dark-to-violet — serve as full-bleed theatrical backdrops for each color finish showcase, never decorating UI chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#1d1d1f` | `--color-ink` | Primary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white | | Graphite | `#707070` | `--color-graphite` | Secondary body copy, captions, footnotes, muted nav items | | Slate | `#474747` | `--color-slate` | Tertiary body text, supporting link text, secondary nav | | Ash | `#333333` | `--color-ash` | Icon strokes, mid-weight body text, button labels in ghost state |

# Lamborghini.com — Style Reference > Showroom đen với một chiếc xe màu vàng dưới ánh đèn spotlight **Theme:** mixed Ngôn ngữ thiết kế của Lamborghini là sân khấu ô tô: một sân khấu tối điện ảnh nơi màu Giallo vàng tô điểm cho một thế giới vốn chỉ có đen trắng. Giao diện luân phiên giữa các hero canvas tối full-bleed (nơi video và ảnh sản phẩm chiếm ưu thế) và các bề mặt nội dung xám nhạt yên tĩnh (nơi kể chuyện editorial đảm nhận). Typography là yếu tố nổi bật nhất — một custom sans-serif công nghiệp (LamboType) chỉ được viết bằng CHỮ IN HOA, được scale mạnh mẽ lên 80–120px cho các hero statement. Các component tối giản và mang tính cấu trúc: không card bo tròn, không soft shadow, không decorative gradient — chỉ có bề mặt góc cạnh, hairline rules, và một nút hành động màu vàng rực rỡ duy nhất. Cảm giác tổng thể là sự kiềm chế như gallery bị phá vỡ bởi một điểm nhấn màu sắc tự tin, giống như một showroom đen mờ bị phá vỡ bởi một chiếc xe màu vàng dưới ánh đèn spotlight. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Giallo Vivo | `#ffc000` | `--color-giallo-vivo` | Accent vàng hỗ trợ cho các chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng cấp lên màu CTA chính | | Giallo Ombra | `#917300` | `--color-giallo-ombra` | Trạng thái hover hoặc vàng thứ cấp, list marker với brand accent — biến thể mustard đậm hơn của màu chính | | Carbony Black | `#202020` | `--color-carbony-black` | Văn bản chính, hero canvas tối, navigation bar — màu gần đen chủ lực được dùng hơn 1400 lần | | Pure Black | `#000000` | `--color-pure-black` | Body copy, footer ink, icon stroke trên bề mặt sáng — văn bản tương phản tối đa và màu đen tuyệt đối |

# boords.com — Style Reference > Studio storyboard ấm áp trên nền giấy kem — nền cream, điểm nhấn bút chì màu hổ phách, và kiểu chữ hình học phẳng mang cảm giác vẽ tay dù là UI thuần túy. **Theme:** light Boords hoạt động trong một không gian thị giác ấm áp, giống như giấy: nền cream (#fafaf5) nằm bên dưới các bề mặt trắng tinh, với một điểm nhấn màu hổ phách duy nhất mang cảm giác như nét bút chì hơn là một CTA kỹ thuật số. Typeface 'matter' tùy chỉnh mang tính hình học, thân thiện ở mọi kích thước, với tracking dương cho small-caps eyebrows và headline chặt chẽ, tự tin ở 32–60px. Giao diện được thiết kế phẳng có chủ đích — góc 6px là bán kính mặc định, shadow gần như vắng bóng, và một phần tối (khu vực developer/API) phá vỡ sự đơn điệu của cream mà không làm xáo trộn sự yên tĩnh. Thẩm mỹ này vay mượn từ thế giới storyboard mà nó phục vụ: tông trung tính ấm, bo tròn mềm mại, màu hành động ấm áp như hổ phách, và chất vẽ tay trong hình ảnh sản phẩm khiến UI cảm giác như một công cụ sáng tạo hơn là một ứng dụng năng suất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Warm Cream | `#fafaf5` | `--color-warm-cream` | Page canvas, bề mặt nền — thay thế màu trắng tinh khiết để tạo cho giao diện cảm giác ấm áp như giấy | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, panel sản phẩm UI, khối nội dung nâng cao | | Ink Black | `#121212` | `--color-ink-black` | Văn bản chính, nền phần tối, nút nav đã điền màu, border tương phản cao | | Stone Gray | `#e9e9e7` | `--color-stone-gray` | Đường phân cách section, bề mặt xen kẽ nhẹ nhàng, nền input field |

# Parloa — Style Reference > warm editorial paper with ink and highlighter **Theme:** light Parloa uses a warm editorial language: cream paper backgrounds, deep ink-black typography, and a single vivid orange that punctuates like a highlighter. The pairing of a display serif (Exposure30) with a precise grotesque (Geist) gives every screen the cadence of a premium magazine spread rather than a typical SaaS dashboard. Dark navigation and announcement bars anchor the warm cream canvas, while white cards float on that canvas as if pinned to a designer's moodboard. The orange accent never fills buttons — it only outlines, links, and marks icons — keeping the surface warm but the actions grounded in dark fills. The overall feeling is editorial-confidence, not tech-dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#1f1c1b` | `--color-ink-black` | Primary text, filled action buttons, dark surfaces — warm near-black replaces pure black so the entire palette feels printed on cream rather than rendered on glass | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, button text on dark fills — the only true white in the system, reserved for elements that need to lift off the warm canvas | | Canvas Cream | `#ebe9e1` | `--color-canvas-cream` | Page background — the dominant warm neutral that makes the entire site feel like uncoated stock paper rather than a screen | | Linen | `#f5f4f0` | `--color-linen` | Nav bar background, subtle section alternation, heading hairlines — a lighter cream that layers on the canvas without breaking warmth |

# Eindhoven Design District — Style Reference > editorial brutalism trên nền giấy trắng — một tuyên ngôn thiết kế đô thị được thể hiện qua type cỡ lớn, ảnh thưa thớt và sự kiềm chế tuyệt đối. **Theme:** light Eindhoven Design District mang phong cách editorial brutalism trên nền giấy trắng: một canvas gần như đơn sắc, nơi typography đảm nhận vai trò chủ lực và nhiếp ảnh giành được không gian nhờ vào tỷ lệ và cách bố trí bất đối xứng. Toàn bộ giao diện là cuộc đối thoại giữa display type HelveticaNow cỡ lớn và phần text hỗ trợ nhẹ nhàng, với đen-trên-trắng chiếm 95% khối lượng công việc. Sắc màu duy nhất là một tông đỏ rực dùng làm điểm nhấn nội dung (nhãn danh mục bài viết) — không bao giờ dùng cho UI chrome. Các component được thiết kế phẳng một cách có chủ đích: pill-shaped ghost buttons, article card với ảnh phía trên, viền mảnh (hairline), không shadow hay gradient. Kết quả không phải là một website mà giống một tạp chí thiết kế in ấn tình cờ có tính tương tác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Charcoal Ink | `#000000` | `--color-charcoal-ink` | Toàn bộ text, border, icon strokes, nav links, button outlines và đường kẻ cấu trúc. Mực in chủ đạo của hệ thống — mọi hình khối và ký tự đều mang trọng lượng này | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang chính, bề mặt card, button fills và text đảo màu trên các khối tối. Nền tảng để mọi thứ khác được đặt lên | | Newsprint Gray | `#e8e8e8` | `--color-newsprint-gray` | Nền section cho các dải nội dung (article grid, footer) — tạo ra sự chuyển tông nhẹ nhàng giữa các section trắng mà không đưa thêm một hue thứ hai | | Pewter | `#bfbfbf` | `--color-pewter` | Helper text mờ, list divider, border link phụ — dùng tiết kiệm ở nơi thông tin bị giảm ưu tiên nhưng vẫn hiện diện |

# Dul Zorigoo — Style Reference > ink-and-pencil gallery wall — portfolio của designer được thể hiện như những bảng triển lãm đơn sắc trên nền trắng, nơi cấu trúc được vẽ ra chứ không phải tô đầy **Theme:** light Một bức tường gallery đơn sắc cho portfolio của designer — nền canvas trắng tinh, đường phân cách xám mảnh như nét chì, và mực gần đen cho chữ, với chính tác phẩm (ảnh chụp, UI captures, thử nghiệm) cung cấp mọi giọt màu sắc. Layout theo cấu trúc hai cột: một thanh bio cố định mỏng bên trái, một thanh filter tab ngang phía trên, và một masonry grid thoáng với các tile tác phẩm kích thước khác nhau ở khu vực chính. Hệ thống được thiết kế có chủ đích tối giản — không có màu nhấn, không bóng đổ, không bo tròn mềm mại ngoại trừ bán kính 8px trên một vài control hiếm hoi. Sự kiềm chế chính là thương hiệu: mọi quyết định thị giác đều là sự vắng mặt của một quyết định, để ảnh chụp và screenshot sản phẩm gánh toàn bộ trọng lượng thị giác. Đặc điểm nổi bật nhất là màu viền mảnh #ebebeb xuất hiện 620 lần, cấu trúc mọi panel, card và divider — một grid được vẽ bằng bút chì 1px chứ không phải xây dựng bằng độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, image wells, bề mặt card bên trong embedded UI captures | | Pencil Gray | `#ebebeb` | `--color-pencil-gray` | Viền mảnh, divider panel, cạnh card, viền button, đường cấu trúc chủ đạo của toàn bộ hệ thống | | Graphite | `#a8a8a8` | `--color-graphite` | Chú thích ảnh, heading phụ, nhãn section, metadata thời gian/địa điểm | | Smoke | `#8e8e8e` | `--color-smoke` | Body helper text, secondary metadata, descriptor có độ nhấn thấp |