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

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

# Valo — Style Reference > noir observatory at midnight — weight-300 typography floats on pure black while a single teal-violet gradient passes through like a laser line across the room. **Theme:** dark Valo runs on a noir observatory aesthetic: deep-black canvas, a single custom serif-less voice at whisper weight (300), and one luminous blue-teal-violet gradient used as deliberate punctuation rather than decoration. Typography does the heavy lifting — 100px display headlines with tight negative tracking feel like illuminated ink on obsidian, while the rest of the interface stays nearly invisible. The gradient appears in exactly three roles: a single accent word inside a headline, a thin floating ring/torus visual, and a wash at the page foot — never as a button fill or panel background. Components are flat, hairline-bordered, and borderless where possible; interaction is signaled by circular arrow buttons and numbered sequencing, not by color or shadow. Every screen should feel like a page torn from a dark scientific monograph: quiet, confident, with one moment of light. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, hero background, all primary surface area. Sets the dark-stage tone for every screen | | Bone | `#e5e7eb` | `--color-bone` | Hairline borders, dividers, and muted secondary text. The workhorse neutral that defines edges without adding visual weight | | Paper | `#ffffff` | `--color-paper` | Primary headings, body text, nav links, and icon strokes. Maximum contrast against Void for clear information hierarchy | | Graphite | `#4d4d4d` | `--color-graphite` | Subtle nav borders and disabled/inactive state lines. Sits between Void and Bone for low-emphasis structural lines |

# VSCO® — Style Reference > Monochrome gallery wall — a black-and-white photo exhibition where a single warm spotlight makes the next action glow. **Theme:** mixed VSCO's visual system reads as a monochrome photography gallery: a near-pure black-and-white canvas where a single warm amber accent punctuates action. Display type is narrow, geometric, and enormous — hero headlines push 89-98px, commanding attention through scale and tight tracking rather than through color or ornament. The palette stays disciplined: white sections frame black product bands, and full-bleed photography carries emotional weight that decoration never tries to. Buttons are pill-shaped and unflinching — black fills for default actions, amber for the single moment of warmth. The design is deliberately flat: no shadows, no gradients, no skeuomorphic depth. Elevation comes from surface contrast (white → black bands) and image bleed, not from layered depth effects. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Photo Black | `#000000` | `--color-photo-black` | Body text, filled buttons, dark section backgrounds, nav text, borders, icon strokes — the dominant structural color across all surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, hero background, footer background, text on dark surfaces, nav fill — the primary light surface | | Fog Gray | `#f2f2f2` | `--color-fog-gray` | Subtle alternate section backgrounds, hairline washes — barely-there surface differentiation | | Graphite | `#737373` | `--color-graphite` | Secondary text, footer link text, muted labels — the first step down from body black |

# VALIENTE BRANDS — Style Reference > Tín hiệu khói trên nền đất sét phơi nắng. Một mảng đỏ cam khẩn cấp duy nhất gào lên giữa cánh đồng peach mờ ấm áp, được giữ chặt bởi một neo-grotesque nguyên khối và hầu như không có gì khác. **Theme:** light Valiente Brands là một broadcast brutalist — một tín hiệu chromatic đơn lẻ (đỏ cam rực rỡ) bắn ra trên nền canvas đất sét ấm nắng, hầu như không có bất kỳ xử lý bề mặt UI nào. Trang web là một scroll dọc với type cỡ lớn mang cảm giác monospace, navigation label neo ở góc, full-bleed cinematic video stills và portrait grid. Thẩm mỹ mượn từ biển báo khẩn cấp và tờ proof của thợ sắp chữ: mọi thứ đều in hoa, tracking âm mạnh ở kích thước display, và tước bỏ mọi trang trí. Không có card, không shadow, không gradient, không góc bo tròn — toàn bộ interface đọc như một tờ broadside in duy nhất, nơi một màu làm tất cả. White space và type scale đảm nhận hệ thống phân cấp, không phải container hay elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Signal Flare | `#ff1a00` | `--color-signal-flare` | Màu chromatic duy nhất trong hệ thống — dùng cho logo, toàn bộ navigation, body text, heading, icon, border và video play affordance. Đồng thời đóng vai trò là brand mark và foreground text color | | Sun-Baked Canvas | `#e7a196` | `--color-sun-baked-canvas` | Nền trang — một màu clay-peach ấm, dịu, làm mềm cường độ của đỏ và tạo cho toàn bộ site bầu không khí như sóng nhiệt. Mọi bề mặt mặc định đều nằm trên tông màu này | | Midnight Frame | `#0a0a0a` | `--color-midnight-frame` | Chỉ dành riêng cho các section full-bleed video và photography — xuất hiện dưới dạng khung tối xung quanh media được nhúng, không bao giờ là bề mặt UI hay text color |

# Upstash — Style Reference > Terminal màu ngọc lục bảo trong xưởng làm việc ngập nắng — bề mặt trắng sáng với một điểm nhấn xanh đậm duy nhất khiến mọi thao tác đều cảm giác như được bật lên. **Theme:** light Upstash là nền tảng dữ liệu ưu tiên developer với thẩm mỹ xưởng làm việc sáng, thoáng: canvas trắng, viền siêu mảnh (hairline borders), và một điểm nhấn xanh ngọc lục bảo duy nhất làm công việc của hàng chục màu sắc. Thương hiệu dùng màu xanh rừng sâu (#022c22) cho toàn bộ văn bản — không phải đen — mang đến cho mọi màn hình một hơi ấm hữu cơ tinh tế trong khi vẫn giữ bản sắc kỹ thuật rõ ràng. Headline cực lớn (lên đến 180px) sử dụng display cut dạng nén của Inter Tight với tracking dày, tạo cảm giác về quy mô kỹ thuật đầy tự tin. Các component được thiết kế nhẹ nhàng có chủ đích: pill-shaped controls chiếm ưu thế, border chỉ 1px và gần như vô hình, shadow giảm xuống mức thì thầm (0 1px 2px ở độ mờ 5%). Kết quả là một bề mặt lùi lại để code, logo và product chrome có thể lên tiếng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#022c22` | `--color-forest-ink` | Toàn bộ văn bản, heading và icon strokes — màu xanh đậm bão hòa thấp thay thế màu đen trong toàn bộ giao diện, mang đến cho hệ thống hơi ấm kỹ thuật hữu cơ | | Emerald Pulse | `linear-gradient(to right, #007a55, #00bc7d, #f59e0b)` | `--color-emerald-pulse` | Đ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; gradient Hero headline chảy từ xanh rừng qua ngọc lục bảo đến hổ phách — làm cho display wordmark trở nên sống động | | Pine | `#007a55` | `--color-pine` | Màu xanh thương hiệu thứ cấp cho trạng thái button tối hơn, link text và icon outlines khi cần trọng lượng nặng hơn Forest Ink | | Mint Glow | `#34d399` | `--color-mint-glow` | Màu xanh nhấn sáng cho icon thứ cấp, highlight trang trí và hover state washes |

# Uniswap — Style Reference > Swap terminal kẹo bông gòn trên nền trắng. Những điểm nhấn magenta rực rỡ xuyên qua giao diện vốn không màu, lơ lửng, trong khi các quả cầu màu mềm mại trôi nổi ở nền như tiền tệ được hiện hình. **Theme:** light Uniswap mang thẩm mỹ swap terminal nhẹ nhàng, thoáng đãng: một canvas gần như trắng, nơi một màu thương hiệu magenta-hồng rực rỡ duy nhất mang mọi tín hiệu tương tác, được bao quanh bởi các quả cầu màu mềm mại lơ lửng, tạo cho trang một bầu không khí vui tươi, không trọng lượng. Typography tự tin và chặt chẽ — một display face tùy chỉnh (Basel) ở weight gần đen, với weight 485 độc đáo nằm giữa regular và medium, tạo cảm giác nén nhẹ, hiện đại trên cả display copy và UI copy. Các component nhỏ gọn và bo tròn — radius 20px trên swap cards, 16px trên buttons, pill shapes cho tokens — với shadow cực nhẹ giúp bề mặt trắng thoáng đãng. Trải nghiệm tổng thể giống như một trung tâm điều khiển DeFi được thể hiện bằng không khí pastel: đủ cấu trúc để tin tưởng giao dịch tiền, đủ màu sắc để cảm thấy sống động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Uniswap Magenta | `#ff37c7` | `--color-uniswap-magenta` | Accent hồng hỗ trợ 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 | | Ink | `#131313` | `--color-ink` | Văn bản chính, nav labels, headings, body copy, và icon strokes mặc định — gần đen thay vì đen tuyền để đọc mềm hơn | | Charcoal | `#222222` | `--color-charcoal` | Văn bản phụ và border UI đậm khi cần thêm trọng lượng mà không dùng đen tuyền | | Steel | `#6a6a6a` | `--color-steel` | Helper text mờ, secondary labels, inactive nav items, và supporting copy |

# Uizard — Style Reference > violet aurora over obsidian — a single charged accent glowing against an ink-dark product canvas **Theme:** dark Uizard operates as a midnight creative studio: near-black canvases absorb attention while a single violet glow (#a881fe) acts as the room's neon sign, drawing the eye to generation moments. The interface stays overwhelmingly achromatic — white type, graphite borders, ink-black surfaces — so that the purple accent reads as functional electricity, not decoration. Typography is confident and modern: Satoshi Variable carries the product voice at comfortable weights, while Clash Grotesk breaks through at display scale for hero headlines with tight tracking. Components feel contained and architectural — cards with hairline graphite borders, pills and inputs softened to 8-12px radii, and a signature purple outer-glow shadow on the primary action that makes it appear to emit light rather than sit on a surface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Violet Glow | `#a881fe` | `--color-violet-glow` | Primary action fill, brand accent, hero glow origin, logo mark — the charged purple that signals generation and AI intent | | Deep Iris | `linear-gradient(0deg, rgb(100,25,255), rgb(168,129,254))` | `--color-deep-iris` | Gradient deep stop, brand purple core — anchors hero radial bloom and logo gradient ramp | | Soft Lilac | `linear-gradient(189.47deg, rgb(204,178,255) 4.76%, rgb(100,25,255) 92.85%)` | `--color-soft-lilac` | Gradient highlight stop — outer edge of brand gradient where violet dissolves into the dark canvas | | Signal Blue | `#1e90ff` | `--color-signal-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |

# Udemy — Style Reference > Modern classroom whiteboard with violet ink. **Theme:** light Udemy reads as a calm, instructive marketplace: white canvas with soft cool-gray surfaces, a near-black ink scale for type, and two chromatic accents — a signature violet and a warm orange — that always appear as outlined borders or small marks rather than filled panels. Components are flat and lightweight, leaning on 8px radii and hairline borders instead of heavy elevation. A 3D-illustration vocabulary (soft clay-like product objects, isometric shapes, saturated accent pops) carries the personality, while the UI itself stays disciplined and instructional. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#2a2b3f` | `--color-ink` | Primary text, heading strokes, default icon strokes, body copy | | Obsidian | `#202230` | `--color-obsidian` | Card backgrounds in dark sections, inverted surfaces, footer panel | | Graphite | `#33364a` | `--color-graphite` | Body-level dark surfaces, secondary panel fills | | Slate | `#3d4055` | `--color-slate` | Card borders and muted dark backgrounds |

# Typewolf — Style Reference > Warm parchment typography atelier. Every element is a brownish-ink stamp on dusty rose paper, with no color allowed to compete with the type. **Theme:** light Typewolf reads as a warm, editorial type specimen magazine pressed into a website: a dusty rose canvas (#f8f5f5) supports white rectangular cards in a two-column grid, all anchored by brownish-ink text rather than any chromatic accent system. The palette is deliberately near-monochromatic — a dark warm brown (#443235) for body copy and headlines, a slightly lighter brown (#654a4e) for nav and secondary links, and a single muted dusty rose (#916a70) reserved for borders and quiet emphasis. Typography carries the entire identity: a transitional serif (Domaine Text) for body, an ultra-heavy condensed sans (Dia) for ALL-CAPS micro-labels with -0.03em tracking, and a high-contrast display serif (Domaine Display Narrow) for editorial headlines. Surfaces are sharp-cornered, elevated only by a warm-tinted diffuse shadow (rgba(145,106,112,0.15) 0 6px 24px) that ties the elevation back to the brand palette. The result is a site that feels more like a printed specimen catalog than a web product — restrained, content-first, and quietly opinionated. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Rose | `#f8f5f5` | `--color-parchment-rose` | Page canvas and section backgrounds — the warm off-white ground that gives the whole system its dusty, paper-like atmosphere | | Specimen White | `#ffffff` | `--color-specimen-white` | Card surfaces and image wells — clean white plates that sit on the parchment canvas, carrying typographic specimens and editorial imagery | | Ink Brown | `#443235` | `--color-ink-brown` | Primary text, headlines, and dominant body copy — the warm near-black that reads as ink rather than pure black against the rose canvas | | Walnut | `#654a4e` | `--color-walnut` | Navigation text, secondary links, and muted metadata — one step lighter than Ink Brown for hierarchy without leaving the brown family |

# Twocreate — Style Reference > gallery wall trên nền giấy kem **Theme:** light Twocreate vận hành theo logic của một gallery floor: nền canvas ấm màu kem, một màu mực gần đen duy nhất, một typeface, và tuyệt đối không gì khác. Mọi quyết định giao diện đều phục tùng typography — không có hệ thống màu sắc, không hệ thống đổ bóng, không hệ thống border, không hệ thống icon, không hệ thống button. Trang web mang phong cách như một catalogue triển lãm in ấn, được đặt trong PP Neue Montreal với những bước nhảy tỷ lệ cực đoan, từ label footer 10px đến display headline 111px chiếm nửa viewport. Các component không thực sự là component; chúng là những khối typographic được phân cách bởi whitespace. Ảnh sản phẩm xuất hiện là một ảnh editorial đơn lẻ — không card, không grid, không hiệu ứng — được đặt trong luồng nội dung với sự kiềm chế tương tự như text. Đây là một studio site tin tưởng vào tác phẩm và typeface để gánh toàn bộ trọng lượng thị giác, và coi mọi discipline thiết kế khác là trang trí cần loại bỏ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#0c0c0c` | `--color-ink` | Toàn bộ text, link, nav items, body copy, tên client, list items, và nét icon. Màu gần đen thay vì đen tuyền giúp type không bị gắt trên nền canvas ấm | | Paper | `#f9f7f4` | `--color-paper` | Nền trang và canvas chính. Màu trắng ngà ấm với ánh vàng-hồng nhẹ — thay thế sự lạnh lẽo của #fff bằng cảm giác xúc giác của giấy không tráng phủ | | Stone | `#e3e1dd` | `--color-stone` | Tông bề mặt phụ, đường phân cách tinh tế, và các section banded cần một nửa bước xa khỏi canvas mà không đưa vào màu tương phản thực sự | | Carbon | `#000000` | `--color-carbon` | Dành riêng cho những khoảnh khắc text có trọng lượng cao nhất cần màu đen tuyền — thường là display headline và nav lockups. Nặng hơn Ink một chút để nhấn mạnh typographic thay vì tương phản màu |

# Trunk — Style Reference > monochrome control room with one green signal light. A dark, technical, near-grayscale interface where the only color that matters is a single dot of green confirming the pipeline is alive. **Theme:** dark Trunk is a near-monochrome command center for CI reliability: deep matte-black canvas, hairline dividers in cool gray, and a single, almost-restraint palette of black-to-white neutrals. The interface feels like an engineer's terminal that grew up into a product — flat, dense, confident, with type that whispers at display sizes (weight 300, tight tracking) and snaps to attention at body sizes. The lone chromatic accent is a single green signal that appears once in the hero illustration as a ball rolling through pipes; the rest of the system speaks in grayscale. Components sit on the canvas with minimal elevation — borders and contrast do the work, not shadows. The page alternates between a light illustrated hero and dark product sections, but the product surface is the source of truth: black ground, gray borders, white type, no decorative gradients, no noise. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, primary background — the ground everything sits on | | Carbon | `#08090b` | `--color-carbon` | Elevated card surfaces, nav text, deep backgrounds one step above the canvas | | Graphite | `#232323` | `--color-graphite` | Card and button borders — the hairline skeleton that defines structure | | Slate Mist | `#89898d` | `--color-slate-mist` | Subtle background fills, muted surface overlays |

# Trigger.dev — Style Reference > Charging terminal on slate. The interface is a dimly lit workstation where one lime LED signals activity against rows of quiet monospaced text and faint violet syntax glow. **Theme:** dark Trigger.dev's visual system is a dark-mode developer terminal transplanted into a marketing surface: matte charcoal canvas, Geist's quiet technical voice for body and UI, and Satoshi's geometric precision stretched to display scale with generous tracking. A single electric lime (#a8ff53) carries the brand's signal — it lives in the logo glyph, the primary nav button, and feature pills, giving the whole interface a charging-light quality against the dark. The rest of the chromatic vocabulary is a syntax-highlighting palette (pinks, violets, soft greens) borrowed from code editors, applied to feature icons and inline code so the site visually rhymes with the TypeScript it asks you to write. Surfaces stay flat and low-contrast; depth comes from 1px hairlines and the gradient stack, not from drop shadows. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Slate Canvas | `#1c1e21` | `--color-slate-canvas` | Primary page background, hero canvas, card surface base — the workspace floor everything sits on | | Ink Well | `#121317` | `--color-ink-well` | Deepest surface — code block backgrounds, terminal panes, inset containers that need to feel recessed below the canvas | | Graphite Hairline | `#3b3e45` | `--color-graphite-hairline` | Subtle borders, divider lines, card edges — barely visible separators that let density carry the visual structure | | Steel Border | `#272a2e` | `--color-steel-border` | Slightly darker hairline for nested containers and secondary borders where Graphite feels too bright |

# Travelperk — Style Reference > Vôi xanh trên giấy da ấm — xanh CTA điện tử trên nền kem giấy cũ, không đổ bóng, mọi thứ đều bo tròn ở chính xác 26px. **Theme:** light Perk tỏa ra năng lượng có kiểm soát — một trường đen-và-kem nạp đầy vôi xanh, nơi màu điện #beff50 xuyên thủng các bề mặt gần-đen và trắng ấm. Nền hero trắng ấm (#f5f5eb) mang cảm giác như giấy cũ bên cạnh vôi xanh điện tử, khiến bảng màu trở nên xúc giác hơn là kỹ thuật số. Một custom sans duy nhất, OTSono, đảm nhận mọi công việc ở mọi tỉ lệ từ label UI 10px đến glyph display 200px, với leading chặt 0.89-0.90 và tracking -0.03em ở kích thước display khiến các headline cỡ lớn trông nén chặt và có chủ đích. Radius 26px là ngôn ngữ hình khối chủ đạo của hệ thống — được áp dụng đồng nhất cho buttons, cards và image frames — tạo sự nhất quán bo tròn làm mềm bảng màu tương phản cao đen/vôi xanh/kem. Không đổ bóng, không gradient — các bề mặt chỉ khác nhau bởi giá trị nền, với dark cards #14140f, white cards #ffffff và warm-cream cards #f5f5eb đều dùng chung radius 26px và không có phép ẩn dụ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Lime | `#beff50` | `--color-electric-lime` | Primary CTA buttons, active UI chips, icon accent fills — điểm nhấn màu duy nhất bùng nổ trên mọi bề mặt (gần-đen, trắng và kem), tạo cảm giác cấp bách mà không cần báo động đỏ | | Near Black | `#14140f` | `--color-near-black` | Màu chữ chính, nền dark card, nav borders — màu đen ấm (không phải #000000 thuần) kết hợp với kem tạo cảm giác hơi analog | | Pure Black | `#000000` | `--color-pure-black` | Chữ tương phản cao, icon fills, button borders ở độ tương phản tối đa | | Pure White | `#ffffff` | `--color-pure-white` | Nền card, overlay surfaces, chữ button inverted |

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

# Toggl Track — Style Reference > Plum theater marquee — một sân khấu màu aubergine đậm, nơi một từ duy nhất trong spotlight màu magenta thắp sáng mỗi headline. **Theme:** mixed Toggl Track vận hành trên duotone plum-và-kem: một sân khấu aubergine đậm cho hero và footer bands, màu trắng kem ấm cho nội dung sản phẩm, và một màu magenta-pink rực rỡ duy nhất chiếm lấy các từ đơn lẻ bên trong headline — được đặt trong kiểu chữ nghiêng rotalic — khiến cho copy mang cảm giác sân khấu kịch. Màu pink được dùng có chừng mực; nó xuất hiện dưới dạng các từ nhấn mạnh, pill CTA đã được tô màu, và các chấm icon nhỏ, không bao giờ tràn lan. Các bề mặt vẫn phẳng; chiều sâu đến từ sự tương phản giữa các dải tối và sáng, không phải từ bóng đổ hay gradient. Các component có kích thước lớn và bo tròn rộng rãi: 26px cho primary buttons, 200px cho pill tags và nav chips, 10px cho content cards. Typography kết hợp sự mềm mại hình học của GT Haptik (display) với tính trung lập của Inter (body), cả hai đều được đặt dày ở line-height 1.1–1.25 trên các kích thước lớn nhất để headline có cảm giác đậm đặc và tự tin thay vì thoáng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Plum | `#2c1338` | `--color-plum` | Hero, header, và footer canvases; nền brand mark. Màu aubergine gần như đen, được xem là màu tối đặc trưng của thương hiệu | | Heather | `#412a4c` | `--color-heather` | Primary headings và UI text trên nền sáng; secondary dark surface khi Plum quá nặng. Màu tím làm việc chính | | Magenta | `#e57cd8` | `--color-magenta` | Filled CTA buttons, emphasis words bên trong headline, selected nav state, star ratings, và decorative dots. Màu sắc rực rỡ duy nhất — được dùng có chừng mực, một từ hoặc một control trên mỗi màn hình | | Lavender Smoke | `#564260` | `--color-lavender-smoke` | Body copy và link text trên nền trắng kem nơi Heather có vẻ quá nặng. Mang sắc thái thương hiệu vào văn bản chạy |

# Todoist — Style Reference > Không gian làm việc tràn ngập ánh sáng với một cuốn planner giấy — mặt bàn màu kem ấm, ghi chú bằng mực, một cây bút đỏ **Theme:** light Todoist mang phong cách một không gian làm việc ngập nắng với planner giấy: nền canvas trắng kem ấm áp, chữ mực gần như đen, và một điểm nhấn đỏ cam rực rỡ duy nhất để đánh dấu hành động mà không lấn át bố cục. Typography mang chất nhân văn và nhẹ nhàng — Graphik đảm nhận các kích thước display với tracking âm dày, trong khi Inter xử lý UI chrome với tracking dương nhẹ — nhờ đó, hệ thống phân cấp được tạo ra từ kích thước và weight chứ không phải từ khối lượng màu sắc. Ảnh chụp màn hình sản phẩm và mockup điện thoại nổi bên trên các đường cong trang trí màu kem, tạo bầu không khí mà không bao giờ rơi vào nhiễu loạn minh họa. Màu sắc được phân bổ như dấu câu chức năng: màu cam thương hiệu cho một hành động duy nhất trên mỗi view, xanh dương cho link, xanh lá cho trạng thái, phần còn lại của màn hình giữ yên tĩnh trong các tông màu trung tính ấm. Elevation cực kỳ nhẹ nhàng — một bóng đổ 1px mảnh trên card, không có panel nặng hay gradient trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Red | `#e34432` | `--color-ember-red` | 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 lên làm màu CTA chính | | Deep Ember | `#cf3520` | `--color-deep-ember` | Nhấn mạnh văn bản thương hiệu, eyebrow labels, iconography trang trí, sự hiện diện thương hiệu thứ cấp | | Cobalt Link | `#0f66ae` | `--color-cobalt-link` | Hyperlinks, nhãn ưu tiên trong ứng dụng, icon thông tin | | Ink | `#25221e` | `--color-ink` | Văn bản chính, heading, đường viền icon tối, bề mặt fill tối |

# ToDesktop — Style Reference > Cosmic command deck transitioning into a bright spec sheet. Dark gradient hero with a single electric blue accent button; below, a calm, light, hairline-bordered document surface with pill navigation and floating product mockups. **Theme:** mixed ToDesktop operates as a dual-environment system: a deep space-grade dark hero with gradient atmosphere that transitions into a bright, document-like feature surface. The dark zone uses a sweeping white-to-near-black gradient to position the product against a cosmic backdrop, while the light zone feels like a clean product spec sheet. The single saturated #0036ff blue/violet is the only chromatic moment — used exclusively on primary action buttons — making every CTA feel like switching on a spotlight. Components are flat and confident: pill navigation, hairline 1px borders, generous 14-24px card radii, and almost no elevation shadow. The type system pairs Aeonik Pro's geometric character at display sizes with Inter's neutrality for UI, while Geist Mono marks developer-facing elements. The overall attitude is premium developer tool — the visual language of a tool that respects your attention. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Iris | `#0036ff` | `--color-electric-iris` | Primary CTA fill, active nav indicators — the only saturated hue on the entire page, it functions as a switch-on moment against an otherwise achromatic or deep-blue canvas | | Signal Cyan | `#0093ff` | `--color-signal-cyan` | Blue state accent for badges, validation surfaces, and short status labels. Do not promote it to the primary CTA color | | Deep Void | `#05061b` | `--color-deep-void` | Card surface within dark sections, box-shadow tone on dark cards — near-black with a violet undertone matching the hero gradient | | Ink Black | `#141414` | `--color-ink-black` | Primary heading and body text on light surfaces, dark button labels |

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

# ThoughtLab — Style Reference > crimson flare in obsidian dark **Theme:** dark ThoughtLab operates in cinematic darkness where a single vivid red mark cuts through near-black silence. Typography is architectural and oversized — 198px display headlines with extreme negative tracking create editorial drama, while body copy stays compact at 15-17px with generous leading. The interface strips away everything nonessential: pill-shaped CTAs, hairline borders, and vast negative space let the messaging and the one red accent command full attention. The iridescent 3D orb hero is the only ornament in an otherwise weightless void where every other element recedes into shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Red | `#fc1c46` | `--color-signal-red` | Primary action buttons, active states, brand mark accent — the sole chromatic note in a monochrome void, making every tap feel deliberate | | Pure White | `#ffffff` | `--color-pure-white` | Display headlines, button text, high-contrast labels — the brightest text tier, reserved for the loudest statements | | Ash | `#cccccc` | `--color-ash` | Body text, secondary headlines, subtle hairline borders — the workhorse gray that carries most readable content across the dark canvas | | Graphite | `#4c4c4c` | `--color-graphite` | Muted metadata, inactive controls, tertiary borders — recedes into the background when focus should be elsewhere |

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

# Things — Style Reference > Apple keynote ở âm lượng vừa phải — một bức tường gallery với các khung sản phẩm nghiêng nổi trên nền canvas xám lạnh tĩnh lặng, với một chấm xanh dương rực rỡ kéo mắt người xem đến mọi khoảnh khắc tương tác. **Theme:** light Things tạo ra một trang sản phẩm kiểu gallery nơi ứng dụng tự kể chuyện qua khoảng trắng rộng rãi, các mockup sản phẩm nghiêng, và một điểm nhấn xanh dương duy nhất đầy tự tin. Phong cách thẩm mỹ vay mượn từ sự kiềm chế editorial của Apple — system fonts, gam màu trung tính gần như xám, độ nâng tinh tế, và các card bo tròn với bán kính 18px tạo cảm giác cao cấp mà không hề lạnh lẽo. Màu sắc xuất hiện một cách tiết kiệm và có chức năng: xanh dương rực cho link, icon và nút play tròn; xanh dương nhạt hơn cho heading phụ; và gần như đen (#303336) cho body text trên nền canvas hơi lạnh (#f2f5f7). Các section thở với khoảng cách dọc 40-80px, và hệ thống phân cấp được thể hiện qua type weight (600-800 cho heading) và line-height rộng rãi thay vì các chi tiết trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink | `#303336` | `--color-ink` | Primary text, body copy, heading text — gần như đen với một chút ánh lạnh nhẹ, không bao giờ là #000 thuần, giữ cho trang không bị chói | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, mockup sản phẩm được nâng lên, input fields — trắng tinh khiết trên nền canvas lạnh hơn tạo cảm giác nổi, không phẳng | | Mist | `#f2f5f7` | `--color-mist` | Canvas trang, các dải nền full-width — màu trắng ngà pha lạnh, mềm hơn trắng thuần nhưng vẫn đọc là sáng | | Fog | `#838b96` | `--color-fog` | Secondary body text, helper copy, mô tả mờ — neutral được dùng nhiều nhất sau Ink, tạo nên mid-tone chủ đạo của trang |

# The online bank — Style Reference > Kho kỹ thuật số trong màu teal đại dương sâu thẳm — một ngân hàng tạo nên sự điềm tĩnh qua khoảng trắng tĩnh lặng và một màu sắc duy nhất đầy tự tin. **Theme:** light N26 mang đến một không gian ngân hàng số điềm tĩnh, đầy tự tin, neo giữ bởi một màu teal đậm duy nhất chiếm lĩnh viewport, trong khi phần còn lại của giao diện lùi vào khoảng trắng off-white ấm áp. Hệ thống phân cấp thị giác được xây dựng trên sự tương phản: mực đen đặc (#1b1b1b) trên nền gần trắng (#faf8f5), với teal xuất hiện như một dấu chấm câu có chủ đích cho các hành động chính và khoảnh khắc thương hiệu, chứ không phải trang trí. Typography mang một sự căng thẳng đặc trưng giữa N26 sans-serif nhỏ gọn, hơi tracking dùng cho navigation và nội dung body, và N26-Extended display face rộng hơn, tạo không gian thở cho headline ở kích thước 58–80px. Các component mang cảm giác kiến trúc và tối giản — border mảnh, padding rộng rãi, border-radius nhỏ trên controls, border-radius lớn trên hình ảnh — phản ánh tư duy thiết kế ngân hàng châu Âu, nơi sự tin tưởng được truyền tải qua sự kiềm chế thay vì trang trí cầu kỳ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Teal | `#088177` | `--color-deep-teal` | Điểm nhấn teal 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 lên thành màu CTA chính | | Ink | `#1b1b1b` | `--color-ink` | Body text chính, heading, icon strokes, link text, và nav labels — một màu gần đen pha chút than, tránh sự khô cứng của màu đen thuần trên nền trắng ấm | | Canvas Warmth | `#faf8f5` | `--color-canvas-warmth` | Nền trang — một màu off-white ấm áp, giống giấy, mang lại cho toàn bộ giao diện chất lượng biên tập, con người, khác biệt với màu trắng SaaS lâm sàng | | Surface White | `#ffffff` | `--color-surface-white` | Bề mặt hỗ trợ sáng cho nền tinh tế và phân cách section. Không nâng lên thành màu CTA chính |

# The Verge — Style Reference > Midnight control room, mint alerts **Theme:** dark The Verge reads as a late-night newsroom: a near-black canvas where type carries the weight and teal appears only as functional punctuation. The Signal Mint accent (#3cffd0) marks everything that is alive — section labels, author bylines, active states, the subscribe button — while the rest of the page stays achromatic. Display headlines run at Manuka weight 900, 60–107px, creating editorial impact at near-zero line-height, then article bodies switch to Fk Roman Standard serif to separate reading mode from chrome. The vertical 'Verge' wordmark pinned to the left margin is the page's most distinctive structural element — a constant typographic frame, not a logo. Violet (#5200ff) and red-orange (#ff3d00) appear only as section-card fills (Most Popular, Podcasts), giving the monochrome feed two moments of color without breaking the dark mood. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal | `#131313` | `--color-charcoal` | Page canvas, primary background, inverted sections | | Onyx | `#000000` | `--color-onyx` | Deepest darks, shadows, text on light surfaces | | Paper | `#ffffff` | `--color-paper` | Primary text, inverted surfaces, light icons | | Iron | `#313131` | `--color-iron` | Elevated card surface, image-adjacent panels |

# Textla — Style Reference > Cuốn niên giám thực vật cổ điển ngập nắng — trang giấy kem-vàng in mực xanh rừng sâu, minh họa bằng nét vẽ xương rồng, đóng dấu với bóng đổ offset cứng. **Theme:** light Textla khoác lên sản phẩm SMS marketing vỏ bọc của một cuốn niên giám thực vật cổ điển ngập nắng: nền canvas kem-vàng ấm áp (#f2ee98) làm chủ mọi trang, với xanh rừng sâu (#10380b) đảm nhận vai trò mực in, đường viền, bóng đổ và brand mark. Typography là giọng nói nổi bật nhất — một condensed display face (National 2 Condensed) dẫn dắt các headline in nghiêng cỡ lớn lên đến 180px, trong khi một sans-serif đậm (RethinkSans, 600-800) xử lý toàn bộ UI ở 16-20px, mang đến cho hệ thống sự tự tin của một tấm poster in ấn. Các component nghiêng về phong cách neobrutalist: bóng đổ offset cứng 8px bằng brand green, pill controls 1440px, card bo tròn 40px, và star rating màu vàng marigold rực rỡ. Minh họa nét vẽ tay về xương rồng, mây và hình người sa mạc lấp đầy khoảng trống âm, khiến sản phẩm giống một cuốn field guide cổ điển hơn là một dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Sunlit Cream | `#f2ee98` | `--color-sunlit-cream` | Page canvas và section background — lớp nền ánh sáng sa mạc ấm áp, tạo nên tâm trạng thực vật cho toàn hệ thống | | Forest Ink | `#10380b` | `--color-forest-ink` | Primary text, pill button fill, icon stroke, hard offset shadow và brand mark — một màu xanh đậm duy nhất đảm nhận 80% công việc cấu trúc | | Marigold | `#fce519` | `--color-marigold` | Yellow state accent cho badge, validation surface và status label ngắn. Không nâng cấp lên làm primary CTA color | | Sage Wash | `#dbe8ac` | `--color-sage-wash` | Muted card và surface tint — một màu xanh thực vật nhẹ dùng để phân biệt panel tinh tế trên nền cream canvas |