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

# Freelance frontend UI developer và designer, Rou Hun Fan — Style Reference > Zine in Riso trên giấy construction đen **Theme:** dark Một portfolio editorial brutalism dành cho frontend developer độc lập: nền gần như đen, display type condensed cỡ lớn, và một khối accent bão hòa cao duy nhất bùng nổ giữa khoảng không. Layout hoạt động như một trang tạp chí in — text trải dài qua các cột bất đối xứng, type tiếp xúc với ảnh ở các cạnh cứng, và whitespace được dùng như một yếu tố cấu trúc thay vì padding. Điểm nhấn đặc trưng là card cyan với display text magenta trông như được dán lên trang giống một sticker, phá vỡ kỷ luật đơn sắc. Typography gánh toàn bộ trọng lượng: một monospaced geometric cho giọng hệ thống, một condensed sans nặng để "hét", và một script calligraphic cho các điểm nhấn editorial nhằm nhân tính hóa thẩm mỹ máy móc. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Carbon | `#0a0a0a` | `--color-carbon` | Nền trang và các section background — gần như đen thật giúp tối đa độ tương phản của white type và các khối accent bão hòa | | Bone | `#ffffff` | `--color-bone` | Text chính, display headlines, border, và link strokes — giọng duy nhất cho phần lớn trang | | Voltage Cyan | `#1ef0e4` | `--color-voltage-cyan` | Nền accent card, highlight panels — cyan phẳng bão hòa nổi bật trên nền tối, dành riêng cho project cards và editorial callout blocks | | Plasma Magenta | `#e91e8c` | `--color-plasma-magenta` | Display text trên cyan cards, decorative script flourishes — hồng/magenta nóng chỉ dùng làm ink-on-cyan contrast hoặc editorial accent |

# Creative Giants — Style Reference > oversized editorial poster on cream paper **Theme:** light Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffef7` | `--color-bone-white` | Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel | | Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Graphite | `#666666` | `--color-graphite` | Secondary body text, captions, metadata, helper copy — recedes so display type can dominate | | Ash | `#aaaaaa` | `--color-ash` | Input borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed |

# Henry — Style Reference > Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed. **Theme:** mixed Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên | | Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper | | Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối | | Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |

# CLOU architects — Style Reference > mực trên giấy kem **Theme:** light CLOU architects vận hành trong một vũ trụ hai màu triệt để: kem ấm (#fffffc) và đen tuyệt đối (#000000). Không có màu nào khác được phép xuất hiện trong giao diện — mọi sắc thái còn lại đều đến từ ảnh kiến trúc tràn vào bố cục. Hệ thống được xây dựng trên một geometric sans-serif duy nhất (Circular Std) đẩy đến cực hạn: headline đạt 200px+, letter-spacing thắt chặt mạnh ở tỷ lệ lớn, và line-height nén xuống 0.80 cho display copy. Nền kem được chọn là off-white có chủ đích (không phải #ffffff), giúp tránh sự chói gắt khi đặt cạnh typography đen chủ đạo và mang lại cho trang cảm giác như giấy, như tường gallery ấm áp. Navigation là một thanh đen dày; body là khoảng kem rộng rãi; "trang trí" duy nhất chính là nhiếp ảnh — full-bleed, không khung, chính là dự án thực tế. Đây là một hệ thống thiết kế hầu như không nói gì về mặt thị giác để kiến trúc có thể nói lên tất cả. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Giấy Kem | `#fffffc` | `--color-cream-paper` | Page canvas, bề mặt card, button fills — màu off-white hơi ấm ngăn độ tương phản chói gắt với mực đen, mang lại cho toàn bộ site cảm giác ấm áp của giấy in thay vì cảm giác màn hình kỹ thuật số | | Mực Đen | `#000000` | `--color-ink-black` | Toàn bộ text, border, navigation background, button borders, icon strokes — màu foreground duy nhất trong hệ thống, dùng ở độ bão hòa hoàn toàn, không giảm opacity | ## Tokens — Typography

# Descript — Style Reference > Phòng thu phát thanh gặp tòa soạn báo — nền tối đỏ burgundy sân khấu, headline serif kiểu tòa soạn, tín hiệu on-air màu san hô. **Theme:** mixed Ngôn ngữ thị giác của Descript là mảng tối đỏ burgundy bị cắt bởi hành động đỏ san hô — giống như bên trong buồng thu âm, nơi tường hấp thụ mọi thứ và chỉ còn tín hiệu phát sáng. Màu đen-đỏ burgundy gần như đen `#390a1a` chiếm 70% hero, tạo ra độ tối sân khấu khiến CTA đỏ san hô (`#f73b3b`) trông như đèn báo on-air. Headline dùng Gamuth Display, một serif editorial custom ở 88px — một lựa chọn bất thường cho một sản phẩm SaaS, báo hiệu sự thủ công và sáng tạo nội dung hơn là tiện ích doanh nghiệp. Các phần sáng (`#faf8f7`, một màu trắng ấm) tạo độ tương phản giữa các dải tối mà không bao giờ dùng trắng tinh, giữ bảng màu thống nhất về độ ấm. Tag label như 'AI VIDEO EDITOR' dùng Brett, một typeface custom với tracking rộng 0.04em mô phỏng phong cách chyron phát thanh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Broadcast Burgundy | `#390a1a` | `--color-broadcast-burgundy` | Nền hero, bề mặt tối chính — tạo độ tối sân khấu khiến CTA san hô đọc như tín hiệu on-air | | On-Air Coral | `#f73b3b` | `--color-on-air-coral` | Nút CTA chính, label phần đang hoạt động — tín hiệu sống động duy nhất trên nền tối đỏ burgundy | | Hot Take Red | `#ff5340` | `--color-hot-take-red` | Highlight văn bản inline, nhấn phụ trong body copy | | Plum Mid | `#651a39` | `--color-plum-mid` | Trạng thái hover nav, nền nút phụ — sáng hơn Broadcast Burgundy một bậc để tạo chiều sâu tương tác |

# Caldera — Style Reference > Risograph zine trên nền bê tông ấm **Theme:** light Caldera là một brand crypto mang phong cách editorial brutalist: nền canvas bê tông trắng kem ấm áp, display type condensed gần như đen kéo dài tới 189px, và một màu cam rực duy nhất đảm nhận toàn bộ tương tác. Ngôn ngữ thị giác vay mượn từ văn hóa zine thập niên 90 và kỹ thuật in risograph — các chấm halftone chuyển từ cam sang tím trên hero panels và card thumbnails, tạo cảm giác in phẳng thay vì product UI bóng bẩy. Các bề mặt giữ phong cách thấp và mờ: cream cards nổi trên nền đá ấm, border là hairline black thay vì đổ bóng, và góc bo tròn mạnh (40px là bán kính chủ đạo, không phải 8px). Màu sắc được phân bổ hạn chế — phần lớn giao diện là đơn sắc đen-trên-kem, và màu cam chỉ xuất hiện ở nơi người dùng phải hành động, một con số phải nổi bật, hoặc một card phải báo hiệu membership của brand. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Concrete Canvas | `#e2e2df` | `--color-concrete-canvas` | Nền trang — đá xám nhạt ấm áp, bề mặt chủ đạo mà toàn bộ site nằm trên đó | | Cream Card | `#f7f6f2` | `--color-cream-card` | Bề mặt card, stat panels, khối nội dung nâng cao — sáng hơn canvas một bậc | | Ink | `#070607` | `--color-ink` | Headlines, body text, hairline borders, và các đường viền cấu trúc tạo khung editorial cho layout | | Pure Black | `#000000` | `--color-pure-black` | Icon strokes, border dày, và văn bản tối nhất khi Ink chưa đủ đậm |

# Aurora — Style Reference > chân trời tự chủ lúc bình minh — buồng lái trắng tinh nhìn ra xa lộ ngập nắng, một mặt đồng hồ xanh điện trên dashboard. **Theme:** light Giao diện của Aurora giống một xa lộ mở: canvas trắng trải rộng, chữ navy đậm đọc như vạch kẻ đường, và một điểm nhấn xanh điện duy nhất báo hiệu hành động giống như đèn xi-nhan. Hero là góc nhìn dashcam full-bleed với headline trắng 90px đè lên — ảnh chụp đảm nhận vai trò cảm xúc, UI đứng sang một bên. Bên dưới fold, bề mặt chuyển sang card xám nhạt mát, đoạn văn hiện dần từng chữ khi người dùng scroll, và gradient cyan-to-cobalt đặc trưng chỉ dành cho những khoảnh khắc xứng đáng với tên tuổi thương hiệu — hiếm hoi, sống động, luôn có chủ đích. Mọi thứ đều là hình chữ nhật với góc bo 8px, không đổ bóng, không trang trí hoa mỹ; chiều sâu đến từ việc xếp lớp màu sắc và tỷ lệ, không bao giờ đến từ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Horizon Navy | `#001733` | `--color-horizon-navy` | Văn bản chính, nav text, heading fills, viền ảnh tối, nền section — mực chủ đạo của hệ thống, không bao giờ là đen tuyền | | Signal Blue | `linear-gradient(269.64deg, #18dcdc -20.36%, #006aed 109.5%)` | `--color-signal-blue` | Nền action chính, nút CTA đã fill, trạng thái nav active, nút icon tròn, link accent trên bề mặt tối — cobalt sống động xứng đáng với cú click; Gradient đặc trưng cho những khoảnh khắc định nghĩa thương hiệu — nơi duy nhất cyan xuất hiện, neo giữ nhận diện thị giác | | Cyan Dawn | `#18dcdc` | `--color-cyan-dawn` | Gradient stop cho gradient đặc trưng của Aurora — không bao giờ dùng làm fill đặc, chỉ là nốt mở đầu của dải quang phổ | | Slate Whisper | `#68748d` | `--color-slate-whisper` | Body text phụ, helper copy mờ, meta không active — xám mát lùi lại phía sau Horizon Navy |

# Lightship — Style Reference > Cinematic open-road diorama. Warm cream gallery walls with oversized landscape photographs pinned at gentle radii, thin black type whispering across the frames, one ember-orange accent breaking the monochrome like a campfire in a meadow. **Theme:** light Lightship is a photography-first editorial system built on a warm cream canvas (#faf6ef) with full-bleed cinematic imagery doing all the storytelling. The UI is deliberately invisible: a single custom geometric sans (F37Bolton) with tight negative tracking, hairline borders, 20px rounded photo cards, and pill-shaped navigation chips. The entire palette is near-monochrome with one warm orange (#fa5c40) reserved as a rare surface accent. Density is generous — large breathing room around elements, 100px section gaps — letting landscape photography and short editorial headlines command attention. No shadows, no gradients, no decorative chrome: the product and the places it goes are the interface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Cream | `#faf6ef` | `--color-warm-cream` | Primary page canvas, card surfaces — warm off-white replaces stark white to soften the photography-first layout and avoid the cold SaaS feel | | Pure White | `#ffffff` | `--color-pure-white` | Image borders, elevated card surfaces, contrast panel behind embedded media | | Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders, icon strokes, navigation typography — the structural anchor of the entire system | | Pebble | `#999999` | `--color-pebble` | Muted body text, secondary borders, disabled states — the one step above placeholder gray |

# Flecto — Style Reference > Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ. **Theme:** mixed Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng | | Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính | | Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính | | Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |

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

# Athletics — Style Reference > monograph on black velvet **Theme:** dark Athletics operates as a gallery-grade creative studio: the entire experience sits on a dark canvas, letting enormous light-weight serif display type breathe against deep charcoal and pure black. The system is ruthlessly monochromatic — zero chromatic color across the interface, with warmth and saturation living exclusively inside editorial photography and the brand mark. Typography does the heavy lifting: a high-contrast pairing of a delicate serif display (Feature Deck at 300 weight, 72–116px) against a quiet grotesque (Söhne at 300/400 for everything functional). The layout is full-bleed, generous, and editorial — wide section gaps of 128–144px, asymmetric two-column blocks, and a vertical service index annotated with A/B/C/D letter labels that evoke a printed specimen sheet. Components are minimal: pill-shaped tags, hairline borders, no shadows, no gradients, no elevation. It reads as confident, restrained, and considered — the design equivalent of a well-typeset monograph. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, deepest section backgrounds, hairline borders on text | | Charcoal | `#1d1d1d` | `--color-charcoal` | Elevated section surfaces, card backgrounds, input fields — the middle layer between pure black and white | | Paper White | `#ffffff` | `--color-paper-white` | Primary display and body text on dark surfaces, default borders, icon strokes, form controls | | Ash | `#d6d5d0` | `--color-ash` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |

# Eclipse — Style Reference > Cel-shaded neon comic strip — nghĩ tới bảng hiệu kiểu Akira nhưng được render thành giao diện tài chính. **Theme:** mixed Eclipse vận hành trên nền canvas đơn sắc với một xung neon xanh lục duy nhất — ngữ pháp thị giác của nó gần với cel anime thập niên 90 hơn là một blockchain dashboard. Headline dùng GT Alpina Condensed ở hairline weights (100–200), nét serif mỏng nhất có thể nhưng vẫn đọc được thành chữ, kết hợp với Barlow Condensed cho UI chrome gọn nhẹ. Token màu duy nhất (#a1fea0) hoạt động như một chiếc bút dạ quang tô lên bản phác thảo mực trên giấy: border, button fill, hình minh họa đám mây, và hiệu ứng glow đều dùng chung một màu xanh tươi đó trên nền đen và trắng tuyệt đối. Bề mặt phẳng — không shadow, không gradient, không thủ thuật tạo chiều sâu. Button là dạng pill dày (25px radius), label là chữ in hoa kiểu máy chữ có tracking, illustration đảm nhận không khí còn type làm công việc cấu trúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Eclipse Green | `#a1fea0` | `--color-eclipse-green` | Primary action fill, active nav state, decorative border accents, cloud và glow illustration fills, investor-card spotlight — token màu duy nhất trong hệ thống, được dùng tiết kiệm để mỗi lần xuất hiện đều có cảm giác như một nét bút dạ quang | | Ink Black | `#000000` | `--color-ink-black` | Body và heading text, hairline borders trên card/badge/button, footer rules, outlined button stroke — màu trung tính chủ đạo mang tất cả các đường nét cấu trúc | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên nền tối, nav backgrounds, image backdrop — lớp nền cơ bản mà mọi thứ nằm trên đó |

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

# Monad — Style Reference > Tạp chí kỹ thuật monospaced trên giấy kem — nhẹ nhàng, chính xác, mang phong cách editorial. **Theme:** light Monad hiện ra như một tài liệu editorial nhẹ nhàng trên nền giấy ấm: canvas màu kem, mực than, và một bề mặt card màu oải hương gần như xám duy nhất mang toàn bộ UI. Điểm nhấn đặc trưng là typography — một serif nhân văn (humanist serif) ở weight 400 cho headline, kết hợp với font monospaced cho gần như toàn bộ UI text, tạo cảm giác technical-journal hiếm thấy trong B2B SaaS. Màu sắc gần như hoàn toàn vắng bóng trong giao diện; các tông màu đào, oải hương và bạc hà chỉ xuất hiện trong sơ đồ luồng dữ liệu (data-flow diagram) ở hero, nơi chúng hoạt động như những mảng màu khí quyển mềm mại chứ không phải điểm nhấn thương hiệu. Các component phẳng và tự tin: pill buttons 100px, cards border-radius 40px, viền mảnh (hairline) gần như đen, và một bóng đổ mềm duy nhất — không có gì nặng nề, không có gì bóng bẩy. Nhịp điệu tổng thể là khoảng thở rộng rãi, các khối text căn giữa, và các đường flow ngang gợi ý chuyển động mà không cần animation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Canvas trang, nền nav, bề mặt badge — nền off-white ấm áp khiến toàn bộ giao diện có cảm giác như giấy thay vì màn hình | | Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, viền mảnh (hairline borders), và màu viền chủ đạo trên nav, cards, và divider | | Charcoal | `#242424` | `--color-charcoal` | Nền primary action button, viền badge, bề mặt nâng cao — filled CTAs hơi lệch khỏi đen tuyền để tạo độ mềm thị giác | | Graphite | `#4e4d4d` | `--color-graphite` | Body và heading text ở độ tương phản thấp hơn, viền card phụ, muted UI elements |

# Dimension — Style Reference > Command deck glassmorphism trước bình minh **Theme:** dark Dimension nói bằng giọng dark gần như đơn sắc: một canvas gần đen, các bề mặt glassmorphic nổi lên trên nó, và một chút indigo nhạt chỉ xuất hiện như dấu chấm câu nhấn mạnh. Typography tiết chế và mang tính humanist — DM Sans cho body, Geist cho display — để headline 72px siêu nhẹ dẫn dắt không gian màu sắc không cần phải la hét. Các component có dạng pill hoặc bo tròn mềm; hầu như mọi interactive element (buttons, nav, tags, floating dock) đều dùng radius 9999px, trong khi cards nằm trong khoảng cong 24–40px. Trang thở: nhịp dọc rộng rãi, đường viền hairline mảnh màu #e5e5e5 ở độ mờ thấp, và elevation tối thiểu — chiều sâu đến từ độ trong suốt và blur, không phải chồng shadow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#0a0a0a` | `--color-void` | Nền trang, bề mặt sâu — canvas mà mọi thứ nổi lên trên | | Char | `#1d1d1d` | `--color-char` | Bề mặt card nâng cao, nền modal | | Iron | `#3d3d3d` | `--color-iron` | Bề mặt trung cấp, hover state trên các phần tử tối | | Slate | `#505050` | `--color-slate` | Bề mặt disabled, nền secondary button |

# Contractbook — Style Reference > "Warm cream atelier với dấu chấm câu màu tím điện và một tia sáng vàng" — một không gian làm việc hợp đồng thân thiện với designer, mang cảm giác như studio Scandinavia hơn là văn phòng luật. **Theme:** light Contractbook hoạt động như một editorial SaaS canvas: nền linen-cream ấm áp (#f0f0ec) tràn ngập các card bề mặt trắng off-white, được neo bởi một màu tím điện duy nhất (#1009f6) làm chủ đạo cho các action chính và bầu không khí hero hình học. Màu vàng mặt trời (#ffba09) đóng vai trò accent thứ cấp ấm áp cho điểm entry 'Request a demo' hấp dẫn nhất, tạo ra hệ thống phân cấp hai nút, nơi màu vàng đại diện cho sự gần gũi và màu tím đại diện cho doanh nghiệp. Hệ thống kết hợp display type weight 700 tự tin ở 40-48px với body text weight 400 thoáng đãng, sử dụng geometric sans tùy chỉnh (Abcwhyte) mang lại cho giao diện cảm giác như một ấn phẩm thiết kế thay vì một dashboard điển hình. Các hình minh họa vẽ tay vui nhộn (mắt, bảng phi tiêu, nguệch ngoạc) trong bảng màu thương hiệu truyền tải sự nhân văn giữa các khối chức năng. Các component ưa chuộng bán kính rộng 24-40px, pill controls (999px) và độ nâng tối thiểu — bản thân bề mặt cream làm công việc mà shadow thường làm ở nơi khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Electric Violet | `#1009f6` | `--color-electric-violet` | Màu thương hiệu chính — nền hero, panel hình học, nút action chính, navigation đang hoạt động — xanh tím đậm vừa đáng tin cậy vừa độc đáo trên nền cream ấm | | Solar Yellow | `#ffba09` | `--color-solar-yellow` | Màu action vàng cho nút filled, trạng thái navigation được chọn và các thời điểm chuyển đổi tập trung. | | Ink Black | `#1a1a1a` | `--color-ink-black` | Văn bản chính, đường viền icon, nút tối, border mặc định — gần như đen với một chút ấm áp để hài hòa với bề mặt cream | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, input fills, văn bản trên nền tối — lớp nâng cao nổi trên nền cream |

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

# Monte — Style Reference > buổi sáng ven biển nhuốm màu gỉ sắt **Theme:** light Monte Café là ngôn ngữ của một quán cà phê ven biển ngập nắng: một mảng màu terracotta duy nhất tràn ngập hero như tấm thép corten rỉ sét dưới buổi sáng Newcastle, rồi tan dần vào nội thất kem ấm và ảnh chụp quán cà phê. Thiết kế chỉ xoay quanh hai bề mặt — terracotta và kem — và một font serif duy nhất (Riposte) đảm nhận mọi vai trò, từ eyebrow labels đến display headlines. Apercu Mono xuất hiện dưới dạng chữ in chức năng nhỏ cho metadata, giờ giấc và nhiệt độ. Tổng thể mang phong cách vẽ tay và gần gũi: line-art illustrations, headline text uốn cong theo đường tròn, pill-shaped ghost buttons, và khoảng thở rộng rãi. Không có shadow, không gradient, không chrome trang trí — chỉ có mực, hơi ấm, và khoảng trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Corten | `#b84b30` | `--color-corten` | Màu thương hiệu chính — hero field, headline text, icon strokes, pill button borders, link accents. Màu cam gỉ sắt đặc trưng khiến mọi trang đều mang chất Monte | | Bordeaux | `#5f1d1a` | `--color-bordeaux` | Màu nhấn đậm cho SVG illustration fills và thỉnh thoảng link hover. Dùng tiết chế như một tông màu sâu hơn của Corten | | Sandstone | `#f8f4e9` | `--color-sandstone` | Canvas chính — body section backgrounds, card surfaces, text trên terracotta fields. Màu kem ấm dẫn dắt mọi trang sau hero | | Driftwood | `#e5e7eb` | `--color-driftwood` | Hairline borders, dividers, và card outlines. Màu trung tính nhẹ nhàng giúp phân cách mà không gây ồn |

# Moving Parts — Style Reference > Electric blueprint on matte paper — a monochrome architect's sheet that learned to glow blue. Pure black, pure white, one bolt of #0000ff. **Theme:** mixed Moving Parts is a high-contrast tool for builders: matte white canvas, pure black ink, and one electric blue (#0000ff) that does all the chromatic work — filled buttons, borders, active states, and the product surfaces themselves. The type system is deliberately polyglot: Unica77 carries the voice everywhere (with eight stylistic alternates engaged), Whyte Semi-Mono handles UI chrome and labels, and display moments pivot to extreme display faces like Druk XXCondensed at 195–248px and Fraunces serifs at 100-weight thin. Hierarchy comes from font selection and weight, not size alone. Cards float with very large radii (76–106px), shadows are rare and heavy (rgba(0,0,0,0.3) 15px 20px 30px), and yellow (#fffc52) appears as a flat accent surface to break sections — never as text or decorative gradient. A single conic-gradient sphere anchors the hero as the only ornamental flourish; everything else stays industrial and quiet. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Ink | `#0000ff` | `--color-electric-ink` | Primary CTA fill, active nav, product surface backgrounds, chromatic borders — the only saturated color that carries meaning | | Voltage Green | `#00d37c` | `--color-voltage-green` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content | | Onyx | `#000000` | `--color-onyx` | Body text, headings, hairline borders, icon strokes — the dominant ink color | | Pure | `#ffffff` | `--color-pure` | Page canvas, card surface, button text, dark-section contrast text |

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

# Aboard — Style Reference > pastel paper notebook on a white desk **Theme:** light Aboard là một workspace people-ops nhẹ nhàng, thoáng đãng sống trên nền gần trắng với một màu xanh dương đậm duy nhất đóng vai trò là brand color và bảng năm màu pastel làm bề mặt card để tạo cảm giác ấm áp. Typography dựa trên system-ui với tracking nén: headline rất to, rất tight (64px ở -0.64px) nằm trên body text xám trung tính, khiến trang đọc mang phong cách editorial tự tin thay vì marketing ồn ào. Các component mềm mại và bo tròn — card radius 24px, pill buttons 99px, 10px trên các element nhỏ — và elevation được thay thế bằng các lớp màu pastel thay vì đổ bóng, giữ cho interface mang cảm giác như giấy stationery hơn là kính. Emoji trang trí được inline trong copy và pastel product-mockup cards mang đến cho thương hiệu tính cách vui tươi, gần như notebook. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Canvas | `#fafafa` | `--color-canvas` | Nền trang, surface mặc định — tạo nền off-white, giống giấy cho toàn bộ hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Product UI panels, card surfaces, các khối nội dung nâng cao — giữ nội dung sắc nét trên nền canvas off-white | | Ink | `#262626` | `--color-ink` | Heading chính và body text — màu đen làm mềm, đọc ấm áp thay vì gắt | | Graphite | `#757577` | `--color-graphite` | Secondary text, caption, nav labels, muted borders — màu xám hàng ngày cho supporting copy |

# Specify — Style Reference > Black studio wall with neon violet sign **Theme:** mixed Specify vận hành như một canvas kể chuyện từ tối sang sáng: hero section đen tuyền với gradient headline tím phát quang chiếm phần đầu trang, sau đó chuyển sang bề mặt trắng sạch cho nội dung và social proof. Nhận diện thị giác là hình học SaaS có chừng mực — spacing grid 8px gọn gàng, Inter ở mọi weight, shadow hai lớp tinh tế — với một tín hiệu duy nhất phá vỡ sắc độ đơn sắc: một màu tím rực rỡ (#624de3) xuất hiện trong text, icon stroke, và một số ít accent fill. Button là pill dáng ngồi (40px radius) thay vì chamfer 6px phổ biến hơn; card bo 16px; tổng thể cảm giác dày đặc, tự tin, và hơi hướng editorial. Brand voice mang phong cách gần gũi với kỹ sư: một product page dành cho người xây dựng design system, không phải người mua chúng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Iris | `#624de3` | `--color-iris` | Màu thương hiệu chính — gradient headline text, icon stroke, accent border, focal link. Giọng màu duy nhất trong hệ thống; xuất hiện tiết kiệm để accent trở thành dấu câu chứ không phải trang trí | | Soft Iris | `#8d4af7` | `--color-soft-iris` | Đuôi gradient cho tím thương hiệu — điểm dừng sáng hơn trong hero headline gradient. Chỉ kết hợp với #1d58c0 và #009639 bên trong carousel card color-block, không dùng trong chrome | | Studio Slate | `#1a1d1e` | `--color-studio-slate` | Primary text, dark filled button, body border, heading stroke. Màu gần-đen làm việc chính, mang 90% trọng lượng giao diện | | Obsidian | `#151718` | `--color-obsidian` | Hero và section background fill — lớp nền tối sâu phía sau gradient headline và 3D illustration. Hơi lạnh/sáng hơn đen thuần để tím dễ đọc |

# Ssense — Style Reference > White gallery wall with editorial serifs. A high-fashion magazine spread rendered as a single-page web experience — where the only color is photography and the only weight is restraint. **Theme:** light SSENSE operates as a digital fashion editorial: pristine white canvas, razor-thin sans-serif navigation, and oversized serif headlines that behave like magazine cover titles rather than web UI. The visual system is deliberately monochrome — no accent colors, no filled CTAs, no decorative gradients — letting editorial photography and typography do all the expressive work. Hierarchy is achieved through extreme scale contrast (95px display down to 11px meta labels) and tight negative letter-spacing on serif faces that pulls letterforms into elegant, compressed shapes. Components are minimal and ghost-like: outlined buttons, hairline borders, near-invisible dividers. The site reads less like a store and more like a curated print publication that happens to sell things. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, navigation links, logo wordmark, footer links, SVG icon strokes — the anchor color of the entire system | | Graphite | `#333333` | `--color-graphite` | Body text and headings — slightly softer than pure black for long-form editorial readability at large sizes | | Silver | `#979797` | `--color-silver` | Hairline borders, dividers, inactive UI separators, secondary meta labels | | Ash | `#888888` | `--color-ash` | Muted helper text, list items, tertiary metadata, subdued navigation states |

# Ventriloc — Style Reference > analytics console on parchment **Theme:** light Ventriloc speaks in a quiet, professional whisper against an off-white canvas — a workspace where data feels approachable rather than intimidating. The interface is built on tight geometric type (PolySans) paired with Inter for UI, an almost-monochrome neutral palette, and a single warm orange (#ff682c) that punctuates charts, icons, and logo marks with restrained energy. Surfaces are flat and lightly tinted (white cards on warm-gray canvas), corners are soft (8px cards, pill-shaped controls), and elevation comes from gentle background shifts rather than shadows. Buttons are pill-shaped, nav is a floating rounded capsule, and dashboard mockups are presented as pristine white cards — the whole experience reads as analytical, airy, and deliberately unfussy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Orange | `#ff682c` | `--color-signal-orange` | Brand accent — chart fills, logo swoosh, active indicators, small highlights; the single chromatic spark across an otherwise monochrome system | | Sienna Bronze | `#816729` | `--color-sienna-bronze` | Muted brand tone — icon strokes, decorative chart elements, secondary brand marks where a subtler warmth is needed than Signal Orange | | Carbon | `#202020` | `--color-carbon` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Graphite | `#4d4d4d` | `--color-graphite` | Secondary text, body emphasis, subdued borders |