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

# Sublime — Style Reference > white-walled curator's atelier — a quiet gallery where one bold black headline holds the room and a single green object is always the only thing worth picking up **Theme:** light Sublime operates as a digital atelier: vast white walls, a single monumental headline anchoring each view, and collected objects (text snippets, vintage images, 3D renders) that feel curated rather than organized. The palette is 98% achromatic — black on white carries the entire interface, with two whisper-soft washes (pale blue, pale green) and one vivid moss green that punctuates moments of intent. Typography does the structural work: a custom geometric sans at extreme sizes and tight tracking creates headline gravity, while Times New Roman supplies a literary counterpoint for body copy and quotes — the serif/sans collision is deliberate editorial tension, not a system oversight. Layout breathes aggressively — centered compositions, floating collaged elements that overlap and ignore grid lines, generous vertical rhythm. Radii split into two modes: crisp 5px for functional controls, 999px pill for tags and special actions. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Moss Green | `#38744d` | `--color-moss-green` | Green outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color | | Signal Cyan | `#00aaff` | `--color-signal-cyan` | Blue outline accent for tags, dividers, and focused UI edges. | | Ice Wash | `#e0f5ff` | `--color-ice-wash` | Cool surface tint — content card backgrounds, highlight washes; a barely-there blue that hints at a Polaroid shadow without actually adding one | | Mint Whisper | `#cbffa6` | `--color-mint-whisper` | Warm surface tint — secondary highlight washes, soft card fills; a pale chartreuse that pairs with Moss Green as a lighter sibling |

# Going™ — Style Reference > Sun-bleached travel journal with electric ink **Theme:** light Going is a warm-paper travel companion: a parchment canvas (#fffef0, never pure white) carries deep lagoon teal body text and pill-shaped electric iris CTAs, with soft mint wash bands organizing content sections. PP Mori's slightly off-axis 475 weight gives paragraphs a friendlier gravity than standard 400, while display sizes push tracking outward (up to 0.10em at 80px) for an editorial-poster feel. Surfaces stack: parchment base → mint wash content bands → ink-bordered cards with a whisper shadow. The design refuses cold SaaS conventions — black is used sparingly as a hairline border accent, not as primary type, and the single violet CTA carries all interactive weight across the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Deep Lagoon | `#004449` | `--color-deep-lagoon` | Primary text, body copy, icon strokes, navigation — deep teal replaces black for all running text and primary iconography, lending a warm printed feel rather than digital harshness | | Electric Iris | `#483cff` | `--color-electric-iris` | Violet action color for filled buttons, selected navigation states, and focused conversion moments. | | Parchment | `#fffef0` | `--color-parchment` | Page canvas, card surfaces on mint sections, inverted text on dark elements — warm off-white background replaces clinical #ffffff, reducing glare and adding editorial softness | | Ink Black | `#000000` | `--color-ink-black` | Hairline borders, card outlines, structural dividers, footer strokes — used as 1px boundary lines rather than as primary type, creating crispness against the cream base |

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

# Stark — Style Reference > midnight lecture hall with yellow highlighter **Theme:** light Stark operates as a confident accessibility-infrastructure brand sitting on a dual-surface canvas: a deep midnight-navy hero that crashes into a warm cream secondary field, linked by a vivid violet primary action and a mustard-yellow highlighter that reads like a teacher's marking pen. The type system is anchored by ArminGrotesk at its heaviest possible weight (900) for hero display — the 110px headline is not a statement, it is a wall — then steps down through 56/48/28/24/20/16/14 with tight negative tracking (-0.02em) that pulls large letters into a single sculpted block. Yellow is not decoration; it marks emphasis inside running copy (the diagonal-split gradient) and signals one specific action. Violet is the chromatic engine: CTA fills, card borders, icon accents, active states. Everything else stays in a narrow achromatic corridor of #000, #fff, and #e5e7eb hairlines, so the two chromatic colors always read with maximum signal. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Navy | `#10284b` | `--color-midnight-navy` | Hero background, primary headings, footer surface — the dominant brand color establishes authority and anchors the dark-to-light page split. Used as a background field for the above-the-fold section and as body-text color on the cream secondary surface | | Stark Violet | `#381fd1` | `--color-stark-violet` | Primary action fills (Get started, Sign up, Request demo), card border accents, active nav state, decorative icon strokes, and inline emphasis text. The vivid violet against midnight navy creates a switched-on, electric feel without aggression | | Highlighter Yellow | `#fedb63` | `--color-highlighter-yellow` | Diagonal text-highlight gradient fill, one specific secondary CTA, and illustration accent. Yellow never decorates broadly — it marks, underlines, and punctuates specific words within dark-on-light headlines | | Lilac Tint | `#e5e0ff` | `--color-lilac-tint` | Soft button surface variant, gentle tinted card backgrounds. A desaturated wash of the violet brand that softens interactive elements without competing with the primary action |

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

# Atlassian — Style Reference > Bản thiết kế kỹ thuật viền confetti. Một enterprise canvas trắng tinh khiết bị ngắt quãng bởi các editorial panel xanh navy đậm, được đóng khung trong hình học rách màu sắc — tím violet rực rỡ, vàng taxi, xanh dương điện, xanh lá — như những sơ đồ chính xác được ghim giữa các vách ngăn lem sơn. **Theme:** light Atlassian vận hành như một enterprise workshop khoác lên mình vẻ tự tin giản dị: một canvas trắng nơi giao diện sản phẩm dày đặc gặp những khoảnh khắc editorial táo bạo, đầy màu sắc. Hệ thống thị giác phân chia giữa các bề mặt chức năng yên tĩnh (trắng, xám nhạt, xanh dương nhẹ) và các dark hero block biểu cảm (navy gần như đen) được đóng khung bởi confetti hình học rời rạc với các màu tím violet, vàng, xanh dương và xanh lá rực rỡ. Typography là cặp custom sans — Charlie Text cho UI dày đặc, Charlie Display cho editorial headline có thể lên tới 80px với tracking thắt chặt. Các component lớn, bo tròn và không viền — pill cho action, border-radius 20px rộng rãi cho card, hầu như không có shadow. Màu sắc có kỷ luật: một màu xanh dương điện duy nhất điều khiển mọi primary action và link, trong khi năng lượng màu sắc chỉ tồn tại ở các cạnh trang trí và section divider, không bao giờ tràn vào functional UI. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Atlassian Blue | `#1868db` | `--color-atlassian-blue` | Primary action buttons, active links, focus states, icon accents — màu action duy nhất trong toàn bộ hệ thống, mang lại sự rõ ràng về hướng đi trên các bề mặt đơn sắc | | Midnight Navy | `#101214` | `--color-midnight-navy` | Primary text, heading fills trên bề mặt sáng, nền dark hero panel, link text — màu mực chủ đạo | | Carbon Edge | `#292a2e` | `--color-carbon-edge` | Card borders trên bề mặt sáng, body text, input borders, secondary heading text | | Slate Current | `#1c2b42` | `--color-slate-current` | Outlined action borders, icon strokes, list dividers, tertiary text — màu gần xám pha xanh lam gợi nhắc thương hiệu mà không cam kết màu sắc |

# Shortcut — Style Reference > indigo ink on white paper — A whiteboard surface where one confident violet stroke does all the work. **Theme:** light Shortcut's visual language is an indigo-ink-on-white-paper system: a quiet, high-key canvas interrupted by a single vivid violet that does the talking. The product lives on flat white surfaces with near-invisible hairline borders; depth comes from generous whitespace and the occasional pale lavender card, never from drop shadows. Typography is a single geometric sans (Satoshi) set tight and confident at modest sizes — the interface never shouts, it narrates. Color is rationed like punctuation: deep midnight (#08093f) anchors dark sections and footers, vivid indigo (#494bcb) marks every primary action, and a single warm yellow badge appears as decorative accent. The mood is professional, restrained, and tool-like — a workhorse product UI dressed in just enough brand to feel deliberate without becoming decorative. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vivid Indigo | `#494bcb` | `--color-vivid-indigo` | Primary action background, filled buttons, active nav, brand focal point — the one chromatic color that carries the entire brand | | Midnight Ink | `#08093f` | `--color-midnight-ink` | Footer background, dark section canvases, heading accent on dark surfaces — near-black with violet undertone ties it to the brand | | Soft Violet | `#8a8ac6` | `--color-soft-violet` | Icon strokes, decorative SVG borders, illustration outlines — the muted cousin of the brand color, used where saturated indigo would be too loud | | Pale Lavender | `#9f7ad0` | `--color-pale-lavender` | Badge accent border, decorative illustration strokes — provides warmth without competing with the primary |

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

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

# IKEA — Style Reference > showroom Thụy Điển tràn ngập ánh sáng mặt trời, phong cách flat-pack **Theme:** light Giao diện IKEA mang phong cách một spread editorial tương phản cao: chữ gần như đen trên nền trắng ấm, điểm xuyết các mảng vàng phẳng hoạt động như vùng CTA tích hợp sẵn. Hệ thống được thiết kế cố tình thưa thớt — một sans-serif tùy chỉnh (Noto IKEA) chỉ với hai weight (400 và 700), một border-radius 8px duy nhất cho mọi component, không shadow, không gradient. Sự chặt chẽ này mang tính cấu trúc, không phải minimalism theo trào lưu: letter-spacing âm (-0.029em ở display, -0.027em ở body) khiến ngay cả caption 13px cũng có cảm giác kiến trúc. Cards có kích thước lớn, lấy media làm trung tâm, sắp xếp trong các khối hai cột rộng rãi với lớp phủ text gradient-to-black để đảm bảo dễ đọc. Màu vàng #ffdb00 đảm nhận mọi công việc của giao diện — nó không bao giờ trang trí, nó chỉ kích hoạt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | IKEA Yellow | `#ffdb00` | `--color-ikea-yellow` | Nền CTA chính, nền card nổi bật, accent panel hero, điểm nhấn màu sắc duy nhất của hệ thống | | Ink Black | `#111111` | `--color-ink-black` | Text chính, body copy, heading, border chủ đạo (851 occurrences), icon strokes | | Pure White | `#ffffff` | `--color-pure-white` | Nền trang, bề mặt card, nền nav, text button trên nền tối | | Warm White | `#fffefb` | `--color-warm-white` | Biến thể nền hơi ngả trắng cho button và card — ấm hơn pure white một chút, phá vỡ cảm giác kỹ thuật số lạnh lẽo |

# Mailchimp — Style Reference > Vintage press meets electric yellow — an editorial print house with one neon switch. **Theme:** light Mailchimp's visual language feels like a vintage newspaper printing house that discovered electric color — warm near-black (#231e15) dominates nearly every surface and typographic element, while a single voltage-yellow (#ffe01b) CTA button commands every page. The type system splits between Graphik Web (a geometric sans at tight -0.013em tracking) for all body/UI text and Means Web (a display serif-adjacent face at -0.021em) for headlines — a newspaper/magazine editorial duality that's rare in SaaS. Cards are flatly borderless or carry a soft warm shadow (rgba(35,30,21,0.15)), never the blue-tinted floating shadows common to other platforms. Section backgrounds alternate between #ffffff, #f5f5f5, the warm cream #ebe1cd, and near-black #231e15, creating a banded editorial rhythm. The pill CTA (26px radius, yellow fill, dark stroke, dark text) is the one rounded form in a system that otherwise uses 3px or zero radius everywhere. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Press Black | `#231e15` | `--color-press-black` | Primary text, headings, button borders, backgrounds of dark sections — the near-black with a warm brown undertone that prevents harshness and reads as ink rather than void | | Voltage Yellow | `#ffe01b` | `--color-voltage-yellow` | Primary CTA buttons and nav 'Iniciar gratis' — one saturated hit of color on an otherwise near-monochrome page; impossible to miss without competing for dominance | | Teal Ink | `#004e56` | `--color-teal-ink` | Links, icon fills, image accents — muted teal provides navigational contrast against warm-neutral backgrounds without reading as a generic blue | | Warm Parchment | `#ebe1cd` | `--color-warm-parchment` | Section backgrounds for GDPR and feature callout bands — warm cream that reads as aged newsprint, warmer than gray |

# MAKR — Style Reference > Tủ trưng bày bảo tàng dành cho đồ da thủ công. Một phòng trưng bày giấy trắng tĩnh lặng, nơi những dòng chữ đen ấm áp trôi nổi bên dưới các bức ảnh editorial cỡ lớn chụp đồ da được cầm trên tay hoặc đặt trong khung cảnh thiên nhiên, với một dải màu xô xám nhạt duy nhất là điểm nhấn sắc độ. **Theme:** light MAKR là một gallery editorial e-commerce dành cho đồ da thủ công, xây dựng trên bảng màu gần như hoàn toàn đơn sắc, nơi nhiếp ảnh là nhân vật chính. Một tông màu banner gần xám duy nhất (pha chút xô nhẹ) làm điểm nhấn cho dải thông báo phía trên, trong khi mọi thứ khác — bề mặt, chữ, đường kẻ, liên kết — đều sống trong màu mực đen ấm áp trên nền giấy trắng. Typography là Sohne neo-grotesque ở dạng kiềm chế nhất: cỡ chữ nhỏ, line-height rộng rãi, letter-spacing dương trên các nhãn chữ hoa — đọc như chữ trong gallery, không phải copy web UI. Layout thiên về hình ảnh, bất đối xứng, thưa thớt như bảo tàng: sản phẩm được chụp trên tay, trong khung cảnh thiên nhiên, dưới ánh sáng tự nhiên, với các link chú thích nhỏ bên dưới. Các component gần như vô hình — text link có gạch chân, ghost input, không bóng đổ, không nút bo tròn — để da thuộc và nhiếp ảnh gánh vác trọng lượng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian Ink | `#1c1717` | `--color-obsidian-ink` | Chữ chính, tất cả text link, body copy, heading, nét icon, đường viền mảnh trên toàn bộ UI. Đây là màu chịu lực — độ tương phản 17.7:1 trên nền trắng, dùng cho hơn 5.000 instance. Sắc ấm rất nhẹ (không phải đen thuần) mang lại cảm giác catalog in ấn thay vì cảm giác màn hình | | Paper | `#ffffff` | `--color-paper` | Đường viền mảnh, divider, đường viền input, cạnh card trên bề mặt sáng. Không nâng cấp lên màu CTA chính | | Bone | `#f0f0f0` | `--color-bone` | Bề mặt phụ cho các section xen kẽ, nền panel nhẹ, đường viền inline/separator. Tạo lớp xám ấm rất nhạt giữa nền giấy trắng và dải thông báo xô | | Eucalyptus Mist | `#a9aea9` | `--color-eucalyptus-mist` | Nền banner thông báo trên cùng, lớp nền section nhạt, đường viền cấp ba. Đọc như gần xám khi đứng riêng nhưng mang sắc xô khó nhận ra khi dùng full-width — một hơi thở sắc độ duy nhất trong hệ thống đơn sắc |

# Join Parker — Style Reference > Banker's ledger meets indie magazine — white paper, electric blue ink, one italic flourish that rewrites the headline. **Theme:** light Parker operates as a confident fintech command center: white parchment canvas, single electric-blue primary, and a quiet italic serif that interrupts the all-sans orthodoxy. The dual-typeface system — Inter for everything functional, Gambetta italic for a single word of emphasis — is the signature: a sans headline reads as utility, but 'Powers Your Growth' in italic serif turns the value prop into editorial copy. Components are generously rounded (24px cards, 9999px pills) giving the dense financial UI a soft, approachable feel. A full-bleed electric-blue feature section breaks the white rhythm and re-establishes the brand as the visual anchor. Color is used sparingly and functionally: blue for action and brand surfaces, orange for one conversion-critical CTA, warm parchment and sand for soft surfaces that keep the page from feeling sterile. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Blue | `#5196fe` | `--color-electric-blue` | Primary brand color — filled CTAs, full-bleed feature section background, icon accents, the credit card product visual's gradient. Carries 80% of brand recognition | | Ember Orange | `#f9754e` | `--color-ember-orange` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#1b1d20` | `--color-ink-black` | Primary text, dark card surfaces (the credit card mockup, the dark feature section), heavy borders. Not pure black — sits slightly warm | | Midnight | `#101828` | `--color-midnight` | Secondary text and dark borders when Ink Black feels too heavy in tight contexts |

# Sandclock — Style Reference > Terminal lệnh DeFi lúc nửa đêm — đèn tín hiệu xanh mint trên bảng điều khiển đen mờ **Theme:** dark Sandclock là một terminal yield DeFi khoác lên mình màu đen mờ: chrome gần như bằng không, một màu tín hiệu xanh mint rực rỡ, và typography đảm nhận mọi công việc. Giao diện mang phong cách Bloomberg terminal được tái hiện cho DeFi — canvas tối (#0a0a0a), viền graphite mảnh (#222222), bề mặt phẳng không có độ nâng trang trí, và Inter cho text tiện ích kết hợp với custom Aeonik display face cho headline 72px hiếm hoi. Màu xanh (#3fe280) chỉ xuất hiện như dấu câu chức năng: gạch chân nav active, primary CTA, và viền accent trên các thẻ số liệu trực tiếp. Mọi bề mặt khác đều giữ achromatic để màu xanh đọc như tín hiệu trực tiếp, không phải trang trí. Các component có cảm giác như một trading dashboard — gọn gàng, nhiều thông tin số, nhưng thoáng đãng nhờ khoảng cách section rộng. Không gradient, không drop shadow ngoại trừ một hiệu ứng nâng nhẹ duy nhất trên button, không có chrome minh họa màu sắc. Sự tin tưởng được truyền tải qua sự kiềm chế: thiết kế nói 'tiền của bạn ở đây' bằng cách giữ im lặng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyss | `#0a0a0a` | `--color-abyss` | Canvas trang và nền chính — toàn bộ site sống trên bề mặt gần như đen này để accent mint đọc như tín hiệu trực tiếp giữa bóng tối thuần khiết | | Carbon | `#171717` | `--color-carbon` | Bề mặt card và panel được nâng lên — dùng cho stat cards, security badges, và announcement containers cần tách khỏi canvas mà không đưa thêm màu sắc | | Graphite | `#222222` | `--color-graphite` | Viền mảnh, divider, và màu cấu trúc xuất hiện nhiều nhất trong hệ thống. Mang 356 borderColor uses — nó là khung dây (wireframe) định nghĩa mọi container | | Ash | `#9b9b9b` | `--color-ash` | Secondary text mờ, helper labels, và nav items được giảm chú ý. Màu text không phải trắng duy nhất — dành #ffffff cho nội dung cần được đọc trước |

# Vibrants — Style Reference > Skyborne apothecary trên nền đá cẩm thạch trắng — mực xanh navy đậm là cối giã thuốc, quang phổ cầu vồng là liều thuốc. **Theme:** light Vibrants mang phong cách quầy wellness sáng sủa, mang hơi hướng lâm sàng: nền trắng, mực xanh navy đậm làm nhiệm vụ chính cho chữ và primary buttons, và một dải cầu vồng full-spectrum chỉ xuất hiện trên bề mặt sản phẩm. Ngữ pháp thị giác có chủ đích là yên tĩnh bên ngoài hero và product imagery — gần như cấu trúc đơn sắc với một điểm xanh lá tươi duy nhất dùng để nhấn mạnh khuyến mãi, badge và xác nhận. Headlines sử dụng custom serif nghiêng về editorial và đáng tin cậy, trong khi body copy và UI dùng geometric sans-serif mang cảm giác chính xác như dược phẩm. Các component phẳng với hairline borders, bo góc 8px mềm mại, và elevation tối thiểu; chiều sâu đến từ độ tương phản màu sắc và khoảng trắng rộng rãi thay vì đổ bóng. Hero gradient xanh trời và product mockup nổi tạo tông màu điềm tĩnh, lạc quan mà phần còn lại của trang duy trì qua khoảng cách thoáng đãng và typography tiết chế. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Deep Navy | `#021422` | `--color-deep-navy` | Primary text, primary filled buttons, nav backgrounds, heading ink, footer surface — gần như đen nhưng đọc như mực chứ không phải đen tuyền, neo trang trong khi vẫn đủ mềm để kết hợp với trắng | | Vibrant Green | `#00852e` | `--color-vibrant-green` | Sale badges, discount pills, success indicators, điểm nhấn dùng một lần — sắc thái rực rỡ duy nhất chạm vào chrome; mọi bề mặt màu sắc khác đều thuộc về sản phẩm | | Midnight Navy | `#001f38` | `--color-midnight-navy` | Nhấn mạnh secondary text, card border accent trên hero product, phân cấp heading ngay dưới Deep Navy — xanh lam hơn một chút để tạo biến thể tông màu mà không rời khỏi họ | | Sky Wash | `#91c3ff` | `--color-sky-wash` | Outlined button borders, icon accents, link highlights — xanh lam nhẹ thì thầm chứ không la hét, dùng cho ghost controls vẫn cần định nghĩa màu sắc |

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

# Axiom — Style Reference > Cửa sổ terminal lúc nửa đêm — nền đen phẳng, text monospaced, và một con trỏ màu cam nhấp nháy **Theme:** dark Axiom là giao diện tối mang phong cách terminal, nơi mọi ký tự đều monospaced, mọi bề mặt đều gần như đen tuyền, và một gam cam ấm duy nhất đảm nhận toàn bộ công việc tạo điểm nhấn màu sắc. Ngôn ngữ thiết kế vay mượn từ code editor và CLI tools — không gradient, gần như không đổ bóng, không bo tròn mềm mại — thay vào đó, thông tin được phân tầng qua những chuyển dịch tinh tế giữa các gam tối trung tính (từ nền #000000 đến card #191919, rồi border #202020) để UI trông giống như một file log được định dạng gọn gàng. BerkeleyMono đảm nhận toàn bộ giọng điệu, từ hero headline đến nav label, mang đến cho sản phẩm một cảm giác engineering-native, báo hiệu đối tượng người dùng trước khi báo hiệu thương hiệu. Màu cam xuất hiện như một công cụ chính xác: phần nền của primary CTA, log-bar visualization, và border trái 2px đánh dấu các editorial case-study card — không bao giờ mang tính trang trí, luôn luôn có chức năng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#000000` | `--color-void` | Nền trang, nav fill, bề mặt terminal | | Carbon | `#111111` | `--color-carbon` | Bề mặt chính, nền card, hero canvas | | Graphite | `#191919` | `--color-graphite` | Nền card nâng cao, fill case-study card | | Iron | `#202020` | `--color-iron` | Hairline border, divider, phân cách tinh tế |

# Wonder — Style Reference > Trung tâm chỉ huy violet neon — màn đêm mận sẫm bị xuyên thủng bởi một nguồn sáng laser tím duy nhất. **Theme:** mixed Wonder hoạt động như một vũ trụ thiết kế dark-first: nền canvas violet gần như đen (#0f0217) tạo bối cảnh nhập tâm cho thương hiệu, được điểm xuyết bởi một điểm nhấn violet rực rỡ duy nhất (#d262ff) khiến các hành động trông như đang bật sáng, và một màu xám pha tím dịu (#44374a) làm công việc cấu trúc thầm lặng cho mọi border và divider. Hệ thống xen kẽ giữa các section dark atmosphere full-bleed và các content panel trắng sáng, tạo nhịp điệu qua tương phản thay vì trang trí. Typography dẫn dắt bởi Uncut Sans Variable — hình học, tracking rộng ở cỡ nhỏ, tracking chặt ở cỡ display — kết hợp với Martian Mono cho mọi metadata kỹ thuật, kích thước và chú thích. Bề mặt phẳng với hairline borders thay vì shadow nặng; một số card nâng lên dùng border 1px siêu mảnh và radius lớn (14px) để trông như những tấm kính nổi thay vì panel đặc. Components thưa thớt và tự tin: pill-shaped badges, buttons 8px radius dạng filled violet hoặc ghost outline, và rất ít điểm trang trí ngoài motif nguệch ngoạc vẽ tay. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void Plum | `#0f0217` | `--color-void-plum` | Page canvas và dark surface chính — nền violet gần đen làm nền cho toàn bộ hero và footer bands nhập tâm | | Eclipse Black | `#0b0211` | `--color-eclipse-black` | Elevated card và panel surface — tối hơn canvas một bậc, dùng cho UI elements nổi trên nền tối | | Carbon Ink | `#111111` | `--color-carbon-ink` | Badge fills, icon stroke accents, và dark section surfaces trên ngữ cảnh sáng hơn | | Lavender Mist | `#44374a` | `--color-lavender-mist` | Màu border và divider chủ đạo trên toàn hệ thống — mọi hairline, cạnh card, và UI outline đều dùng màu xám pha tím dịu này |

# Glossier — Style Reference > Sunlit beauty editorial — trắng giấy, đen mực, một tia vàng **Theme:** light Glossier hoạt động như một tạp chí làm đẹp kỹ thuật số: một canvas gần như đơn sắc với trắng giấy và đen mực, bị phá vỡ bởi một điểm nhấn vàng điện duy nhất — vừa là brand wordmark vừa là lời kêu gọi hành động duy nhất. Hệ thống mang tính editorial ở sự tiết chế — headline Apercu cỡ lớn, khoảng thở rộng rãi, ảnh lifestyle full-bleed đảm nhận phần lớn trọng lượng cảm xúc — và mang tính thực dụng trong thực thi, với flat product cards, đường viền mảnh (hairline borders), và hoàn toàn không có chi tiết trang trí. Màu vàng không phải là màu phụ của thương hiệu; nó CHÍNH LÀ thương hiệu, được sử dụng một cách dè xẻn để mỗi lần xuất hiện đều như một tia sáng lóe. Mọi thứ khác phải lùi lại: các màu trung tính là xám ấm với một chút hồng nhẹ (blush undertone), đường viền gần như vô hình, chữ thì chặt và nén. Kết quả là một storefront mang phong cách tự tin, tinh tế, và hiện đại không hề nao núng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Glossier Yellow | `#fff116` | `--color-glossier-yellow` | Điểm nhấn vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính | | Ink | `#000000` | `--color-ink` | Văn bản chính, nav links, body copy, footer text, icon strokes, hairline borders; màu chủ đạo về typographic và cấu trúc | | Paper | `#ffffff` | `--color-paper` | Bề mặt product card, input fills, elevated panels; mức bề mặt sáng nhất trong hệ thống phân cấp | | Fog | `#f7f7f7` | `--color-fog` | Page canvas, nền section, chuyển tiếp ảnh sang trang; bề mặt nền mà toàn bộ trang web nằm trên đó |

# Tech Barcelona — Style Reference > Editorial tech manifesto trên nền marble trắng **Theme:** mixed Tech Barcelona vận hành bằng ngôn ngữ typography-first: một font neo-grotesque độc quyền (FavoritPro) với weight 400 cực nhẹ chi phối toàn bộ giao diện, để scale và khoảng trắng đảm nhận vai trò cấu trúc thay vì độ tương phản weight. Canvas chủ yếu là trắng và tĩnh lặng, với một màu cobalt xanh lam đậm (#0075ff) duy nhất dành riêng cho hành động — nó xuất hiện một lần dưới dạng button filled trong nav và không trang trí ở nơi nào khác. Màu gần đen #090707 dùng cho headline và nội dung hình ảnh, tạo độ tương phản mạnh với bề mặt trắng. Hero band đảo ngược mối quan hệ này: canvas đen, type trắng, logo hình học cỡ lớn. Các component phẳng và tối giản — hairline borders, không shadow, không gradient — để nhiếp ảnh và type tỷ lệ lớn gánh vác trọng lượng thị giác. Nhịp điệu tổng thể mang phong cách editorial: khoảng trắng dọc rộng rãi, display size cỡ lớn lên đến 80px, letter-spacing chặt kéo các headline lớn thành những khối đậm đặc, tự tin. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, điểm nhấn màu duy nhất trong toàn bộ giao diện — một xanh lam rực rỡ trên nền trung tính đơn sắc, dùng có chừng mực để báo hiệu hành động mà không cạnh tranh với nội dung | | Ink Black | `#090707` | `--color-ink-black` | Màu headline, border ảnh, display text cỡ lớn — gần đen với chút ấm nhẹ, chọn thay vì đen thuần để tạo cảm giác in ấn thay vì kỹ thuật số | | Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — màu trung tính làm việc cho interface chrome và đoạn văn bản dễ đọc | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, text trên hero tối và nền logo tối — thiết lập nền light-mode và tất cả bề mặt nội dung |

# Cycle — Style Reference > Xưởng gốm nhuốm mực với nhãn màu ngọc **Theme:** light Ngôn ngữ thị giác của Cycle mang phong cách một không gian làm việc analog ấm áp — nền canvas hơi ngả trắng, chữ đen như mực, và bảng màu ngọc đậm gợi cảm giác lọ mực cổ điển hơn là accent SaaS. Headline dùng Eudoxus Sans weight nặng với tracking dày, tạo cho mọi tiêu đề cảm giác có khối lượng vật lý; body và UI mặc định dùng Inter ở cỡ 14–16px thoải mái. Các component nằm trên hệ thống shadow rất mềm (warm gray độ trong suốt thấp) thay vì đường viền cứng, và border-radius 20px lớn khiến card trông như gạch men. Màu sắc mang tính chức năng và phân loại — mỗi product agent hoặc cụm tính năng có một màu đậm riêng (teal, violet, amber, maroon) và nền pha màu riêng, không bao giờ dùng gradient trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#171618` | `--color-ink-black` | Văn bản chính, icon, bề mặt tối — màu trung tính chủ đạo; không bao giờ dùng pure #000 cho text | | Pure Black | `#000000` | `--color-pure-black` | Màu trung tính hỗ trợ tối cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, modal panel, text trên nút tối — bề mặt sáng nhất trong hệ thống | | Warm Canvas | `#f7f7f7` | `--color-warm-canvas` | Nền trang, đường phân cách section nhẹ — màu trắng ngà tạo cảm giác analog ấm áp |

# Uniswap — Style Reference > Swap terminal kẹo bông gòn trên nền trắng. Những điểm nhấn magenta rực rỡ xuyên qua giao diện vốn không màu, lơ lửng, trong khi các quả cầu màu mềm mại trôi nổi ở nền như tiền tệ được hiện hình. **Theme:** light Uniswap mang thẩm mỹ swap terminal nhẹ nhàng, thoáng đãng: một canvas gần như trắng, nơi một màu thương hiệu magenta-hồng rực rỡ duy nhất mang mọi tín hiệu tương tác, được bao quanh bởi các quả cầu màu mềm mại lơ lửng, tạo cho trang một bầu không khí vui tươi, không trọng lượng. Typography tự tin và chặt chẽ — một display face tùy chỉnh (Basel) ở weight gần đen, với weight 485 độc đáo nằm giữa regular và medium, tạo cảm giác nén nhẹ, hiện đại trên cả display copy và UI copy. Các component nhỏ gọn và bo tròn — radius 20px trên swap cards, 16px trên buttons, pill shapes cho tokens — với shadow cực nhẹ giúp bề mặt trắng thoáng đãng. Trải nghiệm tổng thể giống như một trung tâm điều khiển DeFi được thể hiện bằng không khí pastel: đủ cấu trúc để tin tưởng giao dịch tiền, đủ màu sắc để cảm thấy sống động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Uniswap Magenta | `#ff37c7` | `--color-uniswap-magenta` | Accent hồng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính | | Ink | `#131313` | `--color-ink` | Văn bản chính, nav labels, headings, body copy, và icon strokes mặc định — gần đen thay vì đen tuyền để đọc mềm hơn | | Charcoal | `#222222` | `--color-charcoal` | Văn bản phụ và border UI đậm khi cần thêm trọng lượng mà không dùng đen tuyền | | Steel | `#6a6a6a` | `--color-steel` | Helper text mờ, secondary labels, inactive nav items, và supporting copy |

# Sunday — Style Reference > Monochrome magazine spread with one yellow highlight **Theme:** light Sunday presents Memo in an editorial product-launch register: a pure white canvas dominated by massive single-weight headlines, photographic storytelling, and a single vivid yellow used as rare punctuation against a near-total absence of color. Typography is the brand — one weight (400) stretched across a scale from 14px to 142px, with slight negative tracking on display sizes, giving the page the cadence of a magazine spread rather than a software product page. The interface is sparse to the point of asceticism: centered navigation, no sidebar, no cards with shadows, no decorative gradient meshes. Color appears only as functional signal — yellow for highlight states and beta CTAs, black for everything else. The visual system reads as confidence through restraint: the robot does the talking, the page stays out of the way. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lemon Highlight | `#f7e731` | `--color-lemon-highlight` | Yellow supporting accent for decorative details and low-frequency emphasis | | Ink Black | `#1a1a1a` | `--color-ink-black` | Primary text, icons, button labels, nav links, form borders — the workhorse dark for all readable content | | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, button text on dark fills — the dominant canvas | | Pure Black | `#000000` | `--color-pure-black` | Hairline borders, footer background, maximum-emphasis text — used where Ink Black is not dark enough |

# Mural — Style Reference > Blackboard flipping to whiteboard — same hand, same authority, opposite ground. **Theme:** mixed Mural hits like a blackboard in a bright studio — the hero opens pitch-black with oversized serif-adjacent display type bleeding edge to edge, then the page snaps into clinical white with the same confidence. The dual-font system is the signature move: STK Bureau (weight 300 only) handles all display and headline work with tight negative tracking (-0.04 to -0.05em), while ABC Social runs everything from captions to body in a humanist groove. Electric jade (#00c27a) is the single chromatic anchor — appearing on CTAs and key links against both black and white backgrounds, creating identical urgency in both contexts. Cards live in a borderless, shadow-free world where containment comes from background-color switches (#eeeeee, #ffffff) rather than depth. The Mural logomark's rainbow-spectrum identity is carefully quarantined from the page palette — the product itself runs monochromatic with jade as its only relief valve. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Jade CTA | `#00c27a` | `--color-jade-cta` | Primary CTA buttons, active links, key interactive highlights — jade against black in the hero and against white in body sections maintains equal visual force without changing hue | | Mint Surface | `#b4f5c8` | `--color-mint-surface` | Card backgrounds, feature highlight areas — pastel counterpoint to jade that reads as 'selected' or 'active' without the full saturation of CTA jade | | Forest | `#00843f` | `--color-forest` | Card accent backgrounds, deep green surface variant | | Badge Leaf | `#d5f8e0` | `--color-badge-leaf` | Blog/category badge backgrounds — near-white green tint that signals categorization without demanding attention |