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

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

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

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

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

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

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

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

# Ashton Bespoke — Style Reference > Stone cathedral of craftsmanship — warm parchment surface, one whisper of burgundy, letterspaced serif that breathes. **Theme:** light Ashton Bespoke operates as an editorial gallery for craftsmanship rather than a traditional website: a warm parchment canvas, one custom serif voice, and near-zero UI chrome. The entire palette collapses to stone, ink, and white with a single restrained wine note reserved for footer gravity and atmospheric emphasis. Photography carries the brand — full-bleed workshop imagery with no decorative overlay competes with nothing because the interface refuses to compete back. Generous negative space, hairline borders, and letterspaced serif headlines give every page the cadence of a printed monograph. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Burnt Wine | `#38141b` | `--color-burnt-wine` | Footer background, sectional dark bands, atmospheric accent — the sole chromatic note in an otherwise achromatic palette, used sparingly to anchor gravity | | Ink Stone | `#262626` | `--color-ink-stone` | Primary text, hairline borders, image frames, nav links — the structural near-black that defines every edge and label | | Warm Parchment | `#e0ded8` | `--color-warm-parchment` | Dominant page canvas, section backgrounds, card surfaces — warm stone tone that gives the site its gallery-like, hand-made feel | | White | `#ffffff` | `--color-white` | Elevated surfaces, inverted text on dark sections, nav text over imagery, subtle highlight washes |

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

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

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

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

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

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

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

# robot.com — Style Reference > một trang editorial in ấn với bút highlight màu vàng Giấy off-white ấm áp, chữ đen mực in, và một điểm nhấn neon-vàng duy nhất đánh dấu những gì quan trọng — hệ thống hoạt động như một layout tạp chí tự tin, không phải dashboard phần mềm. **Theme:** light robot.com nói bằng giọng gần như đơn sắc — nền canvas off-white ấm áp, chữ đen mực in, và một điểm nhấn vàng chói duy nhất hoạt động như bút highlight trên trang giấy in. Hệ thống mang phong cách editorial và đầy tự tin: typography mạnh mẽ (custom Yellix lên đến 100px với negative tracking), pill controls (bán kính 24-30px chiếm ưu thế), và các khối màu cấp section đảo giữa off-white, gần-đen và vàng thay vì gradient nhẹ. Ảnh sản phẩm được xử lý như cinematic evidence full-bleed — không crop, không UI chrome xung quanh — trong khi các khối chữ nằm trong cột hẹp canh trái, để lại khoảng thở rộng bên phải. Nhịp điệu thị giác đan xen giữa các dải đơn sắc yên tĩnh với các khối accent đậm, khiến màu vàng có cảm giác xứng đáng chứ không chỉ để trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Yellix Yellow | `#fff65d` | `--color-yellix-yellow` | Primary action buttons, section accent blocks, highlight tags, decorative fills — màu sắc duy nhất, dùng tiết kiệm để làm nổi bật một phần tử duy nhất trên mỗi view | | Bone White | `#ffffff` | `--color-bone-white` | Page canvas, chữ inverted trên khối tối, chữ trên filled button |

# Frame.io — Style Reference > Midnight cinema projection room. A dark suite where a single blue spotlight does all the work and the UI recedes so creative content can project forward. **Theme:** dark Frame.io is a midnight projection room for creative teams: a near-black canvas layered with deep cosmic gradients, where large confident display type floats above product surfaces like film titles above a reel. The palette is almost entirely achromatic — only one vivid blue (#6199f6) and a muted violet border tone (#4f4f80) break the monochrome, used sparingly for icons, eyebrow labels, and card edges. Typography is the loudest voice: a single geometric sans (FrameGothic) carries everything from 80px display headlines to 14px body copy, with custom inktrap letterforms reserved for tiny all-caps section labels. Components stay thin and editorial: pill-shaped nav buttons, ghost CTAs, 10px-radius cards with violet-tinted borders, and zero decorative ornament — every element exists to frame the work, not compete with it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon Vellum | `#fcfcfc` | `--color-carbon-vellum` | Primary text, inverse button text, icon strokes — near-white reads as paper against the void | | Obsidian | `#0a0a13` | `--color-obsidian` | Primary page canvas and dominant background; the slight blue undertone keeps it from feeling flat black |

# Svelte — Style Reference > Editorial broadsheet trên nền marble trắng — giọng serif, điểm nhấn một tia lửa **Theme:** light Trang web của Svelte mang phong cách như một tờ broadsheet văn học được chuyển thể thành landing page của framework. Serif typography — EB Garamond cho body text, DM Serif Display cho hero headlines — giữ vai trò chủ đạo, trong khi một sans-serif gọn gàng (Fira Sans) xử lý phần chrome: nav, buttons, tags, search. Canvas là màu trắng tinh, surface hiếm khi xuất hiện, và elevation gần như không tồn tại; phân cấp đến từ kích thước và weight của type chứ không phải cards hay shadows. Một màu cam rực (#d43008) duy nhất tạo điểm nhấn cho trang đơn sắc: nó chiếm logo, mũi tên GET STARTED, wordmark /svelte/, và link documentary. CTA là text links có hậu tố mũi tên, không bao giờ là boxed buttons. Trang web thở — nhịp dọc rộng rãi, serif headlines căn giữa, logo tài trợ grayscale, và rất ít trang trí giữa các section. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Svelte Ember | `#d43008` | `--color-svelte-ember` | Accent màu cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Ink | `#262626` | `--color-ink` | Text chính, nav items, body copy, button labels — soft black tránh độ chói của #000 nhưng vẫn giữ tỷ lệ tương phản 15:1 trên nền trắng | | Carbon | `#141414` | `--color-carbon` | Headlines và display copy — hơi đậm hơn Ink để tạo trọng lượng thị giác cho serif wordmarks trên nền trắng | | Paper | `#ffffff` | `--color-paper` | Canvas trang, card surfaces, nav background — background chủ đạo ở mọi nơi |

# Geniestudio — Style Reference > bầu trời pastel vui tươi với doodle bay lượn **Theme:** light Geniestudio nói ngôn ngữ thị giác của một canvas thiết kế hiện đại: không gian làm việc xanh pastel thoáng đãng, nơi các nhân vật minh họa tinh nghịch trôi nổi trên khoảng trống rộng rãi. Hệ thống kết hợp một CTA gần-đen (#181d27) duy nhất trên nền canvas xanh nhạt (#ebf5ff) với bộ bốn điểm nhấn minh họa bão hòa — xanh hoa ngô, cam, tím, vàng mù tạt — mang lại hơi ấm mà không cạnh tranh với UI. Typography có chừng mực và hình học: Aeonik weight 500 dẫn dắt headline với tracking -0.02em chặt chẽ, trong khi Geist 500/600 xử lý mọi thứ từ caption 10px đến label nút bấm. Bề mặt phẳng, viền mảnh, bo góc rộng (32px là mặc định), và shadow là lớp rửa xanh nhạt gần như vô hình thay vì đổ bóng tối. Kết quả là một công cụ mang cảm giác sáng tạo, dễ tiếp cận và tự tin nhẹ nhàng — màu sắc dành cho kể chuyện, không phải chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sky Wash | `#ebf5ff` | `--color-sky-wash` | Canvas trang — xanh nhạt tạo không khí thoáng đãng thay vì trắng tinh, mang đến nền có chiều sâu nhẹ nhàng | | Paper White | `#fafdff` | `--color-paper-white` | Bề mặt card và elevated surface — mát hơn trắng tinh một chút, giúp bề mặt không bị lạnh lẽo trên nền sky canvas | | Cloud Veil | `#f6f7f8` | `--color-cloud-veil` | Bề mặt phụ nhẹ và fill wash cho các UI element mờ cần sự tách biệt mà không cần độ tương phản | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card lồng nhau, icon fills và button text — điểm sáng nhất trong hệ thống |

# Nomen Nescio — Style Reference > mực trên giấy ấm **Theme:** light Nomen Nescio là một hệ thống editorial giấy và mực dành cho một nhãn hiệu thời trang ý niệm: một nền canvas trắng kem ấm (#fdfdfa) chứa ảnh thời trang cỡ lớn, trong khi mọi phần tử giao diện đều lùi về một màu mực gần đen duy nhất (#2b2b2e). Toàn bộ hệ thống typography chỉ dùng một sans-serif custom ở một weight duy nhất (400) — không bold, không light, không italic — vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua kích thước và negative letter-spacing thay vì tương phản. Các component là hình chữ nhật phẳng, không shadow, không bo góc, không màu sắc: bản sắc đến từ sự kiềm chế, từ tông trung tính ấm, và từ ảnh tràn cạnh (edge-to-edge). Hệ thống mang cảm giác như một zine in ấn được tái hiện dưới dạng website — khoảng trắng chính là layout grid, và mọi bề mặt UI đều có thể được cắt từ cùng một tờ giấy. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fdfdfa` | `--color-paper` | Canvas trang và bề mặt card — trắng kem ấm mang cảm giác giấy cũ, không phải digital white | | Bone | `#f5f3ee` | `--color-bone` | Bề mặt nâng cao và lớp phủ nhẹ — dùng cho nền card và hover state, ấm hơn canvas một bậc | | Ink | `#2b2b2e` | `--color-ink` | Text chính, navigation, border, và outlined action — gần đen với undertone ấm, không bao giờ là #000 thuần | | Ash | `#bebcb4` | `--color-ash` | Text mờ và border phụ — xám ấm dùng cho metadata, subtitle, và hairline divider |

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

# arte* — Style Reference > Golden hour harvest editorial — một tấm canvas màu kem nơi ảnh rừng ngập nắng hòa cùng display type bo tròn cỡ lớn, logo xanh chanh điện, và chữ đồng ấm áp mang cảm giác như được in chứ không phải render. **Theme:** light arte* là một harvest editorial tràn ngập ánh nắng: canvas kem ấm (#e5dccd) làm nền cho những display headline cỡ lớn bằng font Parafina — một sans-serif bo tròn mềm mại, hơi retro ở kích thước cực lớn (70–173px) với line-height dồn nén gần 0.8–0.9 — trong khi Poppins đảm nhận toàn bộ secondary copy ở line-height 1.4 chặt chẽ. Bảng màu mang phong cách vườn-nông trại: harvest copper nâu đồng cháy (#ab5700) cho primary text, chartreuse xanh chanh gây sốc (#e8e359) cho logo và hero overlays, và periwinkle xanh hoa chuông (#7997ff) đóng vai trò đối trọng mát mẻ cho các inline highlights. Hình ảnh là nửa còn lại của hệ thống — ảnh golden-hour full-bleed về rừng, đồ ăn và khuôn mặt, được xếp lớp với display type thay vì tách rời. Các component ít và mềm mại: pill buttons với radius 31px, card radii 20px, viền mảnh, gần như không có shadow. Ấn tượng tổng thể là một cuốn sách nấu ăn in ấn hoặc poster chợ nông sản được số hóa — display type tự tin, tông màu đất với một điểm nhấn vàng điện, và bản thân tên thương hiệu kết thúc bằng dấu hoa thị (*) báo hiệu sự tinh nghịch editorial. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Wheat Cream | `#e5dccd` | `--color-wheat-cream` | Canvas trang, bề mặt card, nền section — tông trắng kem ấm giữ mọi màn hình | | Harvest Copper | `#ab5700` | `--color-harvest-copper` | Primary text, body copy, list borders, card borders, decorative strokes — màu mực mặc định trên toàn bộ nội dung editorial | | Citron Beam | `#e8e359` | `--color-citron-beam` | Màu logotype, hero text overlays, accent borders, icon highlights — xanh chanh điện giúp thương hiệu nổi bật trên nền xanh rừng và kem | | Morning Glory | `#7997ff` | `--color-morning-glory` | Inline text highlights, links, secondary icon accents, input focus — periwinkle mát mẻ làm dịu bảng màu ấm khi xuất hiện trong body copy |

# KeepGrading — Style Reference > Polaroids rải rác trong phòng tối **Theme:** dark KeepGrading là một portfolio editorial mang phong cách phòng tối: một canvas gần như đơn sắc hoàn toàn, nơi các bức ảnh trôi nổi như những khung hình rải rác trong khoảng không sâu thẳm. UI được thiết kế lặng lẽ có chủ đích để hình ảnh lên tiếng — chỉ có display type Cabinet Grotesk, đường viền trắng mảnh 1px, và một pill-shaped ghost control duy nhất làm thành phần giao diện. Không có điểm nhấn màu sắc, không gradient, không đổ bóng; toàn bộ hệ thống phân cấp thị giác được dẫn dắt bởi độ tương phản, tỷ lệ và khoảng trắng giữa các bức ảnh. Mật độ thoải mái nhưng nhịp dọc lỏng lẻo, với khoảng thở 48px giữa các dải và các khung hình được giữ cố định bởi một đường viền trắng 1px duy nhất. Các component là tối giản — một nav toggle hình tròn, logo wordmark, các thẻ ảnh nổi với góc bo mềm 160px, và pill buttons với bán kính 9999px — để nhiếp ảnh chiếm ưu thế trong trải nghiệm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Studio White | `#f8f8f8` | `--color-studio-white` | Văn bản chính, viền ghost-button, đường viền khung ảnh, nét nav icon — giọng nói ánh sáng duy nhất trong căn phòng tối | | Void Black | `#080808` | `--color-void-black` | Canvas trang, nền phía sau mọi thứ, phần điền khung ảnh giữa các bức ảnh | | Pure Black | `#000000` | `--color-pure-black` | Phần điền SVG icon, lớp bề mặt sâu nhất cho đồ họa inline và các dấu trang trí | | Bone White | `#f0f0f0` | `--color-bone-white` | Văn bản phụ mềm mại và các nét viền mảnh hỗ trợ khi màu trắng tinh khiết cảm thấy quá lâm sàng |

# Gleap — Style Reference > Editorial serif trên nền pastel SaaS — như một trang tạp chí design được render trong product UI. **Theme:** light Gleap vận hành một hệ thống editorial trên nền sáng: tông kem ấm trắng ngà, chữ gần đen, và hai điểm nhấn pastel (oải hương hồng nhạt và xanh bột) đóng vai trò highlight nhẹ nhàng thay vì màu thương hiệu mạnh. Điểm đặc trưng là sự kết hợp giữa editorial serif tương phản cao (PP Editorial New) cho hero và section headline với một geometric grotesk (Switzer) cho mọi thành phần chức năng — điều này khiến giọng nói marketing giống như một trang tạp chí trong khi product UI vẫn giữ tính thực dụng. Bề mặt phẳng với shadow rất nhẹ, card bo tròn rộng (24–42px), button nằm ở radius nhỏ (10px) với fill đen đặc hoặc pastel — sự tương phản giữa geometric control cứng cáp và bề mặt product mềm mại, rộng lớn tạo nên nhịp điệu cho toàn bộ hệ thống. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, filled dark CTA, border tương phản cao. Tạo neo typographic trên nền kem | | Graphite | `#333333` | `--color-graphite` | Secondary text và màu hairline border chủ đạo (336 lần sử dụng). Mang hệ thống cạnh cấu trúc | | Slate | `#7b7b7b` | `--color-slate` | Muted helper text và inactive link text. Dùng khi thông tin phụ cần lùi lại | | Mist | `#bcbcbc` | `--color-mist` | Badge border nhẹ và soft body border. Nằm giữa Graphite cấu trúc và canvas trong hệ thống phân cấp border |