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

# Studio Oker — Style Reference > darkened gallery with scarlet punctuation — a black-walled portfolio room where white type floats and one red whisper cuts through the silence. **Theme:** dark Studio Oker presents a darkened gallery aesthetic where pure black canvases frame white typography and project showcases with monastic restraint. The system speaks through negative space — generous 120–264px section breaks, hairline borders, and tight letter-spacing that pulls type into whisper-thin compositions. A single vivid scarlet acts as punctuation rather than decoration, surfacing only in project-specific contexts and a single 'Think Big' hero moment. Photography dominates the surface, displayed in asymmetric tile grids that let the work carry visual weight without decorative chrome. The rhythm is slow, considered, and confident — a portfolio that trusts silence over spectacle and treats every margin as a deliberate composition choice. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Page canvas, section backgrounds, project card fills — the void everything else floats on | | Soft Black | `#101010` | `--color-soft-black` | Subtle surface elevation over the pure black canvas, card backgrounds in tight stacks | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, headings, hairline borders, nav text — the only light in the room | | Fog Gray | `#a0a0a0` | `--color-fog-gray` | Secondary text, metadata, captions, image borders, inactive labels |

# Champions4good — Style Reference > Midnight sports broadside — poster câu lạc bộ cổ điển nổi bật trên nền tường màu mận tím **Theme:** dark Champions4good là club poster theo phong cách dark-first: nền deep plum, một điểm nhấn lavender rực rỡ duy nhất, và display type ultra-condensed tràn đầy màn hình như một sports broadside cổ điển. Hệ thống phân cấp thị giác cực kỳ đơn giản — mọi thứ có màu sắc đều là lavender-pink (#e894ff) trên nền plum, và các điểm nhấn phụ (mint, amber) xuất hiện như những dấu câu chức năng nhỏ thay vì cạnh tranh sự chú ý. Các phần body text chuyển sang nền trắng với cùng display type condensed được render bằng màu đen đậm, tạo nhịp điệu tương phản cao giữa các section. Thái độ của typography là chống lại sự kiềm chế: Druk Condensed ở 200-300px với tracking chặt và line-height chặt đẩy display copy ra sát mép container, trong khi Neue Montreal xử lý UI chrome ở kích thước con người. Các component tối thiểu — pill toggles, một button lavender filled duy nhất, navigation thưa thớt — để typography và sự tương phản plum-to-trắng làm tất cả công việc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Plum | `#23002b` | `--color-deep-plum` | Hero canvas, nền dark section, page-level ground — tạo tâm trạng câu lạc bộ đêm độc quyền | | Lavender Shock | `#e894ff` | `--color-lavender-shock` | Điểm nhấn hồng 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 | | Espresso Brown | `#291900` | `--color-espresso-brown` | Màu gần-đen ấm cho nền card, bề mặt UI tối, border pha ấm — thêm hơi ấm tinh tế cho bảng màu lạnh | | Ink Teal | `#002629` | `--color-ink-teal` | Màu gần-đen lạnh cho body text, bề mặt card sâu, border lạnh — undertone teal phân biệt text tối với nền plum |

# Flowers For Society — Style Reference > indigo editorial trên nền gallery trắng — một giọng tím đậm duy nhất đặt trên canvas giấy trắng, nơi ảnh sản phẩm và typography làm toàn bộ công việc kể chuyện. **Theme:** light Flowers For Society là một fashion house nói bằng một giọng duy nhất, đầy quyết đoán: deep indigo (#203b90) xuyên suốt mọi bề mặt — logo, heading, button, border, và hero scrim — được neo bởi một gallery trắng thoáng đãng. Sản phẩm là hero: ảnh full-bleed với gradient overlay để đảm bảo độ dễ đọc, CTA hình pill cỡ lớn với border-radius 41-60px, và display type căn giữa sử dụng line-height cực sít của Integral (0.92-1.0) để nén không gian dọc. Hệ thống cố tình tối giản — hai custom typeface, không shadow, border-radius cực rộng, và một màu sắc duy nhất. Soehne đảm nhận UI với letter-spacing rộng (0.033-0.063em) giúp ngay cả chữ nhỏ cũng mang nhịp điệu boutique, editorial. Kết quả mang cảm giác như một trang tạp chí: tự tin, kiềm chế, và mang đậm dấu ấn thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Indigo Statement | `#203b90` | `--color-indigo-statement` | Màu thương hiệu chính — logo, tất cả heading, primary action fill, action border, và hero scrim bên trái. Đây là màu sắc duy nhất trong hệ thống; nó xuất hiện trên hầu hết mọi bề mặt để khẳng định sự hiện diện của thương hiệu | | Indigo Mist | `#7989bc` | `--color-indigo-mist` | Màu tím nhẹ cho border tinh tế và secondary outline — phiên bản dịu hơn của Indigo Statement, dùng khi độ bão hòa đầy đủ sẽ cảm thấy nặng nề | | Paper White | `#ffffff` | `--color-paper-white` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc nên giữ ở mức kín đáo. Không nâng cấp nó thành màu CTA chính | | Carbon | `#000000` | `--color-carbon` | Icon stroke, border sắc nét, và điểm nhấn văn bản tương phản cao. Dùng có chọn lọc khi màu thương hiệu indigo quá mềm |

# Automate Supplier Payments — Style Reference > butcher paper bakery ledger. Không gian làm việc màu kem, ấm áp dưới ánh nắng — nơi slab type dày, pill buttons và một điểm nhấn vàng xe buýt trường học duy nhất làm tất cả công việc: không shadow, không gradient, chỉ có giấy ấm và mực đen tự tin. **Theme:** light Apron mang thẩm mỹ quầy bánh ấm áp: canvas buttercream, display type slab-serif dày, CTA hình pill màu vàng xe buýt rực rỡ, và chữ đen xương (bone-black) nổi bật trên nền kem. Logic thị giác là "sổ cái trung thực trên giấy gói thịt" — tự tin, hơi retro, bão hòa không hề e dè. Các bề mặt xếp chồng trong tông kem ấm (không phải xám lạnh), đường viền là hairline đen thay vì shadow mềm, và điểm nhấn màu duy nhất là một tông vàng mang nghĩa "hành động ngay." Các component có cảm giác thủ công hơn là doanh nghiệp — card bo tròn, button chunky, và một display face tùy chỉnh (Champ) truyền tải brand voice trước khi ai kịp đọc bất kỳ copy nào. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Buttercream | `#fff6d2` | `--color-buttercream` | Page canvas, bề mặt card, và background ấm — neutral chủ đạo tạo nhiệt độ ấm áp cho toàn bộ UI | | Marigold | `#ffd801` | `--color-marigold` | Primary CTA fill, brand accent — màu vàng xe buýt trường học, giọng màu duy nhất trong hệ thống, chỉ dành riêng cho bề mặt hành động |

# Coinbase Spain — Style Reference > Digital Trust, Blueprinted. Một hệ thống được xây dựng dựa trên sự rõ ràng của bản thiết kế kiến trúc, được thổi hồn bởi một nơ-ron xanh điện tử duy nhất. **Theme:** light Design system này tạo nên cảm giác tin cậy mang tính kỹ thuật số, dựa trên bảng màu tối giản, tương phản cao. Nền tảng chính xác gồm trắng tinh (#ffffff) và gần đen (#0a0b0d) tạo ra môi trường rõ ràng và tập trung. Toàn bộ cá tính của hệ thống được truyền tải qua một màu xanh điện tử duy nhất — `Coinbase Blue` (#0052ff) — chỉ dành riêng cho các hành động chính và brand marks, hoạt động như một hướng dẫn đầy tự tin. Bộ font tùy chỉnh (Coinbase Display, Sans, Text) mang đến giọng điệu typography độc đáo và nhất quán trên mọi tỷ lệ. Chiều sâu đạt được không phải bằng shadow mà bằng các khối màu full-width đậm nét, xen kẽ giữa các phần trắng sáng và xanh đậm, tạo nhịp điệu kiến trúc sạch sẽ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Coinbase Blue | `#0052ff` | `--color-coinbase-blue` | CTA chính, logo, trạng thái active — định danh thương hiệu cốt lõi. | | Interactive Blue | `#578bfa` | `--color-interactive-blue` | Link phụ và các thành phần tương tác. | | Pure White | `#ffffff` | `--color-pure-white` | Nền trang chính, text trên nền tối. | | Midnight | `#0a0b0d` | `--color-midnight` | Nền section tối, text chính. |

# until — Style Reference > Ấn phẩm giấy da ấm áp dưới một gốc ô liu đơn độc. **Theme:** light Until mang một bản sắc biotech mang phong cách editorial ấm áp: nền giấy kem (#f7f3ec) phủ gần như mọi bề mặt, chữ gần đen (#121212), và một tông olive duy nhất (#6c853b) đóng vai trò điểm nhấn thực vật trên heading và đường viền. Hệ thống về cơ bản là nhiếp ảnh — ảnh lifestyle chụp từ trên xuống full-bleed thay thế cho illustration, và nội dung chạy trực tiếp lên ảnh không có lớp phủ tint. Typography gánh trọng lượng: Neue Haas Display với tracking nén, line-height gần 1.0 tạo nhịp điệu editorial kiểu Thụy Sĩ, trong khi Neue Haas Text ở 14–16px giữ body content nhẹ nhàng. Mọi thứ đều được bo tròn rộng rãi — 32px trên card, 64px trên button — tạo ra UI pill mềm mại, mang cảm giác như một chuyên khảo khoa học in ấn hơn là một dashboard. Shadow gần như không thể nhận thấy; sự phân lớp cream-on-cream và đường viền dày (1px solid #121212) tạo sự phân cách thay vì độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Parchment | `#f7f3ec` | `--color-parchment` | Nền trang, bề mặt card, nav container — màu trắng ấm thay thế trắng tinh, làm mềm toàn bộ hệ thống | | Ink | `#121212` | `--color-ink` | Chữ chính, mọi đường viền, outline card, nav links — gần đen pha chút ấm, dẫn dắt mọi đường nét cấu trúc trên trang | | Black | `#000000` | `--color-black` | Đường viền link, điểm nhấn footer, icon fill — đen tuyền dành riêng cho micro element có độ nhấn cao | | Paper | `#ffffff` | `--color-paper` | Button fill, bề mặt nâng cao, nền footer — trắng tinh dùng tiết kiệm để tạo điểm nhấn tương phản trên nền kem |

# Strut — Style Reference > editorial broadsheet trên nền ấm — display type oversized dạng serif-adjacent nằm trên một vùng giấy kem, chỉ được đánh dấu bằng một vệt highlighter màu hổ phách duy nhất và các đường kẻ hairline. **Theme:** light Strut xử lý giao diện của nó như một tờ giấy ấm thay vì màn hình phần mềm: một canvas kem liên tục mang type editorial cỡ lớn, các flat card viền hairline, và một điểm nhấn hổ phách duy nhất tạo hiệu ứng như nét highlighter. GT Pressura làm chủ giọng nói — các dạng hình học, hơi utilitarian ở kích thước 100–136px biến mọi headline thành masthead của một tờ broadsheet, trong khi Inter lặng lẽ xử lý body và UI ở 14–16px. Các component được thiết kế có chủ đích không trọng lượng: border 1px làm nhiệm vụ của shadow, góc 28px làm mềm mà không bo tròn thành pill, và vertical rhythm mở rộng lên 80–120px giữa các section để trang đọc như một spread in ấn. Màu sắc được phân bổ tiết kiệm — màu hổ phách xuất hiện dưới dạng các micro-touch trang trí (active icon strokes, brand mark, tag dots) trong khi text và cấu trúc giữ nguyên tông trung tính ấm từ mực #2e2d2b đến giấy #ead7b8. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Paper Cream | `#ead7b8` | `--color-paper-cream` | Canvas trang, nền ấm liên tục phía sau mọi section — tờ giấy mà toàn bộ sản phẩm nằm trên đó | | Sand Border | `#e5dfd5` | `--color-sand-border` | Hairline borders, bề mặt card mềm nổi nhẹ trên canvas kem, divider mờ | | Ink Black | `#2e2d2b` | `--color-ink-black` | Text chính, masthead headlines, và mực gần đen tạo cho type editorial vẻ uy quyền in ấn | | Charcoal | `#333333` | `--color-charcoal` | Body copy, secondary text, và bất kỳ UI text nào cần mềm hơn một chút so với pure ink |

# WRITER — Style Reference > editorial AI atelier — a white marble newsroom where pill-shaped controls and a single violet accent turn enterprise software into confident editorial design **Theme:** light WRITER operates as an editorial AI atelier: a near-white canvas where confident display headlines in Poppins (64px, tight tracking) sit above pill-shaped controls with 60-82px radii, and a single vivid violet accent punctuates an otherwise monochrome system. The visual language alternates between bright editorial sections and near-black resource blocks, creating a magazine-meets-control-center rhythm where typography carries authority and color acts as functional punctuation. Custom serif CanelaDeck surfaces in body copy for an editorial undertone, while the geometric Poppins handles everything from eyebrow labels (0.14-0.30em tracking) to product UI. Components are lightweight and rounded: thin dividers, pill inputs, soft cards with 12px radii, and minimal elevation — the design trusts whitespace and type scale over chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Orchid Accent | `#a95ef8` | `--color-orchid-accent` | Highlighted word in display headlines, decorative emphasis — vivid violet that draws the eye to a single concept within a monochrome headline | | Iris Brand | `#5551ff` | `--color-iris-brand` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Lavender Wash | `#e4e9ff` | `--color-lavender-wash` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Cobalt Spark | `#007aff` | `--color-cobalt-spark` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Jonas Pelzer — Style Reference > Tờ broadsheet văn học trên giấy trắng. Một headline display duy nhất weight-400 tạo nên giọng điệu — chữ roman và italic đan xen trong cùng một hơi thở, toàn bộ type dùng chung một weight, và một lượng mực tím được tiết chế tạo điểm nhấn cho một trang gần như không màu. **Theme:** light Một portfolio editorial văn học được thể hiện như một tờ broadsheet typographic trên giấy trắng. Trang web mang phong cách một spread tạp chí: một headline display weight-400 duy nhất pha trộn roman và italic để tạo nhịp điệu mà không cần dùng bold, mỗi đoạn văn đều có vị trí xứng đáng, và toàn bộ hệ thống màu sắc được rút gọn chỉ còn một màu mực tím duy nhất. Màu tím thương hiệu (#3502ff) được sử dụng có chừng mực — chỉ xuất hiện ở active nav pill, accent border active, và một deep text link duy nhất — trong khi một lớp lavender nhạt hơn (#c2b3ff) tạo sự đa dạng bề mặt trên các accent card. Khoảng cách được nén chặt (compact) và grid có tính chủ kiến (opinionated), với border-radius góc cứng 12px ở mọi nơi và hầu như không có độ sâu đổ bóng. Hệ thống thị giác đề cao sự tiết chế: khoảng trống âm, type weight và một màu nhấn duy nhất làm công việc mà màu sắc, độ cao và trang trí thường làm ở nơi khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nền nav | | Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, border dạng hairline, divider, list separator | | Mist Gray | `#d4d6dd` | `--color-mist-gray` | Border phụ, đường viền card, divider không hoạt động | | Violet Ink | `#3502ff` | `--color-violet-ink` | Violet outline accent cho tag, divider và cạnh UI đang focus. Không nâng cấp nó thành màu CTA chính |

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

# Specht Studio — Style Reference > Gallery wall của sự tò mò có chừng mực. Chrome của studio là một mặt phẳng trắng với chữ đen; mọi hiệu ứng thị giác đều nằm gọn trong các project tile. **Theme:** light Specht Studio là một khung trưng bày (curatorial frame), không phải một showcase thiết kế — website loại bỏ mọi dấu vết của chính nó để portfolio có thể treo trên một bức tường gallery trung tính. Chrome hoàn toàn đơn sắc: một typeface duy nhất, một weight duy nhất, mực đen và xám trên nền gần trắng. Không có brand color, không CTA, không bề mặt marketing — navigation chỉ là text trần và grid các project tile làm tất cả công việc. Hệ thống đạt được bản sắc thông qua những gì nó giữ lại: không shadow, không bo góc, không gradient, không điểm nhấn màu. Bất kỳ trang nào xây dựng trong hệ thống này nên đọc như một catalog bảo tàng, không phải trang sản phẩm — cấu trúc chính là thiết kế, và work chính là nội dung. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Gallery White | `#ffffff` | `--color-gallery-white` | Canvas trang, nền project tile khi artwork không lấp đầy khung hình | | Fog Gray | `#b0b0b0` | `--color-fog-gray` | Bề mặt phụ, divider tinh tế, text metadata mờ | | Graphite | `#666666` | `--color-graphite` | Border link, text phụ, caption metadata, nav không hoạt động | | Gallery Black | `#000000` | `--color-gallery-black` | Text chính, nav đang hoạt động, tất cả border cấu trúc, mực duy nhất giữ hệ thống lại với nhau |

# OpenAI — Style Reference > Trang trắng trước chữ đầu tiên — một thiết kế xem khoảng trắng là yếu tố mạnh nhất, dành toàn bộ màu sắc cho nội dung người dùng và nội dung biên tập. **Theme:** light OpenAI.com mang phong cách một trang giấy trắng đang chờ được viết lên — trắng tinh, độ bão hòa màu gần như bằng 0 (1%), và typography đảm nhận mọi trọng lượng thị giác. Font OpenAI Sans custom gánh toàn bộ sức nặng hình ảnh: tracking chặt ở -0.03em cho display text cỡ lớn, nó nén khoảng cách để headline có cảm giác được khắc chứ không phải được sắp chữ. Đen (#000000) và xám viền (#e5e7eb) là hai công cụ duy nhất; không có màu nhấn, không gradient trên core UI, không illustration trang trí. Màu sắc chỉ xuất hiện qua ảnh biên tập — macro hoa mềm mịn, card thumbnail gradient pastel — khiến những ảnh này bùng nổ trên nền trắng. Điểm căng thẳng đặc trưng là pill 9999px cho interactive chips và input nằm trong layout nơi card dùng radius rất đặc thù 6.08px, tạo ra một hệ thống kết hợp một độ bo tròn cực đoan với một bán kính gần như phẳng chính xác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Primary text, nav labels, nền CTA button dạng filled, icon fills — neo màu duy nhất của toàn bộ hệ thống | | Fog Border | `#e5e7eb` | `--color-fog-border` | Mọi đường kẻ chia, card outlines, input borders, nav underlines — vết đánh dấu nhẹ nhất có thể nhưng vẫn đọc được là dấu phân cách trên nền trắng | | Chalk | `#f1f1f1` | `--color-chalk` | Nền button ở trạng thái hover, surface fill nhẹ — một bước xa khỏi trắng tinh mà không thêm hơi ấm | | Graphite | `#666666` | `--color-graphite` | Body text phụ, icon strokes, secondary labels — tắt tiếng nhưng vẫn dễ đọc |

# Hellotime — Style Reference > trung tâm chỉ huy biên tập đơn sắc **Theme:** light Hellotime là một bề mặt năng suất gần như đơn sắc: canvas trắng, chữ gần đen, và một điểm nhấn xanh điện xuất hiện hầu như chỉ dưới dạng gradient highlight trên hero headline và các từ khóa. Hệ thống thị giác dựa vào tương phản trọng số typographic thay vì đa dạng màu sắc — headline 700-weight khổng lồ (64–80px) nằm cạnh body text 400–500 nhỏ gọn, tạo phân cấp rõ ràng mà không cần trang trí nhiễu. Các bề mặt phẳng với đường viền mảnh (1px, #c8cad0) và border-radius 16px; elevation bị loại bỏ để ưu tiên các cạnh sắc nét và khoảng trắng rộng rãi. Nút tối màu (#25272d) là UI element có màu sắc duy nhất ngoài logo màu xanh lá và accent gradient xanh dương, khiến mọi hành động đều có chủ đích thay vì trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#151619` | `--color-ink` | Văn bản chính, đường viền icon, đường viền mảnh, chân trang — màu non-background chiếm ưu thế trong hệ thống | | Smoke | `#7f8491` | `--color-smoke` | Văn bản phụ/mờ, văn bản link, đường viền nhẹ, placeholder label — lùi lại để body copy được đọc trước | | Fog | `#c8cad0` | `--color-fog` | Đường viền card và component, divider nhẹ, đường viền icon ở trạng thái nghỉ — hairline mặc định | | Ash | `#e1e2e5` | `--color-ash` | Divider giữa các section, tint bề mặt phụ, đường viền input ở trạng thái nghỉ |

# Handshake — Style Reference > neon highlighter on white paper **Theme:** light Handshake runs on a monochrome canvas punched open by one radioactive lime (#d3fb52) that acts less like a brand color and more like a highlighter dragged across white paper. The system is deliberately binary: almost everything is black text on white surfaces, and then the accent ignites — on nav pills, primary actions, and the hero's cyan-to-lime radial glow. Custom NoiGrotesk carries the UI with tight tracking and three stylistic sets (ss03, ss06, ss12) active everywhere, while SansPlomb at 201px declares the page in display headlines so large they feel architectural rather than typographic. Surfaces are pillow-soft (24px on cards and inputs), buttons are compact (8px), and the overall density is comfortable — the page breathes because the typography and gradient do the heavy emotional work, not ornament. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Voltage Lime | `#d3fb52` | `--color-voltage-lime` | Primary action fill, nav pill, active state, hero gradient endpoint — the single chromatic ignition point against an otherwise monochrome system | | Cyan Spark | `radial-gradient(at 55% 45%, rgb(122, 243, 255) 0%, rgb(211, 251, 82) 70%, rgba(0, 0, 0, 0) 76%)` | `--color-cyan-spark` | Hero gradient start point, secondary glow tone — pairs with Voltage Lime to create the aurora-like radial background | | Mid Abyss | `#052326` | `--color-mid-abyss` | Footer surface, dark section backgrounds — a near-black with a subtle teal undertone that keeps the dark mode on-brand | | Carbon Ink | `#14151c` | `--color-carbon-ink` | Primary text, icon strokes, input borders — the slightly cool near-black used for the majority of foreground content |

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

# Equals — Style Reference > Broadsheet gặp spreadsheet — serif mang hơi hướng tòa soạn trên nền kem ấm, điểm xuyết những ô dữ liệu pastel lơ lửng. **Theme:** light Equals mang cảm giác như một tờ báo broadsheet biết thở — headline serif uy quyền cỡ 110px đặt trên nền kem ấm (#FAF9F5), trong khi những mảng màu pastel vui tươi trôi nổi lỏng lẻo phía sau như các ô spreadsheet đang tan rã. Sự căng thẳng giữa trọng lượng editorial của Serrif Condensed và độ chính xác UI chặt chẽ của Unica77 tạo ra hai tầng âm vực: công cụ dữ liệu nghiêm túc và sản phẩm dễ tiếp cận. Màu vàng (#FFCC00) chỉ xuất hiện trên thanh thông báo trên cùng, màu tím orchid (#B074CE) chỉ xuất hiện trên nút CTA — hai màu nhấn không bao giờ cạnh tranh vì không bao giờ chung một khu vực. Các đường kẻ ngang mảnh phân chia section thay vì đệm whitespace, lấy cảm hứng từ đường kẻ lưới của spreadsheet như một ẩn dụ cấu trúc xuyên suốt trang. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Analyst Yellow | `#FFCC00` | `--color-analyst-yellow` | Chỉ dùng làm nền thanh thông báo — vàng bão hòa trên chữ gần đen tạo cảm giác khẩn cấp tối đa trên diện tích tối thiểu, không dùng ở nơi khác để giữ nguyên tín hiệu cảnh báo | | Orchid CTA | `#B074CE` | `--color-orchid-cta` | Nút CTA chính — tím ấm trên nền kem tạo cảm giác mời gọi thay vì khẩn cấp, phân biệt CTA với màu đỏ/cam thường thấy của SaaS | | Brand Green | `#20A277` | `--color-brand-green` | Mảng màu nhấn cho danh mục Finance — một trong ba khối chỉ báo theo vai trò (RevOps đỏ, Founders xanh navy, Finance xanh lá) nằm cạnh các dòng solution | | Glacier | `#2DCBDC` | `--color-glacier` | Khối màu trang trí nền trong hero, thuộc ngôn ngữ hình ảnh ô spreadsheet pastel nổi |

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

# Apple (España) — Style Reference > obsidian gallery vitrine — a dark showroom where a single titanium object glows against pure black **Theme:** mixed Apple's product page is a cinematic dark-stage that lets hardware speak first: full-bleed near-black canvas, a single hero product floating in negative space, white SF Pro Display headlines at massive scale, and one vivid blue Buy button as the only saturated action color on the page. The page alternates between black feature stages and white detail bands, using generous 28px card radii and 36–980px pill buttons to feel premium and tactile. Color is used as functional punctuation: orange for category eyebrows, blue for links and the single CTA, violet/teal for other product categories. Typography is the only chrome — heavy negative letter-spacing, tight line-heights, and weight contrast between SF Pro Text body and SF Pro Display headlines carry all the hierarchy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#1d1d1f` | `--color-obsidian` | Primary dark canvas, card surfaces on dark sections, primary text on light backgrounds — the signature near-black that defines Apple's product stage | | Frost White | `#f5f5f7` | `--color-frost-white` | Primary text on dark backgrounds, light section surfaces, subtle dividers — slightly warm white that softens contrast against pure black | | Pure Black | `#000000` | `--color-pure-black` | Deepest dark canvas for hero and feature stages, footer background — used where absolute darkness amplifies product photography | | Paper White | `#ffffff` | `--color-paper-white` | Light section backgrounds, button text on dark fills, icon fills — the bright counterweight in alternating dark/light page rhythm |

# Sprout Social — Style Reference > Green sprout on black slate. One vivid accent on a stark monochrome canvas, the color rationed to actions only, with confident geometric type that functions like wayfinding signage. **Theme:** light Sprout Social operates on a stark, high-contrast visual system: near-black ink on white canvas, with a single vivid green that punctuates every call to action. The typeface is Proxima Nova at bold weights (700–800), delivering confident, geometric headlines that feel like signage rather than prose. Surfaces are flat and borderless in feel — rounded corners (16px on cards, 6px on controls) do the structural work that shadows do elsewhere. Color is rationed: 99% of the page is achromatic; the green accent is reserved for primary actions and the brand leaf, never decoration. Product showcases break the monochrome with soft purple-to-white and green-to-blue gradient washes that frame UI screenshots without competing with them. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#040404` | `--color-ink-black` | Primary text, nav borders, heading strokes, footer dividers — the dominant non-white color across the entire system | | Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, nav surface, input fills, button text on dark fills | | Ash Gray | `#d9d9d9` | `--color-ash-gray` | Nav dividers, link borders, subtle separators, muted UI chrome | | Smoke Gray | `#cbcece` | `--color-smoke-gray` | Image borders, input borders, secondary button surface, faint dividers |

# Fingerprint — Style Reference > warm CRT terminal on cream paper — a fraud-detection lab notebook where code blocks are the main characters **Theme:** light Fingerprint reads as a developer tool that has been deliberately warmed up: a cream-paper canvas (#fafaf8) sits beneath sharp black type, a single vivid orange (#f35b22) does the work of a highlighter on key nouns, and the rest of the accent palette is borrowed from an IDE — teal, blue, pink, green as code-syntax tokens. Surfaces are flat with hairline borders; elevation is whispered, not announced. The hero alternates between editorial typography (Inter, tight tracking) and a dark CRT-style terminal panel, establishing a two-mode visual rhythm: light prose, dark code. Orange never decorates — it annotates, turning one word per headline into a call-to-action, and turning the primary button into the only filled rectangle on the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fafaf8` | `--color-cream-paper` | Page canvas and primary surface — warm off-white that softens the otherwise stark black/orange system | | Card White | `#ffffff` | `--color-card-white` | Elevated card surfaces and input backgrounds — sits one step above the cream canvas | | Pebble Gray | `#f0f0ef` | `--color-pebble-gray` | Secondary surface for section bands, subtle backgrounds behind grouped content | | Linen Border | `#e4e5e1` | `--color-linen-border` | Hairline dividers, card borders, and table separators — the dominant structural line color |

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

# Passwords — Style Reference > Secure Airlock Behind Glass. A system that moves from the protective dark of an airlock to the bright clarity of a control room. **Theme:** mixed The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Brand Blue | `#145fe4` | `--color-brand-blue` | Primary CTAs, active links, focus indicators — the single point of interactive confirmation. | | Hero Fade | `linear-gradient(180deg, #1d1d21 25%, #145fe4 70%, #99beff 100%)` | `--color-hero-fade` | Hero background — creates a deep, atmospheric transition from dark space to brand blue. | | White | `#ffffff` | `--color-white` | Main content backgrounds, card surfaces, text on dark backgrounds. | | Onyx | `#000000` | `--color-onyx` | Primary text on light backgrounds. |

# Metalab — Style Reference > black editorial spread — một serif headline thở trong khoảng không, được chú thích bởi một grotesque thì thầm **Theme:** dark Metalab hoạt động ở chế độ editorial trên nền đen: một design agency để typography và khoảng trắng đảm nhận toàn bộ màn trình diễn. Hai custom typeface cùng chia sẻ sân khấu — một display serif cực nhẹ (PP Eiko) ở kích thước áp đảo, và một grotesque yên tĩnh (Basis Grotesque Pro) cho toàn bộ nội dung chức năng — tạo ra một cuộc đối thoại giữa một serif headline thì thầm và một lớp annotation sans-serif chính xác. Giao diện là achromatic theo niềm tin: không có accent color, không có gradient trang trí, không có brand chromatic mark. Thông tin được cấu trúc hoàn toàn qua scale contrast, micro-typography và metadata labels (ngày tháng, giờ giấc, tọa độ) trôi nổi bên cạnh nội dung như editorial marginalia. Các component thưa thớt và quá khổ — một dark elevated card đơn lẻ, một pill toggle, và rất ít thứ khác. Hệ thống đọc giống masthead của một tạp chí thiết kế hơn là một product UI. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, primary surface, heading text trên vùng sáng — màu đen chủ đạo hấp thụ mọi yếu tố xung quanh | | Bone | `#ffffff` | `--color-bone` | Inverse text trên bề mặt tối, hairline borders trên vùng tối, contrast punctuation trên nền đen | | Charcoal | `#252525` | `--color-charcoal` | Màu trung tính hỗ trợ cho secondary UI, divider và muted labels. Không nâng cấp lên màu CTA chính |

# Incident — Style Reference > Technical broadsheet về bê tông. Times-serif headlines nổi trên nền xám ấm với hairline black rules và một tia cam duy nhất phá vỡ sự tĩnh lặng như một tín hiệu. **Theme:** light Incident xử lý trang status như một ấn phẩm editorial: typeface Times-serif trên canvas màu xám bê tông, hairlines đen tuyền, và một màu cam tín hiệu ấm áp đóng vai trò như tia sáng xuyên qua mảng đơn sắc. Kỷ luật ở đây là cực đoan — màu sắc bị hạn chế tối đa, chỉ xuất hiện dưới dạng brand accent fill, logo marks, và file-type illustrations trang trí, không bao giờ dùng làm nền button hay action fills. Bề mặt phẳng, giống giấy; chiều sâu đến từ soft 2-layer shadows trên hình ảnh, không phải từ elevation stacking. Kết quả mang phong cách của một tờ technical broadsheet đáng tin cậy hơn là một dashboard điển hình — sự uy tín đến từ sự kiềm chế về typography, không phải từ khối lượng màu sắc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Signal Orange | `#f25533` | `--color-signal-orange` | Brand accent, logo mark, decorative SVG fills, nav emphasis — điểm nhấn màu ấm duy nhất xuyên suốt hệ thống đơn sắc | | Concrete | `#efefef` | `--color-concrete` | Page canvas, button background — tông bề mặt chủ đạo tạo cảm giác giấy ấm cho hệ thống | | Ink | `#000000` | `--color-ink` | Primary text, hairline borders (920+ lần sử dụng), button outlines — màu đen tuyền đảm nhận toàn bộ đường nét cấu trúc | | Paper | `#ffffff` | `--color-paper` | Card surfaces, nav fills — lớp trắng nằm trên canvas concrete |