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

# Electronic Materials Office® — Style Reference > Incandescent ember in a charcoal gallery **Theme:** dark Electronic Materials Office is a nocturnal atelier: matte charcoal canvas, a single incandescent orange ember, and type that whispers rather than declares. The interface treats every screen like a darkened studio — the keyboard product photographs are the only true light source, and the UI surrenders to them. Headlines at weight 200 in GT-Flexa float in vast negative space; body text is deliberately small and humanist (Times). Color is rationed: pure white for type, a desaturated violet (#9e9eff) for links, and one orange (#f45500) CTA per page that glows with its own 30px bloom. Components stay flush to the 20px radius, borders whisper at #9d9d9d, and the only shadows in the system are those two colored halos around the primary action. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Studio Charcoal | `#202020` | `--color-studio-charcoal` | Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own | | Ash Gray | `#9d9d9d` | `--color-ash-gray` | Muted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud | | Mid Felt | `#eaeaea` | `--color-mid-felt` | Light surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas |

# Sackville & Co. — Style Reference > Cobalt zine ép trên nền kem — một editorial spread vẽ tay, nơi illustration là chính và UI chỉ là text được sắp chữ trên giấy ấm. **Theme:** light Sackville & Co. mang phong cách một risograph zine editorial ép trên giấy kem: một illustration cobalt xanh vẽ tay chiếm một nửa, nửa còn lại là canvas trắng kem với grotesque type dày đặc và một oval cỡ lớn viền xanh. Hệ thống được thiết kế theo mã in ấn — màu phẳng, không gradient, không shadow, không button có fill — và dùng bảng màu phụ bão hòa (peach, fire-red, marigold, terracotta) làm điểm nhấn tông màu trong artwork và border, không phải UI fill chức năng. Typography đảm nhận toàn bộ hệ thống phân cấp: Founders Grotesk weight 400 với line-height âm mạnh (0.80–0.90) ở display size tạo áp lực masthead như bìa tạp chí, trong khi TimesNow SemiLight mang lại sự tương phản serif editorial cho một số heading. Mọi thứ đều mang cảm giác sắp chữ thủ công: outline mảnh, khoảng trắng rộng rãi, không elevation, không card bo tròn — chỉ là mực in tự tin trên giấy ấm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Paper | `#f3f4ee` | `--color-cream-paper` | Canvas trang, bề mặt card — nền trắng kem ấm áp khiến mọi màu mực trông như in | | Bone White | `#f8f8f8` | `--color-bone-white` | Lớp nền thay thế, phân biệt section nhẹ nhàng so với cream canvas | | Press Black | `#231f20` | `--color-press-black` | Text chính, border, divider, icon stroke — màu đen gần như mực in neo mọi màn hình | | Charcoal Headline | `#383435` | `--color-charcoal-headline` | Text heading hiển thị — hơi nhạt hơn press black để masthead mềm hơn |

# Mobbin — Style Reference > Bảng mẫu grayscale — một tờ in thử của thợ in nơi trọng lượng typography CHÍNH LÀ màu sắc. **Theme:** light Mobbin vận hành dựa trên sự kiềm chế achromatic thuần túy — zero chroma trên toàn bộ bảng màu, buộc hệ thống phân cấp chỉ dựa vào weight, kích thước và tông màu. Trang là khoảng trắng bị ngắt quãng bởi mực gần-đen (#141414) ở kích thước display và xám ấm (#707070, #adadad) cho text phụ. Typeface tùy chỉnh 'saans' là yếu tố khác biệt duy nhất: các weight phân số (440, 456, 652) không tồn tại trong bất kỳ system font nào, tạo ra khối lượng headline nằm giữa regular và semibold — typography đảm nhận công việc của màu sắc. Hình dạng pill 9999px xuất hiện trên mọi phần tử tương tác trong khi nội dung card nằm trên các hình chữ nhật bo tròn 16–24px, khiến các button trông như badge trong một biển thumbnail được đóng khung. Bản thân nội dung — ảnh chụp màn hình app mobile trong các card grayscale — CHÍNH LÀ kết cấu thị giác của trang. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Ink | `#141414` | `--color-midnight-ink` | Primary text, headings, filled CTA buttons, nav items, icon strokes — con ngựa thồ màu sắc duy nhất của một hệ thống achromatic | | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, text button trên nền tối | | Graphite | `#707070` | `--color-graphite` | Body copy, secondary links, descriptive text | | Ash | `#adadad` | `--color-ash` | Tertiary text, viền button disabled/muted, placeholder icons |

# Strava — Style Reference > athlete's logbook on warm paper — a single orange highlighter mark against black-and-white print **Theme:** light Strava's design reads like an athlete's logbook printed on warm paper: a stark white canvas warmed by off-white surfaces and a disciplined near-black text palette, with one bolt of vivid orange that signals every primary action. The interface is deliberately flat — no gradients, no shadows, no decorative chrome — letting full-bleed photography of cyclists, runners, and hikers in motion carry all the emotional weight. The custom Boathouse typeface and tight, slightly humanist letterforms give the system a print-publication quality rather than a typical SaaS feel. Sharp 4px corners on every interactive element, warm-toned grays instead of cool ones, and an almost monastic restraint with color (one orange, one link blue) create a visual hierarchy where the orange CTA always wins attention without ever needing elevation or glow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Strava Orange | `#fc5200` | `--color-strava-orange` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Link Blue | `#0060d0` | `--color-link-blue` | Inline text links and policy references; the only secondary chromatic color and reserved strictly for navigational links | | 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 Linen | `#f9f8f5` | `--color-warm-linen` | Footer background, secondary surface elevation, subtle banding beneath white |

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

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

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

# Peppermint — Style Reference > Midnight canvas với streamers vui tươi — một khoảng không xanh đậm nơi các dải ribbon vẽ tay và chữ hình học nhảy múa trên bề mặt giấy kem ấm áp. **Theme:** dark Peppermint vận hành trên nguyên lý midnight-canvas: một màu indigo gần như đen (#0a1d4b) thấm đẫm trang web vừa làm nền vừa là DNA thương hiệu, tạo cảm giác như màn hình đại dương sâu thẳm nơi các minh họa đậm nét và chữ hình học trôi nổi tự do. Display cuts của Excon — hình học, editorial, tracking dày — là chữ ký thị giác, kết hợp với hơi ấm nhân văn của Generalsans cho mọi nội dung đối thoại. Hệ thống cố tình đan xen giữa các dải dark immersion và bề mặt giấy kem ấm (#fcf6ea, #faedd2), để các vùng nội dung nặng (FAQ, form) có cảm giác chạm vào sự ấm áp hữu hình thay vì trôi nổi trong khoảng không. Minh họa vẽ tay với các nét ribbon uốn lượn màu hồng, xanh ngọc và xanh băng đảm nhận phần nặng về không khí — không có photography, không gradient, không bóng đổ trang trí. Các component đều bo tròn tự tin (card 24px, pill button 48–100px) và nằm trên canvas chỉ nhờ tương phản màu sắc, không dùng elevation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Midnight Sapphire | `#0a1d4b` | `--color-midnight-sapphire` | Canvas chính cho hero và feature bands, body text trên bề mặt kem, đường viền action — khoảng không mà mọi thứ trôi nổi trên đó | | Bright Violet | `#9c8bf9` | `--color-bright-violet` | Màu nhấn hiếm cho highlight buttons và khoảnh khắc nhấn mạnh — một dấu câu sống động trên nền navy mờ | | Deep Indigo | `#162d67` | `--color-deep-indigo` | Bề mặt card nâng cao so với canvas chính — sáng hơn Midnight Sapphire một bậc, dùng cho nested feature cards | | Slate Violet | `#3a486b` | `--color-slate-violet` | Text mờ trên các section tối, border và divider phụ — một companion đã khử bão hòa cho màu navy chính |

# Promova — Style Reference > tạp chí nửa đêm với một cây bút dạ quang vàng — trang đen, chữ trắng, và một mảng màu chanh tươi sáng nói 'ấn vào đây'. **Theme:** tối Promova là một bề mặt học ngôn ngữ mang phong cách tạp chí nửa đêm: canvas gần như đen, chữ trắng, một màu vàng điện duy nhất (#fff050) được dùng như dấu câu chức năng cho hành động chính và điểm nhấn icon. Headlines được đặt bằng Nekst, một display face tùy chỉnh chỉ dùng ở tỷ lệ cực lớn (40–140px) — không bao giờ dùng làm UI text — mang lại cho mọi màn hình một trọng lượng editorial đầy tự tin. Body và interface type chạy trên Manrope từ 200 đến 700, với weight 200 đảm nhận công việc mà hầu hết các site giao cho weight 300. Hệ thống hoàn toàn đơn sắc (1% colorfulness) và nhịp điệu thị giác đến từ type cỡ lớn, bán kính góc 30px rộng rãi, và accent màu vàng chỉ xuất hiện ở nơi cần hành động hoặc sự chú ý. Các component có cảm giác như những trang tạp chí chứ không phải widget dashboard: phẳng, bo tròn, elevation thấp, với các card đọc như những miếng giấy chèn vào trang đen. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Jet Black | `#000000` | `--color-jet-black` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên làm màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Text chính trên nền tối, bề mặt nút đảo ngược, logo, nav foreground | | Ash | `#595959` | `--color-ash` | Helper text mờ, caption phụ, metadata nhẹ | | Fog | `#dddddd` | `--color-fog` | Đường viền mảnh (hairline), divider ít nhấn mạnh, đường viền card trên nền tối |

# Waka Waka — Style Reference > poster bảo tàng trên nền giấy xương và mực — kiểu chữ grotesk đen hoành tráng in trên giấy trắng ấm, mọi thứ khác đều lùi về phía sau **Theme:** light Waka Waka xử lý website của mình như một catalog triển lãm in ấn: nền giấy màu xương ấm áp, một màu mực gần đen, và một typeface grotesk tùy chỉnh được triển khai ở cả kích thước footnote 10px và tỷ lệ hoành tráng 560px. Hệ thống về cơ bản là monoline và đơn sắc — không có điểm nhấn, không có sắc thái phụ, không gradient, và hầu như không có chrome trang trí. Phân cấp thị giác được tạo ra hoàn toàn thông qua trọng lượng typographic, tỷ lệ và khoảng trắng, với chính tên thương hiệu đóng vai trò là công cụ đồ họa chủ đạo trên mọi màn hình. Các component đều phẳng, không viền hoặc viền mảnh (hairline), và mang cảm giác được tuyển chọn hơn là tương tác — trang đọc như một bức tường gallery trưng bày các vật thể và chữ cái khổng lồ, không phải một giao diện phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Paper | `#edeae4` | `--color-bone-paper` | Nền trang, mọi bề mặt canvas — trắng ấm mang cảm giác giấy chưa tẩy trắng thay vì trắng kỹ thuật số | | Stone Gray | `#c9c7c4` | `--color-stone-gray` | Bề mặt phụ và neutral ngữ cảnh mờ — xuất hiện trong các cặp tương phản như một lớp sâu hơn bên dưới canvas | | Ink Black | `#28282a` | `--color-ink-black` | Văn bản chính, mọi đường viền, hairline rules, nét icon, và là neo màu sắc duy nhất trong hệ thống — gần đen nhưng pha chút ấm để nằm thoải mái trên nền xương thay vì rung động |

# Zipline — Style Reference > open meadow in morning light **Theme:** light Zipline mang phong cách bìa tạp chí thiên nhiên được tái hiện cho một startup giao hàng bằng drone: nền cream ấm áp (#f7f4e8) thay thế cho màu trắng SaaS lạnh lẽo thông thường, và toàn bộ nhịp điệu thị giác được định hình bởi fkScreamer — một display face cực nặng, cỡ lớn, đóng dấu những tuyên bố editorial khổng lồ lên trang. Nhiếp ảnh là phương tiện chính, được chụp ở tầm mắt với motion blur để cảnh vật tựa như đang chuyển động; UI là lớp thứ yếu chỉ xuất hiện với các đường viền đen mảnh, một điểm nhấn violet (#643aed) duy nhất cho card, và typography tiết chế. Các component có kích thước rộng rãi (radius 20px, padding trong 24px) nhưng không bao giờ mang tính trang trí — hệ thống đề cao không gian thở và sự tự tin tiết chế hơn là kiến trúc thông tin dày đặc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Meadow Cream | `#f7f4e8` | `--color-meadow-cream` | Page canvas, bề mặt card, body text inverse, đường viền button — màu off-white ấm áp tạo nên tính chất ngoài trời, giống giấy cho toàn bộ hệ thống thay vì màu trắng SaaS vô trùng | | Hillside Ink | `#000000` | `--color-hillside-ink` | Heading chính, body copy, nét icon, action button dạng fill, đường viền mảnh — màu đen tương phản tối đa giúp cream có không gian thở và headline fkScreamer tạo ấn tượng mạnh | | Stone Border | `#c6c3ba` | `--color-stone-border` | Divider mờ, bề mặt thứ cấp, đường viền tương phản thấp — màu xám ấm đứng sau Meadow Cream một bước, ngăn canvas trông phẳng | | Drone Violet | `#643aed` | `--color-drone-violet` | Nền card và feature block, bề mặt accent — nốt màu duy nhất trong một hệ thống gần như không màu; nổi bật trên nền cream, giúp các khối thu hút chú ý mà không phá vỡ không khí editorial |

# Stripe — Style Reference > violet horizon at dawn — a single electric accent on a vast calm canvas, with light bleeding in from the right edge. **Theme:** light Stripe operates as a financial infrastructure for the internet: airy, confident, nearly typographic. The interface is a near-monochrome canvas of cool whites and deep navy ink, interrupted only by a single electric violet accent that makes every action feel switched on. Headlines are set in weight 300 with aggressive negative tracking — authority through restraint, not volume — and gradient text is the signature move for hero statements, flowing from electric violet through slate gray. Decorative gradients (violet → magenta → amber) appear as soft halos behind product art and hero edges, never as backgrounds for content. Surfaces are flat, corners stay at 4px, and elevation is reserved for floating product mockups rather than UI chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Iris | `#533afd` | `--color-electric-iris` | Primary action fill, active nav, brand focal point — the only saturated color allowed to carry weight against the white canvas | | Lumen Violet | `#8087ff` | `--color-lumen-violet` | Hover/active washes, secondary link state, icon accents, soft brand halos | | Midnight Ink | `#061b31` | `--color-midnight-ink` | Primary text, nav ink, dark CTA text — deep near-black blue, never pure black | | Steel | `#50617a` | `--color-steel` | Body text, secondary headings, default link color — the workhorse neutral that reads as typography, not decoration |

# Honk — Style Reference > Billboard xanh coban với một vệt highlight vàng **Theme:** light Honk vận hành trên hệ thống thiết kế nền xanh bão hòa dành cho một sản phẩm nhắn tin muốn năng lượng, không phải kiềm chế. Toàn bộ viewport là một khung xanh điện (#008fff) với typography trắng và vàng tín hiệu nổi trên đó — không có xám ấm, không thẻ mềm, không chrome light-mode. Headlines là một custom heavy display face ở 52px, tracking chặt, với một hoặc hai từ được chuyển sang vàng rực (#ffe400) để các từ khóa bật ra khỏi headline. Bề mặt tối giản: mọi thứ hoặc nằm trực tiếp trên nền xanh, hoặc dùng một panel trắng cứng với border-radius 16px làm notification/UI element. Phone mockup mang màu phụ duy nhất (game-green) và nổi với các chi tiết trang trí tinh tế — speech bubbles, emoji-shaped UI nubs. Hệ thống mang phong cách vui tươi, tự tin, và cố tình ồn ào: nó chống lại phong cách doanh nghiệp, chống lại tối giản, và dùng độ bão hòa màu làm phương tiện thương hiệu chính thay vì typography hay layout cầu kỳ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Honk Blue | `#008fff` | `--color-honk-blue` | Full-viewport page canvas, hero background, tất cả section cấp cao nhất — màu xanh điện CHÍNH LÀ bề mặt thương hiệu, không phải accent phụ | | Honk Sky | `#00a0ff` | `--color-honk-sky` | Xanh phụ cho dải gradient, hình trang trí lớn, và lớp chiều sâu phía sau canvas chính | | Signal Yellow | `#ffe400` | `--color-signal-yellow` | Từ nhấn trong headlines, gạch chân heading border, và dấu câu highlight — điểm nhấn màu duy nhất trên nền xanh, dùng tiết kiệm để nhấn mạnh thay vì trang trí | | Honk White | `#ffffff` | `--color-honk-white` | Viền siêu mỏng, divider, input outlines, và card edges trên bề mặt sáng. Không nâng nó lên thành màu CTA chính |

# Desktop.fm — Style Reference > Chrome disc in a laser grid — Apple keynote restraint meets cyberpunk CD-ROM nostalgia. **Theme:** light Desktop.fm is a near-monochrome product page that treats a single 3D-rendered object as the entire hero. The canvas is a cold light gray, the chrome disc floats centered, and the interface furniture is reduced to a single macOS-style window card with one black button. Typography is aggressive: system fonts pushed to weights 700-800 with tight tracking, never thin or light. The page is 1% chromatic by design — the only color comes from the rendered scene (neon green laser lines across a silver CD), and that color is not part of the UI token system, it is the product. Components are compact, radii are mostly sharp (1.5px), and the only soft radius belongs to the app-window card itself (25px) and the pill-lozenge button (20px). The result reads as an Apple product page filtered through a cyberpunk CD-ROM era — restrained chrome surfaces, one bold interactive element, and atmosphere carried entirely by a 3D asset rather than by gradient or illustration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas Mist | `#f1f2f3` | `--color-canvas-mist` | Page background, dominant surface across hero and surrounding space | | Carbon Black | `#111111` | `--color-carbon-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Pure White | `#ffffff` | `--color-pure-white` | Elevated card surface (app window mockup), inverse text on dark buttons | | Graphite | `#2d2d2d` | `--color-graphite` | Secondary dark surfaces, icon strokes, muted dark UI elements |

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

# Awesomic — Style Reference > Rounded midnight marketplace — a portfolio gallery cut from matte black tiles on a white tablecloth, where large rounded corners and a single custom typeface do all the expressive work. **Theme:** light Awesomic operates on a white-and-near-black canvas with maximum roundness — 36px cards and pill-shaped containers dominate every surface, creating a soft, approachable tension against the very dark #09090b fills used for primary actions. The neutral scale is dense and graduated (gray-50 through gray-950), but only 3-4 steps appear in any single view, keeping contrast high without complexity. The single custom typeface, Cosmica, spans the entire system from 10px badge labels to 64px display headlines — its weight range (300–700) does all tonal work that color doesn't. Accent color is almost entirely absent from the UI layer: vivid orange (#ff5a00) surfaces only on YC badge labels, and the vivid pink (#fe45e2) is a single decorative card wash — the system's restraint makes these moments land harder. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#09090b` | `--color-obsidian` | Primary filled button backgrounds, display heading text on white surfaces — the system's anchor dark, nearly true black | | Ink | `#18181b` | `--color-ink` | Body text, nav text, badge text on light surfaces — one shade lighter than Obsidian, used for reading-weight text | | Graphite | `#3f3f46` | `--color-graphite` | Button borders, badge backgrounds (dark variant), border strokes across components — the dominant UI border tone | | Slate | `#52525b` | `--color-slate` | Mid-dark card backgrounds in dark sections, subtle icon fills |

# Pitch — Style Reference > Ánh sáng sân khấu màu tím trên nền trắng. Gradient tím đậm tràn ngập hero như ánh đèn sân khấu, sau đó trang web chuyển dần xuống một không gian làm việc sạch sẽ, phẳng, nơi một màu tím sáng duy nhất làm tất cả công việc. **Theme:** light Pitch là một nền tảng năng suất được chiếu sáng như sân khấu: hero tràn ngập gradient tím tươi sáng như ánh đèn sân khấu, phần còn lại của trang lắng xuống một không gian làm việc slate-and-white sạch sẽ, nơi màu sắc được phân bổ như dấu câu chức năng. Typography kết hợp một geometric sans có tracking rộng (Eina01) cho UI với một display sans nặng, tracking chặt (Mark Pro) cho headline — hai giọng nói tạo ra một hệ thống phân cấp rõ ràng giữa bề mặt sản phẩm và giọng marketing. Các bề mặt là flat white với bóng mờ, độ mờ thấp; màu tím (#6b53ff) mang mọi hành động và brand mark, một màu vàng ấm duy nhất (#ffd02c) thêm điểm nhấn năng lượng, và một màu than gần đen (#2b2a35) làm công việc nặng nhọc cho text. Các component nhỏ gọn và tự tin — pill buttons, bán kính nhỏ (6–20px), padding 20px chặt chẽ, và cố tình không có trang trí. Nhịp điệu trang xen kẽ giữa các dải full-bleed tím đậm và các phần nội dung sáng, tạo ra nhịp kịch từ cảnh tượng đến nội dung. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Violet | `#6b53ff` | `--color-signal-violet` | Điểm nhấn tím 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 | | Lighter Violet | `#8d49f7` | `--color-lighter-violet` | Điểm nhấn thương hiệu phụ, điểm dừng gradient highlight, icon fills, lớp phủ tím trang trí — một phiên bản sáng hơn dùng khi Signal Violet có vẻ quá nặng | | Deep Indigo | `#371789` | `--color-deep-indigo` | Text thương hiệu tối, điểm dừng gradient tối, điểm nhấn footer/marketing trên phần trắng — mặt tối của họ tím | | Solar Yellow | `linear-gradient(90deg, #ffd02c, #ff9e2c)` | `--color-solar-yellow` | Điểm nhấn năng lượng — slide preview highlights, decorative bursts, gradient start, illustration fills. Dùng tiết kiệm như dấu câu thị giác, không bao giờ là màu chức năng; Gradient ấm làm điểm nhấn — linear-gradient(90deg, #ffd02c, #ff9e2c) cho decorative bursts và illustration gradients |

# Glein — Style Reference > Atelier lookbook on warm linen — full-bleed photography, hairline rules, one whisper-weight voice. **Theme:** light Glein operates as a monochromatic editorial canvas: oversized product and lifestyle photography fills nearly every viewport, with white sans-serif category labels floating directly on top of the imagery. The palette is a tight warm-achromatic system — Bone White, Midnight Black, a signature Warm Sand beige, and Concrete Gray — with zero chromatic accent, which forces the photography's natural tones (denim, linen, leather) to become the color story. Typography stays at weight 400 across both the grotesque and monospace companion; no bold weights exist, so hierarchy is built through size alone, culminating in a 111px display. Components are razor-thin: hairline black borders, zero radius, micro-padding, and no shadows. The result reads like an art-school lookbook — restrained, tactile, and quiet, where the absence of decoration is the signature. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, nav hairline borders, footer dividers, section rules, button text. Dominant structural color — defines the graphic skeleton against the warm canvas | | Bone White | `#ffffff` | `--color-bone-white` | Page canvas, card surfaces, overlay text on dark imagery, cookie dialog background. The breathing space | | Warm Sand | `#ebe6dc` | `--color-warm-sand` | Secondary surface and section bands — the warm beige that gives the atelier its linen-like tactility. Section dividers, footer wash, category card backgrounds | | Concrete Gray | `#8c8c8c` | `--color-concrete-gray` | Muted secondary text, tertiary borders, subdued image overlays. The recede color — present but never competing |

# Planpoint — Style Reference > Bản thiết kế trên bàn vẽ trắng — một sơ đồ bất động sản tương tác được hiển thị trên giấy tinh khiết, với một cây bút xanh và một bút highlight vàng để nhấn mạnh. **Theme:** light Planpoint sử dụng thẩm mỹ bản thiết kế bất động sản trên nền canvas trắng sạch: khoảng trắng rộng rãi, các thành phần hình pill, và display type đậm, tự tin mang phong cách bản vẽ mặt bằng được phác thảo trên giấy chất lượng cao. Giao diện gần như đơn sắc — chữ gần đen (#1d1d1f) và bề mặt trắng đảm nhận toàn bộ trọng lượng cấu trúc — với một màu xanh lam duy nhất (#0f68ea) dành riêng cho hành động chính và một màu vàng ấm (#ffcb00) chỉ xuất hiện như điểm nhấn mới lạ. Các component giữ nhẹ nhàng và mềm mại: bán kính pill lớn, một drop shadow nhẹ ở độ mờ 6%, không có gradient trang trí hay skeuomorphism. Typography là yếu tố thiết kế chủ đạo: Inter ở kích thước cực lớn (headline 50–72px, display 144px) với negative tracking dày đặc mang lại thẩm quyền kiến trúc cho trang, trong khi body text ở kích thước thoải mái 16–18px với line height rộng rãi. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink | `#1d1d1f` | `--color-ink` | Văn bản chính, nét icon, button fill tối — màu gần đen hơi ấm, chọn thay vì đen tuyền để tạo cảm giác in ấn thay vì kỹ thuật số | | White | `#ffffff` | `--color-white` | Nền trang, bề mặt card, chữ trên button tối, tất cả input field | | Mist | `#f0f2f4` | `--color-mist` | Bề mặt nâng nhẹ, button fill không hoạt động, nền card phụ | | Fog | `#e5e6e8` | `--color-fog` | Viền mảnh, divider nhẹ, phân cách section |

# Poly — Style Reference > Ember trên nền sứ — một chấm gradient ấm lơ lửng trên trang editorial trắng tinh, bao quanh bởi headline serif nhẹ nhàng và ảnh full-bleed. **Theme:** light Poly là phần mềm editorial: nền canvas off-white ấm (#f4f4f4), mực gần đen cho text và UI, và một gradient duy nhất từ cam ember sang đỏ dành riêng cho brand mark. Nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí — ảnh full-bleed về bàn làm việc với chất liệu tự nhiên và ánh sáng định hướng ấm thay thế cho illustration và trang trí. Display type là humanist serif (Haffer ở weight 450, với tính năng liga và ss04) được kéo chặt ở -0.02em, kết hợp với Inter cho UI. Hệ thống mang cảm giác kiềm chế như cách một trang tạp chí kiềm chế: một khoảnh khắc màu sắc duy nhất, đường viền mảnh thay vì đổ bóng, bán kính 8px ở mọi nơi, và lưới cột để ảnh có không gian thở. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ember Gradient | `linear-gradient(134.77deg, #f4824d 25.1%, #f42919 74.9%)` | `--color-ember-gradient` | Brand mark, logo Poly, điểm nhấn màu duy nhất — cam ấm chuyển sang đỏ tín hiệu, chỉ dùng trên identity, không bao giờ dùng trên body UI | | Porcelain | `#f4f4f4` | `--color-porcelain` | Canvas trang, bề mặt card, text inverted trên nền ảnh tối | | Onyx | `#000000` | `--color-onyx` | Viền tối và separator cho bề mặt nâng cao và UI inverted. Không dùng làm màu CTA chính | | Graphite | `#292930` | `--color-graphite` | Text phụ, viền mảnh, icon fill, độ ấm nhẹ giúp gần đen không bị lạnh lẽo |

# Seed — Style Reference > Apothecary greenhouse at dawn — warm parchment walls, deep botanical greens, pill-shaped vessels, and a single sunlit lime accent for small moments of life. **Theme:** light Seed presents an apothecary-meets-modern-clinical aesthetic: a warm parchment canvas, one deep forest green that does all the chromatic work, and pill-shaped forms everywhere. The interface is flat and unshadowed — boundaries are drawn with color contrast and hairline rules, not elevation. Typography is custom, tightly tracked, and deliberately humanist in its lighter weights (300–350), lending a calm, editorial authority rather than a hard pharma feel. Color is restrained to the extreme: a single dark green carries text, buttons, and iconography; a single lime green is reserved for punctuation — badges, highlights, the small green dots beside DS-01® callouts. The result reads as botanical laboratory: scientific in rigor, organic in warmth, and confidently minimal in ornamentation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Forest Canopy | `#1c3a13` | `--color-forest-canopy` | Primary brand green — headlines, body text on light surfaces, filled CTA buttons, icon strokes, active nav markers, card borders and outlines | | Lime Sprout | `#d3fa99` | `--color-lime-sprout` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content | | Warm Parchment | `#fcfcf7` | `--color-warm-parchment` | Primary canvas and surface — page background, card surface, input field background, button surface for ghost/neutral controls | | Pale Stone | `#eeeee9` | `--color-pale-stone` | Subtle raised surface — section bands, secondary card backgrounds, muted dividers and zones |

# Surface — Style Reference > editorial gallery trên nền vải lanh màu xương — một từ duy nhất 230px neo giữ các bức ảnh rải rác trên nền trắng tinh khiết, mọi thứ còn lại chỉ là thì thầm của chữ đen. **Theme:** light Surface là một ấn phẩm editorial kỹ thuật số mang hình hài tạp chí in: canvas trắng xương (#f7f7f7) nơi hầu như mọi thứ đều là chữ đen, và bố cục tự thân đóng vai trò thương hiệu. Hệ thống thị giác mang tính triệt để trong sự kiềm chế — không màu nhấn, không border, không shadow, không gradient, không bo góc. Thay vào đó, cá tính đến từ scale chữ (display weight 230px) và từ những bức ảnh editorial được đặt có chủ đích, phá vỡ grid theo nhiều góc. Navigation được rút gọn thành monogram, wordmark và hamburger. Các khối nội dung thở với lề trái rộng và padding dọc thoáng đãng, đọc như một trang tạp chí hơn là một sản phẩm web. Một AI agent nên xem đây là 'design system của sự vắng mặt' — mỗi phần tử thêm vào phải chứng minh được vị trí của nó trên nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone | `#f7f7f7` | `--color-bone` | Canvas trang, bề mặt card, nền section — màu duy nhất không phải đen trong toàn bộ hệ thống | | Pressed Ink | `#000000` | `--color-pressed-ink` | Toàn bộ chữ, border, icon, trạng thái link, nav strokes, heading rules — toàn bộ giao diện giao tiếp bằng đen tuyền trên nền Bone | ## Tokens — Typography

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

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