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

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

# Aevi Wellness — Style Reference > Nordic apothecary, weightless type. A muted slate-blue accent interrupts an otherwise achromatic, light-as-air editorial layout where product photography overlaps hairline-bordered cards on warm white. **Theme:** light Aevi Wellness reads like a Nordic editorial spread translated into e-commerce: generous product photography overlapping a warm off-white canvas, whisper-weight typography that gives headlines room to breathe, and a single muted slate-blue accent that appears only where the brand needs to signal action or section shift. The palette is almost entirely achromatic — warm near-black text (#231f20), pure white surfaces, and a powder-blue band (#d5e0ea) that structures the page into editorial chapters. Components are barely-there: ultra-thin hairline borders, 2px corner radii on most elements, and 60px pill buttons for primary actions. The overall feel is clinical-luxury — the products themselves are the visual subject, and the interface stays out of their way. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Powder Blue | `#d5e0ea` | `--color-powder-blue` | Section bands, card borders, decorative dividers — the brand's secondary canvas, used to segment the page into editorial chapters without introducing contrast | | Slate Bloom | `#a3bfdb` | `--color-slate-bloom` | Primary action buttons, active states — the single chromatic accent; its low saturation keeps it feeling clinical rather than commercial | | Warm Ink | `#231f20` | `--color-warm-ink` | Primary text, hairline borders, card outlines, icon strokes — near-black with a warm undertone that softens the high-contrast text against white | | True Black | `#000000` | `--color-true-black` | Icon fills, occasional heavy borders — used sparingly for graphical weight when maximum contrast is needed |

# Agence Foudre — Style Reference > Trang splash theo phong cách tạp chí với tông hồng son môi. **Theme:** light Agence Foudre sử dụng ngôn ngữ editorial-magazine táo bạo: nền cream ấm áp, display type condensed cỡ lớn màu magenta rực rỡ, và một màu xanh rừng sâu bất ngờ vừa làm body text vừa làm điểm nhấn. Giao diện được cố tình để thưa thớt — phần lớn viewport là khoảng trống, và nội dung xuất hiện dưới dạng các cụm typography dày đặc thay vì card grid hay hình ảnh sản phẩm. Màu sắc được dùng như dấu câu cảm xúc: hồng nóng gào thét, hồng nhạt thì thầm, xanh đậm neo giữ, và kem ấm làm mềm mọi bề mặt. Các component tối thiểu — nút hồng tròn, badge hình pill, và chữ to khỏe là toàn bộ chrome. Đây là một portfolio/expression site, không phải product UI: tính cách thương hiệu CHÍNH LÀ typography và màu sắc, mọi thứ khác đều lùi lại phía sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lipstick Magenta | `#db3c8a` | `--color-lipstick-magenta` | Display headlines, màu thương hiệu chính, icon buttons, heading accents — hồng rực mang 100% nhận diện thương hiệu | | Forest Ink | `#00522d` | `--color-forest-ink` | Body text, links, iconography, footer — xanh đậm bão hòa trên nền cream tạo sự trang trọng editorial mà không màu trung tính nào có được | | Blush Cream | `#fce5df` | `--color-blush-cream` | Nền mềm nhẹ, badge backgrounds, khối wash nhẹ, hover states — hồng kem ấm nằm giữa trang và điểm nhấn | | Warm Chalk | `#fff8f6` | `--color-warm-chalk` | Nền hỗ trợ sáng cho background nhẹ và phân cách section. Không dùng làm màu CTA chính |

# Agencja brandingowa — Style Reference > Editorial white gallery with black ink typography **Theme:** light A stark editorial identity system built on absolute monochrome — white canvas, black ink, gray echoes. The design reads like a printed architecture monograph: every element earns its space through generous whitespace, precise typographic control, and a refusal to use color for anything but information. Type does all the emotional work; a single custom grotesk carries both 73px display lines and 10px meta labels, unified by a stylistic alternate ('ss01') that gives the letterforms a distinctive editorial edge. Components stay flat, borders stay hairlines, radii stay generously rounded, and the entire surface stack moves from pure white through cool grays to ink black without any chromatic interruption. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surface, inverted text on dark blocks | | Ink Black | `#000000` | `--color-ink-black` | Primary text, headings, logo mark, all stroke and border weight | | Obsidian | `#1f1f1f` | `--color-obsidian` | Dark section backgrounds, deep surface elevation, footer bands | | Graphite Wash | `#333333` | `--color-graphite-wash` | Elevated dark surfaces, overlay panels |

# AgentQL — Style Reference > Aurora glow over a midnight terminal **Theme:** dark AgentQL operates in a deep-space command-center register: near-black canvas, tightly letter-spaced Figtree display headlines, and a single pair of violet aurora glows (purple + pink radial gradients) that bleed from the hero into the background. The interface is overwhelmingly achromatic — white type, cool-gray secondary text, hairline borders in dark navy — with color reserved for two specific jobs: product surface highlights (a few cards lift into a slightly violet-tinted dark) and accent CTAs (a single blue→violet gradient pill). Components sit on flat dark surfaces with generous padding, rounded to 12px, and rely on heavy dark drop shadows rather than glow for depth. The overall feel is closer to a dark IDE theme than a marketing site — Inter carries the UI, IBM Plex Mono owns code blocks, and Figtree whispers the headlines at weight 500 with tight tracking. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#0b0c0e` | `--color-void` | Deepest surface layer, page base under hero — the floor of the dark stack | | Abyss | `#0e111b` | `--color-abyss` | Primary page canvas and most card backgrounds; cool blue-black anchors the whole system | | Deep Sea | `#0d172b` | `--color-deep-sea` | Elevated card surface — sits one step above the canvas, used for feature and pricing cards | | Cobalt Panel | `#12244f` | `--color-cobalt-panel` | Highlighted card surface for feature spotlights; a violet-tinted lift that breaks the monochrome rhythm without becoming decorative |

# Air — Style Reference > sky canvas, frosted glass **Theme:** light Hệ thống thị giác của Air gợi lên trải nghiệm thanh bình, tựa như mây, với chủ đề nền bầu trời xanh chủ đạo. Typography cân bằng giữa font display custom biểu cảm để tạo ấn tượng và font chức năng tinh tế để đảm bảo rõ ràng. UI elements phần lớn là đơn sắc, duy trì sự tập trung thông qua các biến thể bề mặt tinh tế và các thành phần dạng ghost. Một màu xanh dương accent duy nhất được dành riêng cho trạng thái tương tác, dẫn dắt sự chú ý của người dùng và làm nổi bật các hành động chính trên nền trời rộng lớn, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sky Canvas | `#426188` | `--color-sky-canvas` | Background trang chủ đạo, tạo chiều sâu và bầu không khí như bầu trời. Cũng được dùng cho màu headline trang trí và border | | Action Blue | `#2b7fff` | `--color-action-blue` | Accent chính cho interactive elements, như outlined buttons và links, dẫn dắt hành động người dùng | | Midnight Ink | `#000000` | `--color-midnight-ink` | Màu chữ chính cho headlines và body copy, đảm bảo độ tương phản cao trên bề mặt sáng. Dùng cho border của các phần tử được chọn | | Cloud White | `#ffffff` | `--color-cloud-white` | Background cho bề mặt UI chính, header, và text nơi cần độ tương phản với các phần tử tối hơn. Cũng dùng cho ghost button border và text |

# Aira — Style Reference > Sunday broadsheet lúc nửa đêm — ảnh ấm áp, chữ in mực, UI thì thầm. **Theme:** light Aira sử dụng ngôn ngữ editorial-monochrome: không khí nhiếp ảnh ấm áp trên nền UI gần như không màu, xây dựng từ một tấm canvas off-white duy nhất và chữ ink-black. Điểm nhấn đặc trưng là serif display face (Gestura) kết hợp với Inter cho mọi chức năng — một serif headline ở 56-72px khiến một AI tool fintech trông như tờ báo kinh doanh Chủ nhật, không phải dashboard. Giao diện giữ phong cách giấy tờ yên tĩnh: pill buttons, hairline borders, một dark surface mỗi section, và hầu như không có chromatic accent — một hero ảnh ấm áp duy nhất mang toàn bộ nhiệt độ cảm xúc. Màu sắc chỉ xuất hiện như sự vắng mặt của màu sắc, nên contrast (trắng → gần đen) và chất liệu (soft shadow, gentle radius) làm công việc nặng nhọc mà một bảng màu SaaS thông thường sẽ đảm nhận. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Bone White | `#fafafb` | `--color-bone-white` | Canvas chính, bề mặt card, chữ button, input fills | | Graphite Ink | `#2c2c2b` | `--color-graphite-ink` | Border chính, hairline dividers, link underlines, heading accents | | Deep Coal | `#1f1f1f` | `--color-deep-coal` | Action fill trung tính độ tương phản cao cho primary buttons trên nền sáng | | Obsidian | `#111111` | `--color-obsidian` | Body và heading text ở weight tối đa, dark hero overlays, icon strokes |

# Airbnb — Style Reference > Ảnh kỳ nghỉ ghim trên bảng liệu trắng — ảnh sáng được đặt trong khung bo tròn trên nền gần trắng, với một chiếc ghim màu san hô duy nhất giữ mọi thứ lại với nhau. **Theme:** light Giao diện của Airbnb là một marketplace ấm áp, thoáng đãng được xây dựng trên nền gần trắng và một điểm nhấn thương hiệu màu đỏ san hô duy nhất. Canvas #f7f7f7 với bề mặt card #ffffff tạo ra chiều sâu rất nhẹ — giấy xếp chồng lên giấy — nơi nhiếp ảnh đảm nhận toàn bộ trọng lượng thị giác. Font biến thiên tùy chỉnh Airbnb Cereal VF chạy ở các weight 400–700 trên một thang đo chặt chẽ, nhỏ gọn với letter-spacing âm ở kích thước lớn, mang lại cho UI sự tự tin nhẹ nhàng mà không cần yếu tố trang trí. Màu đỏ san hô #ff385c duy nhất xuất hiện tại các điểm chạm thương hiệu (logo, trạng thái active, nút tìm kiếm), khiến nó giống như một chữ ký hơn là một màu hệ thống. Ảnh card tràn cạnh (edge-to-edge) với góc bo 20px — bán kính bo tròn duy nhất hào phóng trong một layout thông tin dày đặc, nhỏ gọn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Rausch Coral | `#ff385c` | `--color-rausch-coral` | Tô màu logo brand, gạch chân nav active, nền icon nút tìm kiếm, trạng thái active của carousel dot — chữ ký màu sắc duy nhất giúp nhận diện giao diện | | Rausch Deep | `#e00b41` | `--color-rausch-deep` | Làm tối màu Rausch Coral ở trạng thái hover trên các phần tử brand tương tác | | Carbon | `#222222` | `--color-carbon` | Văn bản chính, heading, border, icon stroke — màu trung tính chủ đạo cho hầu hết nội dung typographic | | Slate | `#6a6a6a` | `--color-slate` | Văn bản phụ (metadata, subtext, nhãn phụ), icon fill phụ |

# Airtable — Style Reference > workshop ấm áp với các chương được mã hóa bằng màu sắc **Theme:** light Airtable hiện lên như một không gian làm việc ấm áp, mang phong cách editorial, thay vì một dashboard SaaS lạnh lẽo. Canvas là nền giấy da kem mềm mại (#faf5e8) — không bao giờ trắng tinh — mang lại cho toàn bộ trang web cảm giác như giấy, gần như in ấn. Typography đậm và không hề nao núng: một custom display face với font-weight gần 900 cho hero headline kết hợp với một sans-serif đa năng cho body và UI. Các button màu đen tuyền, không phải màu xanh thương hiệu như mong đợi, mang lại cho trang web một sự tự tin mang tính kiến trúc, gần như ấn phẩm in. Điểm nhấn đặc trưng là các feature card được mã hóa bằng màu sắc — mỗi use case có một màu bão hòa riêng (terracotta, xanh dương đậm, xanh rừng, đào, hồng) hoạt động như các dải phân cách chương trong một catalog trực quan. Hiệu ứng tổng thể là một cuốn sổ tay studio sáng tạo: ấm áp, có tổ chức, có cá tính và mang tính con người. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#faf5e8` | `--color-parchment-cream` | Canvas trang — nền trắng ngà ấm áp định hình toàn bộ bầu không khí của site, thay thế nền trắng tinh tiêu chuẩn | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt sáng nhẹ hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính | | Frost White | `#f8fafc` | `--color-frost-white` | Bề mặt sáng thay thế cho các phần tử lồng nhau, nền navigation tinh tế | | Onyx | `#181d26` | `--color-onyx` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp nó thành màu CTA chính |

# Akash Tyagi — Style Reference > tường gallery nửa đêm với điểm nhấn hồng neon **Theme:** dark Akash Tyagi là một portfolio editorial tối màu, được dàn dựng như một canvas nửa đêm với chữ ấm giống giấy da và một điểm nhấn hồng neon duy nhất — đóng vai trò như dấu câu chức năng chứ không phải trang trí. Bố cục thoáng đãng — khoảng cách section 200px, hai cột bất đối xứng rộng rãi, và label display đặt trong Geist Pixel Triangle tạo nhịp điệu gallery-wall, nơi mỗi dự án có khoảng lặng cần thiết. Mọi màu trung tính đều mang undertone nâu ấm, cố tình tránh xa tông xanh-xám lạnh của các portfolio công nghệ thông thường. Các component tối giản và phẳng: pill CTA, hairline divider, status dot, và ảnh dự án lớn không viền — không có elevation, không gradient, không trang trí ngoài typography và một điểm nhấn màu duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | Nền trang, bề mặt card, chữ đảo ngược trên nền hồng | | Parchment | `#efe6d8` | `--color-parchment` | Chữ body và heading chính — tông gần trắng ấm với undertone nâu, thay thế cho trắng lạnh thường thấy trong dark UI | | Bone | `#aca69c` | `--color-bone` | Chữ phụ, viền button, metadata — xám ấm trung tone | | Ash | `#736e68` | `--color-ash` | Chữ body mờ, viền link nhẹ, label không hoạt động |

# Allbirds — Style Reference > Chất liệu tự nhiên trên nền vải lanh trắng **Theme:** light Allbirds vận hành dựa trên sự tự nhiên, tự tin và nhẹ nhàng — một bảng màu gần như hoàn toàn achromatic, được chấm phá bởi tông cát ấm (#e0dacf) và các gam màu đất trầm lấy trực tiếp từ ảnh sản phẩm. UI luôn đứng sang một bên để nhường chỗ cho sản phẩm: bề mặt trắng, đường viền mảnh (hairline borders), navigation chữ in hoa với tracking dày, và các pill controls trông như nút bấm vật lý chứ không phải element web. Self Modern (một custom serif) chỉ được dùng cho những khoảnh khắc mang tính editorial — hero headlines và tên bộ sưu tập — trong khi Geograph đảm nhận mọi label, body text, button ở ba trọng lượng được kiểm soát chặt chẽ. Category cards trở thành hệ thống màu sắc: mỗi card lấy màu nền từ chính sản phẩm nó giới thiệu, biến navigation thành một bảng Pantone sống động. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, nền card sản phẩm | | Charcoal | `#212121` | `--color-charcoal` | Màu trung tính hỗ trợ cho secondary UI, divider, label mờ. Không dùng làm màu CTA chính | | True Black | `#000000` | `--color-true-black` | Headline, icon, border tương phản cao, nav text | | Warm Sand | `#e0dacf` | `--color-warm-sand` | Nền hero section, tông bề mặt phụ, panel editorial lớn |

# Allfeat — Style Reference > Màn hình backstage lúc nửa đêm — một luồng sáng sân khấu màu teal xuyên qua dòng chữ màu kem ấm trên nền kính than chì. **Theme:** dark Allfeat là nền tảng hạ tầng âm nhạc dark-mode sử dụng bảng màu kem ấm trên than chì làm trạng thái nền tĩnh, sau đó thắp sáng canvas bằng hiệu ứng radial wash teal cho hero và gradient coral-red để tạo điểm nhấn cảm xúc. Hệ thống chỉ dùng một typeface duy nhất (TASA Orbiter) với ba font-weight tiết chế, các kích thước display được siết chặt bằng tracking -0.02em để headline đọc như những khối chữ tự tin thay vì những tuyên bố thoáng đãng. Hình học phân chia rõ rệt: bất cứ thứ gì có tính tương tác đều là pill tròn (900px), bất cứ thứ gì chứa nội dung đều là card bo góc 12px với viền hairline inset màu #383835 — không có drop shadow, không glass, không blur. Màu sắc được phân bổ có chủ đích: teal là màu duy nhất mang nghĩa 'hãy làm điều này', coral là màu duy nhất mang nghĩa 'hãy cảm nhận điều gì đó', và mọi bề mặt khác đều nằm trong họ warm-gray trung tính. Kết quả mang lại cảm giác như màn hình backstage của một phòng hòa nhạc — tối, chức năng, với một luồng sáng sân khấu xuyên qua. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Charcoal Stage | `#151515` | `--color-charcoal-stage` | Canvas trang, bề mặt chính, mọi nền tối — lớp nền cơ bản cho mọi màu sắc khác | | Warm Cream | `#fffbeb` | `--color-warm-cream` | Văn bản chính, nav links, heading copy, viền hairline trên nền tối — không bao giờ là trắng tinh, luôn hơi ánh bơ | | Card Edge | `#383835` | `--color-card-edge` | Viền card inset 1px, card ambient shadow, đường kẻ phân cách nhẹ trên bề mặt nâng cao | | Mute Cream | `#b8b8b8` | `--color-mute-cream` | Văn bản thân cấp hai, mô tả nhẹ nhàng, helper copy mờ |

# Altason — Style Reference > architectural monochrome broadsheet **Theme:** light Altason là một portfolio-canvas: lưới editorial thuần đen trên trắng, nơi wordmark Grotesk cỡ lớn, medium-weight là hero và bản thân tác phẩm chính là sản phẩm. Hệ thống hoàn toàn 0% chromatic — mọi khoảnh khắc thị giác đều được tạo nên từ mực, giấy và khoảng trắng âm giữa chúng. Các component không có border ngoại trừ đường kẻ 1px màu đen mảnh như sợi tóc, lặng lẽ phân chia trang; không có shadow, không gradient, không bo góc, không màu nhấn. Type làm tất cả công việc, và nó nói to bằng cách cực kỳ lớn và chỉ ở weight 500 — sự kiềm chế của một medium weight ở 288px là signature move. Mật độ thoáng và có tính kiến trúc: các section thở với vertical padding 112–288px, nội dung nằm trong lưới ba cột, và mọi bề mặt đều là mặt phẳng, không có phân cấp độ cao. Một AI agent nên nghĩ về điều này như thiết kế một trang tạp chí in, không phải một SaaS dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, border mảnh, đường kẻ cấu trúc, border ảnh, fill heading — mực đen chủ đạo vẽ nên toàn bộ trang | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, chữ trắng trên nền tối — bề mặt để chữ đen lên tiếng | | Charcoal Plate | `#212121` | `--color-charcoal-plate` | Khối bề mặt tối và nền ảnh nơi chữ trắng đặt lên — một giải pháp thay thế mềm hơn cho đen thuần ở các vùng tối lớn | | Silver Hairline | `#b0b0b0` | `--color-silver-hairline` | Đường phân cách tinh tế và link phụ nhẹ nhàng — một mid-gray lặng lẽ lùi về sau chữ đen mà không biến mất |

# Alveos One — Style Reference > ốc đảo ấm áp như đá cuội bên suối — một căn phòng thiền tĩnh lặng, tràn ngập ánh sáng kem, nơi một vật thể graphite duy nhất nằm trong vũng ánh sáng hổ phách dịu dàng. **Theme:** light Alveos One sử dụng ngôn ngữ wellness ấm áp, không màu sắc: mọi bề mặt đều là tông màu kem, ngà, graphite hoặc gần đen, và bản thân sản phẩm là vật thể duy nhất được chiếu sáng trên trang. Bố cục tập trung và không vội vã — gradient xuyên tâm từ kem sang đất sét tạo khung cho hero device như một ánh đèn sân khấu, và các section phía dưới xen kẽ giữa kem ấm và trắng sáng với ảnh lifestyle bo góc lớn mang overlay gradient tối và chữ trắng. Typography được kiềm chế qua Hanken Grotesk ở các weight gốc với tracking rộng 0.4440em trên các label all-caps nhỏ, tạo cảm giác editorial tĩnh lặng thay vì gấp gáp. Primary action là các button gần đen — không có màu thương hiệu — giữ cho hệ thống mang cảm giác sản phẩm sức khỏe cao cấp, không phải công cụ SaaS. Góc bo mềm (25px chiếm ưu thế), shadow gần như vô hình, và gradient duy nhất trong hệ thống là hero spotlight ấm áp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Linen Canvas | `#fcf9f7` | `--color-linen-canvas` | Nền trang, điểm gốc hero gradient — nền kem ấm bao phủ toàn bộ site trong một tông off-white thống nhất | | Bone White | `#ffffff` | `--color-bone-white` | Bề mặt card, nền section, panel nổi trên linen canvas | | Graphite Ink | `#000000` | `--color-graphite-ink` | Văn bản chính, màu border chủ đạo trên card và section — neo typographic của hệ thống | | Nightshade Black | `#05060b` | `--color-nightshade-black` | Fill button hành động chính, nền footer — gần đen với undertone lạnh nhẹ |

# Ambrook — Style Reference > sổ cái thu hoạch trên giấy bọc thịt **Theme:** light Ambrook nói bằng thổ ngữ thị giác của vùng trung tâm nước Mỹ: nền canvas ấm như giấy da, chữ đậm như mực, và một điểm nhấn màu hổ phách thu hoạch duy nhất sưởi ấm mọi hành động chính. Bảng màu được giảm bão hòa có chủ đích — xanh olive, vàng lúa mì, nâu vỏ cây — như thể chính giao diện được in trên giấy bọc thịt tái chế và đóng dấu bằng mực đậu nành. Headline dùng một display face custom với uy quyền lặng lẽ (weight 500, không phải 700 như thường thấy), và mỗi section mở đầu bằng một eyebrow chữ in hoa nhỏ, trải rộng trên trang với tracking rộng. Ảnh chụp mang phong cách tài liệu (documentary), không phải khát vọng — thợ hàn, chủ trại, tài xế xe tải, không tạo dáng và đầy nắng. Kết quả là một giao diện có cảm giác gốc rễ, không bóng bẩy: đáng tin cậy qua sự ấm áp thay vì qua chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#fcfaf1` | `--color-parchment` | Canvas trang và bề mặt card — off-white ấm thay thế #ffffff thuần để giữ hệ thống gắn với chất liệu giấy, nông nghiệp | | Bone | `#efe9e0` | `--color-bone` | Bề mặt phụ cho footer, soft sections, và hairline borders cần tách biệt khỏi canvas parchment mà không có độ tương phản gắt | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt elevated card và product-mockup — dùng có chừng mực để nâng các panel cụ thể (như ảnh chụp Ledger) lên trên nền parchment | | Loam | `#c7bcaf` | `--color-loam` | Dividers nhẹ, cạnh card, và borders ít nhấn mạnh giữa canvas và content blocks |

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

# Amplemarket — Style Reference > Frosted white workspace, sun-stained corner gradient. A bright cool neutrals system with a deep violet core and one orange ember, all set in a single tight grotesk. **Theme:** light Amplemarket operates as a minimal white canvas pierced by concentrated color. The default page is near-empty — white backgrounds, a single grotesk typeface at work, hairline borders, and tight negative tracking at display sizes that compresses the headline into a compact block. The signature move is a vivid radial atmosphere (orange → cream → lavender → cyan) that bleeds in from page edges as a soft glow rather than a background fill, paired with a hand-drawn line illustration that humanizes the otherwise austere grid. A deep violet (#10054d) is reserved for dark sections and bold accent surfaces, never competing with the bright gradient. Components are flat, border-driven, and generously spaced; elevation is almost always a 1px inset ring rather than a drop shadow. The effect is a workspace that feels calm and grown-up, with color appearing in deliberate, emotional bursts. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#111111` | `--color-ink-black` | Primary text, hairline borders, icon strokes, filled button background — the dominant structural neutral at ~5000 occurrences, always reading as near-black with no warm or cool cast | | Paper White | `#ffffff` | `--color-paper-white` | Primary page and card surfaces, inverse text on dark buttons and dark sections | | Obsidian Warm | `#272625` | `--color-obsidian-warm` | Dark section background (CTAs, feature blocks), dark surface for cards inside dark contexts — subtly warmer than pure black so the violet text on top still feels in the same family | | Graphite Mid | `#6d6c6b` | `--color-graphite-mid` | Secondary body text, muted labels, caption helper copy, decorative image borders |

# Analogue — Style Reference > Đường hầm ánh sáng xuyên qua khoảng không **Theme:** dark Analogue hoạt động như một khoảng không điện ảnh với một điểm sáng tập trung duy nhất: chữ trắng trên nền đen gần như tuyệt đối, chỉ bị ngắt quãng bởi một tia sáng xanh-trắng từ ảnh chụp. Hệ thống hoàn toàn achromatic — không có điểm nhấn màu sắc, không bóng đổ, không gradient trang trí — vì vậy mọi cảm xúc phải đến từ typography, nhiếp ảnh và khoảng trống âm bản. Type nằm ở khoảng body 11–18px nén chặt với tracking siêu khít (-0.05em ở display) và line-height điện ảnh siêu chặt (1.00–1.05 ở display 40–60px), khiến headline có cảm giác như tiêu đề phim hơn là heading web. Font LCD dot xuất hiện như một điểm nhấn kỹ thuật số hiếm hoi — dấu câu kỹ thuật số trong một hệ thống nhân văn. Navigation là một pill nổi mờ, buttons là outline hoặc ghost achromatic, và kiến trúc trang (border, surface, divider) phẳng đến mức biến mất, buộc nhiếp ảnh và type phải đảm nhận mọi công việc. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Ink | `#000000` | `--color-ink` | Đen nguyên chất — neo cấu trúc, dùng cho hairline, border stroke và lớp surface sâu nhất bên dưới hình ảnh | | Graphite | `#1c1c1c` | `--color-graphite` | Văn bản chính và foreground UI chủ đạo — body copy, heading, và tông gần đen làm mềm màu đen nguyên chất cho các đoạn type dài | | Paper | `#ffffff` | `--color-paper` | Canvas trang chính và bề mặt card trắng | | Mist | `#ededed` | `--color-mist` | Lớp phủ surface nhẹ cho card và panel nâng cao — bước nhẹ nhàng nhất từ Paper, dùng khi panel cần được nhận biết mà không gây chú ý |

# Andercore — Style Reference > Steel blueprint at midnight **Theme:** dark Andercore vận hành trên ngôn ngữ công nghiệp chiaroscuro: canvas gần như đen (#0b0405) với chữ trắng sắc nét, góc vuông 4px, và một màu đỏ duy nhất được phân bổ có kiểm soát (#e32735) làm tất cả công việc kể chuyện. Trang web xen kẽ giữa một dải navigation sáng và các section tối full-bleed, nơi đường viền (1px, #382e30) định nghĩa cấu trúc thay vì shadow hay độ cao. Archivo mang độ chính xác hình học ở mọi kích cỡ với tracking -0.02em chặt chẽ, trong khi Space Mono ở 12px đóng dấu nhãn kiểu dụng cụ công nghiệp lên badge và step counter. Màu đỏ không bao giờ trang trí — nó kích hoạt, đánh dấu hành động chính duy nhất, gạch chân step đang hoạt động, và các kết nối UI quan trọng. Toàn bộ hệ thống mang cảm giác như một phòng điều khiển: dày đặc, có chủ đích, và được thắp sáng bởi một đèn báo duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Red | `#e32735` | `--color-signal-red` | Màu hành động đỏ cho filled button, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung | | Carbon | `#0b0405` | `--color-carbon` | Nền section chính, canvas tối full-bleed, secondary button fill | | Graphite | `#150e0f` | `--color-graphite` | Bề mặt gần đen thay thế cho card và panel nâng cao trên section tối | | Steel | `#382e30` | `--color-steel` | Hairline border trên nền tối, cạnh card, đường chia bảng, đường viền UI mockup |

# AngelList — Style Reference > midnight greenhouse with violet dawn — một khoảng không teal gần như đen, nơi chữ serif màu mint-green phát sáng và những nút lavender nở rộ như điểm sáng ấm duy nhất **Theme:** dark AngelList vận hành như một nhà kính lúc nửa đêm: nền canvas teal gần như đen (#001d21) là mặt sàn, chữ display serif màu mint-green (#e0fee6) phát sáng như thể phát quang sinh học, và một điểm nhấn lavender-violet (#cdcbff) xuyên suốt giao diện như ánh bình minh. Hệ thống thị giác ưu tiên dark — toàn bộ trang nằm trên nền teal đậm, bao gồm card, navigation và footer — tạo ra bầu không khí ngân hàng tư nhân về đêm thay vì light mode SaaS điển hình. Typography là ngôi sao: một custom serif display face hiển thị số liệu và headline copy ở kích thước cực lớn (90–216px) với negative tracking dày đặc, trong khi một sans trung tính xử lý toàn bộ UI chrome. Các bề mặt phẳng với elevation tối thiểu; chiều sâu đến từ sự chuyển tông giữa các sắc teal gần như đen và các dải full-bleed màu đất thỉnh thoảng xuất hiện (olive grove, mint wash). Photography mang tông ấm, phong cách lifestyle — con người trong ánh sáng tự nhiên, đang làm việc — được đặt trong các card bo tròn nằm trên nền canvas tối. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyssal Teal | `#001d21` | `--color-abyssal-teal` | Page canvas, hero background, navigation surface, footer, primary text trên nền sáng — khoảng không mà mọi thứ nằm trên đó | | Deep Reef | `#002b31` | `--color-deep-reef` | Elevated card surfaces, secondary buttons, filled chip backgrounds — cao hơn canvas một tông để tạo chiều sâu tinh tế mà không rời khỏi họ dark | | Bio Mint | `#e0fee6` | `--color-bio-mint` | Display headlines, hero copy, chữ số lớn — mint phát quang mang bản sắc thương hiệu trên nền canvas tối | | Lavender Dawn | `#cdcbff` | `--color-lavender-dawn` | Violet text accent cho link, tag và các cụm từ ngắn cần nhấn mạnh. Không nâng lên làm màu CTA chính |

# Anthropic — Style Reference > Research journal in trên nền đá ấm — bố cục typographic mang tính uy quyền, nơi gạch chân từng từ thay thế màu sắc làm cơ chế nhấn mạnh chính, và hơi ấm duy nhất đến từ chính tờ giấy. **Theme:** light Site của Anthropic chạy trên nền giấy ngà ấm (#faf9f5) — không phải trắng, không phải xám, mà là màu giấy cũ dưới ánh sáng tốt. Bảng màu gần như hoàn toàn achromatic, với toàn bộ ngân sách màu sắc dồn vào một điểm nhấn terracotta đất duy nhất (#d97757) được giữ trong CSS tokens nhưng phần lớn vắng mặt trên UI hiển thị. Hai hệ chữ custom đảm nhiệm toàn bộ công việc tạo cá tính: Anthropic Sans dẫn dắt navigation và UI với tracking khít, trong khi Anthropic Serif mang lại trọng lượng editorial trong headline và nội dung nổi bật — sự kết hợp serif-plus-grotesque báo hiệu viện nghiên cứu, không phải startup. Headline sử dụng gạch chân đôi dày trên các từ khóa (có thể thấy ở 'research' và 'products') làm thiết bị trang trí duy nhất — nó thay thế màu sắc làm cơ chế nhấn mạnh. Các feature card khổng lồ chuyển sang nền gần đen (#141413), tạo ra các dải bề mặt cứng cáp xen kẽ với gradient bằng 0 và không có shadow làm mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Slate Dark | `#141413` | `--color-slate-dark` | Văn bản chính, border, nav items, icon fills, nền card — màu gần đen xuất hiện trên cả bề mặt sáng và tối, khiến nó hoạt động như cả foreground lẫn background | | Ivory Light | `#faf9f5` | `--color-ivory-light` | Nền trang, button fills, bề mặt sáng cơ bản — màu trắng ngà ấm mang lại cho site đặc tính giấy da thay vì trắng lâm sàng | | Ivory Medium | `#f0eee6` | `--color-ivory-medium` | Nền nav, bề mặt cấp hai, border highlights | | Ivory Dark | `#e8e6dc` | `--color-ivory-dark` | Văn bản body trên nền tối, divider, border nhẹ |

# Anything — Style Reference > afternoon daydream over a wildflower field. Soft, floating, a little surreal — white UI plates drifting above a photograph that feels half-remembered. **Theme:** light Anything speaks in a daylight reverie: white canvas overlaid on dreamy photography, pill-shaped translucent navigation floating above the imagery, and one soft green accent that surfaces only as decorative punctuation. The wordmark is set in Instrument Serif italic — handwritten, not corporate — paired with Inter for UI and Instrument Sans for headlines, replacing the typical bold sans wordmark with something more personal. Components round generously at 20px on cards and images, 9999px on buttons, with shadows kept whisper-soft. Color is rationed: most surfaces are white or the faintest off-white; #448f52 appears sparingly on text and shimmer gradients, never as a filled CTA. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary headings, body text, and icon fills on light surfaces. Do not promote it to the primary CTA color | | Charcoal | `#18191b` | `--color-charcoal` | Secondary text, heading color, deep UI surfaces — slightly warmer than pure black | | Slate Mid | `#6a6a6c` | `--color-slate-mid` | Body text, helper copy, muted descriptions | | Steel | `#7d7f80` | `--color-steel` | De-emphasized headings, inactive labels |

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

# Apple (España) — Style Reference > obsidian gallery vitrine — a dark showroom where a single titanium object glows against pure black **Theme:** mixed Apple's product page is a cinematic dark-stage that lets hardware speak first: full-bleed near-black canvas, a single hero product floating in negative space, white SF Pro Display headlines at massive scale, and one vivid blue Buy button as the only saturated action color on the page. The page alternates between black feature stages and white detail bands, using generous 28px card radii and 36–980px pill buttons to feel premium and tactile. Color is used as functional punctuation: orange for category eyebrows, blue for links and the single CTA, violet/teal for other product categories. Typography is the only chrome — heavy negative letter-spacing, tight line-heights, and weight contrast between SF Pro Text body and SF Pro Display headlines carry all the hierarchy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#1d1d1f` | `--color-obsidian` | Primary dark canvas, card surfaces on dark sections, primary text on light backgrounds — the signature near-black that defines Apple's product stage | | Frost White | `#f5f5f7` | `--color-frost-white` | Primary text on dark backgrounds, light section surfaces, subtle dividers — slightly warm white that softens contrast against pure black | | Pure Black | `#000000` | `--color-pure-black` | Deepest dark canvas for hero and feature stages, footer background — used where absolute darkness amplifies product photography | | Paper White | `#ffffff` | `--color-paper-white` | Light section backgrounds, button text on dark fills, icon fills — the bright counterweight in alternating dark/light page rhythm |