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

# Perplexity AI — Style Reference > Terminal nghiên cứu ấm áp. Một thanh tìm kiếm màu kem nổi trên nền giấy cũ, bao quanh bởi các control đơn sắc yên tĩnh — sự tĩnh lặng của bàn đọc thư viện được cô đọng vào một ô nhập liệu duy nhất. **Theme:** light Giao diện của Perplexity vận hành như một terminal nghiên cứu yên tĩnh: một canvas ấm áp off-white (#faf8f5) mang cảm giác giấy cũ hơn là app-white vô trùng, một giọng văn typographic đơn sắc duy nhất, và một điểm nhấn teal kiềm chế (#016a71) chỉ xuất hiện như dấu câu chức năng. Toàn bộ hệ thống thị giác thu gọn lại thành một thanh tìm kiếm làm hero — mọi control xung quanh (sidebar, top nav, model selector, voice button) đều là vệ tinh phụ thuộc. Mật độ gọn nhưng không chật: 8px là gap chủ lực, 12–16px là padding tiêu chuẩn, với 9999px pill rounding trên tất cả interactive controls. Hầu như không có elevation — thiết kế cố tình flat, dùng border 1px gần như vô hình ở #d1d1cd và một shadow cực nhẹ để tách card layer khỏi canvas. Typography là custom (pplxSans) với đúng hai weight (400, 500) và ba kích thước (12, 14, 16) — scale được thu hẹp có chủ đích, khiến giao diện giống một tài liệu hơn là một dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Aged Paper | `#faf8f5` | `--color-aged-paper` | Canvas trang và bề mặt card — off-white ấm thay thế pure white vô trùng, tạo chất liệu giấy cho giao diện | | Ink Black | `#000000` | `--color-ink-black` | Text chính, icon strokes, và fill chủ đạo trên navigation và body copy | | Charcoal | `#27251e` | `--color-charcoal` | Nền action button chính và text emphasis cao — near-black ấm kết hợp với cream canvas tạo độ tương phản mềm hơn pure-black | | Ash Gray | `#72706b` | `--color-ash-gray` | Text phụ, icon muted, và nav fill không hoạt động — mang tông ấm của bảng màu |

# Ease Health — Style Reference > Sunlit clinic on white linen. A muted, light-first healthcare surface where one deep forest green does the work of accent, action, and trust, framed by sage washes, dusty-blue panels, and whisper-weight serif headlines. **Theme:** light Ease Health uses a clinical-calm language: warm sage and dusty blue surfaces on a near-white canvas, with a single deep forest green carrying every action, icon, and heading accent. The page breathes — generous whitespace, no shadows, thin gray hairlines, and pill-shaped tags that feel like medical labels rather than UI chrome. Typography pairs a delicate serif (Faire Octave) for headline moments with a quiet grotesque (Suisseintl) for everything operational, both set in weight 300 with tight negative tracking so type whispers rather than shouts. Color is rationed: most surfaces are achromatic or barely tinted, and the dark green appears only where the user should act, look, or trust. Components feel light, flat, and confident — the system reads as a calm, premium clinic, not a noisy SaaS dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Forest Ink | `#0f3e17` | `--color-forest-ink` | Primary action buttons, heading text, brand icons, footer, active states — the only saturated color in the system; deep enough to read as serious clinical authority against the pale surfaces | | Sage Wash | `#b1dbb8` | `--color-sage-wash` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color | | Mist Blue | `#b6ced5` | `--color-mist-blue` | Hero panel background, secondary surface tint, pill badge background — the cool counterpoint to sage, used for product/showcase bands | | Mint Veil | `#cfe7d3` | `--color-mint-veil` | Soft card surface tint, subtle highlight wash |

# The online bank — Style Reference > Kho kỹ thuật số trong màu teal đại dương sâu thẳm — một ngân hàng tạo nên sự điềm tĩnh qua khoảng trắng tĩnh lặng và một màu sắc duy nhất đầy tự tin. **Theme:** light N26 mang đến một không gian ngân hàng số điềm tĩnh, đầy tự tin, neo giữ bởi một màu teal đậm duy nhất chiếm lĩnh viewport, trong khi phần còn lại của giao diện lùi vào khoảng trắng off-white ấm áp. Hệ thống phân cấp thị giác được xây dựng trên sự tương phản: mực đen đặc (#1b1b1b) trên nền gần trắng (#faf8f5), với teal xuất hiện như một dấu chấm câu có chủ đích cho các hành động chính và khoảnh khắc thương hiệu, chứ không phải trang trí. Typography mang một sự căng thẳng đặc trưng giữa N26 sans-serif nhỏ gọn, hơi tracking dùng cho navigation và nội dung body, và N26-Extended display face rộng hơn, tạo không gian thở cho headline ở kích thước 58–80px. Các component mang cảm giác kiến trúc và tối giản — border mảnh, padding rộng rãi, border-radius nhỏ trên controls, border-radius lớn trên hình ảnh — phản ánh tư duy thiết kế ngân hàng châu Âu, nơi sự tin tưởng được truyền tải qua sự kiềm chế thay vì trang trí cầu kỳ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Deep Teal | `#088177` | `--color-deep-teal` | Điểm nhấn teal hỗ trợ cho các 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 | `#1b1b1b` | `--color-ink` | Body text chính, heading, icon strokes, link text, và nav labels — một màu gần đen pha chút than, tránh sự khô cứng của màu đen thuần trên nền trắng ấm | | Canvas Warmth | `#faf8f5` | `--color-canvas-warmth` | Nền trang — một màu off-white ấm áp, giống giấy, mang lại cho toàn bộ giao diện chất lượng biên tập, con người, khác biệt với màu trắng SaaS lâm sàng | | Surface White | `#ffffff` | `--color-surface-white` | Bề mặt hỗ trợ sáng cho nền tinh tế và phân cách section. Không nâng lên thành màu CTA chính |

# Altason — Style Reference > architectural monochrome broadsheet **Theme:** light Altason là một portfolio-canvas: lưới editorial thuần đen trên trắng, nơi wordmark Grotesk cỡ lớn, medium-weight là hero và bản thân tác phẩm chính là sản phẩm. Hệ thống hoàn toàn 0% chromatic — mọi khoảnh khắc thị giác đều được tạo nên từ mực, giấy và khoảng trắng âm giữa chúng. Các component không có border ngoại trừ đường kẻ 1px màu đen mảnh như sợi tóc, lặng lẽ phân chia trang; không có shadow, không gradient, không bo góc, không màu nhấn. Type làm tất cả công việc, và nó nói to bằng cách cực kỳ lớn và chỉ ở weight 500 — sự kiềm chế của một medium weight ở 288px là signature move. Mật độ thoáng và có tính kiến trúc: các section thở với vertical padding 112–288px, nội dung nằm trong lưới ba cột, và mọi bề mặt đều là mặt phẳng, không có phân cấp độ cao. Một AI agent nên nghĩ về điều này như thiết kế một trang tạp chí in, không phải một SaaS dashboard. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, border mảnh, đường kẻ cấu trúc, border ảnh, fill heading — mực đen chủ đạo vẽ nên toàn bộ trang | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, chữ trắng trên nền tối — bề mặt để chữ đen lên tiếng | | Charcoal Plate | `#212121` | `--color-charcoal-plate` | Khối bề mặt tối và nền ảnh nơi chữ trắng đặt lên — một giải pháp thay thế mềm hơn cho đen thuần ở các vùng tối lớn | | Silver Hairline | `#b0b0b0` | `--color-silver-hairline` | Đường phân cách tinh tế và link phụ nhẹ nhàng — một mid-gray lặng lẽ lùi về sau chữ đen mà không biến mất |

# Ditto — Style Reference > Xưởng tuân thủ hoa dại ngập nắng. Bề mặt kem ấm, hành động chính vàng rực, mực xanh navy đậm, các mảng màu hữu cơ nở phía sau sản phẩm. **Theme:** light Ditto sử dụng ngôn ngữ SaaS lấy cảm hứng từ khu vườn ngập nắng: nền canvas kem ấm, các đốm trang trí hữu cơ màu xanh lá, hồng và vàng rực, cùng sự kết hợp tự tin giữa serif ấm áp (Hedvig Letters) cho headline và grotesque sạch sẽ (Inter) cho mọi thứ còn lại. Màu navy-violet đậm #130e30 đảm nhận toàn bộ text cấu trúc và đường viền, trong khi một màu vàng sáng duy nhất #ffe228 làm nền cho mọi hành động chính — độ tương phản cao đến mức gần giống như bút highlight. Các component giữ phong cách nhẹ nhàng: button hình pill (bán kính 1440px), card đệm rộng rãi trên bề mặt hơi pha xanh lá (#eff2e5), và độ nâng tối thiểu. Tâm trạng lạc quan và dễ tiếp cận, không mang tính doanh nghiệp hay lâm sàng — các hình khối hoa lá nền, headline serif và tông trung tính ấm giữ cho thiết kế mang hơi thở con người. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Deep Ink | `#130e30` | `--color-deep-ink` | Màu text chính, heading ink, viền card, nền button phụ — gần đen pha violet tạo cảm giác ấm hơn so với đen thuần | | Hi-Yellow | `#ffe228` | `--color-hi-yellow` | Nền hành động chính (CTA button dạng filled), nền hero pill, điểm nhấn — vàng highlighter sáng với text gần đen để đạt độ tương phản tối đa | | Moss Green | `#59e25d` | `--color-moss-green` | Mảng trang trí hữu cơ phía sau hero — xanh lá cây ấm dùng trong các blob nền, không phải UI controls | | Fuchsia | `#e261e5` | `--color-fuchsia` | Mảng trang trí hữu cơ phía sau hero — hồng rực dùng trong các blob nền, không phải UI controls |

# Daniël van der Winden — Style Reference > Ấn phẩm chuyên khảo in trên giấy vellum **Theme:** light Đây là một folio cá nhân mang phong cách editorial, được thể hiện như một ấn phẩm chuyên khảo in trên giấy ấm. Một canvas duy nhất màu xám ấm (#e5e7eb) chứa toàn bộ nội dung, với các thành phần nội dung nổi trên đó mà không có card container hay divider dày. Hệ thống chữ chính là thiết kế: một sans nhân văn (Degular) xử lý UI, body và navigation, trong khi một serif mang chất sách vở (Blanco) đảm nhiệm toàn bộ trọng lượng editorial — headline, introduction và section title. Màu sắc gần như hoàn toàn vắng mặt; sự kiện màu sắc duy nhất là phần fill gần như đen của nút hành động duy nhất trên nền sáng. Layout là một thanh nav cố định bên trái và một cột văn bản có chiều rộng đọc thoải mái, với các bức ảnh chồng lên cột văn bản như những mảnh ghép collage. Mọi thứ khác — border, hairline, separator — đều là hairline và nhẹ nhàng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Vellum | `#e5e7eb` | `--color-vellum` | Canvas trang, hairline divider, link underline, card-edge border — trường màu xám ấm chứa toàn bộ nội dung | | Ink Black | `#111827` | `--color-ink-black` | Văn bản chính, nav link, body copy — màu đọc mặc định | | Graphite | `#374151` | `--color-graphite` | Văn bản body phụ, list item, supporting copy — sáng hơn ink primary một bậc | | Charcoal | `#2a2a28` | `--color-charcoal` | Heading và emphasis editorial — màu tối hơi ấm dành cho serif display |

# Astro — Style Reference > Deep space mission control with a single purple nebula glow **Theme:** dark Astro speaks in the language of a cosmic command bridge: near-black canvas, a single signature purple-magenta nebula gradient that blooms from the hero, and white display type that reads like mission copy. The system is overwhelmingly achromatic — 4% colorfulness — so every chromatic pixel is doing real work: a mint-aqua syntax highlight, a violet link, a sky-blue inline chip. Components are geometric and confident: pill-shaped interactive controls at 9999px radius, 16px cards, 8px chips, and thin hairline borders at 8% opacity rather than colored dividers. The custom display face 'Obviously' does the heavy lifting with its wide, open apertures and quirky alternates (salt, ss06, ss11) that give headlines a friendly, slightly retrofuturist swagger against the dark void. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Canvas | `#1f232e` | `--color-void-canvas` | Primary page background — the base layer for hero, sections, and footer. Slight cool-blue undertone, never pure black, so colored elements feel like they're floating in space rather than printed on paper | | Abyss | `#0c0f19` | `--color-abyss` | Deeper surface level for elevated cards, code blocks, and inset wells. One step darker than the canvas to create depth without using shadows | | Singularity | `#060913` | `--color-singularity` | Darkest surface for terminal windows, CLI boxes, and high-contrast containers. Almost pure black with a blue whisper | | Carbon | `#17191e` | `--color-carbon` | Mid-elevation card surface, sitting between canvas and abyss. Used for theme preview tiles and nested cards |

# The Verge — Style Reference > Midnight control room, mint alerts **Theme:** dark The Verge reads as a late-night newsroom: a near-black canvas where type carries the weight and teal appears only as functional punctuation. The Signal Mint accent (#3cffd0) marks everything that is alive — section labels, author bylines, active states, the subscribe button — while the rest of the page stays achromatic. Display headlines run at Manuka weight 900, 60–107px, creating editorial impact at near-zero line-height, then article bodies switch to Fk Roman Standard serif to separate reading mode from chrome. The vertical 'Verge' wordmark pinned to the left margin is the page's most distinctive structural element — a constant typographic frame, not a logo. Violet (#5200ff) and red-orange (#ff3d00) appear only as section-card fills (Most Popular, Podcasts), giving the monochrome feed two moments of color without breaking the dark mood. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal | `#131313` | `--color-charcoal` | Page canvas, primary background, inverted sections | | Onyx | `#000000` | `--color-onyx` | Deepest darks, shadows, text on light surfaces | | Paper | `#ffffff` | `--color-paper` | Primary text, inverted surfaces, light icons | | Iron | `#313131` | `--color-iron` | Elevated card surface, image-adjacent panels |

# Monzo — Style Reference > Ấm áp của san hô trên nền giấy bạc hà mát — sự kiềm chế đầy tự tin với một điểm nhấn nóng duy nhất. **Theme:** light Monzo hoạt động như một ngân hàng thách thức (challenger bank) thuần kỹ thuật số với ngôn ngữ thị giác nhẹ, ấm áp và thân thiện không hề giả tạo. Canvas là một màu trắng pha xanh bạc hà siêu nhẹ (#f2f8f3) làm nền cho các bề mặt thẻ trắng sắc nét, tạo cảm giác nhiều lớp giấy chồng lên giấy mà không cần dựa vào shadow dày. Một màu Hot Coral (#ff4f40) duy nhất mang toàn bộ năng lượng màu sắc — nó nhuộm logo, link, heading, icon và chính sản phẩm thẻ vật lý, trong khi phần còn lại của giao diện giữ trung tính và yên tĩnh. Typography là sans-serif tùy chỉnh với hai giọng nói: một họ chữ text với letter-spacing âm đặc trưng -0.05em giúp siết chặt các đoạn văn, và một display face dày ở weight 600-800 cho heading. Các component được bo tròn rộng rãi (pill cho action, 64px cho container) và cố tình có độ cao thấp — thương hiệu tin tưởng vào màu sắc, trọng lượng chữ và khoảng trắng để tạo hierarchy, chứ không phải drop shadow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Hot Coral | `#ff4f40` | `--color-hot-coral` | Chữ ký thương hiệu — logo, link, heading, icon, sản phẩm thẻ. Một điểm nhấn sống động duy nhất trên nền giao diện trung tính; mọi khoảnh khắc màu sắc trong hệ thống đều lấy từ một sắc thái này | | Midnight Ink | `#091723` | `--color-midnight-ink` | 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 thành màu CTA chính | | Deep Navy | `#112231` | `--color-deep-navy` | Màu nền phụ và điểm nhấn footer. Sáng hơn Midnight Ink một chút dành cho các phần tử tối nhiều lớp | | Page Mist | `#f2f8f3` | `--color-page-mist` | Canvas trang — nền chủ đạo phía sau mọi section nội dung. Màu trắng pha xanh nhẹ mang lại hơi ấm cho giao diện mà không cạnh tranh với bề mặt trắng |

# Base44 — Style Reference > Sunlit workspace with a single lime spark. Warm off-white canvas, white product surfaces, pill controls, whisper-weight display type, and one electric lime accent that powers every action. **Theme:** light Base44 speaks in warm off-white daylight: a sunlit canvas (#faf9f7) with white product surfaces, whisper-weight display type that feels engraved rather than stamped, and one electric lime accent (#ebffb1) that makes the primary action feel switched on. Section transitions are painted as soft gradient bands — cool blue-to-white in the hero, warm orange-to-coral in the mid-page — creating a horizon-line effect between content blocks rather than hard dividers. Components stay featherlight: pill-shaped controls (999px radius), ~10px card corners, hairline borders, and almost no shadow. The lime-green is the only saturated color allowed on interactive elements; everything else is achromatic or carried inside gradients, which keeps the interface quiet and gives the single accent real authority. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lime Spark | `#ebffb1` | `--color-lime-spark` | Primary action background, active highlights — soft electric lime that reads as energy/switched-on without aggression | | Lime Bolt | `#ade900` | `--color-lime-bolt` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color | | Ember Outline | `#d8723c` | `--color-ember-outline` | Outlined button border, secondary warm-orange action variant | | Solar Orange | `linear-gradient(rgba(250, 249, 247, 0) 2.69%, rgb(255, 240, 222) 24.16%, rgb(255, 174, 83) 56.55%, rgba(255, 174, 83, 0) 98.02%)` | `--color-solar-orange` | Mid-stop of section gradient bands — warm coral that anchors horizon-line transitions; Mid-page section transition — warm orange-to-coral horizon |

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

# Campsite — Style Reference > không gian làm việc biên tập ngập nắng — nền giấy kem ấm với một con tem cam thể hiện chủ đích **Theme:** light Campsite là một không gian làm việc biên tập ngập nắng — nền canvas kem ấm, typography Inter gần đen, và một điểm cam rực rỡ duy nhất đánh dấu những khoảnh khắc thương hiệu. Giao diện mang phong cách một bảng thông báo được sắp xếp chu đáo: các hàng nhỏ gọn, pill controls, đổ bóng đen 5% mềm mại, và khoảng thở rộng rãi giữa các section. Màu sắc được phân bổ có chừng mực — các điểm nhấn màu chỉ xuất hiện ở logo, họa tiết trang trí dạng vệt sơn, một vài tag, và trạng thái ngữ nghĩa. Mật độ nhỏ gọn nhưng bố cục vẫn thoáng nhờ gutter rộng và padding section thoải mái; mọi thứ quan trọng đều nằm trên các card trắng tinh lơ lửng phía trên nền giấy kem bên dưới. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Campfire Orange | `#ff6b1a` | `--color-campfire-orange` | Logo badge, notification pills, và những khoảnh khắc thương hiệu mang tính "dấu câu" — một tông cam ấm duy nhất neo toàn bộ bảng màu trên nền canvas kem | | Ember Brown | `#451a03` | `--color-ember-brown` | Màu nâu đậm dùng cho bóng của họa tiết vệt sơn và văn bản highlight nội tuyến trong testimonial | | Sunlit Cream | `#fef3c7` | `--color-sunlit-cream` | Lớp phủ ấm nhẹ phía sau tag, badge và highlight nội tuyến | | Forest Pulse | `#22c55e` | `--color-forest-pulse` | Màu xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |

# Kalstore® — Style Reference > Paper atelier on a quiet morning. The interface is warm off-white, sparsely set, and lets one mustard accent and oversized editorial type do the talking. **Theme:** light Kalstore is a paper atelier rendered as a quiet editorial spread: warm off-white canvas, sparse generous breathing room, large-scale lifestyle photography, and one warm mustard accent that interrupts the monochrome calm like a sticky note on a drafting table. Typography is the loudest element — a single editorial sans at multiple registers, from whisper-thin 19px body copy to 140px display treatments with aggressively tight tracking. Chromatic color appears almost entirely as editorial art (the ALESAL typographic block uses a palette of terracotta, sage, cobalt, and rust) rather than functional UI, keeping the interface itself disciplined. Components are small, flat, and almost unstyled — thin hairline borders, 8px corners, 6px button padding, barely-there shadows. The overall feel is less e-commerce and more independent magazine. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#faf9f7` | `--color-paper-white` | Page canvas — warm off-white that mimics uncoated paper stock; the default surface behind everything | | Ink | `#242424` | `--color-ink` | Primary text, icon strokes, and dominant border color. Slightly softened from pure black to sit comfortably on the warm canvas | | Felt Gray | `#d3d3d3` | `--color-felt-gray` | Hairline dividers, card borders, list separators — the structural neutral that holds the layout together without drawing attention | | Linen | `#edecea` | `--color-linen` | Subtle surface elevation for nav backgrounds and hover states; slightly cooler than Paper White to create depth without contrast |

# Scale — Style Reference > Holographic signal in a blackout room — a single iridescent paper plane against total darkness **Theme:** dark Scale operates in a near-total darkness — pure black canvas with white type and almost no chromatic noise. The signature is restraint: a custom display face at weight 300 instead of the expected 700, turning enterprise AI copy into something that reads like editorial typography. Hero imagery is the only place color lives, expressed as holographic iridescent gradients (pinks dissolving into blues into violet) on hard-edged paper-plane geometry. Components are flat and pill-shaped, with hairline borders and no shadows. The page breathes through vertical whitespace and centered stacks, not through cards or dense grids. There is one button shape (pill), one text style (white), one accent (iridescent gradient) — and the system is built around saying almost nothing visually and meaning it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page background, section backgrounds — the dominant canvas; everything else floats on this | | Bone | `#ffffff` | `--color-bone` | Primary headings, body text, nav items, icon strokes, button labels | | Ash | `#a1a1a1` | `--color-ash` | Muted secondary text, inactive nav, subdued labels, hairline borders on dark | | Frost | `#e5e5e5` | `--color-frost` | Icon strokes, subtle dividers, light foreground accents |

# Bareis + Nicolaus — Style Reference > White chalk on black slate. A typographic control panel and a full-bleed visual index share one strict monochrome stage, with pill-shaped outlines as the only punctuation. **Theme:** dark Bareis + Nicolaus operates as a monochrome editorial grid: pitch-black canvas, bone-white outlines, and a single typeface carrying the entire voice. The interface is a split workspace — a typographic control column on the left filters and indexes, a full-bleed visual index on the right showcases the work. Every interactive element is a pill: 120px radius, 1px white stroke, no fill, no shadow, no hover fill — the geometry does the work. Typography is the protagonist: 72px display at weight 400 with a 1.0 line-height gives headlines architectural presence without weight, while 24px body text reads as quiet annotation. The system refuses decoration — no gradients, no brand color, no elevation, no rounded cards — and that absence is the identity. Every element earns its pixel by being typographic, structural, or navigational. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page background, card surface, filled button fill — the flat black ground that all white typography and outlines sit on | | Bone | `#ffffff` | `--color-bone` | Primary text, pill button borders, link text, section dividers, card hover overlays — every outlined and typographic element | | Ash | `#a9a9a9` | `--color-ash` | Muted borders and secondary structural strokes where pure white would compete with primary controls |

# Authkit — Style Reference > blueprint on midnight glass **Theme:** dark AuthKit hoạt động trong ngôn ngữ blueprint midnight: canvas gần như đen, typography xanh lam-xám mát, và một màu tím iris điện duy nhất đánh dấu thứ duy nhất bạn có thể nhấn. Bề mặt là matte và phẳng — không có glossy gradient, không có drop shadow nặng — thay vào đó, một chòm sao các ánh sáng xanh mềm (rgba(186, 207, 247, 0.32)) và các đường viền inset 1px mảnh gợi ý một giao diện được vẽ bằng ánh sáng trên giấy tối. Typography được kiềm chế và tự tin: một geometric workhorse (Untitled Sans) xử lý mọi thứ từ caption 12px đến section title 24px, trong khi một display face rộng hơn (aeonikPro) đảm nhận hero và section headline. Hầu như tất cả màu sắc trang trí đều nằm trong bóng đổ, không phải trong phần fill — kết quả mang phong cách kỹ thuật, chính xác và phát sáng nhẹ nhàng thay vì sặc sỡ. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Midnight Ink | `#05060f` | `--color-midnight-ink` | Canvas trang và bề mặt chính — nền gần như đen mà mọi thứ khác được vẽ lên. Một chút sắc xanh mát giúp nó không cảm thấy đen tuyệt đối, tạo chất giấy blueprint | | Graphite Plate | `#2f343e` | `--color-graphite-plate` | Bề mặt card và panel được nâng lên — cao hơn canvas một bậc, dùng cho các UI mockup xem trước và form container. Matte, không bao giờ bóng | | Steel Border | `#3f4959` | `--color-steel-border` | Đường viền mảnh, divider, và đường cấu trúc mờ giữa các UI element | | Fog | `#81899b` | `--color-fog` | Helper text và secondary metadata được giảm nhấn mạnh, nên lùi lại phía sau nội dung chính |

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

# Visitors — Style Reference > frosted glass observatory at dawn — a periwinkle beacon rises over a white marble dashboard. **Theme:** light Visitors is a light, violet-accented analytics product that reads like a glass-walled observatory: bright white canvas, hairline borders, pill-shaped navigation, and one confident periwinkle action color that makes every interactive surface feel switched on. Typography stays in a single humanist sans (OpenRunde) with aggressively tightened tracking at every size, so headlines feel architectural rather than airy. Components are flat and compact — borders do the work that shadows usually would, corners are soft (8–24px), and gradient washes (blue-to-violet) appear only as atmospheric backgrounds behind floating product previews. Color is used sparingly and semantically: violet for primary action, green/yellow/pink/blue for data and icon variety, and near-black (#181925) for all meaningful text. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Periwinkle Beam | `linear-gradient(to right in oklab, rgb(44, 120, 252) 0%, rgb(145, 141, 246) 100%)` | `--color-periwinkle-beam` | Primary action background, active nav fills, brand icon strokes, decorative icon accents — the single chromatic action color across the system; Atmospheric section background transitioning from cobalt blue to periwinkle | | Iris Dusk | `#9580ff` | `--color-iris-dusk` | Secondary violet variant for hover states and secondary action surfaces | | Lavender Mist | `#dad9fc` | `--color-lavender-mist` | Soft tint for gentle background washes, subtle borders, and muted violet surfaces | | Midnight Ink | `#181925` | `--color-midnight-ink` | Primary text, heading color, dark surface fill, high-contrast borders — the near-black that carries the entire information hierarchy |

# Duties.xyz — Style Reference > Monochrome broadside manifesto — a cream-paper zine where the only ink is black and the only type that matters is shouting. **Theme:** light Duties.xyz operates as a monochrome editorial broadsheet for an Oslo design studio and venture partner. A warm cream canvas (#f1f0ee) carries massive condensed display type — AS Therma Bold Condensed at 96-180px with negative tracking — that dominates the viewport like protest typography shouting \"BRANDS AND WEBSITES FOR BRAVE COMPANIES\". The palette is deliberately limited to pure black, warm off-white, and a single dark charcoal; there is no accent color, no decoration, no color punctuation of any kind. All interface rhythm comes from typographic scale, generous breathing room, and tight 8px-radius cards holding large project photography in full-bleed grids. The micro-typography uses a custom monospace (PP Neue Montreal Mono) with stylistic sets enabled (ss04, ss07, ss08, dlig, case, zero) for labels, metadata, and nav — a technical editorial voice paired with the screaming display type. The result is confident, restrained, brutally simple, and unmistakably a design studio's portfolio. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#f1f0ee` | `--color-cream-paper` | Page canvas and large surface fills; warm off-white sets the editorial paper tone | | Pure Ink | `#000000` | `--color-pure-ink` | Primary text, nav links, icon strokes, footer metadata, logo marks — maximum contrast against cream | | Charcoal Press | `#252525` | `--color-charcoal-press` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color | | Bone Gray | `#dbdad9` | `--color-bone-gray` | Quiet divider tone, subtle background blocks, low-emphasis surfaces — barely visible, only there for separation |

# Telescope — Style Reference > Editorial pasteboard trên giấy kem. Một canvas bone-white ấm áp với ảnh tạp chí full-bleed, một điểm nhấn lime sáng duy nhất, và serif headlines trải dài quanh ảnh như một art director's spread. **Theme:** light Telescope mang phong cách tạp chí thời trang editorial in trên giấy kem ấm: một thế giới gần như đơn sắc với canvas bone-white, chữ gần đen ấm áp, và ảnh editorial full-bleed, chỉ được chấm phá bởi một điểm nhấn lime rực rỡ duy nhất — tín hiệu cho bề mặt tương tác duy nhất. UI được tước bỏ đến tận xương — không card, không panel, không decorative chrome — với một bottom bar cố định bằng mono caps làm toàn bộ nhiệm vụ navigation và ảnh trôi nổi tự do vào headline như thể được dàn trang trên pasteboard. Typography đảm nhận phần nặng nhất: một custom serif nhẹ nhàng ở cỡ lớn với negative tracking chặt chẽ thì thầm thay vì la hét, trong khi mono labels ở 12px là kết cấu typographic duy nhất ngoài hệ thống serif. Mọi thứ đều sắc nét ở góc 2px, spacing thoáng đãng, và màu lime green được phân bổ dè sẻn — một nút, không gì khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Paper | `#f4f3f0` | `--color-bone-paper` | Page canvas — màu off-white ấm áp gợi giấy in, không phải màn hình trắng. Mọi thứ đều nằm trên bề mặt này | | Ink | `#1a1915` | `--color-ink` | Text chính, body copy, heading, border, và hairline rules. Màu gần đen ấm áp, không bao giờ là #000 thuần, để độ tương phản với Bone Paper có cảm giác in ấn thay vì kỹ thuật số | | Ash | `#82868e` | `--color-ash` | Secondary text, meta labels, và subtle borders. Là điểm đối trọng mát mẻ với Ink ấm áp — dùng khi type cần lùi lại mà vẫn giữ legibility | | Pure White | `#ffffff` | `--color-pure-white` | Surface layer phía trên Bone Paper dành cho inline cards và bottom navigation bar. Hiếm khi dùng — hầu hết bề mặt đều nằm trên Bone |

# Surface — Style Reference > editorial gallery trên nền vải lanh màu xương — một từ duy nhất 230px neo giữ các bức ảnh rải rác trên nền trắng tinh khiết, mọi thứ còn lại chỉ là thì thầm của chữ đen. **Theme:** light Surface là một ấn phẩm editorial kỹ thuật số mang hình hài tạp chí in: canvas trắng xương (#f7f7f7) nơi hầu như mọi thứ đều là chữ đen, và bố cục tự thân đóng vai trò thương hiệu. Hệ thống thị giác mang tính triệt để trong sự kiềm chế — không màu nhấn, không border, không shadow, không gradient, không bo góc. Thay vào đó, cá tính đến từ scale chữ (display weight 230px) và từ những bức ảnh editorial được đặt có chủ đích, phá vỡ grid theo nhiều góc. Navigation được rút gọn thành monogram, wordmark và hamburger. Các khối nội dung thở với lề trái rộng và padding dọc thoáng đãng, đọc như một trang tạp chí hơn là một sản phẩm web. Một AI agent nên xem đây là 'design system của sự vắng mặt' — mỗi phần tử thêm vào phải chứng minh được vị trí của nó trên nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone | `#f7f7f7` | `--color-bone` | Canvas trang, bề mặt card, nền section — màu duy nhất không phải đen trong toàn bộ hệ thống | | Pressed Ink | `#000000` | `--color-pressed-ink` | Toàn bộ chữ, border, icon, trạng thái link, nav strokes, heading rules — toàn bộ giao diện giao tiếp bằng đen tuyền trên nền Bone | ## Tokens — Typography

# Relief — Style Reference > Bến cảng giấy kem dưới bầu trời xanh phẳng lặng **Theme:** light Relief sử dụng ngôn ngữ hàng hải ấm áp: một canvas màu kem (#f9f7f0) thay thế cho màu trắng gắt mặc định, và một màu xanh da trời rực rỡ duy nhất (#2e96ff) đảm nhiệm mọi tương tác. Kiến trúc thông tin đảo ngược mô hình card sáng trên nền trắng thông thường — các feature card và testimonial card màu xanh navy đậm (#134f26f) nằm trên nền kem như phao trên cát, tạo nên những khối thị giác táo bạo. Font chữ headline Gilroy chạy với tracking -0.018em đồng nhất ở mọi kích cỡ, mang lại vẻ chắc chắn, bo tròn và tự tin cho văn bản. Các nút bấm tạo trọng lượng không phải bằng gradient hay glow, mà bằng một drop-shadow xanh đặc 7px dày, khiến phần tô màu xanh da trời như thể đang nhấc bổng lên khỏi trang giấy. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Warm Cream | `#f9f7f0` | `--color-warm-cream` | Canvas trang — toàn bộ site nằm trên nền trắng ngà này, không bao giờ là #ffffff thuần. Loại bỏ vẻ vô cảm của SaaS; mang cảm giác gần gũi, như giấy | | Snow | `#ffffff` | `--color-snow` | Bề mặt card nâng cao, trường nhập liệu và các phần tử có viền sáng | | Ink | `#333333` | `--color-ink` | Văn bản UI và body chính — màu trung tính chủ đạo cho nội dung dễ đọc trên card, đoạn văn và nhãn | | Charcoal | `#212121` | `--color-charcoal` | Các trường hợp văn bản nặng hơn, copy nhấn mạnh |

# Applied Labs — Style Reference > Sunlit cream paper with cobalt punctuation and floating conversation cards **Theme:** light Applied Labs reads like a warm, sunlit editorial spread: cream paper backgrounds, near-black ink type, and a single vivid cobalt blue used as quiet punctuation rather than a shout. The visual signature is the contrast between photographic warmth (real people in real light, not illustrations or 3D renders) and restrained, typographically-driven UI chrome. Conversation fragments — translucent chat bubbles, message exchanges, agent replies — float as a design motif across hero and feature sections, making the product's nature legible without explaining it. Dark filled buttons (espresso-black) are the only hard shapes against the otherwise soft, hairline-divided surface stack; the entire system feels like reading a thoughtful magazine rather than scrolling a product page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Page canvas, base card surface, nav background | | Cream | `#f7f7f4` | `--color-cream` | Warm off-white section background, soft card fill — the secondary surface layer that gives the page its paper-like warmth | | Fog | `#f5f5f5` | `--color-fog` | Elevated card surfaces and subtle section bands | | Ash | `#e4e4e7` | `--color-ash` | Hairline borders, dividers, input underlines — the structural skeleton of the layout |

# Silencio — Style Reference > white room with floating artifacts. Một phòng trưng bày ấm áp như giấy, nơi mỗi phần tử đều xứng đáng với khoảng không âm bản, và sự im lặng là một chất liệu thiết kế có chủ đích. **Theme:** light Silencio vận hành như một sự im lặng thị giác — một phòng trưng bày đơn sắc nơi các vật thể trôi nổi trên nền giấy trắng ấm áp và typography gần như đảm nhận toàn bộ vai trò giao tiếp. Hệ thống loại bỏ mọi thứ không cần thiết: không điểm nhấn màu sắc, không đổ bóng, không hình khối trang trí; thay vào đó, nó dựa vào độ tương phản typography cực đoan (display 141px thì thầm bên cạnh metadata 9px) và một màu xám ấm duy nhất (#dbdad9) như là điểm khác biệt duy nhất so với đen thuần trên trắng. Các bề mặt phẳng như giấy, được phân cách bằng hairline rules và bán kính nhỏ (7.2px) thay vì độ cao. Brand voice mang phong cách như chữ viết trên tường bảo tàng: canh giữa, ngắn gọn, hơi nghiêng bởi sự im lặng, với các nhãn monospaced (PT Mono, 11px) được dùng như chữ ký lặng lẽ bên cạnh một custom Haas grotesque. Các component có cảm giác giống như trang catalog in ấn hơn là web UI — buttons có dạng full pill (129.6px), cards có một góc bo tròn duy nhất, và toàn bộ bố cục thở với sự tự tin của một căn phòng trống không. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, iconography, hairline rules, table borders — phần tử có độ tương phản cao duy nhất trên trang | | Paper Warm Gray | `#dbdad9` | `--color-paper-warm-gray` | Card surfaces, soft fills, điểm khác biệt màu sắc duy nhất so với trắng thuần, điểm gốc gradient nhẹ nhàng | | Graphite Border | `#808080` | `--color-graphite-border` | Đường chia bảng và secondary rule lines tinh tế — dùng khi #000000 có vẻ quá nặng | | Bleach White | `#ffffff` | `--color-bleach-white` | Màu hỗ trợ cho các điểm nhấn trang trí nhỏ khi bảng màu chính cần độ tương phản. |