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

# Flying Papers — Style Reference > Saturday morning cartoon confessional **Theme:** light Flying Papers hoạt động như một bộ phim hoạt hình sáng thứ Bảy in trên giấy riso dày: một sân khấu tím nhạt phẳng, một dàn nhân vật nhỏ với màu sắc bão hòa rực rỡ, và typography cỡ lớn đến mức nuốt chửng viewport. Giọng thương hiệu to, táo bạo và không hề hối lỗi — nó không xin sự chú ý, nó cướp lấy. Mỗi màn hình phải giống như một poster đơn lẻ mạnh mẽ: một display headline chủ đạo, một mascot illustration hỗ trợ, một inline action, và khoảng thở rộng rãi. Borders đảm nhận vai trò chính thay vì shadows; màu sắc được dùng như sơn vẽ, không phải dữ liệu. Bề mặt luôn phẳng, góc cạnh sắc nét ở 6px, và thứ duy nhất mềm mại trong hệ thống là pill 100px trên gate button. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Dusk Violet | `#8584bd` | `--color-dusk-violet` | Primary canvas và hero background — sân khấu nơi mọi màu sắc khác biểu diễn | | Hi-Vis Yellow | `#f4ed36` | `--color-hi-vis-yellow` | Yellow accent cho outlined action borders, linked labels, và lightweight interactive emphasis. Không nâng cấp nó thành primary CTA color | | Buttery Yellow | `#f9cc73` | `--color-buttery-yellow` | Secondary display text và border mềm hơn — phiên bản dịu nhẹ hơn của Hi-Vis khi Hi-Vis quá mạnh | | Lilac Shadow | `#61609a` | `--color-lilac-shadow` | Card và block backgrounds — một violet đậm hơn cho bề mặt lồng trên sân khấu violet |

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

# Orderful — Style Reference > industrial command deck — a logistics dispatcher's printed control sheet in black ink and surgical vermillion, every page restrained enough to let a single CTA shout. **Theme:** light Orderful reads as an industrial command deck: a near-pure achromatic surface where black-and-white typography and 8px radii meet a single surgical vermillion accent that punctuates actions rather than decorates. The typographic voice belongs to telegraf, a custom grotesk spanning weights 100–700 and sizes 12–72px, tightened with −0.025em to −0.03em tracking on display and expanded 0.025em on uppercase eyebrows, with modernGothic at 14px/300 handling a specific small-text register via the ss02 alternate. Geometry is disciplined — one universal 8px radius, one two-layer shadow stack used sparingly, and a base 8px spacing scale that breathes at 40–64px section gaps. The result is a calm, information-rich B2B surface that treats color as a scarce commodity: most screens stay monochrome, letting the single red-orange mark function as the only signal that something is actionable. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Vermillion Signal | `linear-gradient(94deg, rgb(255, 2, 1) -33.85%, rgb(255, 120, 2) -1.54%, rgb(255, 2, 1) 73.55%)` | `--color-vermillion-signal` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | | Ink Black | `#000000` | `--color-ink-black` | Hairline borders, logo marks, high-contrast icon strokes, strong body emphasis | | Carbon | `#1f1f1f` | `--color-carbon` | Dark card backgrounds, inverted feature panels, footer surface | | Slate 900 | `#101828` | `--color-slate-900` | Display and heading text, hero headlines — the dominant typographic color |

# HyperAktiv — Style Reference > Swiss editorial broadsheet. Black display type 90px trên nền trắng, với electric blue là điểm nhấn màu duy nhất. **Theme:** light HyperAktiv hoạt động như một poster editorial kiểu Thụy Sĩ: nền trắng tinh, display type đen cỡ lớn, và một mảng electric blue (#0000ff) chỉ xuất hiện trên action và footer. Headline chiếm ưu thế ở kích thước 72–90px với line-height được nén xuống 0.89–1.0, thu gọn trang thành một cột dọc các khối typographic đồ sộ. Layout luân phiên giữa ảnh full-bleed và split 50/50 bất đối xứng, xử lý ảnh nội thất như tư liệu thô thay vì tác phẩm được dàn dựng. Mọi thứ đều góc vuông, ngoại trừ một border-radius 20px duy nhất trên button, và bóng đổ duy nhất là bóng có sẵn trong ảnh — bản thân interface vẫn phẳng, nhị phân và đồ họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Pure White | `#ffffff` | `--color-pure-white` | Nền trang, bề mặt card, chữ trên nền tối/nền action | | Absolute Black | `#000000` | `--color-absolute-black` | Body text, heading, icon strokes, border hairline, image overlays | | Mid Graphite | `#333333` | `--color-mid-graphite` | Chữ trong input, nội dung phụ | | Light Silver | `#cccccc` | `--color-light-silver` | Border input, đường phân cách form nhẹ |

# Recess — Style Reference > hoàng hôn pastel trên bể bơi **Theme:** mixed Recess sống trong một giấc mơ giữa ban ngày với bầu trời pastel: những canvas periwinkle mềm mại, ánh sáng chân trời màu hồng đào, và các hình mây lơ lửng tạo nên bầu không khí tĩnh lặng có chủ đích thay vì thương mại. Thương hiệu thể hiện qua một font sans-serif hình học đầy tự tin (Sharp Grotesk) kết hợp với logo script lockup — sự tương phản giữa chữ có cấu trúc và nét vẽ tay định hình nên cá tính. Màu sắc là tâm trạng, không phải trang trí: deep navy ink mang toàn bộ chữ, một màu xanh dương rực rỡ duy nhất nhấn mạnh, và phần còn lại của bảng màu là oải hương nhạt, kem, và san hô — tất cả gợi cảm giác như bên trong một buổi hoàng hôn. Các component có độ cao thấp và bo tròn nhẹ nhàng — đường viền và fill mềm làm nhiệm vụ, không phải shadow. Layout là centered, rộng rãi, và nhiều khoảng thở, với một marquee banner ngang ở trên cùng và nội dung luôn có cảm giác như một trang tạp chí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Twilight Navy | `#25385b` | `--color-twilight-navy` | Primary text, headings, body copy, links, icons — màu mực cấu trúc mang toàn bộ giọng nói | | Periwinkle Sky | `#a2b0ff` | `--color-periwinkle-sky` | Nền section chủ đạo, accent mềm, lớp phủ không khí — nền signature tạo nên bản sắc mơ màng của Recess | | Dusk Indigo | `#0a0a3a` | `--color-dusk-indigo` | Nền footer, bề mặt tối tương phản cao, fill accent đậm | | Cobalt Pop | `#3252f4` | `--color-cobalt-pop` | Accent rực rỡ hiếm hoi cho emphasis, active states, và heading nổi bật — dùng tiết kiệm để tạo một nhịp điện duy nhất giữa bảng màu trầm |

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

# Balsa — Style Reference > engineering notebook on white drafting paper **Theme:** light Balsa's design language is an engineering notebook on white drafting paper: an almost exclusively achromatic canvas interrupted only by amber highlighter-pen annotations and one deep purple accent. The hero voice is Van Condensed Pro Bold set uppercase at extreme negative tracking (-0.047em at 48px) — industrial, compressed, shouting in a whisper. Inter handles every secondary voice at compact sizes (11–18px), with the entire interface reading as product-first: a large embedded product screenshot is the real hero, flanked by floating yellow callout cards that explain the screenshot like margin notes. Black filled buttons with 6px radius and 12px-radius flat white cards with hairline borders carry the entire component vocabulary. Shadows are barely there (0.5px black at 10% or a single 1px line at 5%), the palette does almost no decorative work, and the layout breathes with generous 60–80px section gaps so each annotation card and product crop can do its job. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, filled action buttons, icons — the only assertive color in the system carries all interactive and typographic weight | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, product screenshot backgrounds, button labels on filled buttons | | Drafting Gray | `#f7f7f7` | `--color-drafting-gray` | Page canvas, the base surface every component sits on; sets the off-white tone that makes cards read as elevated without shadow | | Graphite | `#313131` | `--color-graphite` | Secondary headings and body emphasis, slightly softer than pure black for hierarchical depth |

# Bumble — Style Reference > Sunlit honey editorial **Theme:** light Bumble vận hành trên hệ thống monochrome cộng thêm một tông ấm: near-black ink (#202020) đảm nhận mọi chữ, mọi đường viền, mọi bề mặt tương tác, và một màu vàng mật ong rực rỡ (#ffdb5b) tràn ngập hero canvas và feature canvas như tín hiệu cảm xúc của thương hiệu. Hình học mềm mại và tự tin — radii 16-24px trên card và button, pill-shaped badges ở 1000px, shadow nhẹ đến mức khó thấy ở độ mờ 12% — nên không có gì cảm giác sắc cạnh hay hung hăng. BumbleSans nói với letter-spacing hơi rộng (0.007-0.02em), điều bất thường với một geometric sans và mang đến cho cả những dòng UI nhỏ nhất một nhịp điệu ấm áp, thong thả. Nội dung được sắp xếp trong các card có padding rộng rãi 24-40px trên nền trắng, với các dải vàng full-bleed đóng vai trò dấu câu thị giác giữa các section. Kết quả mang phong cách tạp chí lifestyle ngập nắng: ảnh con người làm phần việc nặng nhọc, màu thương hiệu không bao giờ là tiếng ồn trang trí, và UI lùi lại để những con người trong ảnh dẫn dắt. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Bumble Honey | `#ffdb5b` | `--color-bumble-honey` | Yellow state accent cho badge, bề mặt xác thực, và label trạng thái ngắn. | | Pollen | `#fff386` | `--color-pollen` | Bề mặt accent vàng nhạt hơn cho secondary card frame và biến thể tông màu so với Honey | | Bumble Ink | `#202020` | `--color-bumble-ink` | Primary text, filled action buttons, tất cả border và divider — near-black cấu trúc chịu trách nhiệm cho hơn 2.100 instance UI và là de facto primary action color | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, button text trên nền tối, body text inverse |

# 2.AG — Style Reference > Hiệu thuốc lâm sàng dưới ánh sáng teal — một thương hiệu wellness có tính đo lường, kê đơn, xử lý ảnh sản phẩm như một tiêu bản mẫu. **Theme:** light 2.AG mang phong cách hiệu thuốc lâm sàng kết hợp với thương hiệu khoa học hiện đại: nền gần trắng, bề mặt cấu trúc teal đậm, và một điểm nhấn mint tươi sáng kích hoạt các CTA và dữ liệu nổi bật. Inter Tight được thắt chặt để tạo giọng điệu dược phẩm — tracking hơi âm ở các kích thước display, tracking rộng rãi trên small caps cho danh sách thành phần và badge. Các component thiên về bo tròn lớn dạng pill (30–50px) cho button và bo góc mềm 12–20px trên card, báo hiệu một thương hiệu chính xác về liều lượng nhưng ấm áp trên cơ thể. Các section teal đậm (header Rapid Relief Cream, stat block) neo trang web vào thẩm quyền lâm sàng, trong khi dấu câu xanh lá tươi sáng tạo điểm nhấn năng lượng, gần giống như kệ thuốc. Layout chia đôi, thoáng rộng, tập trung vào sản phẩm: hero ghép một nửa editorial tối với một nửa sản phẩm sáng, các section xen kẽ trắng và teal, reviews/stats tạo thành lưới card dày đặc nhưng thoáng khí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|-------| | Deep Teal | `#244d54` | `--color-deep-teal` | Màu cấu trúc chính — nền hero tối, bề mặt stat block, icon strokes, navigation wordmark, viền secondary button. Một teal gần xám đọc như mực hơn là đại dương, giúp định vị thương hiệu mà không trở nên lâm sàng-lạnh lẽo | | Mint Pulse | `#2ecea0` | `--color-mint-pulse` | Màu hành động chính — nền CTA dạng filled, badge fills, active dots, announcement bar, review star highlights. Xanh lá tươi sáng pha cyan, khiến mọi phần tử tương tác trông như được bật lên và mang tính sinh học | | Soft Teal | `#6dddbd` | `--color-soft-teal` | Teal text accent cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp lên màu CTA chính | | Carbon | `#000000` | `--color-carbon` | Body text, hairline borders, icon strokes, input borders. Màu trung tính cấu trúc chiếm ưu thế — hầu hết viền trên site là đen tuyền, tạo khung hình editorial sắc nét cho UI |

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

# Opennote — Style Reference > cuốn sổ da ấm áp trên trang giấy ngập nắng — giao diện mang cảm giác đóng thủ công, không phải gia công máy **Theme:** light Opennote nói bằng giọng của một cuốn sổ tay được yêu thích: giấy kem ấm, serif headlines mang cảm giác sắp chữ thủ công, và CTA màu nâu đen đọc như bìa da chứ không phải nút SaaS. Bảng màu gần như hoàn toàn achromatic — canvas màu ngà, mực than, đường kẻ graphite mảnh — với bốn điểm nhấn màu đậm (nâu đen, mực tím, rừng xanh, đỏ sẫm) được dùng tiết kiệm như ghi chú lề, không bao giờ làm màu nền. Chrome tối giản: border-radius 10px, một tông viền duy nhất, gần như không có shadow. Whitespace dẫn dắt bố cục, được ngắt quãng bằng các hình minh họa nét vẽ tay trôi nổi như những hình vẽ nguệch ngoạc bên lề. Kết quả là một sản phẩm trông như được thiết kế trong một studio với ánh sáng tự nhiên đẹp, chứ không phải một dashboard được tối ưu trong một sprint. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ivory Page | `#fffdf8` | `--color-ivory-page` | Canvas chính, nền trang, bề mặt card. Màu trắng ngà ấm đọc như giấy, không phải màn hình | | Ink Charcoal | `#0a0a0a` | `--color-ink-charcoal` | Text chính, nét icon, body copy. Gần đen nhưng pha chút ấm khi đặt trên canvas màu ngà | | Pressed Black | `#000000` | `--color-pressed-black` | Màu tô illustration, SVG marks, chi tiết mực mảnh. Đen tuyền dành riêng cho lớp đồ họa vẽ tay | | Graphite Rule | `#e5e5e5` | `--color-graphite-rule` | Viền mảnh, divider, đường viền card, khung ảnh. Màu trung tính cấu trúc chủ đạo — mọi đường mảnh trên trang đều được vẽ bằng màu này |

# NGLORA — Style Reference > NGLORA — Formulary của Apothecary. Một không gian được tổ chức tỉ mỉ, nơi typography và ảnh sản phẩm được xử lý với độ chính xác khoa học. **Theme:** light Thiết kế gợi lên một formulary apothecary học thuật, nơi mọi yếu tố đều được trình bày với độ chính xác tỉ mỉ. Nó vận hành trên một bảng màu hạn chế rõ rệt gồm kem ấm và than chì, tạo ra một môi trường tương phản cao, ưu tiên chữ. Bố cục kiến trúc cứng nhắc với góc 0px sắc nét chiếm ưu thế, củng cố cảm giác trật tự và chất lượng lâm sàng. Điểm nhấn của hệ thống là sự căng thẳng typographic giữa serif nhân văn 'Zapf-Humanist' cho headline biểu cảm và sans-serif trung tính 'SuisseIntl' cho toàn bộ văn bản chức năng, mang lại vẻ cổ điển cho giao diện kỹ thuật số hiện đại. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#fffef2` | `--color-parchment` | Nền trang chính, bề mặt sáng. | | Charcoal | `#333333` | `--color-charcoal` | Văn bản chính, icon UI, nút chính, đường viền. | | Ink Black | `#000000` | `--color-ink-black` | Văn bản hero section, yếu tố văn bản có độ nhấn mạnh cao. | | Carbon | `#252525` | `--color-carbon` | Nền footer, bề mặt tối phụ. |

# Waka Waka — Style Reference > poster bảo tàng trên nền giấy xương và mực — kiểu chữ grotesk đen hoành tráng in trên giấy trắng ấm, mọi thứ khác đều lùi về phía sau **Theme:** light Waka Waka xử lý website của mình như một catalog triển lãm in ấn: nền giấy màu xương ấm áp, một màu mực gần đen, và một typeface grotesk tùy chỉnh được triển khai ở cả kích thước footnote 10px và tỷ lệ hoành tráng 560px. Hệ thống về cơ bản là monoline và đơn sắc — không có điểm nhấn, không có sắc thái phụ, không gradient, và hầu như không có chrome trang trí. Phân cấp thị giác được tạo ra hoàn toàn thông qua trọng lượng typographic, tỷ lệ và khoảng trắng, với chính tên thương hiệu đóng vai trò là công cụ đồ họa chủ đạo trên mọi màn hình. Các component đều phẳng, không viền hoặc viền mảnh (hairline), và mang cảm giác được tuyển chọn hơn là tương tác — trang đọc như một bức tường gallery trưng bày các vật thể và chữ cái khổng lồ, không phải một giao diện phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Bone Paper | `#edeae4` | `--color-bone-paper` | Nền trang, mọi bề mặt canvas — trắng ấm mang cảm giác giấy chưa tẩy trắng thay vì trắng kỹ thuật số | | Stone Gray | `#c9c7c4` | `--color-stone-gray` | Bề mặt phụ và neutral ngữ cảnh mờ — xuất hiện trong các cặp tương phản như một lớp sâu hơn bên dưới canvas | | Ink Black | `#28282a` | `--color-ink-black` | Văn bản chính, mọi đường viền, hairline rules, nét icon, và là neo màu sắc duy nhất trong hệ thống — gần đen nhưng pha chút ấm để nằm thoải mái trên nền xương thay vì rung động |

# Lattice — Style Reference > Botanical field journal trên nền giấy ấm — một canvas kem nhẹ nhàng, nơi mực rừng tối làm nhiệm vụ kể chuyện và các thẻ mẫu vật pastel mang đến màu sắc. **Theme:** light Lattice mang phong cách một cuốn nhật ký thực địa thực vật học được thể hiện dưới dạng sản phẩm: canvas giấy ấm (#f7f6f2) làm nền cho toàn bộ site, với một màu mực rừng gần như đen (#001f1f) đảm nhận vai trò chính — vừa là text chính vừa là bề mặt action chính. Điểm đặc trưng là hệ thống các thẻ tính năng pastel — mint, lime, lavender, buttercream — mỗi thẻ mã hóa màu cho một module sản phẩm như một khay mẫu vật, kết hợp với các nút filled và outlined tối cùng màu xanh rừng. Typography là một geometric sans duy nhất (Matter) ở kích thước gọn nhẹ, với tracking dày trên display copy cỡ lớn và tracking rộng trên các label uppercase nhỏ. Mọi thứ đều nằm trên các góc bo tròn rộng rãi (14–29px), shadow mềm 1px pha màu, và không có chi tiết trang trí thừa — màu sắc xuất hiện như dấu câu chức năng, không phải vật trang trí. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Parchment | `#f7f6f2` | `--color-parchment` | Nền trang — canvas trắng ngà ấm áp mang lại cảm giác như giấy, không lâm sàng. Không bao giờ dùng màu trắng tinh khiết cho nền body | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, product UI mockups, và container media nhúng — màu trắng tinh khiết nổi lên trên nền parchment để tạo độ cao tinh tế mà không cần shadow | | Forest Ink | `#001f1f` | `--color-forest-ink` | Trạng thái form trung tính, text badge, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp nó thành màu CTA chính | | Lichen Gray | `#5c7070` | `--color-lichen-gray` | Text phụ và border có độ nhấn trung bình. Nằm giữa Forest Ink và các màu xám nhạt hơn — dùng cho mô tả body, supporting copy, và divider tinh tế |

# GRAZA — Style Reference > Quầy deli Địa Trung Hải ngập nắng, được xếp đặt bằng tay **Theme:** light Graza mang chất của một quầy deli Địa Trung Hải tràn ngập ánh nắng — bề mặt kem ấm áp, mực olive đậm đọc như gỗ lâu năm, và những mảng xanh chanh bất chợt như rau củ dưới ánh đèn chợ. Typography mang trọng lượng editorial đầy tự tin: một typewriter serif đảm nhận phần hội thoại trong khi Garamond condensed lướt vào cho những khoảnh khắc display cỡ lớn. Màu sắc hoạt động như một gian hàng rau củ — canvas luôn ấm và trung tính, và những mảng xanh tươi xuất hiện dưới dạng section band full-bleed hoặc những điểm nhấn chức năng nhỏ, không bao giờ là chrome chồng chrome. Các component được giữ tối giản và đặt bằng tay: pill buttons, hairline borders, image radii 20px nhẹ nhàng, và hầu như không có shadow. Nhịp điệu luân phiên giữa hero plate ảnh full-bleed, editorial spread chỉ text trên nền màu đồng nhất, và bố cục text + ảnh chia đôi. Không có gì bị khóa cứng trong grid; whitespace và asymmetry làm tất cả công việc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Olive Ink | `#3c422e` | `--color-olive-ink` | Text chính, nav links, borders, button outlines, icon strokes — gần như đen nhưng pha ánh olive, giúp trang không bị cảm giác vô trùng | | Linen Cream | `#fff4ec` | `--color-linen-cream` | Bề mặt nền phụ nhẹ cho background tinh tế và phân cách section. Không nâng lên làm màu CTA chính | | Buttery Peach | `#f6e6d9` | `--color-buttery-peach` | Bề mặt phụ và band tương phản ấm — đậm hơn Linen Cream một chút, dùng để ngắt các trang dài và lồng card | | Squeeze Bottle Green | `#9eef80` | `--color-squeeze-bottle-green` | Section band full-bleed, text treatment được tô sáng — xanh tươi như rau củ trên kệ, mang cả trang |

# Acceptandproceed — Style Reference > editorial broadsheet trên nền giấy ấm **Theme:** light Accept & Proceed xem trình duyệt như một tờ broadsheet biên tập: một sans-serif một weight ở chín kích cỡ, nền canvas kem ấm, và một bảng màu gần như hoàn toàn không màu — để nhiếp ảnh và layout đảm nhận vai trò biểu cảm. Hệ thống phân cấp được xây dựng hoàn toàn từ kích thước — weight 400 được dùng cho mọi thứ, từ caption 8px đến display 72px, vì vậy độ tương phản đến từ bước nhảy kích thước, không phải độ đậm. Bề mặt mang tông giấy ấm: #f9f7f3 là trang giấy, #ecebe7 là nền button, và chrome cấu trúc duy nhất là đường viền đen 1px mảnh. Các component được thiết kế một cách nhẹ nhàng có chủ đích — pill buttons với border-radius 100px, badge nhỏ với góc 3.4px, card radius 8px — để hình ảnh dự án và nội dung editorial dài mang tải trọng của trang. Hệ thống mang cảm giác như đang lật giở một cuốn niên giám thiết kế được typeset kỹ lưỡng, chứ không phải lướt một dashboard SaaS. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ink | `#000000` | `--color-ink` | Text chính, đường viền mảnh, icon strokes, badge outlines, card outlines — màu đường kẻ cấu trúc duy nhất trong hệ thống | | Paper Warm | `#f9f7f3` | `--color-paper-warm` | Canvas trang, bề mặt card, nền body — lớp nền kem ấm cho mọi nội dung | | Bone | `#ecebe7` | `--color-bone` | Bề mặt nổi, nền pill button, nền input, nền link — ấm hơn/tối hơn canvas một bước để tạo chiều sâu xúc giác mà không cần shadow | | White | `#ffffff` | `--color-white` | Màu headline trên overlay hero tối, highlight wash trên card, accent bề mặt đảo ngược |

# Microsoft — Style Reference > Corporate blue retail catalog — tưởng tượng logo 4 ô vuông trên nền sàn trưng bày trắng với một điểm nhấn xanh duy nhất dẫn dắt mọi tương tác. **Theme:** light Microsoft.com là một bề mặt store-and-marketing doanh nghiệp: một canvas gần trắng được điểm xuyết bởi một màu xanh doanh nghiệp sống động duy nhất, với các product card nổi trên độ cao nhẹ (subtle elevation) và hero banner một màu. Segoe UI vận hành toàn bộ hệ thống — một humanist grotesque mang phong cách tiện dụng và tự tin, không mang tính editorial. Nhịp điệu thị giác tuân theo grid: hàng sản phẩm 4 cột, các dải max-width căn giữa, và các hero section xen kẽ giữa ảnh chụp lifestyle pha xanh và card overlay trắng tinh. Các component cảm giác nhẹ, phẳng và chức năng — radii tối thiểu, border mảnh, một shadow stack duy nhất, không có decorative gradient — để ảnh sản phẩm đảm nhận phần nặng về thị giác, trong khi accent xanh đánh dấu mọi hành động. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Microsoft Blue | `#0067b8` | `--color-microsoft-blue` | Primary action background, link text, navigation accents, icon strokes — thẩm quyền màu sắc duy nhất trong hệ thống, dùng cho mọi CTA dạng filled và interactive highlights | | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, button text trên nền xanh, surface elevation | | Mist Gray | `#f2f2f2` | `--color-mist-gray` | Footer background, subtle surface tone, page canvas bên dưới card | | Carbon Black | `#000000` | `--color-carbon-black` | Primary text, card borders, hairline dividers — màu typographic và cấu trúc chủ đạo |

# Eduardo del Fraile — Style Reference > Tủ kính gallery đen — căn phòng tối nơi một vật thể duy nhất phát sáng bằng chữ trắng **Theme:** dark Eduardo del Fraile là một portfolio được xây dựng trên sự tối giản triệt để: một khoảng đen thuần khiết, nơi một custom grotesk duy nhất và chữ trắng tạo nên toàn bộ giao diện. UI gần như biến mất hoàn toàn, để các 3D render lơ lửng trong không gian âm như những vật thể dưới ánh đèn bảo tàng. Mọi quyết định typographic, sự gần như vắng bóng của màu sắc, mọi bề mặt phẳng không bóng đổ đều phục vụ cùng một mục đích — làm cho canvas trở nên vô tận và không trọng lượng, rồi đặt một vật thể vào bên trong. Các component ưu tiên chữ và không có border; hệ thống phân cấp đến từ sự thay đổi weight trong Akzidenz Grotesk, không phải từ fill, elevation hay accent color. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Void | `#000000` | `--color-void` | Nền trang, full-bleed canvas cho mọi nội dung | | Bone White | `#ffffff` | `--color-bone-white` | Toàn bộ chữ, navigation, hướng dẫn footer, và đường nét UI mảnh | | Ash Gray | `#888888` | `--color-ash-gray` | Chữ phụ hoặc mờ, label giảm chú ý, gợi ý không hoạt động |

# VSCO® — Style Reference > Monochrome gallery wall — a black-and-white photo exhibition where a single warm spotlight makes the next action glow. **Theme:** mixed VSCO's visual system reads as a monochrome photography gallery: a near-pure black-and-white canvas where a single warm amber accent punctuates action. Display type is narrow, geometric, and enormous — hero headlines push 89-98px, commanding attention through scale and tight tracking rather than through color or ornament. The palette stays disciplined: white sections frame black product bands, and full-bleed photography carries emotional weight that decoration never tries to. Buttons are pill-shaped and unflinching — black fills for default actions, amber for the single moment of warmth. The design is deliberately flat: no shadows, no gradients, no skeuomorphic depth. Elevation comes from surface contrast (white → black bands) and image bleed, not from layered depth effects. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Photo Black | `#000000` | `--color-photo-black` | Body text, filled buttons, dark section backgrounds, nav text, borders, icon strokes — the dominant structural color across all surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, hero background, footer background, text on dark surfaces, nav fill — the primary light surface | | Fog Gray | `#f2f2f2` | `--color-fog-gray` | Subtle alternate section backgrounds, hairline washes — barely-there surface differentiation | | Graphite | `#737373` | `--color-graphite` | Secondary text, footer link text, muted labels — the first step down from body black |

# SuperHi Basic Income — Style Reference > Cột tím đậm bên cạnh khung trắng rộng **Theme:** light SuperHi Basic Income là một hệ thống editorial hai màu: một cột tím điện cố định neo bên trái, và một khung trắng rộng với typography thoáng đãng cuộn bên phải. Bảng màu cực kỳ nhị phân — `#2727e6` và `#ffffff` — không có bóng đổ, gradient hay bề mặt phụ nào làm loãng thông điệp. Typography đảm nhận toàn bộ cá tính: Basis (một geometric sans) xử lý mọi vai trò chức năng, DDC (một display face nhân văn hơn) chỉ xuất hiện ở nơi cần chất riêng, và line height thoáng đãng (1.46–1.67 cho body text). Các component phẳng và được định hình bằng bo góc — pill tags với radius 50px, button bo tròn nhẹ 16px, một minh họa địa cầu chấm tròn là đồ họa duy nhất. Tinh thần là sự tự tin của poster chiến dịch: một màu nổi bật, không trang trí, và text làm tất cả công việc nặng nhọc. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Electric Iris | `#2727e6` | `--color-electric-iris` | Điểm nhấn tím cho viền action dạng outline, label có link, và nhấn mạnh tương tác nhẹ. Không nâng lên thành màu CTA chính | | Paper White | `#ffffff` | `--color-paper-white` | Canvas nội dung bên phải, bề mặt card và elevated, text sidebar và minh họa trên panel tím | ## Tokens — Typography

# Raus — Style Reference > Warm cabin journal on cream paper — every page a postcard from the woods. **Theme:** light Raus is an editorial cabin-booking platform rendered as a warm, hand-printed travel journal: cream paper backgrounds, generous generous breathing room, and photography that sits beside text rather than beneath it. The brand uses a deep forest green as a calm, non-shouting identity color — present in the wordmark and key links but never screaming — while a bright marigold yellow search bar acts as the single visual exclamation point on each page, anchoring the booking flow. Typography does the heavy lifting: a single neo-grotesque face set at weight 300 with tight negative tracking creates an airy, almost whispered voice that contrasts with the confident, rounded geometry of the components. Surfaces are warm and matte, corners are generously rounded (20px is the default, 40px for hero cards), and shadows are absent — depth comes from layering cream on cream, not elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal | `#23212c` | `--color-charcoal` | Body text, headings, dark surfaces, icon strokes, hairline borders. Anchors the entire system — almost-black but slightly warm, never pure black | | Paper | `#f7f0e1` | `--color-paper` | Primary page background and card canvas — warm cream that gives the entire site its printed, hand-made feel. Not white, not beige; paper | | Snow | `#ffffff` | `--color-snow` | Search bar text, button labels on dark fills, image overlays, and any surface that needs to sit forward of the cream canvas | | Pine | `#006434` | `--color-pine` | Brand wordmark, primary headings on hero, link text, and the only chromatic authority — deep forest green used sparingly to mark identity, never decoration |

# Neon — Style Reference > Server Room After Dark. A deep black environment where data and interactions are the only sources of light. **Theme:** dark The design feels like a high-end server room after dark — a pure black void where information glows. A strict monochrome palette of pure black (#000000) and white (#ffffff) creates maximum contrast, ensuring text and UI are starkly legible. All visual energy comes from a single, electric green (#34d59a) that mimics terminal output and data visualizations, used exclusively for accents and decorative, code-like background graphics. The system achieves depth not with shadows but with subtle, layered near-black surfaces. A unique tension exists between the pill-shaped buttons and the sharp, 4px corners of all other UI containers. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Neon Glow | `#34d59a` | `--color-neon-glow` | Key brand accent, active state indicators, data visualizations — injects a vibrant, code-like energy. | | Neon Muted | `#285d49` | `--color-neon-muted` | Subtle background tones in visualizations, less prominent brand elements. | | Scanline Fade | `linear-gradient(90deg, rgba(57, 165, 125, 0.6) 50%, rgba(0, 0, 0, 0) 50%)` | `--color-scanline-fade` | Special effect for highlighting code or UI elements, mimicking a terminal scanline. | | System Warning | `#ff3621` | `--color-system-warning` | Used sparingly for icons or highlights requiring urgent attention. |

# Handhold — Style Reference > giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu. **Theme:** light Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng | | Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng | | Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao | | Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |

# Shelby Kay — Style Reference > botanical editorial spread trên nền vải lanh ấm — hệ thống mực hai màu trên giấy cũ, với display type tràn ra ngoài mép trang và metadata thì thầm từ lề. **Theme:** light Shelby Kay là một portfolio editorial chủ đề thực vật: canvas vải lanh ấm, một màu mực olive đậm, và một điểm nhấn sage-green duy nhất làm toàn bộ công việc thể hiện thương hiệu. Typography cực đoan — Ranade display type kéo dài tới 265px và tràn edge-to-edge, trong khi Switzer xử lý mọi thứ còn lại ở dải compact 10–20px, tạo ra sự căng thẳng kiểu magazine-spread giữa header hoành tráng và metadata thì thầm. Navigation chỉ là text, không có button, không control bo tròn, không shadow — giao diện đọc như một cuốn sách nghệ thuật in, không phải phần mềm. Các section chuyển qua các lớp tông ấm (cream → tan → taupe) thay vì các khối màu cứng xen kẽ, và toàn bộ hệ thống tưởng thưởng cho sự kiềm chế: hierarchy đến từ kích thước, weight và whitespace, không bao giờ từ màu sắc hay chrome. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Olive Ink | `#393c2a` | `--color-olive-ink` | Text chính, border và stroke cấu trúc — tất cả type từ body đến display headings, tất cả card và image borders, tất cả interactive outlines | | Sage Type | `#737955` | `--color-sage-type` | Display headings và brand voice — dùng cho wordmark SHELBY hoành tráng, section anchors, và các điểm nhấn heading chọn lọc mang bản sắc thực vật của thương hiệu | | Linen | `#efe6d9` | `--color-linen` | Canvas chính và bề mặt card — nền trang, card fills, tông ấm nền tảng mà toàn bộ hệ thống nằm trên | | Sienna | `#d6b292` | `--color-sienna` | Orange wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung |