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

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

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

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

# Watch new Originals — Style Reference > Khoảng không điện ảnh với ánh đèn sân khấu. Hãy tưởng tượng một sảnh rạp chiếu phim tối om, nơi một ngọn đèn neon xanh lơ là thứ màu sắc duy nhất trong tầm mắt — mọi thứ còn lại đều là chiều sâu đơn sắc, dẫn mắt người xem đến những tấm poster trên tường. **Theme:** dark Disney+ hoạt động như một canvas rạp chiếu phim tối: khoảng không gần như đen tuyền (#040714) nơi artwork phim và series là nhân vật chính, còn UI chrome lùi ra ngoài rìa. Giao diện dựa trên độ tương phản cực cao (trắng #fafafa trên nền gần đen) và một điểm nhấn màu sắc duy nhất — cyan điện tử (#33ddff) — đóng vai trò là lý do duy nhất để rời mắt khỏi nội dung. Typography là một font sans-serif tùy chỉnh duy nhất (Inspire) ở cỡ vừa phải, với letter-spacing dương (0.025em) mang đến cho cả những label ngắn một nhịp điệu tinh tế, cao cấp. Hệ thống ưu tiên nội dung: card là tile tỷ lệ poster, section là horizontal scroll rails, và những quyết định màu sắc nổi bật duy nhất (cyan CTA fills, teal link text) tồn tại để thúc đẩy chuyển đổi, không phải trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Midnight Canvas | `#040714` | `--color-midnight-canvas` | Nền trang, nền hero, canvas chính — màu navy gần đen sâu thẳm, hút mắt và làm artwork nổi bật | | Abyss | `#010104` | `--color-abyss` | Lớp bề mặt sâu nhất, nền navigation — lớp nền gần như đen tuyền bên dưới canvas | | Eclipse | `#0e0b14` | `--color-eclipse` | Nền footer, bề mặt tối thay thế — màu tối hơi ấm để tạo biến thể chiều sâu | | Carbon | `#1e1f24` | `--color-carbon` | Bề mặt tối nâng cao — dùng cho card hoặc panel nằm trên canvas |

# SuperHi Basic Income — Style Reference > Cột tím đậm bên cạnh khung trắng rộng **Theme:** light SuperHi Basic Income là một hệ thống editorial hai màu: một cột tím điện cố định neo bên trái, và một khung trắng rộng với typography thoáng đãng cuộn bên phải. Bảng màu cực kỳ nhị phân — `#2727e6` và `#ffffff` — không có bóng đổ, gradient hay bề mặt phụ nào làm loãng thông điệp. Typography đảm nhận toàn bộ cá tính: Basis (một geometric sans) xử lý mọi vai trò chức năng, DDC (một display face nhân văn hơn) chỉ xuất hiện ở nơi cần chất riêng, và line height thoáng đãng (1.46–1.67 cho body text). Các component phẳng và được định hình bằng bo góc — pill tags với radius 50px, button bo tròn nhẹ 16px, một minh họa địa cầu chấm tròn là đồ họa duy nhất. Tinh thần là sự tự tin của poster chiến dịch: một màu nổi bật, không trang trí, và text làm tất cả công việc nặng nhọc. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Electric Iris | `#2727e6` | `--color-electric-iris` | Điểm nhấn tím cho viền action dạng outline, label có link, và nhấn mạnh tương tác nhẹ. Không nâng lên thành màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Canvas nội dung bên phải, bề mặt card và elevated, text sidebar và minh họa trên panel tím | ## Tokens — Typography

# Shade — Style Reference > Editorial paper cutouts trên nền trắng **Theme:** light Shade vận hành trong ngôn ngữ thiết kế gần như đơn sắc: canvas trắng, chữ màu than ấm nhẹ, và một điểm nhấn violet duy nhất xuất hiện hầu như chỉ ở dạng đường viền mảnh (hairline borders) và một gradient logo. Giao diện mang phong cách editorial và thong thả — Inter Display với tracking âm nén tạo cho headline vẻ điêu khắc, kiểu trang bìa tạp chí, thay vì vẻ thoáng đãng điển hình của SaaS. Button có dạng pill với offset shadow màu đặc, cứng (không blur, không khuếch tán), trông như những miếng giấy cắt thay vì Material elevation. Màu sắc được dùng như dấu câu hiếm hoi: violet không bao giờ lấp đầy mảng lớn, nó chỉ vạch đường viền và đánh dấu trạng thái được chọn, để nội dung ảnh đảm nhận vai trò tạo cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Charcoal Ink | `#131315` | `--color-charcoal-ink` | Chữ chính, fill button pill tối, đường viền heading — màu gần đen ấm, màu fill button duy nhất trong hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, bề mặt card, chữ trên button, nền ghost button | | Bone | `#f7f5ff` | `--color-bone` | Canvas phụ, màu trắng ngà pha violet nhẹ cho các section xen kẽ | | Cutout Gray | `#f1f1f1` | `--color-cutout-gray` | Màu offset shadow đặc dưới primary button và bề mặt phụ |

# Ableton — Style Reference > Editorial workshop trên nền trắng tinh. Giấy trắng, chữ Futura đen, một vệt bút xanh cho tương tác, ảnh cắt sát mép như layout tạp chí. **Theme:** light Hệ thống visual của Ableton mang phong cách bảng editorial của một studio đang hoạt động: canvas trắng tinh, hình học Futura PT, và một màu xanh dương tự tin đánh dấu mọi văn bản tương tác. Site ưu tiên chữ và gần như phẳng một cách triệt để — không đổ bóng, không bo góc, không chrome trang trí — để ảnh chụp nhạc công, phần cứng và phần mềm tự tạo cảm xúc. Màu sắc xuất hiện như những dấu chấm câu chức năng nhỏ: xanh dương rực cho link, cùng tag fill san hô và xanh ngọc để phân loại nội dung mà không làm mềm layout. Navigation là một thanh mỏng phía trên với tên sản phẩm mang phong cách monospace. Tổng thể gợi cảm giác một cuốn technical manual được dàn trang đẹp — mật độ thông tin do typography và hình ảnh đảm nhiệm, không phải do container design. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Văn bản chính, nav label, logo, icon stroke, và mọi heading — thiết lập toàn bộ hệ thống phân cấp thông tin | | Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, và text overlay trên hero — background mặc định cho hầu hết mọi màn hình | | Fog | `#eeeeee` | `--color-fog` | Form input nhẹ, bề mặt tag, và nền panel phụ tĩnh lặng — neutral gần như vô hình | | Signal Blue | `#0000ff` | `--color-signal-blue` | Accent màu xanh tím cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |

# Eight Sleep — Style Reference > midnight observatory with single neon pulse **Theme:** mixed Eight Sleep communicates through nocturnal luxury: a stark dark hero stage gives way to warm off-white surfaces and one electric blue accent that functions like a pulse of light in a quiet room. Typography carries the entire brand voice — NeueMontreal at weight 300 at near-display sizes creates whispered authority, with letter-spacing tightening as scale grows. The palette is almost deliberately starved of color: pure black, warm cream (#f9f8f7) instead of clinical white, and a single vivid blue that earns attention by being absent everywhere else. Components are flat and architectural — pill buttons, 12px cards, hairline borders, and a single whisper-soft shadow. Visual rhythm alternates between full-bleed dark bands and light editorial sections, creating a sleep-cycle cadence across the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Headlines, body text, full-bleed dark hero stage, nav text on light surfaces — the structural anchor of the system | | Paper White | `#ffffff` | `--color-paper-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Warm Cream | `#f9f8f7` | `--color-warm-cream` | Hero panels, soft section backgrounds, card surfaces on light pages — replaces clinical white with a linen warmth | | Mist Gray | `#f1f2f4` | `--color-mist-gray` | Nested card containers, subtle elevated surfaces, input field backgrounds |

# Pirsch Analytics — Style Reference > cuốn sổ giấy phơi nắng với các vệt highlighter **Theme:** light Pirsch sử dụng ngôn ngữ sổ giấy ấm áp: nền cream mềm mại (#f8f5ed) thay thế màu trắng SaaS thông thường, và điểm nhấn màu sắc duy nhất là vàng nắng (#ffda6e) — trông như một vệt highlighter, không phải một con dấu thương hiệu. Gần như toàn bộ giao diện là achromatic — chữ đen mực và viền 1px hairline đảm nhận công việc cấu trúc mà ở nơi khác shadow và fill đảm nhiệm. Typography là một hệ thống đơn font (DM Sans) chạy từ kích thước nhỏ 14px đến display 64px ấn tượng, với khoảng thở rộng rãi theo grid 8px và góc bo 24px bất thường khiến các card trông như sticky notes. Màu xanh lá (#6ece9d) xuất hiện dè dặt như tín hiệu trạng thái/sẵn sàng (badge happy-customer, chấm theme-toggle) và không bao giờ cạnh tranh với màu vàng. Cảm giác tổng thể là editorial và xúc giác — gần với một báo cáo in ấn hơn là một dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sunshine Highlight | `#ffda6e` | `--color-sunshine-highlight` | Fill hành động chính, badge bước, điểm nhấn accent, nền callout | | Mint Signal | `#6ece9d` | `--color-mint-signal` | Màu hành động xanh lá cho filled buttons, trạng thái navigation được chọn, và các thời điểm chuyển đổi tập trung | | Cream Paper | `#f8f5ed` | `--color-cream-paper` | Canvas trang, bề mặt card, bên trong pill | | Ink | `#000000` | `--color-ink` | Heading chính, body text, viền hairline 1px trên card, ảnh và divider |

# Adcker — Style Reference > Poster brutalism khổng lồ trên nền giấy bảo tàng ấm áp **Theme:** light Adcker vận hành như một khối nguyên khối thuần typography: một nền cream ấm, một mực gần-đen, và display type lớn đến mức trở thành kiến trúc. Toàn bộ giao diện xoay quanh sự căng thẳng giữa headline editorial cỡ lớn và metadata siêu nhẹ, không có điểm nhấn màu sắc nào làm giảm tác động. Mọi quyết định thị giác đều mang tính editorial — trải nghiệm này giống như trang mở đầu của một tạp chí in, không phải một sản phẩm phần mềm. Độ bão hòa màu 0% là có chủ đích: màu sắc sẽ làm loãng đi sự uy quyền mà quy mô typography thuần túy đã tạo ra. Yếu tố phi chữ duy nhất phá vỡ không gian đơn sắc là một bức ảnh chân dung tự nhiên được nhúng trực tiếp vào bên trong headline, xem hình ảnh như dấu câu chứ không phải trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#191919` | `--color-ink-black` | Toàn bộ text, headline, border, link color — màu foreground duy nhất trong toàn bộ hệ thống. Gần-đen thay vì đen tuyền giúp thêm độ ấm, hài hòa với nền cream | | Bone Canvas | `#efedea` | `--color-bone-canvas` | Nền trang, bề mặt card, nav bar — nền trắng ngà ấm giúp mực gần-đen đọc với độ tương phản cao (15.1:1 AAA) mà không cảm thấy khô cứng hay lâm sàng | | Stone Veil | `#e3e1de` | `--color-stone-veil` | Biến thể bề mặt nhẹ so với Bone Canvas — dùng hạn chế cho panel phụ hoặc nền section để tạo chiều sâu mà không đưa màu sắc vào |

# Garden Eight — Style Reference > Editorial trên nền giấy kem hoành tráng. Một headline serif 215px đơn độc trên nền parchment ấm áp, bao quanh bởi các khối điêu khắc lơ lửng và khoảng trắng thoáng đãng như gió biển — trang web hoạt động như bìa của một art monograph, không phải dashboard. **Theme:** light Garden Eight vận hành như một editorial spread trong sách nghệ thuật: nền canvas parchment kem ấm làm bệ đỡ cho serif type hoành tráng, đóng vai trò như gallery wall text chứ không phải product UI. Bảng màu cực kỳ nhị phân — bề mặt trắng xương, chữ đen mực — và mọi màu bổ sung đều bị xem như sự xâm phạm. Layout thở ở quy mô gần như bảo tàng, với gutter margin 180px và khoảng trắng quá khổ, biến type và các đối tượng 3D điêu khắc thành nội dung duy nhất. Không có ngôn ngữ màu chức năng: không có alert red, success green hay info blue. Mọi quyết định đều dựa trên weight, scale và sự im lặng. Hệ thống mang phong cách masthead của tạp chí thời trang cao cấp hơn là giao diện SaaS, và bất kỳ agent nào tái tạo nó nên ưu tiên kịch tính typographic và sự kiềm chế về không khí hơn là các affordance UI thông thường. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#dbd6d0` | `--color-parchment` | Canvas trang, bề mặt card, divider nhạt, border link — tông màu xương desaturated ấm áp thay thế màu gần trắng thông thường, mang đến nhiệt độ editorial cho toàn bộ hệ thống | | Carbon Ink | `#1e1f1f` | `--color-carbon-ink` | Text chính, display headline, nav rules, border card, icon strokes — gần như đen với một chút ấm nhẹ hài hòa với parchment thay vì tương phản | | Pitch Black | `#000000` | `--color-pitch-black` | Dành riêng cho các khoảnh khắc display tương phản tối đa và text sâu nhất trên bề mặt sáng nhất — được dùng tiết kiệm để Carbon Ink giữ trọng lượng đọc mặc định |

# aave.com — Style Reference > violet neon xuyên qua chạng vạng — một buổi trưa oải hương nhạt tan dần vào bề mặt sản phẩm nửa đêm, và một tia violet điện duy nhất là màu sắc sống sót qua màn chuyển tiếp. **Theme:** mixed Aave vận hành như một hệ thống hai tông: một hero oải hương ngập nắng tan dần vào bề mặt sản phẩm gần như đen, với violet rực rỡ (#998eff) xuyên suốt cả hai nửa như điểm nhấn màu sắc duy nhất. Typography dùng một custom display family (Aave Repro) trong dải weight hẹp 400–500 — hierarchy đến từ những bước nhảy kích thước rộng và negative tracking mạnh, chứ không phải từ việc tăng đậm. Các component mềm mại và hình pill theo mặc định: 20px là corner radius chủ lực, 1584px đánh dấu CTA full-pill, và elevation gần như vắng mặt — chỉ một công thức soft shadow duy nhất xuất hiện trên các floating element. Kết quả là một ứng dụng fintech hấp thụ năng lượng điện tử của crypto và sự kiềm chế editorial của SaaS cùng lúc, trình bày cơ chế DeFi dày đặc qua một canvas tĩnh lặng, tương phản cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — sợi chỉ màu sắc duy nhất xuyên suốt các phần sáng và tối; đủ ấm để sống động trên nền đen mờ mà không trở nên hung hãn | | Obsidian | `#221d1d` | `--color-obsidian` | Dark surface chủ đạo, body text trong phần sáng, primary nav text — màu gần đen neo giữ các band Pro và Markets | | Inkwell | `#0f0f10` | `--color-inkwell` | Neutral action fill tương phản cao cho primary buttons trên surface sáng. | | Charcoal | `#000000` | `--color-charcoal` | Pure-black fallback cho fills, strokes và borders tương phản cao |

# bella Kitchen Appliances — Style Reference > Quầy bếp ngập nắng giờ golden hour — bề mặt kem ấm với một điểm nhấn san hô duy nhất. **Theme:** light bella là một thẩm mỹ bếp ấm cúng, mang cảm giác quầy bếp gia đình, xây dựng trên bảng màu kem-và-san hô, tạo cảm giác ngập nắng chứ không lạnh lẽo như phòng khám. Toàn bộ giao diện nằm trên nền canvas trắng kem ấm (#ebeadf) với các card beige ấm hơn một chút (#d5cec0) và các bề mặt trắng nổi lên phía trên — các lớp được phân biệt bằng nhiệt độ màu sắc, không phải độ tương phản mạnh. Một điểm nhấn san hô bão hòa duy nhất (#f04923) cung cấp toàn bộ năng lượng: tag bán chạy nhất, card khuyến mãi, điểm nhấn giá và trạng thái active. Typography sử dụng sans-serif hình học (Supreme LL TT) với tracking -0.05em đồng nhất ở mọi kích thước, mang lại cho heading dáng vẻ nhỏ gọn, hiện đại. Thiết kế tránh đổ bóng, thay vào đó là phân lớp nhiệt độ màu sắc và bo góc 12px; button và badge là full pill (999px). Tổng thể cảm giác dễ gần, kích thích sự thèm ăn và tập trung vào sản phẩm — nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí trong khi UI vẫn tối giản và ấm áp. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Warm Canvas | `#ebeadf` | `--color-warm-canvas` | Nền trang — lớp nền trắng kem ấm mang lại cho toàn bộ giao diện cảm giác ngập nắng, gần gũi | | Pristine Surface | `#ffffff` | `--color-pristine-surface` | Bề mặt card nổi, thanh navigation, nền card sản phẩm, nền pill button | | Sand Beige | `#d5cec0` | `--color-sand-beige` | Bề mặt card phụ và các panel nền tông ấm để nhóm sản phẩm và các phần nổi bật | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, nét icon, đường viền mảnh và wordmark thương hiệu — định nghĩa toàn bộ hệ thống typography |

# Josh Warner — Style Reference > black void gallery wall **Theme:** dark Portfolio của Josh Warner hoạt động như một bức tường gallery gần như đen tuyền: giao diện lùi lại để các 3D render, product mockup và ảnh chụp sáng tạo chiếm trọn mọi viewport. Typography siêu mảnh và đồng nhất ở weight 400 trên toàn bộ scale, dùng một dòng sans-serif duy nhất không hề lớn tiếng — hierarchy được xây dựng qua kích thước và letter-spacing rộng (0.04em) thay vì tương phản weight. Toàn bộ palette là achromatic ngoại trừ một chấm trạng thái xanh neon (#08ff00) — tín hiệu sống duy nhất của site giữa khoảng không. Các bề mặt phẳng hoặc gần phẳng; chiều sâu hoàn toàn mượn từ tác phẩm nghệ thuật, không từ drop shadow hay gradient. Components thưa thớt, hình pill, gần như không trọng lượng — ghost buttons, viền mảnh trên #000, avatar tròn, và nav items hình pill. Hệ thống là một khung, không phải chủ thể. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#0f0f0f` | `--color-void` | Canvas trang và bề mặt chính — lớp nền bên dưới mọi artwork, hơi sáng hơn đen tuyền để tránh hiện tượng banding OLED trong khoảng tối | | Absolute | `#000000` | `--color-absolute` | Viền mảnh, image container, icon strokes, footer dividers — đen tuyền đóng vai trò mực cấu trúc, định hình các cạnh khi không có bề mặt card hiện hữu | | Charcoal | `#1a1a1a` | `--color-charcoal` | Bề mặt footer nâng cao và các UI panel sâu hơn — một bước lên từ canvas để phân vùng mà không phá vỡ khoảng tối | | Faint | `#080808` | `--color-faint` | Shadow base cho hiệu ứng elevation nhẹ — gần như vô hình trên canvas, dùng trong box-shadow composition để tạo độ nâng môi trường mềm mại |

# Stink Studios — Style Reference > cinema studio at midnight — the projector hums, the room is black, only the reel glows. **Theme:** dark Stink Studios operates as a cinematic canvas: a near-monochrome world where black absorbs everything except the work, and typography carries every structural decision. The visual language is deliberately austere — no UI chrome, no decorative gradients on controls, no colored buttons pulling attention from the reels. Instead, a film-studio hero (blue-lit, full-bleed) establishes the world, large confident headlines in negative-tracked Helvetica and Times New Roman do the talking, and warmth arrives only through the work itself. The system is built for an AI agent to produce gallery-like pages where large type and full-bleed media do the heavy lifting, and every interactive element recedes into a flat black plane. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Bone | `#ffffff` | `--color-bone` | Primary text, heading strokes, nav links, icon strokes, badge fills, logo type — the only high-contrast value in the system | | Soot | `#050505` | `--color-soot` | Subtle tonal break from pure black for nested surfaces and hairline borders that need to feel present without breaking the dark mode | | Ember Coral | `#e1695e` | `--color-ember-coral` | Accent warmth for marquee display moments, logo gradient highlight, and select project card color treatments — borrowed from the work, never applied to UI chrome |

# Slack — Style Reference > Plum-warm digital hearth — a cream-white workspace where deep aubergine accents glow like embers in a quiet, collaborative room. **Theme:** light Slack's design language is a deep-aubergine workspace built on a cream-white canvas, where the brand's signature plum purple (#611f69) is reserved for moments of action and emphasis while nearly everything else stays achromatic and calm. The aesthetic is editorial-meets-product: oversized Salesforce-Avant-Garde display headlines whisper in weight 700 with tight negative tracking, product UI screenshots carry the actual color story (multicolored hash marks, channel pills, avatars), and the page breathes through generous vertical rhythm broken by full-bleed dark-purple storytelling bands. Playful radial gradient washes (pink, blue, green, yellow at 25% opacity) float behind sections like soft spotlights, echoing the lozenge brand mark without being loud. Components are lightweight and confident — 4px-radius buttons, 16px-radius cards, hairline lavender borders, and almost no elevation except a single soft shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aubergine Core | `#611f69` | `--color-aubergine-core` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Midnight Plum | `#1d1c1d` | `--color-midnight-plum` | Primary text, dark section backgrounds, button text on light surfaces — the near-black that reads as warm rather than clinical | | Eggplant Ink | `#2e0039` | `--color-eggplant-ink` | Display text on light lavender surfaces, deep purple headlines — the chromatic dark text that keeps the brand's purple identity in headings | | Plum Shadow | `#3d0157` | `--color-plum-shadow` | Hover and pressed states on primary buttons, deeper purple accents — what Aubergine Core becomes when it presses down |

# dope.security — Style Reference > Dusk terminal at the edge of orbit **Theme:** dark Dope Security operates as a dark, cinematic interface — a near-black canvas (#090909) punctuated by vivid violet (#af50ff) and atmospheric photography of violet-pink cosmic skies. Typography carries the brand's rebellious confidence: a geometric sans (Whyte Inktrap) at extreme sizes pairs with an editorial italic serif (GrandSlang) for emotional moments like 'Your new', while a monospaced display variant creates stenciled, airport-board aesthetics for feature lists. Surfaces are nearly flat with hairline borders; the only elevation comes from glassmorphic panels and vivid gradient cards. Color appears sparingly but decisively — one violet accent for interactive moments, gradient washes for comparison blocks, and the rest is pure contrast. The visual rhythm alternates between vast negative space and dense, oversized type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#090909` | `--color-void` | Page canvas, section backgrounds — the base dark that makes all color vibrate | | Bone White | `#f7f9fa` | `--color-bone-white` | Primary text, icon fills, hairline borders — used at scale across headings, cards, and nav | | Ash | `#f0f0f0` | `--color-ash` | Heading text and decorative type outlines, large-scale display borders | | Slate | `#6b6b6b` | `--color-slate` | Muted borders, secondary icon strokes, subdued structural lines |

# Wrike — Style Reference > Công tắc màu vôi trên bảng điều khiển kỹ sư sạch sẽ — điểm nhấn xanh tươi sáng nổi bật trên nền xanh nước biển đậm uy quyền, trôi nổi trên nền trắng. **Theme:** light Ngôn ngữ thiết kế của Wrike được xây dựng trên nền canvas trắng tinh khôi, điểm xuyết bằng một màu xanh vôi tươi sáng duy nhất, hoạt động như một công tắc nguồn xuyên suốt giao diện. Hệ thống sử dụng màu xanh nước biển nửa đêm đậm cho văn bản chính và các phần tối, với các màu trung tính xanh lam-xám lạnh tạo sự phân cách bề mặt mềm mại thay vì xám ấm hoặc bóng đổ nặng. Typography được đảm nhận bởi TT Norms Pro trên lưới 4px thoải mái, với headline weight 700 thu hút sự chú ý so với body text weight 400 mỏng nhẹ. Các component có dạng pill (radius 40px) và card mềm (radius 20px), sử dụng một công thức shadow đặc trưng duy nhất giúp product mockup nổi khỏi trang. Tổng thể mang cảm giác enterprise tự tin nhưng tràn đầy năng lượng — một công cụ quản lý công việc trông giống như một productivity OS, chứ không phải một biểu mẫu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Signal Green | `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))` | `--color-signal-green` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính; Hình khối trang trí, radial glow accent trong phần tối, gradient endpoints | | Midnight Navy | `#162136` | `--color-midnight-navy` | Headlines, body text chính, navigation, footer section tối — mỏ neo cấu trúc của toàn bộ hệ thống phân cấp | | Slate Navy | `#2b3a57` | `--color-slate-navy` | Secondary headings, card titles, văn bản tối đã làm dịu — navy nhẹ hơn cho sub-hierarchy | | Steel Blue-Gray | `#657694` | `--color-steel-blue-gray` | Helper text, secondary copy, label đã làm mờ, dropdown menu — tương đương tông lạnh của mid-gray |

# ldd — Style Reference > Dot-matrix broadsheet on cream paper — a single sheet of warm stock, overprinted once with massive black type and nothing else. **Theme:** light A two-color broadsheet: warm cream canvas (#fffcf0), near-black ink (#000310) with a faint blue undertone, and zero decoration. Drama is generated entirely by scale — a custom 135px display face (LDD) with dot-matrix character treatments fights against a tiny neo-grotesque body face (NeueMontreal at 12–16px, line-height 1.0) for the screen's attention. The interface behaves less like a website and more like a printed zine: horizontal rules divide the page, oversized section numbers (01, 04) punctuate the rhythm, and a labeled scroll-progress bar (Scroll / To / Discover) replaces all conventional CTAs. 200px margins between sections create gallery-hung breathing room. No shadows, no gradients, no rounded corners, no color punctuation — every accent a designer might be tempted to add has been removed on purpose. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fffcf0` | `--color-cream-paper` | Page canvas, card surfaces, section backgrounds — a warm off-white that reads as paper, not screen, and prevents pure-white harshness while giving the near-black type a slight warm push | | Midnight Ink | `#000310` | `--color-midnight-ink` | Primary text, borders, section rules, dark-section backgrounds — near-black with a barely-perceptible blue undertone that distinguishes it from flat #000000 and keeps the palette from feeling like a photocopy | | Pure Press | `#000000` | `--color-pure-press` | Secondary text, nav labels, fine details — true black used sparingly for maximum contrast accents against the midnight ink |

# Memorisely — Style Reference > Architect's drafting table on warm parchment — a quiet, monochrome workspace where every element is a typographic decision. **Theme:** light Memorisely reads as a typographer's workspace: a warm cream canvas, pure white card surfaces, and a single near-black that serves as both text and primary action. The system is deliberately zero-chromatic — no blue, no green, no accent hue — letting Inter's weight contrast and tight negative tracking carry all hierarchy. Components stay flat and pill-leaning: a floating nav bar, 8px button corners, and 100px-radius interactive elements create a designed-by-a-designer feel without ornament. Separation comes from hairline borders in warm linen (#f2f0e9) and the cream-to-white surface jump, not from shadows or color. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Parchment | `#faf9f6` | `--color-warm-parchment` | Page canvas, body background — the base layer that gives the entire site its designed-by-hand warmth | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, floating navigation, elevated content blocks — pure white sits one step above the cream canvas | | Soft Linen | `#f2f0e9` | `--color-soft-linen` | Hairline borders, subtle dividers, muted background washes — the warm-tinted replacement for #e5e5e5 | | Ink Black | `#171717` | `--color-ink-black` | Primary text, primary action button background, strong heading borders — the workhorse near-black that unifies copy and CTAs |

# Eduardo del Fraile — Style Reference > Tủ kính gallery đen — căn phòng tối nơi một vật thể duy nhất phát sáng bằng chữ trắng **Theme:** dark Eduardo del Fraile là một portfolio được xây dựng trên sự tối giản triệt để: một khoảng đen thuần khiết, nơi một custom grotesk duy nhất và chữ trắng tạo nên toàn bộ giao diện. UI gần như biến mất hoàn toàn, để các 3D render lơ lửng trong không gian âm như những vật thể dưới ánh đèn bảo tàng. Mọi quyết định typographic, sự gần như vắng bóng của màu sắc, mọi bề mặt phẳng không bóng đổ đều phục vụ cùng một mục đích — làm cho canvas trở nên vô tận và không trọng lượng, rồi đặt một vật thể vào bên trong. Các component ưu tiên chữ và không có border; hệ thống phân cấp đến từ sự thay đổi weight trong Akzidenz Grotesk, không phải từ fill, elevation hay accent color. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void | `#000000` | `--color-void` | Nền trang, full-bleed canvas cho mọi nội dung | | Bone White | `#ffffff` | `--color-bone-white` | Toàn bộ chữ, navigation, hướng dẫn footer, và đường nét UI mảnh | | Ash Gray | `#888888` | `--color-ash-gray` | Chữ phụ hoặc mờ, label giảm chú ý, gợi ý không hoạt động |

# Coda — Style Reference > Chữ cái hoành tráng trên nền giấy da kem ấm — Coda mang phong cách poster chợ viết tay, không phải dashboard SaaS. **Theme:** light Ngôn ngữ thị giác của Coda là một bản sắc marketplace đầy tự tin, gần như mang tính kiến trúc, xây dựng trên nền canvas kem ấm (#f8f9eb) thay vì trắng tinh. Dấu ấn định hình là display type hoành tráng — một custom geometric grotesque (Monument Grotesk) được đặt cực kỳ khít (line-height 0.90) ở kích thước lên đến 134px, khiến headline trông như chữ khắc chứ không phải web copy. Mọi bề mặt đều được viền, không đổ bóng: đường viền thanh mảnh màu than trên nền kem tạo độ chính xác như bản thiết kế, kết hợp với pill-shaped tags, nút bo tròn nhỏ (~13px radius), và một section xanh rừng sâu phá vỡ nhịp điệu đơn sắc bằng các khối blob hữu cơ. Màu sắc được dùng như dấu câu có chủ đích, tiết chế — một thẻ mint ở đây, một thẻ lilac hoặc rose ở kia — trong khi bảng màu cấu trúc vẫn giữ chất đất và phi sắc. Hiệu ứng tổng thể là nửa brutalism biên tập, nửa cửa hàng boutique: ấm áp, xúc giác, và mang tính vật lý rõ rệt thay vì kính kỹ thuật số. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Parchment | `#f8f9eb` | `--color-cream-parchment` | Canvas trang, nền chính, bề mặt nav và body | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card nâng cao, icon fill bên trong container có viền, text trên nút tối | | Obsidian | `#000000` | `--color-obsidian` | Viền mảnh, text chính, outline stroke, divider bề mặt tối | | Charcoal | `#202020` | `--color-charcoal` | Nền nút filled, bề mặt nâng cao tối, text phụ trên nền kem |

# basement.studio — Style Reference > Một xưởng in ảo lúc 3 giờ sáng — chữ nén khổng lồ tràn ra khỏi canvas đen tuyền, một tia lửa cam trên nav, mọi thứ còn lại đều trắng hoặc xám ma quái. **Theme:** dark Thẩm mỹ void thuần khiết — trang mở ra như một hình chữ nhật đen với một mục nav màu cam duy nhất và dòng chữ thì thầm 'Scroll to Explore', sau đó bùng nổ thành display type khổng lồ 87px. Canvas #000000 là tuyệt đối, không phải 'xám đen' — không có surface gradients, không có depth layers, không có decorative noise. Geist 87px weight 600 với letter-spacing -0.04em là neo thị giác: nén, rộng, cơ khí. Điểm nhấn duy nhất, màu cam than hồng #ff4d00, chỉ xuất hiện trên mục nav đang active — không bao giờ trên CTA, không bao giờ trên button — khiến nó trông như đèn báo hiệu, không phải màu thương hiệu. Các ô logo client có viền grid màu #454545 tạo cảm giác tủ hồ sơ dày đặc, kiểu kiểm kê trên nền đen tuyền. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Signal | `#ff4d00` | `--color-ember-signal` | Chỉ dùng cho trạng thái active của nav — xuất hiện trên một phần tử tương tác duy nhất như một đèn báo nóng, không bao giờ dùng cho button hay CTA; sự hiếm hoi chính là điểm đặc trưng | | Void | `#000000` | `--color-void` | Nền trang, button fill, SVG fills — đen tuyệt đối, không phải gần đen | | Chalk | `#ffffff` | `--color-chalk` | Text chính, nhãn nav, text button, body copy | | Fog | `#e5e7eb` | `--color-fog` | Màu viền trên nav, card, button, logo grid dividers — khung xương cấu trúc hiện rõ trên nền đen |

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