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

# 큰그림컴퍼니 — Style Reference > Tuyên ngôn typographic trên nền bê tông. Một press kit đen-trên-trắng, nơi Helvetica cỡ lớn đảm nhiệm vai trò của nhiếp ảnh, và kết cấu duy nhất là một tờ giấy nhàu duy nhất nằm dưới body type. **Theme:** light Bigpicture Company là một hệ thống editorial đơn sắc, xử lý trang web như một press kit in ấn được trải trên giấy thô. Giao diện loại bỏ mọi màu sắc và hoàn toàn dựa vào mực đen, khoảng trắng, đường kẻ mảnh (hairline rules) và một kết cấu giấy nhàu duy nhất để tạo bầu không khí. Typography chính là sản phẩm: display headlines đạt tới 274px với Helvetica Neue 700 và negative tracking mạnh, biến chữ thành khối thị giác chủ đạo trên mọi màn hình. Monospace labels ([01-N INTRODUCTION], CREATIVE/AGENCY) hoạt động như caption kiểu in ấn, trong khi các biểu tượng sparkle bốn cánh là vật trang trí duy nhất giữa các section. Layout rộng rãi, mang phong cách zine — section gap 72px, horizontal padding 144–250px, và các khối ảnh full-bleed với góc bo 288px giúp trang thở như một bức tường gallery thay vì một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Press Ink | `#121212` | `--color-press-ink` | Primary text, hairlines, section borders, icon strokes, footer text — sắc thái tối duy nhất mang 95% toàn bộ thông tin foreground | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, nav pill background, heading-bordered surfaces | | Newsprint | `#f1f1f1` | `--color-newsprint` | Surface fills nhẹ, soft borders, hairline dividers, tông màu nền cho kết cấu giấy nhàu | | Foil Gray | `#e1e1e1` | `--color-foil-gray` | Light borders, icon stroke accents, secondary dividers |

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

# sweetgreen — Style Reference > bảng phong cách farm-stand vào giờ vàng **Theme:** light Hệ thống thiết kế của sweetgreen là một thẩm mỹ ấm áp, pha trộn giữa farm-stand và typography hiện đại: nền cream (#f4f3e7) bắt nguồn từ chất liệu tự nhiên, với deep forest green làm neo cấu trúc và electric lime (#e6ff55) làm màu hành động đơn lẻ, năng lượng cao. Nhiếp ảnh là yếu tố dẫn dắt thương hiệu — những shot đồ ăn overhead, bão hòa màu, trên nền gạch ấm, gốm sứ và bê tông — được xử lý như hero, không bao giờ là trang trí. Typography đảm nhận phần nặng trên chrome: một geometric sans tùy chỉnh (SweetSans) thể hiện các nhãn danh mục cỡ lớn và hero headline ở weight cực đoan (400 ở 70–80px, với line-height 0.85 khiến các chữ gần như chạm nhau), trong khi một display face siêu nhẹ thứ cấp (Grenette ở 200) tạo sự tương phản qua sự kiềm chế. Các component được thiết kế tối giản có chủ đích — pill-shaped buttons, ghost text links với mũi tên, product cards không badge — để đồ ăn và headline typography chiếm trọn mọi màn hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Forest | `#00473c` | `--color-deep-forest` | Màu thương hiệu chính, nav logo, dark pill buttons, text accents, badge borders, link colors — màu xanh cấu trúc neo giữ bảng màu | | Lime Glow | `#e6ff55` | `--color-lime-glow` | Màu hành động xanh cho filled buttons, trạng thái điều hướng được chọn, và các thời điểm chuyển đổi tập trung. | | Sage Mist | `#d8e5d6` | `--color-sage-mist` | Nền section, card surfaces, content band xen kẽ — màu xanh thực vật nhẹ nhàng báo hiệu sự tươi mới mà không cạnh tranh với ảnh đồ ăn | | Warm Sand | `#e8dcc6` | `--color-warm-sand` | Accent surface cho các section band xen kẽ — màu be ấm kết hợp với ảnh đồ ăn và thêm sự đa dạng earthy vào bảng màu xanh chủ đạo |

# sunday — Style Reference > white gallery với một nhịp neon — một poster Helvetica sạch sẽ, nơi một đường hồng neon cắt ngang sự tĩnh lặng đen-trắng. **Theme:** light Sunday là một thương hiệu thanh toán trên nền canvas trắng dành cho ngành hospitality, với một điểm nhấn neon hồng duy nhất hoạt động như dấu câu điện giữa một hệ thống gần như không màu. Logic thị giác mang phong cách editorial: typography đảm nhiệm vai trò chính, nhiếp ảnh mang lại hơi ấm, và màu sắc chỉ xuất hiện ở nơi cần thu hút sự chú ý. Màu đen là mặc định cấu trúc — text, border, card, primary button, thậm chí cả background của feature section — trong khi #ff17e9 được dành riêng cho các tín hiệu thương hiệu (logo, active nav, heading được tô sáng, badge border). Hệ thống type được thống nhất dưới một font chữ duy nhất (Helvetica Neue) nhưng trải dài trên một dải cực rộng từ caption 12px đến stat numeral 200px, với negative tracking mạnh ở kích thước lớn và positive tracking trên các label uppercase nhỏ. Bề mặt phẳng — hầu như không có shadow, dựa vào hairline border và độ tương phản. Các component có xu hướng bo tròn: 16px cho card và input, pill 64px cho primary button, 100px cho tag. Cảm giác tổng thể là minimalism đầy tự tin, được sưởi ấm bởi ảnh chụp nhà hàng thực tế và một nhịp neon không thể nhầm lẫn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, hairline, primary button dạng fill, background section tối, và bề mặt card trên các band tối — mặc định cấu trúc mang toàn bộ hệ thống | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, button text trên fill tối, form input fill — khoảng không gian âm làm khung cho mọi thứ | | Warm Gray | `#736f7c` | `--color-warm-gray` | Body text trên bề mặt sáng, border nhẹ, helper text mờ — một màu gần xám làm ấm bảng màu trung tính một chút | | Mist | `#dedede` | `--color-mist` | Hairline divider, input border, disabled state — đường cấu trúc sáng nhất trong hệ thống |

# robot.com — Style Reference > một trang editorial in ấn với bút highlight màu vàng Giấy off-white ấm áp, chữ đen mực in, và một điểm nhấn neon-vàng duy nhất đánh dấu những gì quan trọng — hệ thống hoạt động như một layout tạp chí tự tin, không phải dashboard phần mềm. **Theme:** light robot.com nói bằng giọng gần như đơn sắc — nền canvas off-white ấm áp, chữ đen mực in, và một điểm nhấn vàng chói duy nhất hoạt động như bút highlight trên trang giấy in. Hệ thống mang phong cách editorial và đầy tự tin: typography mạnh mẽ (custom Yellix lên đến 100px với negative tracking), pill controls (bán kính 24-30px chiếm ưu thế), và các khối màu cấp section đảo giữa off-white, gần-đen và vàng thay vì gradient nhẹ. Ảnh sản phẩm được xử lý như cinematic evidence full-bleed — không crop, không UI chrome xung quanh — trong khi các khối chữ nằm trong cột hẹp canh trái, để lại khoảng thở rộng bên phải. Nhịp điệu thị giác đan xen giữa các dải đơn sắc yên tĩnh với các khối accent đậm, khiến màu vàng có cảm giác xứng đáng chứ không chỉ để trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Yellix Yellow | `#fff65d` | `--color-yellix-yellow` | Primary action buttons, section accent blocks, highlight tags, decorative fills — màu sắc duy nhất, dùng tiết kiệm để làm nổi bật một phần tử duy nhất trên mỗi view | | Bone White | `#ffffff` | `--color-bone-white` | Page canvas, chữ inverted trên khối tối, chữ trên filled button |

# mono — Style Reference > Swiss editorial grid as gallery wall text — a black-and-white broadsheet where type itself is the only color. **Theme:** light Mono operates as a strict editorial-grid system: pure white canvas, a single near-black charcoal (#292929) doing all structural and typographic work, and zero chromatic accents. The visual logic is that of a museum wall label meets a Swiss design manual — type and gridlines carry every signal, never color. Custom display faces (NH at whisper-light 100/300, EV as a razor-thin display weight, S-Works for impact) create sharp typographic contrast that fills the role color normally would. Components are flat to the point of austerity: hairline borders, zero shadows, no rounded corners, no gradients. Layout is rigidly columnar with visible structural lines acting as both composition and ornament. The feel is curated, quiet, and deliberately self-conscious about its own typographic discipline. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, image backgrounds — the dominant surface that lets typography and gridlines read as structure | | Charcoal Ink | `#292929` | `--color-charcoal-ink` | Primary text, heading fills, hairline borders, gridlines, button text — the only working neutral, doing 90% of visual heavy lifting | | Carbon Black | `#000000` | `--color-carbon-black` | SVG fills, input borders, deepest text emphasis — used sparingly for maximum-contrast accents only |

# mishmash® — Style Reference > paper boutique, black frame, vivid contents. **Theme:** light mishmash® vận hành như một phòng trưng bày đồ giấy: chrome (type, border, button, card) gần như hoàn toàn achromatic, để ảnh sản phẩm bão hòa màu đảm nhận mọi khoảnh khắc màu sắc. Bố cục là một grid nhỏ gọn, thiên về hình ảnh, nơi các editorial photo cỡ lớn làm phần việc nặng nhọc và các UI element giữ vai trò yên lặng, nhỏ gọn và tự tin. Chỉ có hai token màu tồn tại trong giao diện — một màu vàng bơ nhạt (butter yellow) và một màu hổ phách ấm hơn (amber) — và cả hai đều xuất hiện như những dấu chấm câu nổi nhỏ (sale badges, persistent discount chip) thay vì là filled buttons hay background. Type là nơi duy nhất hơi ấm đi vào hệ thống: Circular ở kích thước vừa phải với line-height thoải mái, đặt sát vào grid. Kết quả mang cảm giác như một cửa hàng văn phòng phẩm được tuyển chọn — vỏ ngoài kiềm chế, nội dung sống động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink | `#171717` | `--color-ink` | Primary text, nav links, button text, card borders, footer dividers — gần đen nhưng pha chút ấm, không phải #000 thuần | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface, product card background | | Bone | `#f2f2f2` | `--color-bone` | Subtle body borders, secondary text, input borders, hairline dividers giữa các section | | Ash | `#e3e3e3` | `--color-ash` | Button borders, card surface variant, footer separator lines — tối hơn Bone một chút dùng cho elevated borders |

# ldd — Style Reference > Dot-matrix broadsheet on cream paper — a single sheet of warm stock, overprinted once with massive black type and nothing else. **Theme:** light A two-color broadsheet: warm cream canvas (#fffcf0), near-black ink (#000310) with a faint blue undertone, and zero decoration. Drama is generated entirely by scale — a custom 135px display face (LDD) with dot-matrix character treatments fights against a tiny neo-grotesque body face (NeueMontreal at 12–16px, line-height 1.0) for the screen's attention. The interface behaves less like a website and more like a printed zine: horizontal rules divide the page, oversized section numbers (01, 04) punctuate the rhythm, and a labeled scroll-progress bar (Scroll / To / Discover) replaces all conventional CTAs. 200px margins between sections create gallery-hung breathing room. No shadows, no gradients, no rounded corners, no color punctuation — every accent a designer might be tempted to add has been removed on purpose. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fffcf0` | `--color-cream-paper` | Page canvas, card surfaces, section backgrounds — a warm off-white that reads as paper, not screen, and prevents pure-white harshness while giving the near-black type a slight warm push | | Midnight Ink | `#000310` | `--color-midnight-ink` | Primary text, borders, section rules, dark-section backgrounds — near-black with a barely-perceptible blue undertone that distinguishes it from flat #000000 and keeps the palette from feeling like a photocopy | | Pure Press | `#000000` | `--color-pure-press` | Secondary text, nav labels, fine details — true black used sparingly for maximum contrast accents against the midnight ink |

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

# dope.security — Style Reference > Dusk terminal at the edge of orbit **Theme:** dark Dope Security operates as a dark, cinematic interface — a near-black canvas (#090909) punctuated by vivid violet (#af50ff) and atmospheric photography of violet-pink cosmic skies. Typography carries the brand's rebellious confidence: a geometric sans (Whyte Inktrap) at extreme sizes pairs with an editorial italic serif (GrandSlang) for emotional moments like 'Your new', while a monospaced display variant creates stenciled, airport-board aesthetics for feature lists. Surfaces are nearly flat with hairline borders; the only elevation comes from glassmorphic panels and vivid gradient cards. Color appears sparingly but decisively — one violet accent for interactive moments, gradient washes for comparison blocks, and the rest is pure contrast. The visual rhythm alternates between vast negative space and dense, oversized type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#090909` | `--color-void` | Page canvas, section backgrounds — the base dark that makes all color vibrate | | Bone White | `#f7f9fa` | `--color-bone-white` | Primary text, icon fills, hairline borders — used at scale across headings, cards, and nav | | Ash | `#f0f0f0` | `--color-ash` | Heading text and decorative type outlines, large-scale display borders | | Slate | `#6b6b6b` | `--color-slate` | Muted borders, secondary icon strokes, subdued structural lines |

# boords.com — Style Reference > Studio storyboard ấm áp trên nền giấy kem — nền cream, điểm nhấn bút chì màu hổ phách, và kiểu chữ hình học phẳng mang cảm giác vẽ tay dù là UI thuần túy. **Theme:** light Boords hoạt động trong một không gian thị giác ấm áp, giống như giấy: nền cream (#fafaf5) nằm bên dưới các bề mặt trắng tinh, với một điểm nhấn màu hổ phách duy nhất mang cảm giác như nét bút chì hơn là một CTA kỹ thuật số. Typeface 'matter' tùy chỉnh mang tính hình học, thân thiện ở mọi kích thước, với tracking dương cho small-caps eyebrows và headline chặt chẽ, tự tin ở 32–60px. Giao diện được thiết kế phẳng có chủ đích — góc 6px là bán kính mặc định, shadow gần như vắng bóng, và một phần tối (khu vực developer/API) phá vỡ sự đơn điệu của cream mà không làm xáo trộn sự yên tĩnh. Thẩm mỹ này vay mượn từ thế giới storyboard mà nó phục vụ: tông trung tính ấm, bo tròn mềm mại, màu hành động ấm áp như hổ phách, và chất vẽ tay trong hình ảnh sản phẩm khiến UI cảm giác như một công cụ sáng tạo hơn là một ứng dụng năng suất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Warm Cream | `#fafaf5` | `--color-warm-cream` | Page canvas, bề mặt nền — thay thế màu trắng tinh khiết để tạo cho giao diện cảm giác ấm áp như giấy | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, panel sản phẩm UI, khối nội dung nâng cao | | Ink Black | `#121212` | `--color-ink-black` | Văn bản chính, nền phần tối, nút nav đã điền màu, border tương phản cao | | Stone Gray | `#e9e9e7` | `--color-stone-gray` | Đường phân cách section, bề mặt xen kẽ nhẹ nhàng, nền input field |

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

# beehiiv — Style Reference > midnight observatory with neon plasma **Theme:** dark beehiiv uses a midnight-canvas language: near-black surfaces with subtle violet undertones, tight geometric display type in Clash Grotesk, and a signature electric-indigo-to-hot-magenta gradient that injects energy into an otherwise restrained layout. The page behaves like a product launch site — dark always, with content cards floating on the dark canvas using thin violet borders and faint glows rather than heavy shadows. Satoshi carries all interface text with comfortable spacing, while Clash Grotesk delivers the headline voice at 60-72px with zero letter-spacing for confident geometric authority. Accent color appears sparingly: as a gradient on hero text, as a full-bleed highlight on one testimonial card, and as small chromatic icons — never as large filled buttons. Components are flat and precise, relying on border-weight and inner glow rather than elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Abyss Ink | `#060419` | `--color-abyss-ink` | Page background, deepest surface — the void that everything floats on | | Deep Violet | `linear-gradient(to right bottom, rgba(6, 4, 25, 0.4), rgba(47, 57, 186, 0.8))` | `--color-deep-violet` | Card and panel surfaces — one step lifted from the canvas; Atmospheric gradient overlay — blends canvas into indigo accent | | Twilight Plum | `#141230` | `--color-twilight-plum` | Elevated surfaces, active nav backgrounds, deeper card variants | | Dark Plum | `#1b0e27` | `--color-dark-plum` | Hover states, inset surface, tooltip backgrounds |

# basement.studio — Style Reference > Một xưởng in ảo lúc 3 giờ sáng — chữ nén khổng lồ tràn ra khỏi canvas đen tuyền, một tia lửa cam trên nav, mọi thứ còn lại đều trắng hoặc xám ma quái. **Theme:** dark Thẩm mỹ void thuần khiết — trang mở ra như một hình chữ nhật đen với một mục nav màu cam duy nhất và dòng chữ thì thầm 'Scroll to Explore', sau đó bùng nổ thành display type khổng lồ 87px. Canvas #000000 là tuyệt đối, không phải 'xám đen' — không có surface gradients, không có depth layers, không có decorative noise. Geist 87px weight 600 với letter-spacing -0.04em là neo thị giác: nén, rộng, cơ khí. Điểm nhấn duy nhất, màu cam than hồng #ff4d00, chỉ xuất hiện trên mục nav đang active — không bao giờ trên CTA, không bao giờ trên button — khiến nó trông như đèn báo hiệu, không phải màu thương hiệu. Các ô logo client có viền grid màu #454545 tạo cảm giác tủ hồ sơ dày đặc, kiểu kiểm kê trên nền đen tuyền. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Signal | `#ff4d00` | `--color-ember-signal` | Chỉ dùng cho trạng thái active của nav — xuất hiện trên một phần tử tương tác duy nhất như một đèn báo nóng, không bao giờ dùng cho button hay CTA; sự hiếm hoi chính là điểm đặc trưng | | Void | `#000000` | `--color-void` | Nền trang, button fill, SVG fills — đen tuyệt đối, không phải gần đen | | Chalk | `#ffffff` | `--color-chalk` | Text chính, nhãn nav, text button, body copy | | Fog | `#e5e7eb` | `--color-fog` | Màu viền trên nav, card, button, logo grid dividers — khung xương cấu trúc hiện rõ trên nền đen |

# arte* — Style Reference > Golden hour harvest editorial — một tấm canvas màu kem nơi ảnh rừng ngập nắng hòa cùng display type bo tròn cỡ lớn, logo xanh chanh điện, và chữ đồng ấm áp mang cảm giác như được in chứ không phải render. **Theme:** light arte* là một harvest editorial tràn ngập ánh nắng: canvas kem ấm (#e5dccd) làm nền cho những display headline cỡ lớn bằng font Parafina — một sans-serif bo tròn mềm mại, hơi retro ở kích thước cực lớn (70–173px) với line-height dồn nén gần 0.8–0.9 — trong khi Poppins đảm nhận toàn bộ secondary copy ở line-height 1.4 chặt chẽ. Bảng màu mang phong cách vườn-nông trại: harvest copper nâu đồng cháy (#ab5700) cho primary text, chartreuse xanh chanh gây sốc (#e8e359) cho logo và hero overlays, và periwinkle xanh hoa chuông (#7997ff) đóng vai trò đối trọng mát mẻ cho các inline highlights. Hình ảnh là nửa còn lại của hệ thống — ảnh golden-hour full-bleed về rừng, đồ ăn và khuôn mặt, được xếp lớp với display type thay vì tách rời. Các component ít và mềm mại: pill buttons với radius 31px, card radii 20px, viền mảnh, gần như không có shadow. Ấn tượng tổng thể là một cuốn sách nấu ăn in ấn hoặc poster chợ nông sản được số hóa — display type tự tin, tông màu đất với một điểm nhấn vàng điện, và bản thân tên thương hiệu kết thúc bằng dấu hoa thị (*) báo hiệu sự tinh nghịch editorial. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Wheat Cream | `#e5dccd` | `--color-wheat-cream` | Canvas trang, bề mặt card, nền section — tông trắng kem ấm giữ mọi màn hình | | Harvest Copper | `#ab5700` | `--color-harvest-copper` | Primary text, body copy, list borders, card borders, decorative strokes — màu mực mặc định trên toàn bộ nội dung editorial | | Citron Beam | `#e8e359` | `--color-citron-beam` | Màu logotype, hero text overlays, accent borders, icon highlights — xanh chanh điện giúp thương hiệu nổi bật trên nền xanh rừng và kem | | Morning Glory | `#7997ff` | `--color-morning-glory` | Inline text highlights, links, secondary icon accents, input focus — periwinkle mát mẻ làm dịu bảng màu ấm khi xuất hiện trong body copy |

# amra — Style Reference > iridescent sphere on white void — the lavender accent is the only chromatic pulse against an almost perfectly achromatic page, and a single gradient orb does the work that a hero illustration usually does. **Theme:** light Amra is a near-monochrome white canvas with a single soft lavender accent (#acafff) and an iridescent gradient sphere as its signature visual anchor. The interface stays almost completely achromatic — text, dividers, and borders all share a family of near-blacks and grays — so the lavender feels like a small electric pulse rather than a brand color. Photography is never raw: subjects are silhouetted and dropped onto the same teal-to-violet gradient as the hero sphere, making imagery feel like part of the same substance as the product. Typography is custom, geometric, and weight-400 throughout — no bold ever appears, and authority comes from size and tight tracking rather than weight. Components are large-radius and floating: a pill-shaped nav drifts over content, image cards have 44px corners, and the page breathes with 100–160px vertical gaps between sections. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#141414` | `--color-ink-black` | Primary text, all heading and body color, dominant border color, nav text and structural dividers. The near-black (not pure black) keeps the monochrome system from feeling harsh against white | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, icon fills on dark backgrounds, nav pill surface when over light sections | | Mist Gray | `#a1a1a1` | `--color-mist-gray` | Secondary text, subheadings, muted body copy, lighter hairline borders. The middle step in the achromatic scale | | Smoke Gray | `#8a8a8a` | `--color-smoke-gray` | Nav link text at rest, medium-weight borders, tertiary text |

# aave.com — Style Reference > violet neon xuyên qua chạng vạng — một buổi trưa oải hương nhạt tan dần vào bề mặt sản phẩm nửa đêm, và một tia violet điện duy nhất là màu sắc sống sót qua màn chuyển tiếp. **Theme:** mixed Aave vận hành như một hệ thống hai tông: một hero oải hương ngập nắng tan dần vào bề mặt sản phẩm gần như đen, với violet rực rỡ (#998eff) xuyên suốt cả hai nửa như điểm nhấn màu sắc duy nhất. Typography dùng một custom display family (Aave Repro) trong dải weight hẹp 400–500 — hierarchy đến từ những bước nhảy kích thước rộng và negative tracking mạnh, chứ không phải từ việc tăng đậm. Các component mềm mại và hình pill theo mặc định: 20px là corner radius chủ lực, 1584px đánh dấu CTA full-pill, và elevation gần như vắng mặt — chỉ một công thức soft shadow duy nhất xuất hiện trên các floating element. Kết quả là một ứng dụng fintech hấp thụ năng lượng điện tử của crypto và sự kiềm chế editorial của SaaS cùng lúc, trình bày cơ chế DeFi dày đặc qua một canvas tĩnh lặng, tương phản cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — sợi chỉ màu sắc duy nhất xuyên suốt các phần sáng và tối; đủ ấm để sống động trên nền đen mờ mà không trở nên hung hãn | | Obsidian | `#221d1d` | `--color-obsidian` | Dark surface chủ đạo, body text trong phần sáng, primary nav text — màu gần đen neo giữ các band Pro và Markets | | Inkwell | `#0f0f10` | `--color-inkwell` | Neutral action fill tương phản cao cho primary buttons trên surface sáng. | | Charcoal | `#000000` | `--color-charcoal` | Pure-black fallback cho fills, strokes và borders tương phản cao |

# Zoox — Style Reference > serene sage showroom. Một không gian gallery xanh bạc hà nhạt, nơi một điểm nhấn teal rực rỡ và một mảng tối màu rừng sâu phá vỡ sự tĩnh lặng — rộng rãi, cao cấp, và hướng tới tương lai. **Theme:** light Zoox mang đến một giao diện gallery thanh bình, nơi nền sage mềm mại (#d3e4df) bao trùm toàn bộ trải nghiệm, chỉ bị phá vỡ bởi một mảng màu xanh rừng tối duy nhất tạo nên khoảnh khắc tương phản kịch tính. Hệ thống typography được xây dựng trên hai weight của một dòng chữ neo-grotesque custom — một dạng compact sans cho UI và body text, và một dạng display cho headline cỡ lớn kéo dài đến 120px với letter-spacing gần như bằng 0. Một màu teal rực rỡ duy nhất (#64d5b3) là điểm nhấn cho toàn bộ hệ thống: đây là màu sắc duy nhất được dùng làm bề mặt filled, xuất hiện trên CTA button và các vùng accent chính. Mọi thứ khác đều giữ ở tông desaturated — xám, gần đen, và màu sage đặc trưng. Các component có cảm giác như không trọng lượng: card dùng radius 36px lớn, shadow gần như không có, border chỉ là hairline. Tổng thể mang phong cách futurism tĩnh lặng — một showroom, không phải dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Sage Canvas | `#d3e4df` | `--color-sage-canvas` | Nền trang, hero bands, section divider — màu nền chủ đạo tạo không khí gallery êm dịu | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, image mask, icon fill, text tương phản cao trên nền tối | | Mint Frost | `#edf4f2` | `--color-mint-frost` | Nền badge, highlight wash nhẹ, bề mặt card phụ — phiên bản nhẹ nhàng hơn của sage canvas | | Carbon | `#0d1212` | `--color-carbon` | Text chính, nền section tối, border dày — màu gần đen sâu nhất, hơi lạnh hơn đen thuần |

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

# Yung Studio — Style Reference > nét vẽ phấn trắng trên tường gallery đen **Theme:** dark Yung Studio hoạt động trong không gian đơn sắc tuyệt đối: một khoảng đen thuần khiết, nơi type trắng và illustration trắng làm tất cả. Ngôn ngữ thị giác mang phong cách gallery — thưa thoáng, tự tin, editorial — với một chút violet (#c692ff) dành riêng làm accent nhẹ nhàng, chỉ xuất hiện ở trạng thái hover hoặc selection. Typography đảm nhận toàn bộ giọng điệu thương hiệu qua hệ thống optical-size PolySans: Slim thì thầm ở body text, Neutral lấp đầy các phần mid-scale, còn Bulky neo giữ hero như display cỡ lớn. Layout thở mạnh mẽ; các section cách nhau bởi khoảng trống 100+ pixel và được đóng khung bằng padding ngang rộng rãi, cho mỗi phần tử đủ không gian để tỏa sáng. Thẩm mỹ này gần với bìa zine hoặc sách nghệ thuật hơn là một SaaS dashboard — phẳng, đậm, biểu cảm qua typography, và không ngại khoảng trống âm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Obsidian | `#000000` | `--color-obsidian` | Canvas trang, background full-bleed, bề mặt cho mọi nội dung chính | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt hỗ trợ sáng cho background nhẹ và phân cách section. Không nâng lên làm màu CTA chính | | Ultraviolet | `#c692ff` | `--color-ultraviolet` | Accent cho hover states, active link underline, và highlight dấu câu thỉnh thoảng — xuất hiện với tần suất gần như bằng không, nên hoạt động như sự bất ngờ, không phải trang trí |

# Your workplace has the answer. Just ask Dala for it. — Style Reference > Particle cosmos on a void — violet pulse against infinite black **Theme:** dark Dala is a knowledge-management product rendered as a dark cosmic field: a pure black canvas, a single saturated violet as the only authority color, and white type that glows against the void. The interface recedes — sparse text blocks, hairline borders, pill controls — while a massive particle constellation dominates the visual real estate, its thousands of tiny geometric shapes (triangles, circles, diamonds) clustering into organic forms. Typography is stretched and ultra-tight at display sizes (negative tracking pushes letters almost together) but opens up at body sizes (slight positive tracking aids legibility on black). Components feel lightweight and fast: no shadows, no gradients, no card elevation — depth comes purely from color contrast and the negative space of the void. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page background, primary canvas — the dark field where the constellation lives | | Bone | `#ffffff` | `--color-bone` | Primary text, icon strokes, hairlines, card borders, nav text — the only light that reads on the void | | Ash | `#bdbdbd` | `--color-ash` | Secondary muted text, subtle border accents — quieter than bone, still legible on black | | Smoke | `#9a9a9a` | `--color-smoke` | Tertiary text, nav link resting state, low-emphasis dividers — fades into the background |

# Yellowbird® — Style Reference > Tấm biển quảng cáo sốt cà chua kiểu retro dưới nắng trưa — một mặt phẳng vàng dưới mặt trời đen, từng chữ được vẽ bằng bút dạ đậm. Hệ thống thở qua tương phản màu sắc, không phải độ cao: vàng trên vàng được phân cách bởi các nét đen dày, với thẻ kem là điểm nghỉ trung tính duy nhất. **Theme:** light Yellowbird là một thế giới hai màu, dung lượng cao: một màu vàng tươi tràn ngập mọi section trong khi màu đen làm toàn bộ công việc cấu trúc và typography. Trang web mang phong cách như một tấm biển quảng cáo sốt vẽ tay — bề mặt phẳng, đường viền hairline dày thay vì đổ bóng, khoảng thở rộng rãi, và một custom display face chunky biến wordmark thành hero. Không có gradient depth, không glassmorphism, không xếp lớp card chồng card; sự phân cách không gian đến từ việc đổi màu (dải vàng → thẻ kem → nút đen) và padding rộng rãi. Interactive elements giữ ở mức tối thiểu và tự tin: hầu hết các bề mặt không có border trên nền vàng canvas, product cards dùng radius 30px và solid black stroke, và CTA thực sự duy nhất là nút pill đen đậm với chữ trắng. Màu xanh (#007aff) chỉ xuất hiện dưới dạng ghost-button border cho các hành động phụ, khiến nó có cảm giác như mượn tạm chứ không phải của riêng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Sunglow | `#ffe845` | `--color-sunglow` | Brand canvas — nền chủ đạo cho tất cả các section, hero, footer, và announcement bar; cũng dùng cho product category tags và sticker burst shapes | | Sauce Bottle Black | `#000000` | `--color-sauce-bottle-black` | Text chính, tất cả border và hairline, product card strokes, mascot linework, và nền của primary action button dạng filled — làm toàn bộ công việc cấu trúc và typography nặng nhọc |

# Wrike — Style Reference > Công tắc màu vôi trên bảng điều khiển kỹ sư sạch sẽ — điểm nhấn xanh tươi sáng nổi bật trên nền xanh nước biển đậm uy quyền, trôi nổi trên nền trắng. **Theme:** light Ngôn ngữ thiết kế của Wrike được xây dựng trên nền canvas trắng tinh khôi, điểm xuyết bằng một màu xanh vôi tươi sáng duy nhất, hoạt động như một công tắc nguồn xuyên suốt giao diện. Hệ thống sử dụng màu xanh nước biển nửa đêm đậm cho văn bản chính và các phần tối, với các màu trung tính xanh lam-xám lạnh tạo sự phân cách bề mặt mềm mại thay vì xám ấm hoặc bóng đổ nặng. Typography được đảm nhận bởi TT Norms Pro trên lưới 4px thoải mái, với headline weight 700 thu hút sự chú ý so với body text weight 400 mỏng nhẹ. Các component có dạng pill (radius 40px) và card mềm (radius 20px), sử dụng một công thức shadow đặc trưng duy nhất giúp product mockup nổi khỏi trang. Tổng thể mang cảm giác enterprise tự tin nhưng tràn đầy năng lượng — một công cụ quản lý công việc trông giống như một productivity OS, chứ không phải một biểu mẫu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Signal Green | `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))` | `--color-signal-green` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính; Hình khối trang trí, radial glow accent trong phần tối, gradient endpoints | | Midnight Navy | `#162136` | `--color-midnight-navy` | Headlines, body text chính, navigation, footer section tối — mỏ neo cấu trúc của toàn bộ hệ thống phân cấp | | Slate Navy | `#2b3a57` | `--color-slate-navy` | Secondary headings, card titles, văn bản tối đã làm dịu — navy nhẹ hơn cho sub-hierarchy | | Steel Blue-Gray | `#657694` | `--color-steel-blue-gray` | Helper text, secondary copy, label đã làm mờ, dropdown menu — tương đương tông lạnh của mid-gray |

# Woven — Style Reference > Mực đen trên giấy da kem. Một editorial spread của nhà chưng cất, nơi nền cream ấm, một màu mực đen duy nhất và chữ in hoa giãn rộng tạo nên toàn bộ cấu trúc thị giác; ảnh sản phẩm mang lại mọi sắc màu. **Theme:** light Woven là một nhãn hiệu whisky mang phong cách editorial, gợi cảm giác giấy da trên máy in: nền cream ấm, một màu mực đen duy nhất cho mọi dòng chữ và đường viền mảnh (hairline border), cùng tracking rộng rãi giúp chữ thở như masthead của tạp chí xa xỉ. Toàn bộ giao diện là đơn sắc — không có điểm nhấn màu sắc — nên ảnh sản phẩm (chai hổ phách, nắp giấy bạc, chất lỏng) trở thành màu sắc duy nhất mắt người dùng thấy. Layout rộng rãi và căn giữa, với micro-copy điều hướng viết hoa xếp thành cột hẹp và tiêu đề phần được đặt cách xa nội dung bên dưới. Các component phẳng và tĩnh lặng: thẻ sản phẩm trắng với đường viền mảnh, text link có gạch chân, ghost controls, không có đổ bóng hay gradient — bề mặt cream chính là độ cao duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#eeede5` | `--color-parchment-cream` | Canvas trang, bề mặt footer, và nền chủ đạo — màu trắng ngà ấm tạo cảm giác editorial, giống giấy cho toàn bộ site | | Ink Black | `#232323` | `--color-ink-black` | Văn bản chính, mọi đường viền mảnh, mực footer, và màu gần đen tạo nên mọi đường nét cấu trúc trên trang | | Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ sản phẩm, nền section xen kẽ, và văn bản tương phản cao trên nền tối hoặc ảnh | | Iron Gray | `#4a4a4a` | `--color-iron-gray` | Body text phụ, đường viền nhẹ, và lớp văn bản trung tính nằm giữa mực chính và nền |