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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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