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

# Framer — Style Reference > Phòng trưng bày nửa đêm với chữ monumental — một sảnh triển lãm tối nơi những headline 100px treo trên tường đen như tác phẩm nghệ thuật được chiếu sáng. **Theme:** dark Framer là một phòng trưng bày đen tuyền nơi chữ sans-serif khổng lồ trôi nổi trên khoảng không, và một màu xanh điện duy nhất làm tất cả công việc tạo điểm nhấn. Giao diện về cơ bản là kiến trúc typographic: headline display khổng lồ (85–110px) với tracking âm mạnh neo giữ từng section, trong khi một grid các project tile duy nhất ở mid-scroll thực hiện công việc thị giác mà gradient hoặc illustration thường làm ở nơi khác. Các component được thiết kế một cách có chủ ý yên tĩnh — pill-shaped buttons, hairline borders, shadow gần như vô hình — để typography và showcase imagery mang năng lượng. Mật độ compact (10px gutters), các bề mặt là những sắc thái gần đen khó phân biệt, và điểm nhấn màu sắc duy nhất là #0099ff cho link và emphasis, tạo ra bầu không khí designer-tool giống một portfolio site hơn là một SaaS landing page. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Nền trang, hero canvas, bề mặt sâu nhất — mặc định ở mọi nơi; không gì nằm trên nó, mọi thứ trôi nổi bên trong nó | | Obsidian | `#080808` | `--color-obsidian` | Bề mặt phụ cho card và panel trực tiếp trên canvas — sáng hơn Void một cách khó nhận thấy, nên độ cao được cảm nhận hơn là nhìn thấy | | Graphite | `#171717` | `--color-graphite` | Bề mặt card nâng cao, modal backgrounds, project tile frames — lớp card khác biệt rõ ràng nhất phía trên canvas | | Carbon | `#222222` | `--color-carbon` | Panel có độ cao cao hơn, inset wells, code blocks — một bước lên từ Graphite cho nội dung cần cảm giác được bao bọc |

# Frontier AI LLMs — Style Reference > warm parchment with a campfire heart **Theme:** light Mistral's visual system reads as a sunlit workshop on warm paper — a cream-ivory canvas (#fffaeb) that feels like aged parchment, generously padded with a single vivid orange (#fa520f) doing all the chromatic talking. The hero erupts into a dramatic amber landscape gradient with mountain silhouettes, then everything afterward returns to that quiet, warm, almost tactile quietness. Typography stays in a clean system sans (Arial) with tight -0.025em tracking that tightens the lines into one confident whisper. The system has an unusual visual signature: warm-toned shadows tinted in olive-gold rather than cool gray, giving every elevated element a 'lit from within by firelight' quality. Density is comfortable and confident, not dense — breathing room is part of the brand. The product mockups in the body break into dark UI panels floating on the cream, creating contrast between the paper-warm site shell and the structured dark application surfaces. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Canvas | `#fffaeb` | `--color-parchment-canvas` | Page background, hero body, section fills — warm cream-ivory that replaces the typical white SaaS canvas and gives the system its sunlit, paper-like quality | | Pure Card | `#ffffff` | `--color-pure-card` | Card surfaces, elevated panels, feature blocks, and product mockup shells — pure white that reads brighter than the canvas and creates a subtle paper-on-paper layering | | Midnight Ink | `#1f1f1f` | `--color-midnight-ink` | Primary body text, headings, nav links, button text — near-black rather than pure black keeps text from feeling harsh against the warm canvas | | Carbon | `#000000` | `--color-carbon` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |

# Air — Style Reference > sky canvas, frosted glass **Theme:** light Hệ thống thị giác của Air gợi lên trải nghiệm thanh bình, tựa như mây, với chủ đề nền bầu trời xanh chủ đạo. Typography cân bằng giữa font display custom biểu cảm để tạo ấn tượng và font chức năng tinh tế để đảm bảo rõ ràng. UI elements phần lớn là đơn sắc, duy trì sự tập trung thông qua các biến thể bề mặt tinh tế và các thành phần dạng ghost. Một màu xanh dương accent duy nhất được dành riêng cho trạng thái tương tác, dẫn dắt sự chú ý của người dùng và làm nổi bật các hành động chính trên nền trời rộng lớn, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Sky Canvas | `#426188` | `--color-sky-canvas` | Background trang chủ đạo, tạo chiều sâu và bầu không khí như bầu trời. Cũng được dùng cho màu headline trang trí và border | | Action Blue | `#2b7fff` | `--color-action-blue` | Accent chính cho interactive elements, như outlined buttons và links, dẫn dắt hành động người dùng | | Midnight Ink | `#000000` | `--color-midnight-ink` | Màu chữ chính cho headlines và body copy, đảm bảo độ tương phản cao trên bề mặt sáng. Dùng cho border của các phần tử được chọn | | Cloud White | `#ffffff` | `--color-cloud-white` | Background cho bề mặt UI chính, header, và text nơi cần độ tương phản với các phần tử tối hơn. Cũng dùng cho ghost button border và text |

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

# Visual — Style Reference > Warm editorial zine. Cream paper, serif posters, mono marginalia, a single yellow highlighter mark. **Theme:** light Visual speaks an editorial design dialect: a warm cream canvas (#f6f6f4) holds a high-contrast modern serif at near-poster sizes (64–96px) paired with monospaced UI text at 12–16px. The palette is near-monochrome — warm blacks, olive-sage neutrals, and a single vivid yellow (#fff347) deployed as decorative punctuation on accent bars and highlight washes. Surfaces stay flat with hairline 1px borders; visual hierarchy comes from color contrast and generous 80px section gaps, never from shadows. Components are lightweight and geometric: 8px-radius cards, 3px-radius nav, tiny all-caps mono labels, and a neutral dark button that reads as 'next' rather than 'buy now'. The overall feel is a design museum catalog that happens to contain a product — confident, restrained, and slightly cerebral. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vellum | `#f6f6f4` | `--color-vellum` | Page background — the warm off-white that defines the entire canvas tone | | Paper | `#ffffff` | `--color-paper` | Card surfaces, elevated panels, product mockup backgrounds | | Ink | `#000000` | `--color-ink` | Primary text, heavy structural borders, nav bar outlines | | Carbon | `#2c2c26` | `--color-carbon` | Warm near-black for dark panels, footer background, and neutral filled button fill — the only filled button in the system |

# Raus — Style Reference > Warm cabin journal on cream paper — every page a postcard from the woods. **Theme:** light Raus is an editorial cabin-booking platform rendered as a warm, hand-printed travel journal: cream paper backgrounds, generous generous breathing room, and photography that sits beside text rather than beneath it. The brand uses a deep forest green as a calm, non-shouting identity color — present in the wordmark and key links but never screaming — while a bright marigold yellow search bar acts as the single visual exclamation point on each page, anchoring the booking flow. Typography does the heavy lifting: a single neo-grotesque face set at weight 300 with tight negative tracking creates an airy, almost whispered voice that contrasts with the confident, rounded geometry of the components. Surfaces are warm and matte, corners are generously rounded (20px is the default, 40px for hero cards), and shadows are absent — depth comes from layering cream on cream, not elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal | `#23212c` | `--color-charcoal` | Body text, headings, dark surfaces, icon strokes, hairline borders. Anchors the entire system — almost-black but slightly warm, never pure black | | Paper | `#f7f0e1` | `--color-paper` | Primary page background and card canvas — warm cream that gives the entire site its printed, hand-made feel. Not white, not beige; paper | | Snow | `#ffffff` | `--color-snow` | Search bar text, button labels on dark fills, image overlays, and any surface that needs to sit forward of the cream canvas | | Pine | `#006434` | `--color-pine` | Brand wordmark, primary headings on hero, link text, and the only chromatic authority — deep forest green used sparingly to mark identity, never decoration |

# Sauce Labs — Style Reference > Neon-lit command center on obsidian glass — a dark engineering console where a single green pulse marks every live signal. **Theme:** dark Sauce Labs operates as a neon-lit engineering console: deep obsidian canvas (#132322) with white precision typography and a single vivid green (#3ddc91) that activates every interactive surface. The system alternates between dark structural bands and light content cards (#edf7f5), creating rhythm through luminance contrast rather than ornament or elevation. Components are confident and generously rounded — 56px pill buttons, 20px card radii, minimal shadow — reading as high-end developer tooling where the product's intelligence is the visual subject. The green accent is rationed: it appears on primary actions, active tab states, announcement bars, and stat highlights, never as decoration, which gives it real semantic weight. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Shell | `#132322` | `--color-obsidian-shell` | Primary page background, dark navigation, dark card surfaces — the structural canvas that absorbs everything else and makes the green accent feel electric by contrast | | Pure White | `#ffffff` | `--color-pure-white` | Primary text on dark surfaces, card content backgrounds, light section canvases — maximum contrast against the obsidian shell | | Mint Frost | `#edf7f5` | `--color-mint-frost` | Light content card surfaces, elevated feature panels — the bright counterpoint that breaks up dark sections and hosts detailed content | | Deep Abyss | `#0e1a19` | `--color-deep-abyss` | Darker surface variant for nested elements, deep card backgrounds, gradient endpoints — pushes further into the void when extra depth is needed |

# Epidemicsound — Style Reference > Ghi chú liner boutique trên giấy ngập nắng. Một spread trắng kem ấm với custom editorial serif, một mảng hồng neon duy nhất phá vỡ sắc đơn sắc như bìa tạp chí, và các CTA đen sắc nét mang cảm giác như tem mực — không phải sản phẩm phần mềm, mà là một vật thể in ấn tình cờ phát nhạc trực tuyến. **Theme:** light Epidemic Sound mang phong cách editorial của ngành công nghiệp âm nhạc: một canvas trắng xương ấm áp, UI sans-serif đen tự tin, và một custom serif tương phản cao làm giọng thương hiệu ở kích thước display. Một màu hồng neon rực rỡ (#ff82c2) là điểm nhấn đặc trưng — được dùng có chừng mực làm nền section full-bleed và nhấn mạnh inline, không phải trang trí rải rác. Độ sặc sỡ ở mức 1%, vì vậy hệ thống nên mang cảm giác gần như đơn sắc, với màu sắc xuất hiện như dấu câu editorial có chủ đích (hồng, xanh tín hiệu, vàng nắng). Các component phẳng và hình chữ nhật, gần như không có border-radius, rất ít shadow — thiết kế dựa vào trọng lượng typography và khoảng cách rộng rãi để tạo hierarchy. Italic bên trong display serif là một signature move: nhấn mạnh được đặt trong cùng một font family thay vì một màu sắc hay trọng lượng riêng, mang lại cho headline chất văn chương, gợi nhớ liner notes. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Hot Pink | `#ff82c2` | `--color-hot-pink` | Nền section điểm nhấn đặc trưng (announcement bar, Feature Highlight Block), nhấn mạnh inline link — dấu câu editorial của thương hiệu. Dùng full-bleed, không dùng làm tint | | Sun Yellow | `#ffda40` | `--color-sun-yellow` | Lớp phủ điểm nhấn và decorative badge fills. Điểm nhấn sắc độ thứ hai kết hợp với hồng trong bảng màu đặc trưng của thương hiệu | | Signal Blue | `#20afff` | `--color-signal-blue` | Nền section phụ, decorative callout. Một điểm nhấn lạnh làm đối trọng với hồng và vàng ấm, dùng khi cần một khoảnh khắc sắc độ thứ ba trong các trang dài | | Ember Orange | `#ff6138` | `--color-ember-orange` | Điểm nhấn sắc độ rải rác cho icon strokes và decorative highlights nhỏ. Không định nghĩa section |

# Koox — Style Reference > Phòng thí nghiệm ép lạnh phong cách Brutalist — gạch men trắng, in sticker, giọng điệu stencil. **Theme:** light Koox là một phòng thí nghiệm ép lạnh phong cách Brutalist, nơi gạch subway trắng kết hợp với ảnh sản phẩm và typography stencil mạnh mẽ. Thương hiệu sử dụng headline in hoa tự tin, tracking rộng ngang trang, viền màu cam như vữa gạch bao quanh mọi bề mặt như một bức tường ốp gạch, và bảng màu apothecary xanh đậm được neo bởi một bóng đổ burgundy lệch cứng duy nhất, khiến mọi nút bấm trông như một sticker in lụa. Các trang luôn sáng và sạch sẽ — canvas trắng, chữ gần đen, đường kẻ mảnh — với màu sắc chỉ dành cho các điểm nhấn chức năng: khung cam, CTA xanh đậm, bóng đổ burgundy. Kết quả là ồn ào nhưng có kỷ luật, giống như một quán nước ép do một nhà in thiết kế. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Tile Grout | `#d25a24` | `--color-tile-grout` | Viền thương hiệu và link accent — nét vẽ màu cam như vữa gạch bao quanh card, link và cạnh section, mang hơi ấm của gốm nung lên canvas trắng sạch sẽ | | Cold-Press Green | `#113722` | `--color-cold-press-green` | Màu nền action chính — xanh thực vật đậm cho nút CTA dạng filled, footer band và nền nút danh mục, báo hiệu sản phẩm bên trong mà không cần dùng đến tông xanh của ảnh đồ ăn | | Sticker Crimson | `#6b1229` | `--color-sticker-crimson` | Bóng đổ lệch cứng — burgundy đậm tạo bóng đổ 5px không blur dưới sticker và nút được nhấn mạnh, biến các element phẳng thành các lớp in lụa dán lên trang | | Noir | `#000000` | `--color-noir` | Navigation, body text và màu viền mặc định — màu đen cứng rắn cho mọi đoạn văn, icon stroke và card hairline |

# HyperAktiv — Style Reference > Swiss editorial broadsheet. Black display type 90px trên nền trắng, với electric blue là điểm nhấn màu duy nhất. **Theme:** light HyperAktiv hoạt động như một poster editorial kiểu Thụy Sĩ: nền trắng tinh, display type đen cỡ lớn, và một mảng electric blue (#0000ff) chỉ xuất hiện trên action và footer. Headline chiếm ưu thế ở kích thước 72–90px với line-height được nén xuống 0.89–1.0, thu gọn trang thành một cột dọc các khối typographic đồ sộ. Layout luân phiên giữa ảnh full-bleed và split 50/50 bất đối xứng, xử lý ảnh nội thất như tư liệu thô thay vì tác phẩm được dàn dựng. Mọi thứ đều góc vuông, ngoại trừ một border-radius 20px duy nhất trên button, và bóng đổ duy nhất là bóng có sẵn trong ảnh — bản thân interface vẫn phẳng, nhị phân và đồ họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pure White | `#ffffff` | `--color-pure-white` | Nền trang, bề mặt card, chữ trên nền tối/nền action | | Absolute Black | `#000000` | `--color-absolute-black` | Body text, heading, icon strokes, border hairline, image overlays | | Mid Graphite | `#333333` | `--color-mid-graphite` | Chữ trong input, nội dung phụ | | Light Silver | `#cccccc` | `--color-light-silver` | Border input, đường phân cách form nhẹ |

# ARTU — Style Reference > Gallery wall trên nền giấy trắng. ARTU xem trình duyệt như một bảo tàng trải rộng — ảnh sản phẩm cỡ lớn, đường kẻ mảnh (hairline rules), và một mảng xanh chanh duy nhất ở mép dưới để khép kín không gian. **Theme:** light ARTU hoạt động như một phòng trưng bày nội thất dưới dạng trình duyệt: một font neo-grotesque tùy chỉnh với một weight duy nhất, canvas trắng tinh, ảnh sản phẩm lấp đầy viewport, và hầu như không có UI chrome hiển thị. Sự kỷ luật ở đây là cực đoan — chỉ có một weight, một họ font, hai màu bề mặt, và khoảng trống âm (negative space) đảm nhận vai trò mà shadow và gradient thường làm ở nơi khác. Màu sắc được sử dụng một cách phẫu thuật: màu xanh chanh có độ bão hòa cao (#d7ff66) chỉ xuất hiện ở band footer như một tín hiệu kết thúc, trong khi màu đỏ thô (#ff1313) xuất hiện dưới dạng đường viền mảnh và nét icon — cố tình không đạt độ tương phản, nó hoạt động như nhịp điệu đồ họa, không phải thông tin. Kết quả mang phong cách giống một trang sách nghệ thuật hơn là một trang thương mại: sản phẩm là bố cục, bố cục là khoảng trắng, và UI là một đường đen mảnh của thanh navigation viết hoa ở mép trên. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, khung ảnh — toàn bộ site nằm trên nền trắng tinh | | Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, đường viền mảnh, navigation, gạch chân link, khung ảnh — màu cấu trúc duy nhất | | Terminal Lime | `#d7ff66` | `--color-terminal-lime` | Band footer, mảng highlight bề mặt, điểm nhấn kết thúc — màu xanh bão hòa cao báo hiệu ranh giới trang, giống như mép màu đóng một bức tường gallery | | Signal Red | `#ff1313` | `--color-signal-red` | Nét viền trang trí, đường viền icon, đường kẻ mảnh trong bố cục editorial — được dùng ở độ tương phản dưới ngưỡng đọc được, như dấu câu đồ họa, không bao giờ là body text |

# Lightdash — Style Reference > pixel-grid tím trên giấy vẽ kỹ thuật **Theme:** light Lightdash hoạt động như một command center dành cho developer, mang phong cách điềm tĩnh: nền gần trắng với typography slate-gray, đường viền hairline tinh tế, và một màu tím bão hòa (#5e4cff) làm điểm nhấn cho mọi tương tác. Brand voice tự tin và nhẹ nhàng — headline được đặt bằng custom geometric sans (Britti Sans) ở kích thước 48–76px với tracking cực kỳ chặt (-0.025em), tạo cảm giác kiến trúc hơn là trang trí. Body copy dùng Inter ở 14–18px với letter-spacing hơi âm, giữ cho thông tin dày đặc vẫn dễ đọc mà không nặng nề. Các surface phân lớp nhẹ nhàng từ canvas #ffffff đến section #f6f8fa và card bo tròn 12px. Một mosaic pixel-art tím trong hero là điểm trang trí duy nhất — một cái gật đầu có chủ đích cho bản sắc 'code-native'. Các component phẳng và không viền theo mặc định; độ cao được tạo từ rgba shadow nhiều lớp pha màu slate (#272835) thay vì xám trung tính, giúp mọi card luôn đúng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang chính, bề mặt card, input fills | | Cloud Mist | `#f6f8fa` | `--color-cloud-mist` | Nền section thay thế, lớp surface phụ bên dưới trắng | | Frost Tint | `#eceff3` | `--color-frost-tint` | Surface cấp ba, khối nền mờ | | Ash Border | `#cdd2d9` | `--color-ash-border` | Đường phân cách hairline, viền card, đường kẻ bảng |

# ALSO — Style Reference > Tạp chí xe đạp trên giấy kem **Theme:** sáng ALSO mang phong cách một showcase sản phẩm editorial đầy tự tin — một tạp chí xe đạp được tái hiện cho web thay vì giao diện thương mại điện tử thông thường. Nền canvas kem ấm (#fcf7fa) bao phủ mọi bề mặt trong khi một màu tím điện duy nhất (#ac74fc) đảm nhận vai trò của cả một hệ thống màu sắc, xuất hiện trên link, border, highlight và phần fill của CTA chính. Typography cực kỳ chặt: ABCCameraPlainVariable đẩy negative tracking mạnh hơn khi kích thước lớn dần và line-height thu hẹp xuống 0.93 ở display, khiến ngay cả headline 60px cũng mang cảm giác kiến trúc thay vì ồn ào. Mono label in hoa (SerialC-Heavy) với positive tracking đóng vai trò là eyebrow, button text và section marker — nơi duy nhất hệ thống type được nới lỏng. Pill buttons (9999px) nằm trên hard shadow offset tím 2px không blur, trông như sticker ép lên giấy thay vì hiệu ứng elevation UI mềm. Các section full-bleed tím đảo ngược canvas sang chế độ accent mà không thay đổi typography, spacing logic hay component rules — cùng button, cùng shadow, cùng nhịp điệu, chỉ đảo màu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Cream Paper | `#fcf7fa` | `--color-cream-paper` | Canvas trang, nền section mềm — off-white ấm với một chút hồng rất nhẹ, không bao giờ là trắng tinh | | Pure Card | `#ffffff` | `--color-pure-card` | Bề mặt card, panel nâng cao, button text trên fill tím | | Ash Mist | `#f1f1f1` | `--color-ash-mist` | Bề mặt cấp ba, divider nhạt, lớp nền mờ tinh tế | | Carbon Black | `#000000` | `--color-carbon-black` | Text chính, border mặc định, icon strokes — mực cấu trúc của hệ thống |

# Huly — Style Reference > Aurora through a midnight observatory — the hero is a vertical beam of violet melting into coral, and every quiet section below it borrows that same two-color story told at lower volume. **Theme:** mixed Huly projects a cosmic-workspace atmosphere: near-black canvas with a single violet-to-amber aurora slicing through the hero, then a quieter productivity grid below. The system lives in a narrow chromatic band — one electric iris blue and one ember coral do all the brand work against layered graphite surfaces, so the dark mode never feels neutral. Typography is Inter for everything functional, with a custom display face (Esbuild) reserved for hero moments at 80–84px with aggressive negative tracking. Components lean pill-shaped: 9999px radii on controls, 12px on cards, minimal shadow, and glowing gradient strokes as the primary decoration. The page alternates between full-bleed dark spectacle and calm light sections, so any new screen must decide which mode it's in before picking colors. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Canvas | `#303236` | `--color-obsidian-canvas` | Page background, dominant surface — near-black with a whisper of warmth, the default stage for all content | | Void | `#090a0c` | `--color-void` | Deepest surface layer for hero gradients, modal backdrops, and borders that need to disappear into the canvas | | Charcoal Card | `#111111` | `--color-charcoal-card` | Elevated card and panel surfaces sitting one step above the canvas | | Slate Edge | `#4a4b50` | `--color-slate-edge` | Hairline borders and dividers on dark surfaces |

# Erno Forsström — Style Reference > editorial gallery on warm paper **Theme:** light A personal design director's portfolio built on radical editorial restraint: a warm off-white canvas, a single weight of a single grotesque typeface, and near-black ink for everything typographic. The page behaves like a printed monograph — generous margins, tight tracking, lines of body text that sit close together while the display headline compresses to a 0.93 line-height so ascenders and descenders nearly touch. The chrome is essentially invisible: a three-word header, hairline section dividers, project labels in the same size as the body. Color and shadow are absent by design; the only chromatic information comes from the photographic work itself, which sits as full-bleed dark imagery against the warm paper. Hierarchy is built exclusively through scale, tracking, and the dramatic jump from 21px to 58px. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#202020` | `--color-ink` | Body text, headings, project titles, hairline borders, and the bottom edge of links — a soft near-black that reads as flat black at body sizes but never goes dead 000 | | Bone | `#dfdcdc` | `--color-bone` | Page canvas and the implicit surface for every project card — a warm off-white with just enough gray to feel like paper, not a screen | | Ash | `#cdcecf` | `--color-ash` | Hairline divider tone that sits one step darker than the canvas to register as a visible rule without becoming a hard line |

# Superr — Style Reference > Cuốn vở học trò ấm áp dưới ánh nắng chiều nhẹ. Một trang giấy kem, một cây bút dạ màu cam chưa đậy nắp, và một xấp nhãn tên dán ép đang chờ được bóc ra. **Theme:** light Superr là một thẩm mỹ sân trường ấm áp được thể hiện dưới dạng kỹ thuật số: một canvas giấy kem, màu cam bút dạ là điểm nhấn màu duy nhất, và display type chunky viết thường mang phong cách nguệch ngoạc trong vở học trò — to và đầy cá tính. Sản phẩm được chụp ảnh như một vật thật — sổ tay bìa da, bút chì màu, nhãn tên dán ép — và chính những vật thể này, chứ không phải minh họa UI trừu tượng, mới là yếu tố thị giác chính. Các sticker minh họa vui nhộn (tia chớp, gấu, trái tim, ma) rải rác khắp layout như những điểm nhấn cá tính nhỏ, nhưng chúng là dấu câu trang trí, không phải icon hệ thống. Mọi bề mặt đều mờ và mềm: viền tối mảnh thay vì fill màu, bóng đổ tối thiểu, khoảng thở rộng rãi, và bo góc dừng ở 20px trước khi chuyển sang full-pill. Kết quả là một trang web có cảm giác như mở một quyển vở mới vào ngày đầu năm học — thong thả, xúc giác, và hơi tinh nghịch. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Cream Paper | `#fdfbf9` | `--color-cream-paper` | Canvas trang, bề mặt card, fill button — tông nền trắng ấm giúp viền tối và điểm nhấn cam trông như mực và bút dạ trên giấy | | Charcoal | `#171717` | `--color-charcoal` | Viền tối và đường phân cách cho bề mặt nâng cao và UI inverted | | Cocoa Ink | `#2b1a07` | `--color-cocoa-ink` | Màu headline, viền trang trí — màu tối ấm hơn, kế thừa tông da sổ tay thay vì đen tuyền | | True Black | `#000000` | `--color-true-black` | Dành riêng cho headline cần độ nhấn cao nhất và các trường hợp đặc biệt khi Charcoal quá mềm |

# Windsurf — Style Reference > Midnight aurora command center — a deep navy terminal where a single mint teal action glows and a chromatic ribbon is the only permitted spectacle. **Theme:** dark Windsurf's visual system is a midnight IDE that walked out into a marketing site: deep navy canvas (#011c42) with one bioluminescent teal accent (#34e8bb) that makes every action glow against the dark. Display headlines use tomatoGrotesk at weight 300 — size does the heavy lifting while weight stays whisper-thin, an anti-convention choice that creates authority through restraint. An aurora ribbon (blue→purple→pink gradient) sweeps across the hero as the sole moment of color spectacle; everywhere else the palette stays disciplined. Components lean pill-shaped (9999px) for actions and gently squared (6px) for cards, with shadows used sparingly because contrast on the dark canvas already creates depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Navy | `#011c42` | `--color-midnight-navy` | Page background, section canvas, footer — the dominant surface that gives the entire site its terminal-like confidence | | Canvas White | `#ffffff` | `--color-canvas-white` | Primary text on dark surfaces, icon strokes, card text in light contexts | | Obsidian | `#0b100f` | `--color-obsidian` | Near-black text for light-context sections, logo mark, high-contrast headings | | Warm Sand | `#f8f1e5` | `--color-warm-sand` | Secondary text on dark surfaces, warm accent surface, card borders in light contexts — adds cream warmth that prevents the dark UI from feeling sterile |

# FLORA — Style Reference > Black velvet gallery — pure dark canvas, vivid images as the only color **Theme:** dark FLORA is a black-velvet gallery for AI-generated imagery: a pure #000000 canvas where the only color comes from the images themselves. The interface is austere and editorial — no chromatic brand accent, no decorative gradients, no icon color. Geist carries every functional surface with quiet efficiency while Redaction 10 and Redaction 50 Italic lend expressive typographic weight to the few moments that need to feel curated (the hero question, the section openers). Components float on #191919 cards with hairline #b4b4b4 borders and 24px radii, looking more like matted photographs than software panels. The entire system is designed to disappear so that the generated visual output — the actual product — becomes the only vivid thing on screen. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, primary borders, image frame edges | | Carbon | `#191919` | `--color-carbon` | Card surfaces, elevated panels, input fields — one step above the canvas | | Graphite | `#303030` | `--color-graphite` | Deeper elevated surfaces, input interiors, subtle panel separation | | Slate | `#606060` | `--color-slate` | Muted headings, secondary borders, subdued labels |

# OFF WHITE — Style Reference > Khối typography glitch trên nền đen nửa đêm — một bức tường chữ xanh pixel, nơi ảnh chân dung một khuôn mặt người được ép vào khoảng trống giữa các chữ cái hoành tráng, trên nền đen tuyệt đối. **Theme:** dark Đây là một trải nghiệm editorial mang tính khái niệm, không phải product UI — hệ thống thị giác vũ khí hóa các thái cực nhị phân (canvas đen thuần, chữ trắng thuần) và ba điểm nhấn màu sắc rực rỡ (xanh điện, đỏ báo động, vàng hi-vis) để hiện thực hóa chủ đề 'vùng xám giữa đen và trắng' của trang web. Typography được phân cực có chủ đích: một custom display face blocky được scale lên 180–500px đóng vai trò kiến trúc, trong khi serif Times 16px thông thường thì thầm bên cạnh như một chú thích editorial. Layout theo hướng collage thay vì grid cứng nhắc — ảnh chân dung chồng lên display type, tràn ra ngoài khung, và xếp chồng rải rác bất quy tắc, tạo cảm giác zine/protest-poster, từ chối các pattern product UI thông thường. Khoảng cách dọc rộng rãi (60–120px) nhưng ngang thì dày đặc và hỗn loạn, không có max-width container nào giới hạn canvas. Custom display face 'Offwhite' là tài sản quan trọng nhất trong hệ thống: hình học blocky lấy cảm hứng từ pixel biến mỗi chữ cái thành một vật thể điêu khắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Voltage Green | `#00fb34` | `--color-voltage-green` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi có focus | | Alarm Red | `#ff0000` | `--color-alarm-red` | Viền khung, stroke trang trí, divider section — màu border được dùng nhiều nhất trong hệ thống. Borders tổng cộng 44 lần so với chỉ 12 lần background, nghĩa là đỏ được đọc như một khung hình chữ nhật cứng hoặc đường viền cảnh báo, không phải surface fill | | Caution Yellow | `#fff500` | `--color-caution-yellow` | Điểm nhấn outline vàng cho tags, divider, và cạnh UI có focus | | Absolute Black | `#000000` | `--color-absolute-black` | Page canvas, viền photo tile (104 image borders), tất cả màu chữ. Màu xuất hiện nhiều nhất trong hệ thống (3357 lần) — mọi thứ khác nổi trên nó |

# entire studios — Style Reference > Concrete-walled fashion zine — an editorial runway printed on warm cream paper, where photography is the only luxury. **Theme:** light A brutally reductive editorial fashion system: two colors (warm off-white canvas, pure black ink), one monospaced voice, compact spacing, and full-bleed photography that does every emotional job. The warm off-white #e7ecea replaces cold SaaS gray, giving every surface a paper-like, gallery-wall warmth rather than digital sterility. Space Mono at 12–16px and weight 400 refuses typographic hierarchy — distinction comes from position, whitespace, and the sheer scale of a single image, not from a type scale. Components are stripped to their skeleton: announcement bars, centered wordmarks, hairline-adjacent text links, and logo overlays that float over photography without chrome. The system reads like a fashion zine printed on heavy cream stock, not a typical e-commerce template. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone | `#e7ecea` | `--color-bone` | Page canvas, card surfaces, image gutters — warm off-white that reads as heavy cream paper or raw plaster, not digital gray | | Ink | `#000000` | `--color-ink` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Paper White | `#ffffff` | `--color-paper-white` | Reverse text on dark announcement bar, reverse logo overlays on photography |

# Officevibe — Style Reference > Editorial journal trên giấy kem ấm. Hãy nghĩ về một bài luận HR sâu sắc được thể hiện dưới dạng sản phẩm — serif italics thì thầm xuyên qua giao diện xanh hiện đại. **Theme:** light Workleap Officevibe nói bằng giọng editorial điềm tĩnh: một canvas kem ấm, khoảng trắng rộng rãi, và display type serif mang lại cho sản phẩm cảm giác văn học, gần như viết tay đầy uy tín. Bảng màu xoay quanh hai tông xanh — một xanh navy đậm như mực cho heading, thẻ tối, và trọng lượng editorial, và một xanh electric rực rỡ dành riêng cho button và các điểm nhấn tương tác. Bề mặt mềm mại như giấy với đường viền kem thay vì xám; các góc được bo tròn nhẹ nhàng (thẻ 16px, pill button 100px). Những từ serif in nghiêng nằm giữa headline sans-serif ("not paying attention", "Everything") là điểm nhấn đặc trưng: chúng phá vỡ giọng SaaS doanh nghiệp và khiến giao diện giống như một tạp chí được biên tập kỹ lưỡng. Mật độ thoải mái; widget chat được neo ở cuối mỗi màn hình là một phần của bản sắc, không phải thứ thêm vào sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Navy | `#0c1754` | `--color-ink-navy` | Display heading, thẻ tính năng tối, nền footer, body text trên canvas sáng — màu có trọng lượng editorial, dùng ở bất cứ đâu trang cần cảm giác được cân nhắc thay vì trang trí | | Electric Cobalt | `#2545ff` | `--color-electric-cobalt` | Điểm nhấn tím phụ 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 | | Charcoal | `#171417` | `--color-charcoal` | Body text và heading chính, nav text, icon stroke trên bề mặt sáng | | Warm Canvas | `#f9f8f6` | `--color-warm-canvas` | Nền trang, bề mặt footer, thẻ fill mềm, nền input — màu trắng kem ấm thống nhất |

# Adam Lippes — Style Reference > Monochrome editorial atelier trên nền cream paper — một trang Vogue nơi layout grid, chứ không phải bảng màu, là vật trang trí duy nhất. **Theme:** light Adam Lippes là một monochrome editorial atelier được xây dựng trên nền cream paper (#fefcf8) với typography Optima và ảnh thời trang full-bleed. Giao diện được kiềm chế có chủ đích: không điểm nhấn màu, không gradient trang trí, gần như không có bo góc — tấm ảnh chính là thiết kế. Hình ảnh sản phẩm mang toàn bộ trọng lượng thị giác bên trong một grid năm cột dày đặc; UI chrome lùi về sau những đường kẻ hairline và nav chữ hoa có tracking. Nút bấm là các khối đen tuyền hoặc outline ghost trên nền canvas ấm áp, và sự chuyển tông duy nhất giữa các trang đến từ chính nhiếp ảnh, không bao giờ đến từ UI chroma. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Canvas | `#fefcf8` | `--color-bone-canvas` | Nền trang chính — off-white ấm áp, toàn bộ site nằm trên canvas giống giấy này thay vì trắng tinh | | Press White | `#ffffff` | `--color-press-white` | Bề mặt thay thế cho product card, input field và overlay sắc nét cần tách biệt khỏi Bone Canvas | | Onyx Black | `#000000` | `--color-onyx-black` | Text chính, đường kẻ hairline, nút action đã fill, icon stroke và viền nav. Mực cấu trúc của hệ thống | | Graphite | `#403f3e` | `--color-graphite` | Text phụ và icon color — một màu đen đã làm mềm cho copy ít quan trọng hơn và viền outline button |

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

# LUNCH — Style Reference > velvet runway on warm parchment **Theme:** mixed LUNCH CONCEPT mang phong cách một ấn phẩm thời trang in ấn được đưa lên web: một hero ảnh tối full-bleed với brand wordmark xuất hiện dưới dạng chữ chrome 3D cỡ lớn, tiếp theo là một product gallery nhẹ nhàng, giống catalogue trên nền warm parchment. Trang web luân phiên giữa sự đối đầu điện ảnh và sự kiềm chế tĩnh lặng — hero tấn công thị giác, phần body thì thì thầm. Một màu lavender nhẹ duy nhất chỉ xuất hiện trên announcement bar, trạng thái 'Sold Out' và footer, đóng vai trò như một dấu chấm câu thương hiệu hơn là một tiếng hét. Typography chủ yếu là một custom sans-serif duy nhất (Good Sans) ở kích thước khiêm tốn, với hero wordmark là khoảnh khắc typographic đặc sắc duy nhất. Tương tác chỉ là text-link: không có filled buttons, không gradient, không chrome trang trí ngoài 3D logotype ở hero. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lilac Veil | `#b8aad0` | `--color-lilac-veil` | Lớp phủ tím nhạt cho highlight backgrounds, decorative bands và soft emphasis phía sau nội dung | | Ink Black | `#000000` | `--color-ink-black` | Tất cả body text, navigation text, link borders, card borders và badge borders — đường nét cấu trúc của toàn bộ giao diện | | Warm Parchment | `#f4f1e4` | `--color-warm-parchment` | Page và section backgrounds trong khu vực editorial/product — canvas tĩnh lặng để ảnh sản phẩm đặt lên | | Ivory Mist | `#fcfaf1` | `--color-ivory-mist` | Navigation text color trên hero tối, subtle surface variant và hairline borders — một giải pháp ấm hơn so với trắng tinh cho dark-section UI |