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

# Dialog — Style Reference > Neutral showroom với một price tag ấm áp duy nhất. Mọi bề mặt đều là một tông off-white khác nhau; CTA màu cam là màu duy nhất trong căn phòng. **Theme:** light Dialog mang cảm giác như một sơ đồ mặt bằng bán lẻ cao cấp được thể hiện dưới dạng kỹ thuật số — trung tính, thoáng đãng và thư thái, với một điểm nhấn ấm áp đóng vai trò như một miếng dán price tag trên vải lanh trắng. Nền gần trắng #f7f7f7 và các card trắng tinh tạo ra một hệ thống phân cấp bề mặt tinh tế đến mức nó đọc như một không gian liên tục thay vì độ sâu phân lớp. PP Radio Grotesk Light ở 50-70px là điểm nhấn xác định: một geometric grotesque được thể hiện ở weight nhẹ nhất khiến các headline lớn có cảm giác như viết tay trên giấy thay vì đóng dấu — zero aggression, maximum presence. Màu cam duy nhất #f69251 chỉ xuất hiện trên các CTA, thu hút sự chú ý giống như một tag giảm giá nổi bật trong một showroom trung tính. Các nút hình pill (28px radius) nổi trên các container góc vuông, là hình dạng mềm duy nhất trong một hệ thống hình chữ nhật khác. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Tangerine Tag | `#f69251` | `--color-tangerine-tag` | Nút CTA chính, pill 'Book a demo' — màu cam ấm trên nền gần trắng báo hiệu hành động mà không tạo cảm giác cấp bách, gợi nhớ bảng màu của nhãn hàng bán lẻ cao cấp | | Midnight Ink | `#181825` | `--color-midnight-ink` | Body text, đường viền — gần đen với một chút xanh lam khó nhận thấy, mềm hơn đen thuần để đọc văn bản dài | | Graphite | `#484758` | `--color-graphite` | Body text phụ, mô tả copy, thông tin meta | | Deep Slate | `#242433` | `--color-deep-slate` | Nền bề mặt tối, card overlay trong các section tối |

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

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

# Goodnotes — Style Reference > Paper-white command canvas — một trang giấy trắng trống, nơi mọi công cụ đều khớp vào vị trí mà không cần trang trí. **Theme:** light Goodnotes vận hành trên một canvas trắng với độ nhiễu thị giác gần như bằng không: hầu như không có shadow, không gradient, và một bảng màu cố tình tiết chế. Màu bão hòa duy nhất — một tông cyan/aqua (#57d2ee) — chỉ xuất hiện trên primary CTA button, khiến hành động trông như được bật lên trên một nền đơn sắc. Typography hoàn toàn dùng Roobert, một rounded geometric sans tùy chỉnh, với negative tracking rõ rệt ở kích thước display (−0.05em) giúp các headline lớn được siết chặt. Product UI screenshots mang trọng lượng thị giác; page chrome xung quanh giữ phẳng, hướng đến chữ, và được typeset dày đặc ở kích thước nhỏ. Borders thay vì shadow định nghĩa các bề mặt, và border-radius 10px duy nhất được áp dụng đồng nhất cho buttons, cards, và UI chrome. ## Tokens — Colors | Name | Value | Token | Vai trò | |------|-------|-------|---------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, nền card, text trên nút cyan CTA | | Midnight Ink | `#000000` | `--color-midnight-ink` | Headline chính, body text, border trên UI chrome | | Deep Charcoal | `#1e1e1e` | `--color-deep-charcoal` | Text và border của ghost button, secondary heading, icon strokes | | Graphite | `#111213` | `--color-graphite` | Nền nav tối, nền section tối, link text trong ngữ cảnh tối |

# AngelList — Style Reference > midnight greenhouse with violet dawn — một khoảng không teal gần như đen, nơi chữ serif màu mint-green phát sáng và những nút lavender nở rộ như điểm sáng ấm duy nhất **Theme:** dark AngelList vận hành như một nhà kính lúc nửa đêm: nền canvas teal gần như đen (#001d21) là mặt sàn, chữ display serif màu mint-green (#e0fee6) phát sáng như thể phát quang sinh học, và một điểm nhấn lavender-violet (#cdcbff) xuyên suốt giao diện như ánh bình minh. Hệ thống thị giác ưu tiên dark — toàn bộ trang nằm trên nền teal đậm, bao gồm card, navigation và footer — tạo ra bầu không khí ngân hàng tư nhân về đêm thay vì light mode SaaS điển hình. Typography là ngôi sao: một custom serif display face hiển thị số liệu và headline copy ở kích thước cực lớn (90–216px) với negative tracking dày đặc, trong khi một sans trung tính xử lý toàn bộ UI chrome. Các bề mặt phẳng với elevation tối thiểu; chiều sâu đến từ sự chuyển tông giữa các sắc teal gần như đen và các dải full-bleed màu đất thỉnh thoảng xuất hiện (olive grove, mint wash). Photography mang tông ấm, phong cách lifestyle — con người trong ánh sáng tự nhiên, đang làm việc — được đặt trong các card bo tròn nằm trên nền canvas tối. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Abyssal Teal | `#001d21` | `--color-abyssal-teal` | Page canvas, hero background, navigation surface, footer, primary text trên nền sáng — khoảng không mà mọi thứ nằm trên đó | | Deep Reef | `#002b31` | `--color-deep-reef` | Elevated card surfaces, secondary buttons, filled chip backgrounds — cao hơn canvas một tông để tạo chiều sâu tinh tế mà không rời khỏi họ dark | | Bio Mint | `#e0fee6` | `--color-bio-mint` | Display headlines, hero copy, chữ số lớn — mint phát quang mang bản sắc thương hiệu trên nền canvas tối | | Lavender Dawn | `#cdcbff` | `--color-lavender-dawn` | Violet text accent cho link, tag và các cụm từ ngắn cần nhấn mạnh. Không nâng lên làm màu CTA chính |

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

# OLIPOP — Style Reference > Retro apothecary kết hợp soda fountain — menu soda in trên giấy ấm. **Theme:** light OLIPOP là sự pha trộn giữa apothecary phai màu nắng và soda fountain: nền cream ấm áp, một màu forest-teal đầy uy lực làm điểm neo cho mọi header, button và brand mark, cùng một carousel các thẻ sản phẩm pastel đọc như nhãn kẹo từ cửa hàng tổng hợp thập niên 1950. Typography đảm nhận phần lớn công việc kể chuyện — một display serif retro tương phản cao (WindsorEF) ở weight 800 nổi bật trên các headline, trong khi một sans-serif hiện đại sạch sẽ (Ano) xử lý mọi thứ còn lại với sự lặng lẽ chuyên nghiệp. Hệ thống sống trong khoảng không giữa sự ấm áp cổ điển và tiện ích thương mại điện tử hiện đại: button hình pill, card bo góc 16px mềm mại, và không có shadow nào ngoại trừ một lớp ánh sáng nhẹ duy nhất trên primary call-to-action. Màu sắc được phân bổ một cách tiết kiệm — phần lớn trang là cream và forest-teal, với năng lượng màu sắc dành riêng cho các thẻ sản phẩm, một điểm nhấn wine-red duy nhất và một secondary action bright-teal. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#14433d` | `--color-forest-ink` | Điểm nhấn teal hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên làm màu CTA chính | | Cream Paper | `#fdf7e7` | `--color-cream-paper` | Canvas trang, nền section — màu trắng ngà mà mọi bề mặt đều nằm trên, hơi ấm để type không bao giờ có cảm giác lâm sàng | | Mint Sage | `#d3e8e3` | `--color-mint-sage` | Nền hero panel, các lớp nền section mềm — một mint bão hòa thấp lùi về phía sau để forest-teal text có thể dẫn dắt | | Charcoal | `#3a3a3a` | `--color-charcoal` | Body text, link text, icon phụ — mềm hơn đen thuần để hài hòa với nền cream ấm |

# BUTT STUDIO — Style Reference > gallery wall với một serif wordmark khổng lồ **Theme:** light BUTT Studio là một portfolio mang phong cách editorial, nơi chữ được xem như kiến trúc: một wordmark Caslon khổng lồ trải dài từ mép này sang mép kia ở đầu trang, bị cắt ngang bởi một hình minh họa hữu cơ đan xuyên qua các ký tự. Bên dưới hero, hệ thống thu gọn thành một ledger ba cột mang phong cách clinical với thông tin liên hệ, khách hàng và tính năng bằng sans-serif nhẹ nhàng, sau đó mở ra thành grid dự án hai cột rộng rãi. Màu sắc gần như vắng bóng hoàn toàn — mực đen mờ trên nền giấy xám ấm, với một badge chàm đậm duy nhất làm điểm nhấn màu sắc duy nhất. Cảm giác như một tạp chí in bỗng nhiên sống động: serif display đầy tự tin, sans body tiện dụng, không gradient, không chrome bo tròn, không bóng đổ trang trí. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền, button outlines, structural strokes — màu duy nhất mang thông tin | | Paper | `#ffffff` | `--color-paper` | Bề mặt card, thumbnail covers, văn bản đảo màu trên nền tối | | Carbon | `#131313` | `--color-carbon` | Nền tile dự án tối, bề mặt gần đen cho video panels | | Bone Gray | `#e0e0e0` | `--color-bone-gray` | Canvas trang, neutral button fills — nền xám ấm mà toàn bộ bố cục nằm trên đó |

# Savee — Style Reference > Black canvas dành cho visual curators **Theme:** dark Savee hoạt động trong bóng tối gần như tuyệt đối: một canvas gần như đen tuyền (#050505) nơi yếu tố màu sắc duy nhất là một electric indigo (#1500ff) duy nhất, điểm xuyết giao diện như ánh đèn neon trong gallery. Typography đảm nhận toàn bộ trọng trách — một custom sans-serif duy nhất được dùng ở mọi cấp độ, từ display headline 96px với line-height 0.96 và tracking -0.04em cho đến caption 13px, tạo nên nhịp điệu editorial đầy tự tin, mang cảm giác như tường bảo tàng hơn là một SaaS dashboard. Các bề mặt gần như không thể phân biệt: page canvas, elevated cards (#151515), và deep overlays (#1e1e1e) tạo thành một hệ thống phân cấp gần như vô hình, để hình ảnh và chữ dẫn dắt trải nghiệm. Điểm nhấn violet duy nhất trên primary CTA là tiếng ồn thị giác duy nhất mà hệ thống cho phép — mọi thứ còn lại là chữ trắng trên nền đen, pill-shaped controls, và khoảng thở section 64px rộng rãi. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Indigo | `#1500ff` | `--color-electric-indigo` | Điểm nhấn violet cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu primary CTA | | Obsidian | `#050505` | `--color-obsidian` | Page canvas, nền sâu nhất — khoảng không mà mọi nội dung đặt trên đó | | Charcoal | `#151515` | `--color-charcoal` | Elevated surface, khung xem trước sản phẩm, panel phụ | | Graphite | `#1e1e1e` | `--color-graphite` | Deep overlay surface, hover state trên dark cards, input fields |

# Subframe — Style Reference > bản thiết kế graphite trên giấy vellum ấm. Tờ giấy phác thảo của designer, nơi mỗi nét vẽ đều là graphite hoặc tẩy xóa, không bao giờ là sơn — chiều sâu đến từ độ dày nét và thỉnh thoảng là một chút serif trang trí. **Theme:** light Subframe là một workbench monochrome của designer: nền off-white ấm áp, mực graphite đen, và không có điểm nhấn màu sắc nào. Toàn bộ giao diện đọc như một chất liệu duy nhất — giấy, bút chì và bóng đổ — với một cử chỉ typography táo bạo: một serif display tinh tế (Instrument Serif) kết hợp với một sans có hệ thống (Inter) để tạo trọng lượng editorial cho các headline. Các bề mặt phẳng và có viền, không nổi lên; chiều sâu đến từ các đường divider mảnh (hairline) màu #e5e7eb và các điểm nhấn inset trên các control tối thay vì drop shadow. Mật độ thoải mái: nhịp dọc rộng (khoảng cách section 48–64px), layout max-width căn giữa, và khoảng trống lớn xung quanh chữ. Màu sắc duy nhất là độ tương phản giữa gần-trắng và gần-đen — khiến cho nút filled tối là phần tử duy nhất nổi bật nhất trên mỗi trang, và dải logo grayscale của các đối tác là nhịp điệu thị giác trang trí duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Page Canvas | `#fafafa` | `--color-page-canvas` | Nền trang, card-on-canvas, chữ sáng trên nền tối — màu trắng ấm mang toàn bộ hệ thống monochrome | | Hairline Border | `#e5e7eb` | `--color-hairline-border` | Divider, viền card, khung ảnh, đường viền icon — nét vẽ được dùng nhiều nhất trong hệ thống, định nghĩa cấu trúc không gian | | Card Surface | `#ededed` | `--color-card-surface` | Nền card nâng lên, bề mặt phụ — nằm trên canvas một bước để tạo nhóm mà không cần shadow | | Divider Mid | `#dadada` | `--color-divider-mid` | Divider tông trung và chuyển tiếp section |

# Invisibletech — Style Reference > Editorial sketchbook on graph paper **Theme:** light Invisible Tech reads as an editorial sketchbook laid over graph paper: a near-pure white canvas dotted with a faint grid, scattered with loose hand-drawn vignettes (basketball players, overhead cars, a globe), and anchored by a tight two-column content rhythm. The typographic system is a deliberate duet between two custom faces — Apk Galeria carries everything human (body, headlines, quotes) with a serif-influenced rhythm and progressively tighter tracking as type scales up, while Apkpraktikal handles everything categorical as wide-tracked small caps (section eyebrows, navigation labels, tab names). The color system is almost entirely achromatic — black, graphite, and a stack of grays do 98% of the work — with exactly two chromatic accents that carry meaning: a vivid cobalt blue for wayfinding dots and a lime-chartreuse green reserved exclusively for the primary conversion action. Components are pill-shaped, borders are 1px hairlines, and the page never raises its voice with shadows or gradients — it whispers, then lets the two-tone headline (one phrase in near-black, the following phrase in mid-gray) do the dramatic work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon Ink | `#0f0f0f` | `--color-carbon-ink` | Primary text, hero CTA button fill, logo mark — the dominant non-white color carrying 1000+ borders and all body copy | | Graphite | `#222222` | `--color-graphite` | Secondary surface fill, dark card backgrounds, button borders — one step lighter than Carbon for layered elements | | Iron | `#4c4c4c` | `--color-iron` | Body text, input borders, button borders, card borders — the working neutral for readable secondary copy | | Steel | `#606060` | `--color-steel` | Muted headings, subhead text, supporting borders |

# Origin Financial — Style Reference > serif headlines floating above dusk clouds — editorial finance at horizon altitude **Theme:** dark Origin speaks in an editorial financial-register voice: oversized Lyon Display serif headlines (80-96px, weight 300-400) do the emotional work while Suisse Int'l carries the UI at 14-18px against a near-black canvas stacked from #0f1011 through #2e2e2e. The interface is overwhelmingly achromatic — the only true CTA is a white pill with an arrow, never a chromatic button — and the brand's color appears not as controls but as illuminated product surfaces: violet, pink, sky-blue, and deep-indigo feature cards that float in the void like lit windows. The signature move is a full-bleed dusk-sky photograph behind the hero, giving the entire site a 'above the clouds' atmosphere that frames money as horizon, not spreadsheet. Spacing is generous and breathing; cards use 16-30px radii (never sharp), buttons are full pills (1440px), and tracking on small UI text is dramatically wide (0.182em) to feel stamped rather than typed. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#0f1011` | `--color-obsidian` | Primary page canvas — the foundational dark surface behind every section | | Void Black | `#000000` | `--color-void-black` | Pure black for SVG illustration fills, deepest shadow base, device screen content | | Carbon | `#090a0b` | `--color-carbon` | Elevated card surfaces and button shadow substrate — one step lighter than the page | | Graphite | `#2e2e2e` | `--color-graphite` | Mid-tone card surface for overlays, icon borders, and elevated containers |

# Designmodo — Style Reference > Rừng lúc bình minh — tán cây tối trên cao, ánh sáng lọt xuống dưới thấp, một tia xanh lục duy nhất đánh dấu lối đi phía trước. **Theme:** mixed Designmodo phân chia cá tính qua hai vùng riêng biệt: một hero xanh rừng đậm (#0e231c) tạo cảm giác uy quyền, sau đó mở ra một content canvas trắng sáng — tương đương với bước qua một ô cửa tối để vào một studio ngập nắng. Các section tối dùng chữ trắng và màu sage nhẹ #defaca, trong khi section sáng dùng màu gần đen #313942, tạo nên hệ thống màu hai phòng nơi ngữ cảnh luôn báo hiệu chế độ. Một màu xanh lục điện duy nhất (#27ae60) là màu tương tác duy nhất ở cả hai thế giới — CTA buttons, badges, và active states đều dùng chung một sắc thái, khiến mọi phần tử có thể click đều cảm thấy thuộc cùng một gia đình bất kể nó nằm ở phòng nào. InterVariable với letter-spacing âm (xuống tới -0.028em ở kích thước display) đảm nhiệm phần nặng về typography, với các feature flag nhận diện ligature 'cv03', 'cv04', 'cv06', 'cv09', 'ss03' khiến Inter tiêu chuẩn trở nên độc quyền. Border-radius 32px cho card và pill buttons 999px tạo nên hình học mềm duy nhất trong một hệ thống vốn vuông vức. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Forest Floor | `#0e231c` | `--color-forest-floor` | Nền hero section, nền dark nav — bề mặt sâu nhất trong hệ thống; chữ trắng đọc ở tỷ lệ 16.5:1 trên nền này | | Canopy Shadow | `#1a3029` | `--color-canopy-shadow` | Bề mặt tối thứ cấp, dùng làm dark card nâng cao hoặc section band trong vùng dark-mode hero | | Pine Border | `#233630` | `--color-pine-border` | Divider tinh tế trong các section tối — gần như không phân biệt với nền, đọc giống đường kẻ chìm hơn là separator | | Slate Ink | `#313942` | `--color-slate-ink` | Body text mặc định, icons, borders trên section sáng — màu gần đen đảm nhận hầu hết công việc trong vùng sáng |

# Google for Education — Style Reference > Open notebook in morning light — a digital classroom where whitespace, type, and one blue accent do all the work. **Theme:** light Google for Education operates as a restrained utility surface: a near-white canvas anchored by two type families (Google Sans Text for body and UI, Google Sans Display for headlines) and a single brand blue that functions as the system's only chromatic voice. Hierarchy comes from scale jumps and tracking — the 80px display headline is tightly tracked, while 12–16px body text opens up with positive letter-spacing for small-size legibility. Surfaces avoid decorative gradients and heavy shadows, relying on generous whitespace, 24–28px card radii, and pill-shaped controls to feel approachable rather than corporate. Color is functional punctuation, not atmosphere: green identifies the Classroom brand mark, blue marks links and active states, and everything else stays in a narrow gray scale (#202124 → #3c4043 → #5f6368 → #dadce0). ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas White | `#f8f9fa` | `--color-canvas-white` | Page background, card surfaces, section bands — the off-white ground that prevents harshness against pure white product screenshots | | Charcoal Ink | `#202124` | `--color-charcoal-ink` | Primary text, display headlines, active icon strokes — the deepest readable black-blue for maximum hierarchy | | Graphite | `#3c4043` | `--color-graphite` | Secondary headings, nav text, strong body — one step lighter than charcoal for sub-headings and navigation labels | | Slate | `#5f6368` | `--color-slate` | Muted body text, helper copy, icon glyphs, breadcrumb separators, footer micro-copy |

# Codex.io — Style Reference > Ngọn hải đăng Citrine trong khoảng không — khối lập phương xanh chanh phát sáng neo giữa căn phòng tối, với chữ trắng mảnh và các vòng node rải rác lơ lửng xung quanh. **Theme:** mixed Codex.io giao tiếp bằng một cử chỉ kịch tính duy nhất: khối lập phương citrine phát quang lơ lửng trong khoảng không carbon sâu thẳm, được bao quanh bởi các blockchain node đang quay quanh quỹ đạo. Giao diện gần như hoàn toàn tối với một điểm nhấn xanh chanh điện (#e5ff5d) làm tất cả công việc về màu sắc — hành động chính, nét icon, khối trang trí, dấu hiệu thương hiệu. Typography là một sans-serif nhân văn duy nhất (Neue Haas Grotesk) được thiết lập với tracking tự tin, hơi chặt, nơi headline display 80px chiếm trọn hàng và các label nhỏ nhận được positive tracking. Trang dao động giữa các section tối dày đặc chứa sơ đồ chòm sao và một đoạn đảo màu kem nơi các khối lập phương khổng lồ trong suốt đóng khung một thông điệp trung tâm. Mọi màn hình nên tạo cảm giác như đang nhìn vào phòng server qua viewport — tối, yên tĩnh, được nhấn mạnh bởi một tín hiệu sáng duy nhất. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Citrine Signal | `#e5ff5d` | `--color-citrine-signal` | Nút hành động chính, phần tô khối thương hiệu, nét icon nhấn, khối 3D trang trí, dấu logo nổi bật — giọng màu duy nhất của hệ thống | | Carbon Black | `#111111` | `--color-carbon-black` | Canvas trang, văn bản chính trên section sáng, màu border chủ đạo, phần tô nút trên section đảo (sáng) | | Bone White | `#f9f9f9` | `--color-bone-white` | Văn bản chính trên canvas tối, nav và body text, phần tô icon sáng, chữ ghost button | | Graphite | `#2b2b2b` | `--color-graphite` | Bề mặt nâng cao trên carbon, panel phụ, biến thể card tối hơn |

# Wise Design — Style Reference > Quầy hàng chợ đêm neon trên một con phố toàn cầu — bảng hiệu xanh điện rực rỡ hét vang giữa khu chợ đông đúc, rồi giao diện sản phẩm trau chuốt lặng lẽ xuất hiện phía sau. **Theme:** mixed Wise Design đánh mạnh như một tấm áp phích in lụa mang tinh thần biểu tình — màu xanh vôi điện (#87ea5c) tràn ngập hero ở độ bão hòa tối đa, rồi chữ màu mực rừng tối (#083400) đập thẳng vào đó ở kích thước display. Bảng màu cố tình không giống fintech: vàng tươi (#ffea4b), đào (#ffbd89), hồng kẹo bông (#ffd5f0), và tím cà tím đậm (#2a0831) cùng tồn tại như một bộ sưu tập tiền tệ toàn cầu. Wise Sans weight 900 với line-height 0.85 là chữ ký — các chữ cái xếp chồng khít đến mức gần như chạm nhau, tạo hiệu ứng nén bảng quảng cáo ở tỷ lệ kỹ thuật số. Pill (border-radius 9999px) là yếu tố UI bo tròn duy nhất, trong khi các khối nội dung lớn dùng bán kính 86px rộng rãi, tạo thẻ bo mềm tương phản với kiểu chữ mạnh mẽ. Hệ thống thiết kế dao động giữa la hét và thì thầm — display type chồng khổng lồ rồi một dòng midsize đơn độc yên tĩnh trên nền trắng. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Lime Volt | `#87ea5c` | `--color-lime-volt` | Nền hero, fill pill button, nền tag danh mục — tín hiệu thương hiệu dễ nhận biết nhất; xanh tươi trên nền mực tối tạo năng lượng mà không fintech xanh nào có được | | Forest Ink | `#083400` | `--color-forest-ink` | Văn bản chính, headline tối trên nền lime, nav link, fill icon — xanh rừng đậm thay vì đen giữ mọi thứ đúng thương hiệu ngay cả ở kích thước body | | Volt Yellow | `#ffea4b` | `--color-volt-yellow` | Headline điểm nhấn, màu chữ trang trí trên nền tối — vàng điện kết hợp với đỏ burgundy đậm để tạo độ mạnh tối đa | | Papaya | `#ffbd89` | `--color-papaya` | Nền thẻ điểm nhấn ấm, highlight phần trang trí |

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

# ElevenReader — Style Reference > chủ nghĩa tối giản kiểu báo in với một điểm nhấn màu duy nhất **Theme:** light ElevenReader vận hành trên ngôn ngữ thị giác gần như đơn sắc: canvas trắng như giấy, chữ đen như mực, và viền xám mảnh (hairline) làm toàn bộ công việc cấu trúc. Một font display độc quyền (WaldenburgHF, chỉ dùng weight bold) đảm nhận mọi heading với leading cố định và chặt chẽ, tạo ra một giọng typography thống nhất trên toàn bộ bề mặt sản phẩm. Giao diện phẳng — không shadow, không phân tầng độ cao, không gradient trang trí trong UI — với một khoảnh khắc màu sắc duy nhất xuất hiện dưới dạng một vệt radial atmospheric trong hero (xanh rừng chuyển sang oải hương) tạo cảm xúc mà không bao giờ lặp lại trong các component bên trong. Pill controls (bán kính 9999px), gutter rộng rãi, và độ tương phản weight đơn (Inter 400 vs 700) khiến hệ thống giống như một trang editorial đã in — nội dung lên trước, trang trí là sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink | `#000000` | `--color-ink` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng cấp nó thành màu CTA chính | | Paper | `#ffffff` | `--color-paper` | Surface sáng hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính | | Mist | `#f2f2f2` | `--color-mist` | Canvas trang, nền section thay đổi tinh tế, tone surface phụ phía sau card | | Bone | `#e5e5e5` | `--color-bone` | Viền hairline, divider giữa các row xếp chồng, đường viền FAQ item, separator tương phản thấp |

# Extract — Style Reference > Editorial monolith on gallery paper **Theme:** light Extract operates as an editorial gallery space: a white canvas interrupted by one pastel mint wash, a single monumental wordmark, and confident body type. The visual system is almost entirely achromatic — near-black ink on white paper — with #e7feda mint appearing only as section-level atmospheric color, never as a UI accent or button fill. Hierarchy is built through extreme typographic scale contrast (104px display vs 19px body) rather than color, weight, or decoration. Components are flat and thin: hairline borders, ~9px radii, no shadows, no gradients. The navigation is a floating pill that hovers over content, reinforcing the gallery metaphor — visitors walk through curated rooms rather than scrolling a page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Gallery White | `#ffffff` | `--color-gallery-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Ink Black | `#070707` | `--color-ink-black` | Primary text, hairline borders, filled buttons, nav text — the structural linework of the entire system; Dark surface for project cards and editorial spreads — the inverse of the canvas, used to make featured work feel like a framed plate | | Spearmint Wash | `#e7feda` | `--color-spearmint-wash` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |

# Haley Park — Style Reference > Illuminated manuscript on forest vellum **Theme:** dark A personal portfolio system built on a dark forest-green manuscript — the page reads like a hand-illuminated codex rather than a website. The entire interface lives inside a single chromatic mood: deep pine canvas (#143930), warm parchment text (#f8f2de), and a sage structural accent (#456859) for line work and iconography. Typography stays in the weight-200 whisper range across a curated family of editorial serifs, with one display cut (Wispy, 96px) used as a single monumental name treatment. Decorative gothic architecture — rose windows, arches, intersecting plus-signs at line junctions — bleeds through the layout as full-width structural pattern rather than ornament. No drop shadows, no gradients, no rounded cards; the system draws its depth from line weight, the cream-on-green contrast pair (11.3:1), and the disciplined rhythm of thin horizontal rules with terminal crosses. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pine Vellum | `#143930` | `--color-pine-vellum` | Page canvas, all section backgrounds, box-shadow tint for the only subtle elevation present | | Cedar Stroke | `#456859` | `--color-cedar-stroke` | Stroke color for background architectural illustrations, icon outlines, sage decorative line art, secondary borders | | Parchment | `#f8f2de` | `--color-parchment` | Primary text, link text, outlined button borders, heading characters, and the full suite of hairline rules and dividers | | Aged Tan | `#bead89` | `--color-aged-tan` | Muted secondary text and metadata labels (project years, category tags) — sits between parchment and the background, a quieter tertiary |

# Typewolf — Style Reference > Warm parchment typography atelier. Every element is a brownish-ink stamp on dusty rose paper, with no color allowed to compete with the type. **Theme:** light Typewolf reads as a warm, editorial type specimen magazine pressed into a website: a dusty rose canvas (#f8f5f5) supports white rectangular cards in a two-column grid, all anchored by brownish-ink text rather than any chromatic accent system. The palette is deliberately near-monochromatic — a dark warm brown (#443235) for body copy and headlines, a slightly lighter brown (#654a4e) for nav and secondary links, and a single muted dusty rose (#916a70) reserved for borders and quiet emphasis. Typography carries the entire identity: a transitional serif (Domaine Text) for body, an ultra-heavy condensed sans (Dia) for ALL-CAPS micro-labels with -0.03em tracking, and a high-contrast display serif (Domaine Display Narrow) for editorial headlines. Surfaces are sharp-cornered, elevated only by a warm-tinted diffuse shadow (rgba(145,106,112,0.15) 0 6px 24px) that ties the elevation back to the brand palette. The result is a site that feels more like a printed specimen catalog than a web product — restrained, content-first, and quietly opinionated. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Rose | `#f8f5f5` | `--color-parchment-rose` | Page canvas and section backgrounds — the warm off-white ground that gives the whole system its dusty, paper-like atmosphere | | Specimen White | `#ffffff` | `--color-specimen-white` | Card surfaces and image wells — clean white plates that sit on the parchment canvas, carrying typographic specimens and editorial imagery | | Ink Brown | `#443235` | `--color-ink-brown` | Primary text, headlines, and dominant body copy — the warm near-black that reads as ink rather than pure black against the rose canvas | | Walnut | `#654a4e` | `--color-walnut` | Navigation text, secondary links, and muted metadata — one step lighter than Ink Brown for hierarchy without leaving the brown family |

# Retool — Style Reference > Warm obsidian workshop — a precision tool surface lit by ember glow, where everything is built. **Theme:** dark Retool operates on a near-black canvas — #151515 as the dominant ground — with off-white text (#e9ebdf) that reads more like parchment than pure white, giving the dark surface a warm, organic quality rather than a cold tech-void. Typography is the primary design tool: the custom 'saansFont' runs from weight 300 at 72px down to 380 at body sizes, with aggressive negative tracking at large scales creating compressed, authoritative headlines that feel proprietary. Surface depth is achieved through a three-step stack (#0e0e0 → #151515 → #242424) with no shadows — cards are literally darker or lighter slabs of the same material, not elevated objects. The only chromatic punctuation is muted teal (#185849, #0e352c) used as subtle background washes, while the hero gradient bleeds warm earthy tones (amber-rust into near-black) from the bottom-left, creating atmospheric depth without visual noise. Buttons are square-cornered or pill-cornered depending on context — no in-between — reinforcing a binary, decisive visual grammar. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Canvas | `radial-gradient(at -5% 105%, rgba(27, 46, 68, 0.5) 26%, rgba(51, 45, 43, 0.5) 44%, rgba(74, 43, 17, 0.5) 62%, rgba(73, 31, 22, 0.5) 66%, rgba(21, 21, 21, 0) 85%, rgba(21, 21, 21, 0.03) 100%)` | `--color-obsidian-canvas` | Primary page background, dominant surface across all sections; Hero background gradient — warm amber-rust bleeds from bottom-left into near-black | | Void Black | `#0e0e0e` | `--color-void-black` | Deepest surface layer, card backgrounds that recede below canvas | | Ember Surface | `#242424` | `--color-ember-surface` | Raised card and panel backgrounds — one step above canvas | | Charcoal Rim | `#3f403d` | `--color-charcoal-rim` | Subtle borders and dividers on dark surfaces |

# Obscura — Style Reference > 8-bit arcade nổi trên nền giấy mây **Theme:** light Obscura vận hành trên ngôn ngữ 8-bit arcade vui tươi, đặt trên nền canvas giấy sắc trời mềm mại. Display type (Jersey 10) là chữ ký thị giác: những ký tự pixel chunky đọc như phụ đề Game Boy, kết hợp với hình học Manrope hiện đại, điềm tĩnh cho mọi thứ cần đọc. Một màu cam rực rỡ duy nhất (#ff5e24) đảm nhận vai trò nổi bật — CTA fill, link hover, nhấn mạnh hero, card borders — trong khi phần còn lại của hệ thống giữ tông kem, xanh trời và graphite. Các bề mặt nổi trên nền mây #e3f1fe nhạt với hairline borders và bóng siêu nhẹ; trang web cảm giác như hình nền console pixel-art mà bạn thực sự muốn sống trong đó. Tâm trạng là privacy-as-playfulness, không phải privacy-as-fortress. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Signal Orange | `#ff5e24` | `--color-signal-orange` | Primary CTA fill, nhấn mạnh hero headline, active nav link, card accent border, hover state — giọng màu duy nhất xứng đáng với từng pixel nó chạm tới | | Ember Crust | `#6c3200` | `--color-ember-crust` | Footer background, dark-mode brand block — dùng khi màu cam cần lùi vào nền nâu ấm sâu | | Cloud Mist | `#e3f1fe` | `--color-cloud-mist` | Page canvas tint, card surface wash, secondary button border, decorative fill phía sau pixel art — bầu trời mềm mà mọi thứ nổi trên đó | | Graphite Ink | `#232629` | `--color-graphite-ink` | Primary text, nav links, icon strokes, body copy — màu gần đen pha chút lạnh giúp trang không bị vô cảm |

# Agencja brandingowa — Style Reference > Editorial white gallery with black ink typography **Theme:** light A stark editorial identity system built on absolute monochrome — white canvas, black ink, gray echoes. The design reads like a printed architecture monograph: every element earns its space through generous whitespace, precise typographic control, and a refusal to use color for anything but information. Type does all the emotional work; a single custom grotesk carries both 73px display lines and 10px meta labels, unified by a stylistic alternate ('ss01') that gives the letterforms a distinctive editorial edge. Components stay flat, borders stay hairlines, radii stay generously rounded, and the entire surface stack moves from pure white through cool grays to ink black without any chromatic interruption. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surface, inverted text on dark blocks | | Ink Black | `#000000` | `--color-ink-black` | Primary text, headings, logo mark, all stroke and border weight | | Obsidian | `#1f1f1f` | `--color-obsidian` | Dark section backgrounds, deep surface elevation, footer bands | | Graphite Wash | `#333333` | `--color-graphite-wash` | Elevated dark surfaces, overlay panels |