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

# Perplexity AI — Style Reference > Garden of computational flora — technical interface blooming through botanical haze **Theme:** light Perplexity Computer — naturalistic interface camouflage. The design mimics a lush garden: white flower clusters (cards) float against softly blurred botanical photography, like UI elements composited onto nature footage. Warm sepia text (#271a00 — nearly brown) and cream surfaces (#faf8f5) create the impression of aged parchment overlaid on living greenery. Serif headlines at display sizes contrast with sans-serif UI, echoing the organic/digital tension. 4px and 12px radii appear across all elements except nav pills (40px), maintaining subtle roundness without full-pill uniformity. Generous whitespace (28-40px vertical rhythm) lets content breathe like clearings in foliage. The typeface suite — pplxSans for interface, pplxSerif for declarations — reinforces brand identity through custom letterforms rather than stock choices. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aged Sepia | `#271a00` | `--color-aged-sepia` | Primary text, borders, icons, strokes — the near-brown warmth softens digital harshness without sacrificing legibility. Appears across every UI context from nav to body to buttons. | | Parchment | `#faf8f5` | `--color-parchment` | Page backgrounds, card surfaces, heading text on dark — the cream canvas against which all content rests. Acts as both background and reversed foreground. | | Fog | `#d1cfc7` | `--color-fog` | Button fills, borders, dividers — a muted gray-beige midtone that bridges Parchment and Aged Sepia without introducing new chromatic energy. | | Absolute Black | `#000000` | `--color-absolute-black` | Footer backgrounds, high-contrast text inversion — appears sparingly, reserved for terminal anchoring at page bottom. |

# Basic.Space — Style Reference > curated gallery on white marble **Theme:** light Basic.Space is a curated gallery-commerce platform built on near-total achromatic restraint. White gallery walls, 2px-sharp product frames, and one electric blue (#0700ff) that appears only on the top announcement strip — a single chromatic interruption in an otherwise monochrome world. Typography is a custom geometric humanist (FTBasicSpace) used in three restrained weights, with tight negative letter-spacing that gives headlines a quietly confident voice. Components are gallery-light: pill-shaped controls, hairline #ebebeb dividers, no shadows, no rounded card corners. Layout is full-bleed horizontally-scrolling rails of product cards, evoking the experience of walking through a design museum where the objects are the heroes and the interface disappears. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Cobalt | `#0700ff` | `--color-electric-cobalt` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color | | Gallery Black | `#000000` | `--color-gallery-black` | Primary text, product titles, prices, navigation links, icon strokes, and dominant fill on collection overlay labels | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, product image backgrounds, and inverse text on dark imagery and the cobalt announcement bar | | Hairline Gray | `#ebebeb` | `--color-hairline-gray` | Primary border color, page canvas background, card dividers, list separators, input field backgrounds — the dominant structural neutral |

# Browserbase — Style Reference > editorial broadsheet kết hợp data terminal — một chấm cam nóng duy nhất tô điểm trên nền gần như đơn sắc với headline GT Planar cỡ lớn, bề mặt card pastel mềm, và metadata mono nhỏ. **Theme:** light Browserbase mang phong cách của một developer tool hướng dữ liệu nhưng khoác lên mình lớp áo editorial broadsheet: một canvas gần như đơn sắc được neo bởi một màu cam nóng duy nhất, chỉ dùng để nhấn mạnh typography chứ không bao giờ dùng cho button. Giao diện giữ sự yên tĩnh với các bề mặt đen, trắng và trắng ngà, trong khi card và feature block giới thiệu các tông pastel mềm — tím oải hương nhạt, xanh da trời, kem — để nhóm nội dung mà không cần dùng shadow. Display headline bằng GT Planar cỡ lớn nằm cạnh label GT Standard Mono nhỏ gọn, tạo nhịp điệu của một tạp chí kỹ thuật: những câu khẳng định mạnh mẽ xen kẽ với metadata chính xác. Pill button đen đặc (filled) đảm nhận mọi hành động chính; màu cam được dành riêng cho highlight box bên trong headline và footer band, biến màu thương hiệu thành dấu câu chứ không phải tín hiệu điều hướng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, filled action buttons, card borders, dividers — xương sống cấu trúc của toàn bộ giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, icon fills trên nền tối | | Faint Slate | `#f8fafc` | `--color-faint-slate` | Màu trắng ngà nhẹ cho logo strip cards, nền panel phụ, tông màu xen kẽ cho section | | Lavender Mist | `#e2e9f3` | `--color-lavender-mist` | Bề mặt feature card và tông nền section — xám lạnh mềm giúp nhóm nội dung mà không tạo cảm giác nặng nề |

# Filling Pieces — Style Reference > monochrome fashion editorial **Theme:** light Filling Pieces vận hành như một editorial thời trang đơn sắc: toàn bộ giao diện là thang xám, nên tiếng nói thương hiệu sống trong nhiếp ảnh và typography, không phải màu sắc. Một custom sans-serif duy nhất (favorit, weight 400/600) đảm nhận mọi nhãn, headline và tên sản phẩm, với tracking cố định -0.04em nén từng glyph vào một editorial lockup chặt chẽ. Display weight 100px là dấu câu duy nhất của hero — nó rất lớn, đặt trực tiếp lên ảnh full-bleed mà không có overlay card hay gradient. Bề mặt giữ ấm và phẳng: viền hairline #e5e7eb 1px, không shadow, không gradient, border-radius 8px được áp dụng đồng nhất cho input và button. Product cards phẳng trên nền canvas warm-gray; grid đọc như một trang tạp chí, không phải tường gạch ecommerce điển hình. Mọi element đều có mặt bằng cách im lặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Obsidian | `#000000` | `--color-obsidian` | Body text, icon, primary action button fill, footer ink — giá trị duy nhất mang cảm giác màu sắc, dùng với độ tương phản tối đa cho mọi affordance tương tác | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt chính cho card, input field, product tile và modal background; chữ trắng trên nền ảnh hero tối | | Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Viền 1px, divider, input outline, card edge — khung xương cấu trúc ngăn cách mọi bề mặt | | Stone | `#efefef` | `--color-stone` | Bề mặt phụ sau product grid, checkout band và footer — màu trung tính ấm nâng trang khỏi nền trắng tinh |

# 21 TSI — Style Reference > Crimson void, single silhouette — a high-fashion editorial spread where the UI dissolves into atmosphere. **Theme:** dark 21 TSI operates in the grammar of luxury fashion editorial: the interface itself is austere monochrome — white type, black canvas, hairline rules — while full-bleed crimson photography carries the entire emotional register. UI chrome is deliberately reduced to a single thin top divider, small uppercase wordmarks, and pill-bordered controls; nothing competes with the image. Typography is the structural skeleton: Saans at 12px for nav, then jumping to 106–245px for display — a near-vertical scale that makes individual headlines feel like runway installations rather than page headers. The system prefers silence over information density; every interactive element is a ghost, every frame is a photograph, and the only color that matters is whatever the lens captures. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Black Void | `#000000` | `--color-black-void` | Page canvas behind full-bleed imagery, button borders on inverted elements, deepest surface layer | | Paper White | `#ffffff` | `--color-paper-white` | Primary text, navigation labels, ghost-button borders, hairline rules, every UI stroke above imagery | | Smoke | `#4d4d4d` | `--color-smoke` | Muted secondary borders and dividers used when full white feels too hot against the photographic background | | Crimson Heat | `#b62b1a` | `--color-crimson-heat` | Dominant brand atmosphere from full-bleed editorial photography — the only chromatic note in the system, always carried by the image rather than applied to UI chrome |

# Control — Style Reference > Editorial Swiss grid meets creative tool **Theme:** light Control hoạt động như một công cụ thiết kế editorial: canvas trắng, đường viền đen cứng, và bảng màu gần như đơn sắc bị xuyên thủng bởi các điểm nhấn xanh lá, cam, và vàng tươi — trông như những vết highlight editorial. Điểm nhấn đặc trưng là sự tương phản typographic brutalism — display type Melange cỡ lớn (71–146px) với tracking gần như bằng 0, đặt cạnh label Favorit Mono uppercase siêu nhỏ (9–10px) với letter-spacing âm dày đặc. Mọi bề mặt đều phẳng; chiều sâu đến từ đường viền đen (1–2px), không phải từ đổ bóng. Thẩm mỹ này gợi một editorial spread Swiss được xây dựng lại cho phần mềm: neo vào grid, hình học không hề nao núng, và tự tin trong sự bất đối xứng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, đường viền cấu trúc, và các đường contour xác định mọi cạnh bề mặt | | Paper | `#ffffff` | `--color-paper` | Canvas trang, văn bản đảo màu trên bề mặt tối, và label button trên nền xanh lá | | Gridline | `#d2d2d2` | `--color-gridline` | Đường phân cách nhẹ và viền mờ trên bề mặt phụ | | Slate | `#3d3d3d` | `--color-slate` | Văn bản phụ và UI element bị tắt tiếng |

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

# Klarna ES — Style Reference > midnight gallery with candy accents — a near-black plum void opens onto a warm bone-white floor scattered with vibrant product cards, anchored by oversized geometric type and pill-shaped controls. **Theme:** light Klarna's visual system is a confident dark-meets-light duality: a near-black plum (#0b051d) anchors brand presence across the hero and display type, set against a warm bone-white canvas (#f9f8f5) that keeps content sections approachable rather than clinical. Oversized custom display typography at 90px commands the hero, while compact body text at 16px stays quiet and legible. Playful accent colors — bubblegum pink, lavender, lime, deep plum — appear as small punctuation on cards and CTAs, never as structural or background elements. Generous rounded corners (16-32px on cards, pill-shaped buttons), near-zero shadows, and hairline borders create a premium, almost gallery-like feel where depth comes from color contrast and scale, not from elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Plum | `#0b051d` | `--color-midnight-plum` | Violet supporting accent for decorative details and low-frequency emphasis. | | Deep Plum | `#2c2242` | `--color-deep-plum` | Accent card background — a slightly lifted version of Midnight Plum, used for dark-themed product/feature cards to create tonal variation within the dark family | | Lavender Mist | `#aa89f2` | `--color-lavender-mist` | Violet supporting accent for decorative details and low-frequency emphasis | | Lime Sherbet | `#e6ffa9` | `--color-lime-sherbet` | Accent card background — high-key lime used as a rotating card surface color. High contrast against Midnight Plum text makes it ideal for dark-on-light product cards |

# Discord — Style Reference > Thế giới game ẩn sau một chat bubble — mỗi section là một không gian khép kín với ánh sáng và dàn nhân vật riêng. **Theme:** dark Màu xanh vũ trụ sâu thẳm tràn ngập mọi section như bầu trời sao lúc 2 giờ sáng — không phải lựa chọn background mà là một môi trường tổng thể. Hero lao vào gradient chàm-đen đậm đặc với nhân vật 3D, màn hình sản phẩm và linh vật nổi, khiến UI trông như thế giới game chứ không phải trang marketing. Blurple (#5865F2) — màu chủ đạo của Discord — chỉ xuất hiện trên primary CTA, tạo điểm nhấn có kiểm soát trong bầu không khí xanh-đen. Typography đảm nhận vai trò chính: ABC Ginto Nord weight 800 với tracking -0.01em dồn headline thành các khối in hoa dày đặc, cảm giác như kim loại dập nổi, trong khi body copy ở 16px/1.5 vẫn giữ giọng điệu trò chuyện. Hiệu ứng tổng thể là một không gian gaming-native, nơi mỗi section là một sân khấu nhập vai riêng, không phải cột nội dung. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Blurple | `#5865f2` | `--color-blurple` | Nút CTA chính, brand icon, trạng thái active — điểm neo màu sắc duy nhất trong không gian xanh-đen gần như đơn sắc, tạo nhận diện tức thì khi là phần tử bão hòa duy nhất trong layout | | Dark Blurple | `#3442d9` | `--color-dark-blurple` | Trạng thái hover cho nút chính, trạng thái pressed | | Hover Blurple | `#8891f2` | `--color-hover-blurple` | Màu tint hover cho nút, tương tác blurple nâng cao | | Spring Green | `#57f287` | `--color-spring-green` | Chỉ báo trạng thái online, trạng thái thành công |

# Sparkles — Style Reference > Tờ broadsheet mực-in-trên-giấy được canh giữ bởi các linh vật bút chì màu **Theme:** light Sparkles vận hành trên bảng màu gần như đơn sắc, chỉ bị ngắt quãng bởi một khối màu xanh lá duy nhất ở footer — một sự kiềm chế có chủ đích, mang phong cách editorial, khiến các minh họa nhân vật vẽ tay ngộ nghĩnh phải gánh vác toàn bộ trọng trách màu sắc. Gelica (một display serif dày dặn) đảm nhận mọi headline ở weight 600 với line-height gần như bằng 0, tạo ra những khoảnh khắc editorial chặt chẽ, dứt khoát, tương phản với sans-serif thân chữ và UI text dãn rộng của Articulat CF. Giao diện phẳng, dựa trên đường viền, và sử dụng #18181b làm 'mực' phổ quát — cho heading, nav text, icon, và nút filled duy nhất — nhờ đó mắt người đọc nhìn trang như một tờ broadsheet in ấn. Cards và input nằm trên nền trắng (#ffffff) với đường kẻ tóc #e5e5e5 và góc bo 10px; elevation gần như không tồn tại. Dấu ấn thị giác là sự va chạm giữa typesetting khắc khổ và các nhân vật hoạt hình màu bút chì sáp ẩn mình ở lề trang. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#0a0a0a` | `--color-ink-black` | Primary text, foreground sâu nhất — mực tuyệt đối cho body copy và legal/footer type | | Zinc Ink | `#18181b` | `--color-zinc-ink` | Headlines, nav text, icons, nền nút filled — mực tương tác phổ quát | | Slate 700 | `#27272a` | `--color-slate-700` | Body text emphasis, nền input fill cho dark/inverted inputs | | Slate 600 | `#3f3f46` | `--color-slate-600` | Secondary body text, input borders, subtle button borders |

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

# Quicken — Style Reference > electric violet trên nền white marble **Theme:** mixed Design system của Quicken xoay quanh một màu electric violet duy nhất — #471cff rực rỡ — đóng vai trò là nguồn năng lượng cho mọi thành phần tương tác trên nền canvas trắng sạch. Cá tính thị giác mang phong cách fintech đầy tự tin: một custom geometric sans (Haffer) tạo giọng điệu với negative tracking dày đặc, càng thắt chặt hơn khi type lớn dần, tạo cảm giác đậm đặc và uy quyền mà không cần weight nặng. Các section màu violet đậm (#0f0733) xen kẽ với các dải trắng để tạo nhịp điệu, trong khi viền card màu lavender nhẹ (#dbd3ff, #bbc5fa) thay thế các divider xám thông thường và củng cố brand identity ở mọi cạnh. Các component thiên về bo tròn và hình pill: card dùng góc 16px, button kéo dài đến bán kính 400px, và shadow gần như vắng mặt — chiều sâu đến từ độ tương phản màu sắc và xử lý viền, không phải từ elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Voltage Violet | `#471cff` | `--color-voltage-violet` | Primary action buttons, nav items đang active, key links, brand emphasis — xung điện màu duy nhất của giao diện; mọi thứ khác đều phải nhường chỗ | | Deep Iris | `#0f0733` | `--color-deep-iris` | Nền section tối, hero canvas, text tương phản cao trên nền sáng — đối trọng màu nửa đêm neo giữ các dải tối xen kẽ | | Signal Red | `#eb0130` | `--color-signal-red` | Điểm nhấn khuyến mãi, chỉ báo giảm giá/khẩn cấp, stroke nổi bật — dùng có chừng mực để thu hút sự chú ý mà không cạnh tranh với violet chính | | Lilac Whisper | `#dbd3ff` | `--color-lilac-whisper` | Viền card và container mềm mại — cạnh violet tương phản thấp tạo thương hiệu cho đường viền mà không thêm trọng lượng thị giác |

# Your workplace has the answer. Just ask Dala for it. — Style Reference > Particle cosmos on a void — violet pulse against infinite black **Theme:** dark Dala is a knowledge-management product rendered as a dark cosmic field: a pure black canvas, a single saturated violet as the only authority color, and white type that glows against the void. The interface recedes — sparse text blocks, hairline borders, pill controls — while a massive particle constellation dominates the visual real estate, its thousands of tiny geometric shapes (triangles, circles, diamonds) clustering into organic forms. Typography is stretched and ultra-tight at display sizes (negative tracking pushes letters almost together) but opens up at body sizes (slight positive tracking aids legibility on black). Components feel lightweight and fast: no shadows, no gradients, no card elevation — depth comes purely from color contrast and the negative space of the void. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page background, primary canvas — the dark field where the constellation lives | | Bone | `#ffffff` | `--color-bone` | Primary text, icon strokes, hairlines, card borders, nav text — the only light that reads on the void | | Ash | `#bdbdbd` | `--color-ash` | Secondary muted text, subtle border accents — quieter than bone, still legible on black | | Smoke | `#9a9a9a` | `--color-smoke` | Tertiary text, nav link resting state, low-emphasis dividers — fades into the background |

# BUTT STUDIO — Style Reference > gallery wall với một serif wordmark khổng lồ **Theme:** light BUTT Studio là một portfolio mang phong cách editorial, nơi chữ được xem như kiến trúc: một wordmark Caslon khổng lồ trải dài từ mép này sang mép kia ở đầu trang, bị cắt ngang bởi một hình minh họa hữu cơ đan xuyên qua các ký tự. Bên dưới hero, hệ thống thu gọn thành một ledger ba cột mang phong cách clinical với thông tin liên hệ, khách hàng và tính năng bằng sans-serif nhẹ nhàng, sau đó mở ra thành grid dự án hai cột rộng rãi. Màu sắc gần như vắng bóng hoàn toàn — mực đen mờ trên nền giấy xám ấm, với một badge chàm đậm duy nhất làm điểm nhấn màu sắc duy nhất. Cảm giác như một tạp chí in bỗng nhiên sống động: serif display đầy tự tin, sans body tiện dụng, không gradient, không chrome bo tròn, không bóng đổ trang trí. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền, button outlines, structural strokes — màu duy nhất mang thông tin | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, thumbnail covers, văn bản đảo màu trên nền tối | | Carbon | `#131313` | `--color-carbon` | Nền tile dự án tối, bề mặt gần đen cho video panels | | Bone Gray | `#e0e0e0` | `--color-bone-gray` | Canvas trang, neutral button fills — nền xám ấm mà toàn bộ bố cục nằm trên đó |

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

# Morflax — Style Reference > Porcelain gallery, one blue spark — a near-black nav bar hovers above a white room that briefly blushes lavender, while every action and border stays in grayscale until a single cobalt button confirms the moment. **Theme:** light Morflax reads as a monochrome showroom with a single blue beacon: a near-black navigation bar floats above a porcelain-white canvas that is briefly washed in soft lavender at the hero, then returns to a crisp neutral white for every content section. Color is rationed — vivid blue (#298ef5) earns its presence on exactly one filled action, while everything else (borders, body text, surfaces) is graded grays from #e5e7eb hairlines through #171718 ink. The typography pairs Inter's clinical neutrality at 400/500/600 with a wide-tracked display treatment (0.05em) reserved for the brand wordmark, and the hero exploits oversized type that bleeds off-canvas. Components are quiet and rounded: pill buttons, 16–24px card radii, soft 25px-blur shadows — the only visual noise comes from the 3D-rendered product cards, which carry the chromatic energy the interface refuses to. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt Spark | `#298ef5` | `--color-cobalt-spark` | Primary filled action, active states, brand accent — the sole chromatic voice in an otherwise monochrome system, so it must appear sparingly to retain its charge | | Obsidian Bar | `#333333` | `--color-obsidian-bar` | Navigation background — dark anchor that frames the light canvas below | | Ink | `#171718` | `--color-ink` | Primary headings and body text — near-black with a barely-warm cast that softens against pure #000 | | Carbon | `#25282b` | `--color-carbon` | Icon strokes, secondary text, UI graphics — a touch cooler than Ink for icon differentiation |

# Tinybird — Style Reference > terminal developer lúc nửa đêm — khoảng đen vô tận, một con trỏ xanh điện, thì thầm monospace **Theme:** dark Tinybird mang thẩm mỹ developer console dark-mode: canvas gần đen, một điểm nhấn xanh điện hoạt động như giọng màu duy nhất trên màn hình, và sự phân chia nghiêm ngặt giữa Roboto (humanist) cho văn xuôi và Roboto Mono (monospaced) cho tag, label và code. Giao diện mang chất terminal — badge monospace nằm trong dấu ngoặc vuông như log entry, và điểm nhấn xanh hoạt động như con trỏ nhấp nháy thay vì màu thương hiệu, được dùng tiết kiệm cho CTA, link và highlight inline thỉnh thoảng. Surface phẳng, border siêu mảnh (hairline), và chiều cao (elevation) đạt được qua lớp màu tối đậm dần thay vì đổ bóng. Kết quả là một product page có cảm giác được kỹ thuật hóa hơn là tiếp thị, tự tin trong sự tiết chế. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Cursor Green | `#27f795` | `--color-cursor-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính | | Hover Green | `#008060` | `--color-hover-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính | | Terminal Red | `#800000` | `--color-terminal-red` | Điểm nhấn đỏ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent phụ, không phải màu trạng thái | | Pure White | `#ffffff` | `--color-pure-white` | Text chính và headline. Tương phản tối đa trên canvas gần đen để dễ đọc ngay lập tức |

# Google for Education — Style Reference > Open notebook in morning light — a digital classroom where whitespace, type, and one blue accent do all the work. **Theme:** light Google for Education operates as a restrained utility surface: a near-white canvas anchored by two type families (Google Sans Text for body and UI, Google Sans Display for headlines) and a single brand blue that functions as the system's only chromatic voice. Hierarchy comes from scale jumps and tracking — the 80px display headline is tightly tracked, while 12–16px body text opens up with positive letter-spacing for small-size legibility. Surfaces avoid decorative gradients and heavy shadows, relying on generous whitespace, 24–28px card radii, and pill-shaped controls to feel approachable rather than corporate. Color is functional punctuation, not atmosphere: green identifies the Classroom brand mark, blue marks links and active states, and everything else stays in a narrow gray scale (#202124 → #3c4043 → #5f6368 → #dadce0). ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas White | `#f8f9fa` | `--color-canvas-white` | Page background, card surfaces, section bands — the off-white ground that prevents harshness against pure white product screenshots | | Charcoal Ink | `#202124` | `--color-charcoal-ink` | Primary text, display headlines, active icon strokes — the deepest readable black-blue for maximum hierarchy | | Graphite | `#3c4043` | `--color-graphite` | Secondary headings, nav text, strong body — one step lighter than charcoal for sub-headings and navigation labels | | Slate | `#5f6368` | `--color-slate` | Muted body text, helper copy, icon glyphs, breadcrumb separators, footer micro-copy |

# COS — Style Reference > phòng trưng bày thời trang tường trắng **Theme:** light COS sử dụng ngôn ngữ thị giác của một phòng trưng bày nghệ thuật đương đại: những bức tường trắng rộng lớn, ảnh đơn sắc khổ lớn, và typography không cản trở người mẫu. Giao diện gần như không màu — 97% achromatic — dùng màu gần đen (#080808) trên nền trắng tinh (#ffffff) làm điểm tương phản cấu trúc duy nhất, với một điểm đỏ duy nhất (#c80000) dành riêng làm điểm nhấn nhẹ nhàng cho những khoảnh khắc cần sự khẩn trương nhưng không ồn ào. Khoảng cách rộng rãi và mang phong cách editorial, section padding lên tới 135px, và các component hòa vào trang: đường viền siêu mảnh (hairline) màu #dadada, không đổ bóng, không gradient, không bo góc. Typography (SuisseIntl) là vật trang trí duy nhất — một họ grotesque duy nhất xuyên suốt từ micro-label 12px đến category statement 35px, tracking hơi dương để tạo cảm giác như bảng chỉ dẫn in ấn trong gallery. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Bề mặt nền sáng cho các nền phụ và phân cách section. Không dùng làm màu CTA chính | | Ink Black | `#080808` | `--color-ink-black` | Text chính, icon, link, navigation type, viền button, logo, footer text — mềm hơn đen tuyền để ảnh không bị chói khi đặt cạnh | | True Black | `#000000` | `--color-true-black` | Text overlay trên ảnh tối, body copy, label button — màu đen tuyền dành cho những khoảnh khắc typography tương phản cao nhất | | Mist Gray | `#dadada` | `--color-mist-gray` | Đường viền hairline, gạch chân input, divider nhẹ, outline trạng thái disabled — màu trung tính nhẹ nhất, chỉ thấy được nhờ những gì nó phân cách |

# Dialog — Style Reference > Neutral showroom với một price tag ấm áp duy nhất. Mọi bề mặt đều là một tông off-white khác nhau; CTA màu cam là màu duy nhất trong căn phòng. **Theme:** light Dialog mang cảm giác như một sơ đồ mặt bằng bán lẻ cao cấp được thể hiện dưới dạng kỹ thuật số — trung tính, thoáng đãng và thư thái, với một điểm nhấn ấm áp đóng vai trò như một miếng dán price tag trên vải lanh trắng. Nền gần trắng #f7f7f7 và các card trắng tinh tạo ra một hệ thống phân cấp bề mặt tinh tế đến mức nó đọc như một không gian liên tục thay vì độ sâu phân lớp. PP Radio Grotesk Light ở 50-70px là điểm nhấn xác định: một geometric grotesque được thể hiện ở weight nhẹ nhất khiến các headline lớn có cảm giác như viết tay trên giấy thay vì đóng dấu — zero aggression, maximum presence. Màu cam duy nhất #f69251 chỉ xuất hiện trên các CTA, thu hút sự chú ý giống như một tag giảm giá nổi bật trong một showroom trung tính. Các nút hình pill (28px radius) nổi trên các container góc vuông, là hình dạng mềm duy nhất trong một hệ thống hình chữ nhật khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Tangerine Tag | `#f69251` | `--color-tangerine-tag` | Nút CTA chính, pill 'Book a demo' — màu cam ấm trên nền gần trắng báo hiệu hành động mà không tạo cảm giác cấp bách, gợi nhớ bảng màu của nhãn hàng bán lẻ cao cấp | | Midnight Ink | `#181825` | `--color-midnight-ink` | Body text, đường viền — gần đen với một chút xanh lam khó nhận thấy, mềm hơn đen thuần để đọc văn bản dài | | Graphite | `#484758` | `--color-graphite` | Body text phụ, mô tả copy, thông tin meta | | Deep Slate | `#242433` | `--color-deep-slate` | Nền bề mặt tối, card overlay trong các section tối |

# Arcade — Style Reference > Gợn sóng xanh điện trên nền giấy trắng. Một editorial canvas sạch sẽ, nơi một mảng xanh dương đậm duy nhất chảy như chất lỏng từ góc này sang góc khác, khiến mọi phần tử tương tác đều có cảm giác như đang bật sáng. **Theme:** light Hệ thống thị giác của Arcade là một bề mặt sản phẩm trên nền canvas trắng, được điểm nhấn bằng một màu xanh điện bão hòa (#2142e7) và một gradient xanh chảy đặc trưng làm neo cho hero. Typography sử dụng Inter trên mọi kích thước, với trọng lượng tập trung ở dải 400–700 và tracking âm chặt trên các display size giúp chữ co lại một cách quang học khi phóng to. Giao diện mang phong cách chức năng và yên tĩnh: các khối nội dung xám trên nền trắng, border mảnh, border-radius nhỏ gọn 12–16px, và bóng đổ pha xám lạnh dựa trên rgba(17,24,39,...) giữ cho mọi bề mặt nâng lên luôn đúng thương hiệu. Màu sắc được phân bổ có chủ đích — một màu xanh duy nhất đảm nhận vai trò accent, CTA và focus — mọi thứ còn lại đều là thang màu trung tính. Mật độ thoải mái nhưng không quá rộng: khoảng cách vi mô chủ yếu là 8px và 12px, khoảng cách giữa các section là 32–48px. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Voltage Blue | `#2142e7` | `--color-voltage-blue` | Accent xanh tím 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 thành màu CTA chính | | Deep Voltage | `#182fa5` | `--color-deep-voltage` | Accent xanh tím 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 thành màu CTA chính | | Midnight Ink | `#111827` | `--color-midnight-ink` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp thành màu CTA chính | | Slate 600 | `#4b5563` | `--color-slate-600` | Body text, nav links, icon fills, card secondary copy — màu chữ chủ đạo trên toàn trang |

# Munro Partners — Style Reference > Editorial parchment dưới ánh sáng alpine — một nền cream ấm áp chứa đựng khoảng trắng rộng rãi, một grotesque siêu nhẹ, và ảnh núi non full-bleed nơi cảnh vật tự kể chuyện còn giao diện gần như vô hình. **Theme:** light Munro Partners vận hành ở một tông editorial trầm lắng: nền cream ấm (#fff9ee) chứa khoảng trắng rộng rãi, mọi thành phần giao diện được viền bằng một màu nâu sẫm ấm duy nhất (#3f322a) đọc như mực chứ không phải đen. Typography Neue Haas Grotesk được set tight và nhỏ, với display headline 68px weight 400 thì thầm bên cạnh ảnh núi non full-bleed thay vì la hét. Một màu teal đậm duy nhất (#004e4e) dành riêng cho những khoảnh khắc tương tác quan trọng nhất, trong khi violet nhạt, aubergine và xanh băng xuất hiện dưới dạng viền accent mảnh trên card và data treatments. Hệ thống này giống một bản báo cáo thường niên in ấn hơn là một sản phẩm tài chính — tĩnh lặng, rộng rãi và đủ tự tin để để hình ảnh phong cảnh gánh vác trọng lượng cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Parchment | `#fff9ee` | `--color-cream-parchment` | Canvas trang, nền section, bề mặt card, nav bar fill — màu off-white ấm định nghĩa toàn bộ mood và thay thế cho pure white thông thường | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card được nâng lên, container nhúng video, panel tương phản trên nền cream | | Bark Brown | `#3f322a` | `--color-bark-brown` | Text chính, tất cả border, nav links, body copy, headings — thay thế màu đen trong toàn bộ hệ thống, tạo cho mỗi dòng chữ chất mực ấm | | Warm Gray | `#9f968c` | `--color-warm-gray` | Text phụ, border nhẹ, nav dividers — tone trung gian nối giữa Bark Brown headings và divider nhạt hơn |

# Thisispam — Style Reference > butter-yellow editorial broadsheet — một layout kiểu Swiss-press, nơi một tông giấy kem ấm duy nhất, chữ sắc như dao cạo, và hệ thống bề mặt zero-chrome biến mỗi lần cuộn thành một trang in. **Theme:** light Thisispam vận hành như một hệ thống thiết kế editorial chịu ảnh hưởng từ Thụy Sĩ: một canvas màu vàng bơ ấm kết hợp với typography mực đen sắc nét và gần như zero chrome. Ngôn ngữ thị giác vay mượn từ broadsheet in ấn — headline display lớn, tự tin nằm trong cụm uppercase khít, trong khi ảnh dự án trôi nổi trong một grid nghiêm ngặt với metadata dạng caption bên dưới. Màu sắc được sử dụng cực kỳ kỷ luật: #fff3b8 đóng vai trò vừa là nền trang vừa là điểm nhấn, để màu đen gánh toàn bộ chữ và màu trắng phân tách các khối nội dung. Không đổ bóng, không bo góc, không gradient — hệ thống dựa vào scale typography, khoảng trắng rộng rãi, và nền ấm bất thường để tạo bầu không khí. Các section xen kẽ giữa giấy vàng, trắng tinh, và đen mực, tạo nên một nhịp điệu editorial có tiết tấu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Butter Paper | `#fff3b8` | `--color-butter-paper` | Canvas trang chủ đạo cho toàn bộ section, chữ nhấn mạnh trên nền ảnh tối, đường viền link dạng hairline, và dải thứ ba trong stack bề mặt — một tông kem ấm thay thế màu trắng làm nền không khí của thiết kế | | Ink Black | `#000000` | `--color-ink-black` | Màu chữ chính trên mọi bề mặt, đường viền hairline và border cấu trúc, nền footer và dark-band — mọi chữ, đường kẻ, và icon đều đọc như mực in trên nền kem hoặc trắng | | Paper White | `#ffffff` | `--color-paper-white` | Nền section trắng và bề mặt card phân tách các dải vàng, chữ inverse trên footer đen, và bề mặt modal ngôn ngữ | | Wheat | `#f1e4a4` | `--color-wheat` | Màu nền input field mờ trên canvas vàng — một tông kem hơi đậm hơn giúp form field lùi vào nền ấm mà không mất phân cấp bề mặt |

# Discover — Style Reference > Type museum trên nền marble trắng — wordmark gần như đen, một thì thầm của san hô, và mọi thứ khác đều lùi về phía sau. **Theme:** light Fonts Ninja là một gallery gần như đơn sắc dành cho letterforms, nơi điểm nhấn màu duy nhất là một tông san hô ấm áp dùng để đánh dấu các hành động. Canvas gần như trắng và luôn giữ yên lặng; type là nhân vật chính, được trình bày ở tỉ lệ cực lớn và kết hợp với khoảng trống rộng rãi. Cards là các panel trắng bo góc mềm nổi trên nền đổ bóng nhẹ, và mọi element tương tác đều phải "kiếm" được màu sắc của nó — hầu hết UI là mực trên giấy, và màu san hô chỉ xuất hiện khi có thứ gì đó muốn được click. Mật độ dày nhưng bố cục vẫn thoáng vì margin lớn và nhịp điệu được đo bằng các bước tăng 10px và 24px thay vì các chồng 4-8px chặt chẽ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#121212` | `--color-ink` | Văn bản chính, border card, icon strokes, divider mảnh. Màu gần đen pha ấm được chọn thay vì #000 để làm mềm độ tương phản trên nền trắng mà không mất đi tính uy quyền | | Canvas | `#ffffff` | `--color-canvas` | Border mảnh, divider, đường viền input, và cạnh card trên nền sáng. Không dùng làm màu CTA chính | | Fog | `#dbdada` | `--color-fog` | Tông đổ bóng xung quanh, nền mờ nhạt, tạo độ nổi bề mặt tinh tế. Mang theo đổ bóng alpha 0.16 giúp nâng card lên khỏi canvas | | Slate | `#8e8e93` | `--color-slate` | Body text phụ, metadata đã giảm độ nổi bật, border nav không active, copy trợ giúp |