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

# Dimension — Style Reference > Command deck glassmorphism trước bình minh **Theme:** dark Dimension nói bằng giọng dark gần như đơn sắc: một canvas gần đen, các bề mặt glassmorphic nổi lên trên nó, và một chút indigo nhạt chỉ xuất hiện như dấu chấm câu nhấn mạnh. Typography tiết chế và mang tính humanist — DM Sans cho body, Geist cho display — để headline 72px siêu nhẹ dẫn dắt không gian màu sắc không cần phải la hét. Các component có dạng pill hoặc bo tròn mềm; hầu như mọi interactive element (buttons, nav, tags, floating dock) đều dùng radius 9999px, trong khi cards nằm trong khoảng cong 24–40px. Trang thở: nhịp dọc rộng rãi, đường viền hairline mảnh màu #e5e5e5 ở độ mờ thấp, và elevation tối thiểu — chiều sâu đến từ độ trong suốt và blur, không phải chồng shadow. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Void | `#0a0a0a` | `--color-void` | Nền trang, bề mặt sâu — canvas mà mọi thứ nổi lên trên | | Char | `#1d1d1d` | `--color-char` | Bề mặt card nâng cao, nền modal | | Iron | `#3d3d3d` | `--color-iron` | Bề mặt trung cấp, hover state trên các phần tử tối | | Slate | `#505050` | `--color-slate` | Bề mặt disabled, nền secondary button |

# Monad — Style Reference > Tạp chí kỹ thuật monospaced trên giấy kem — nhẹ nhàng, chính xác, mang phong cách editorial. **Theme:** light Monad hiện ra như một tài liệu editorial nhẹ nhàng trên nền giấy ấm: canvas màu kem, mực than, và một bề mặt card màu oải hương gần như xám duy nhất mang toàn bộ UI. Điểm nhấn đặc trưng là typography — một serif nhân văn (humanist serif) ở weight 400 cho headline, kết hợp với font monospaced cho gần như toàn bộ UI text, tạo cảm giác technical-journal hiếm thấy trong B2B SaaS. Màu sắc gần như hoàn toàn vắng bóng trong giao diện; các tông màu đào, oải hương và bạc hà chỉ xuất hiện trong sơ đồ luồng dữ liệu (data-flow diagram) ở hero, nơi chúng hoạt động như những mảng màu khí quyển mềm mại chứ không phải điểm nhấn thương hiệu. Các component phẳng và tự tin: pill buttons 100px, cards border-radius 40px, viền mảnh (hairline) gần như đen, và một bóng đổ mềm duy nhất — không có gì nặng nề, không có gì bóng bẩy. Nhịp điệu tổng thể là khoảng thở rộng rãi, các khối text căn giữa, và các đường flow ngang gợi ý chuyển động mà không cần animation. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Canvas trang, nền nav, bề mặt badge — nền off-white ấm áp khiến toàn bộ giao diện có cảm giác như giấy thay vì màn hình | | Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, viền mảnh (hairline borders), và màu viền chủ đạo trên nav, cards, và divider | | Charcoal | `#242424` | `--color-charcoal` | Nền primary action button, viền badge, bề mặt nâng cao — filled CTAs hơi lệch khỏi đen tuyền để tạo độ mềm thị giác | | Graphite | `#4e4d4d` | `--color-graphite` | Body và heading text ở độ tương phản thấp hơn, viền card phụ, muted UI elements |

# Planpoint — Style Reference > Bản thiết kế trên bàn vẽ trắng — một sơ đồ bất động sản tương tác được hiển thị trên giấy tinh khiết, với một cây bút xanh và một bút highlight vàng để nhấn mạnh. **Theme:** light Planpoint sử dụng thẩm mỹ bản thiết kế bất động sản trên nền canvas trắng sạch: khoảng trắng rộng rãi, các thành phần hình pill, và display type đậm, tự tin mang phong cách bản vẽ mặt bằng được phác thảo trên giấy chất lượng cao. Giao diện gần như đơn sắc — chữ gần đen (#1d1d1f) và bề mặt trắng đảm nhận toàn bộ trọng lượng cấu trúc — với một màu xanh lam duy nhất (#0f68ea) dành riêng cho hành động chính và một màu vàng ấm (#ffcb00) chỉ xuất hiện như điểm nhấn mới lạ. Các component giữ nhẹ nhàng và mềm mại: bán kính pill lớn, một drop shadow nhẹ ở độ mờ 6%, không có gradient trang trí hay skeuomorphism. Typography là yếu tố thiết kế chủ đạo: Inter ở kích thước cực lớn (headline 50–72px, display 144px) với negative tracking dày đặc mang lại thẩm quyền kiến trúc cho trang, trong khi body text ở kích thước thoải mái 16–18px với line height rộng rãi. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Ink | `#1d1d1f` | `--color-ink` | Văn bản chính, nét icon, button fill tối — màu gần đen hơi ấm, chọn thay vì đen tuyền để tạo cảm giác in ấn thay vì kỹ thuật số | | White | `#ffffff` | `--color-white` | Nền trang, bề mặt card, chữ trên button tối, tất cả input field | | Mist | `#f0f2f4` | `--color-mist` | Bề mặt nâng nhẹ, button fill không hoạt động, nền card phụ | | Fog | `#e5e6e8` | `--color-fog` | Viền mảnh, divider nhẹ, phân cách section |

# Eclipse — Style Reference > Cel-shaded neon comic strip — nghĩ tới bảng hiệu kiểu Akira nhưng được render thành giao diện tài chính. **Theme:** mixed Eclipse vận hành trên nền canvas đơn sắc với một xung neon xanh lục duy nhất — ngữ pháp thị giác của nó gần với cel anime thập niên 90 hơn là một blockchain dashboard. Headline dùng GT Alpina Condensed ở hairline weights (100–200), nét serif mỏng nhất có thể nhưng vẫn đọc được thành chữ, kết hợp với Barlow Condensed cho UI chrome gọn nhẹ. Token màu duy nhất (#a1fea0) hoạt động như một chiếc bút dạ quang tô lên bản phác thảo mực trên giấy: border, button fill, hình minh họa đám mây, và hiệu ứng glow đều dùng chung một màu xanh tươi đó trên nền đen và trắng tuyệt đối. Bề mặt phẳng — không shadow, không gradient, không thủ thuật tạo chiều sâu. Button là dạng pill dày (25px radius), label là chữ in hoa kiểu máy chữ có tracking, illustration đảm nhận không khí còn type làm công việc cấu trúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Eclipse Green | `#a1fea0` | `--color-eclipse-green` | Primary action fill, active nav state, decorative border accents, cloud và glow illustration fills, investor-card spotlight — token màu duy nhất trong hệ thống, được dùng tiết kiệm để mỗi lần xuất hiện đều có cảm giác như một nét bút dạ quang | | Ink Black | `#000000` | `--color-ink-black` | Body và heading text, hairline borders trên card/badge/button, footer rules, outlined button stroke — màu trung tính chủ đạo mang tất cả các đường nét cấu trúc | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên nền tối, nav backgrounds, image backdrop — lớp nền cơ bản mà mọi thứ nằm trên đó |

# Athletics — Style Reference > monograph on black velvet **Theme:** dark Athletics operates as a gallery-grade creative studio: the entire experience sits on a dark canvas, letting enormous light-weight serif display type breathe against deep charcoal and pure black. The system is ruthlessly monochromatic — zero chromatic color across the interface, with warmth and saturation living exclusively inside editorial photography and the brand mark. Typography does the heavy lifting: a high-contrast pairing of a delicate serif display (Feature Deck at 300 weight, 72–116px) against a quiet grotesque (Söhne at 300/400 for everything functional). The layout is full-bleed, generous, and editorial — wide section gaps of 128–144px, asymmetric two-column blocks, and a vertical service index annotated with A/B/C/D letter labels that evoke a printed specimen sheet. Components are minimal: pill-shaped tags, hairline borders, no shadows, no gradients, no elevation. It reads as confident, restrained, and considered — the design equivalent of a well-typeset monograph. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, deepest section backgrounds, hairline borders on text | | Charcoal | `#1d1d1d` | `--color-charcoal` | Elevated section surfaces, card backgrounds, input fields — the middle layer between pure black and white | | Paper White | `#ffffff` | `--color-paper-white` | Primary display and body text on dark surfaces, default borders, icon strokes, form controls | | Ash | `#d6d5d0` | `--color-ash` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |

# Ragged Edge — Style Reference > Editorial brutalism trên nền đá cẩm thạch trắng. Hãy tưởng tượng sự tự tin về typography của Vogue kết hợp với sự kiềm chế màu sắc của một gallery Berlin — toàn mực và khoảng không, với một mảng màu duy nhất dùng như dấu chấm than, không phải trang trí. **Theme:** light Ragged Edge là một website tư vấn thương hiệu đầy tự tin, vận hành dựa trên kỷ luật gần như đơn sắc hoàn toàn: mực gần-đen trên nền trắng, với một chút violet bão hòa được dùng rất tiết kiệm làm accent viền, và một hero gradient full-bleed duy nhất — sự kiện màu sắc duy nhất trên homepage. Typography là toàn bộ cá tính — một display face chữ hoa dãn cực rộng (ABCDiatypeExpanded) đảm nhiệm vai trò "hét to", trong khi một serif tinh tế (Grit) đảm nhiệm vai trò "nói chuyện", tạo ra sự căng thẳng giữa typography tạp chí editorial và letterforms display brutalism. Layout mang tính maximalist về tỷ lệ (hero full-bleed, khoảng cách section 180px) nhưng minimal về bảng màu, và mọi bề mặt tương tác đều có dạng pill với bán kính trong khoảng 40–64px, tạo cho mọi button và nav item một dạng capsule mềm mại tương phản với kiểu chữ expanded góc cạnh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Obsidian Ink | `#181f1f` | `--color-obsidian-ink` | Primary text, đường viền mảnh (hairline), action buttons dạng fill — màu gần-đen chủ đạo chiếm 90% giao diện | | Paper White | `#ffffff` | `--color-paper-white` | Canvas nền, inverted text trên khối tối, viền nav/button | | Fog | `#d1d2d2` | `--color-fog` | Đường phân cách nhẹ và viền phụ nơi Obsidian quá nặng | | Ash | `#a3a5a5` | `--color-ash` | Helper text mờ, viền button không hoạt động, metadata phụ |

# Flecto — Style Reference > Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ. **Theme:** mixed Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng | | Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính | | Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính | | Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |

# Lightship — Style Reference > Cinematic open-road diorama. Warm cream gallery walls with oversized landscape photographs pinned at gentle radii, thin black type whispering across the frames, one ember-orange accent breaking the monochrome like a campfire in a meadow. **Theme:** light Lightship is a photography-first editorial system built on a warm cream canvas (#faf6ef) with full-bleed cinematic imagery doing all the storytelling. The UI is deliberately invisible: a single custom geometric sans (F37Bolton) with tight negative tracking, hairline borders, 20px rounded photo cards, and pill-shaped navigation chips. The entire palette is near-monochrome with one warm orange (#fa5c40) reserved as a rare surface accent. Density is generous — large breathing room around elements, 100px section gaps — letting landscape photography and short editorial headlines command attention. No shadows, no gradients, no decorative chrome: the product and the places it goes are the interface. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Cream | `#faf6ef` | `--color-warm-cream` | Primary page canvas, card surfaces — warm off-white replaces stark white to soften the photography-first layout and avoid the cold SaaS feel | | Pure White | `#ffffff` | `--color-pure-white` | Image borders, elevated card surfaces, contrast panel behind embedded media | | Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders, icon strokes, navigation typography — the structural anchor of the entire system | | Pebble | `#999999` | `--color-pebble` | Muted body text, secondary borders, disabled states — the one step above placeholder gray |

# Aurora — Style Reference > chân trời tự chủ lúc bình minh — buồng lái trắng tinh nhìn ra xa lộ ngập nắng, một mặt đồng hồ xanh điện trên dashboard. **Theme:** light Giao diện của Aurora giống một xa lộ mở: canvas trắng trải rộng, chữ navy đậm đọc như vạch kẻ đường, và một điểm nhấn xanh điện duy nhất báo hiệu hành động giống như đèn xi-nhan. Hero là góc nhìn dashcam full-bleed với headline trắng 90px đè lên — ảnh chụp đảm nhận vai trò cảm xúc, UI đứng sang một bên. Bên dưới fold, bề mặt chuyển sang card xám nhạt mát, đoạn văn hiện dần từng chữ khi người dùng scroll, và gradient cyan-to-cobalt đặc trưng chỉ dành cho những khoảnh khắc xứng đáng với tên tuổi thương hiệu — hiếm hoi, sống động, luôn có chủ đích. Mọi thứ đều là hình chữ nhật với góc bo 8px, không đổ bóng, không trang trí hoa mỹ; chiều sâu đến từ việc xếp lớp màu sắc và tỷ lệ, không bao giờ đến từ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Horizon Navy | `#001733` | `--color-horizon-navy` | Văn bản chính, nav text, heading fills, viền ảnh tối, nền section — mực chủ đạo của hệ thống, không bao giờ là đen tuyền | | Signal Blue | `linear-gradient(269.64deg, #18dcdc -20.36%, #006aed 109.5%)` | `--color-signal-blue` | Nền action chính, nút CTA đã fill, trạng thái nav active, nút icon tròn, link accent trên bề mặt tối — cobalt sống động xứng đáng với cú click; Gradient đặc trưng cho những khoảnh khắc định nghĩa thương hiệu — nơi duy nhất cyan xuất hiện, neo giữ nhận diện thị giác | | Cyan Dawn | `#18dcdc` | `--color-cyan-dawn` | Gradient stop cho gradient đặc trưng của Aurora — không bao giờ dùng làm fill đặc, chỉ là nốt mở đầu của dải quang phổ | | Slate Whisper | `#68748d` | `--color-slate-whisper` | Body text phụ, helper copy mờ, meta không active — xám mát lùi lại phía sau Horizon Navy |

# Caldera — Style Reference > Risograph zine trên nền bê tông ấm **Theme:** light Caldera là một brand crypto mang phong cách editorial brutalist: nền canvas bê tông trắng kem ấm áp, display type condensed gần như đen kéo dài tới 189px, và một màu cam rực duy nhất đảm nhận toàn bộ tương tác. Ngôn ngữ thị giác vay mượn từ văn hóa zine thập niên 90 và kỹ thuật in risograph — các chấm halftone chuyển từ cam sang tím trên hero panels và card thumbnails, tạo cảm giác in phẳng thay vì product UI bóng bẩy. Các bề mặt giữ phong cách thấp và mờ: cream cards nổi trên nền đá ấm, border là hairline black thay vì đổ bóng, và góc bo tròn mạnh (40px là bán kính chủ đạo, không phải 8px). Màu sắc được phân bổ hạn chế — phần lớn giao diện là đơn sắc đen-trên-kem, và màu cam chỉ xuất hiện ở nơi người dùng phải hành động, một con số phải nổi bật, hoặc một card phải báo hiệu membership của brand. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Concrete Canvas | `#e2e2df` | `--color-concrete-canvas` | Nền trang — đá xám nhạt ấm áp, bề mặt chủ đạo mà toàn bộ site nằm trên đó | | Cream Card | `#f7f6f2` | `--color-cream-card` | Bề mặt card, stat panels, khối nội dung nâng cao — sáng hơn canvas một bậc | | Ink | `#070607` | `--color-ink` | Headlines, body text, hairline borders, và các đường viền cấu trúc tạo khung editorial cho layout | | Pure Black | `#000000` | `--color-pure-black` | Icon strokes, border dày, và văn bản tối nhất khi Ink chưa đủ đậm |

# Descript — Style Reference > Phòng thu phát thanh gặp tòa soạn báo — nền tối đỏ burgundy sân khấu, headline serif kiểu tòa soạn, tín hiệu on-air màu san hô. **Theme:** mixed Ngôn ngữ thị giác của Descript là mảng tối đỏ burgundy bị cắt bởi hành động đỏ san hô — giống như bên trong buồng thu âm, nơi tường hấp thụ mọi thứ và chỉ còn tín hiệu phát sáng. Màu đen-đỏ burgundy gần như đen `#390a1a` chiếm 70% hero, tạo ra độ tối sân khấu khiến CTA đỏ san hô (`#f73b3b`) trông như đèn báo on-air. Headline dùng Gamuth Display, một serif editorial custom ở 88px — một lựa chọn bất thường cho một sản phẩm SaaS, báo hiệu sự thủ công và sáng tạo nội dung hơn là tiện ích doanh nghiệp. Các phần sáng (`#faf8f7`, một màu trắng ấm) tạo độ tương phản giữa các dải tối mà không bao giờ dùng trắng tinh, giữ bảng màu thống nhất về độ ấm. Tag label như 'AI VIDEO EDITOR' dùng Brett, một typeface custom với tracking rộng 0.04em mô phỏng phong cách chyron phát thanh. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Broadcast Burgundy | `#390a1a` | `--color-broadcast-burgundy` | Nền hero, bề mặt tối chính — tạo độ tối sân khấu khiến CTA san hô đọc như tín hiệu on-air | | On-Air Coral | `#f73b3b` | `--color-on-air-coral` | Nút CTA chính, label phần đang hoạt động — tín hiệu sống động duy nhất trên nền tối đỏ burgundy | | Hot Take Red | `#ff5340` | `--color-hot-take-red` | Highlight văn bản inline, nhấn phụ trong body copy | | Plum Mid | `#651a39` | `--color-plum-mid` | Trạng thái hover nav, nền nút phụ — sáng hơn Broadcast Burgundy một bậc để tạo chiều sâu tương tác |

# CLOU architects — Style Reference > mực trên giấy kem **Theme:** light CLOU architects vận hành trong một vũ trụ hai màu triệt để: kem ấm (#fffffc) và đen tuyệt đối (#000000). Không có màu nào khác được phép xuất hiện trong giao diện — mọi sắc thái còn lại đều đến từ ảnh kiến trúc tràn vào bố cục. Hệ thống được xây dựng trên một geometric sans-serif duy nhất (Circular Std) đẩy đến cực hạn: headline đạt 200px+, letter-spacing thắt chặt mạnh ở tỷ lệ lớn, và line-height nén xuống 0.80 cho display copy. Nền kem được chọn là off-white có chủ đích (không phải #ffffff), giúp tránh sự chói gắt khi đặt cạnh typography đen chủ đạo và mang lại cho trang cảm giác như giấy, như tường gallery ấm áp. Navigation là một thanh đen dày; body là khoảng kem rộng rãi; "trang trí" duy nhất chính là nhiếp ảnh — full-bleed, không khung, chính là dự án thực tế. Đây là một hệ thống thiết kế hầu như không nói gì về mặt thị giác để kiến trúc có thể nói lên tất cả. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Giấy Kem | `#fffffc` | `--color-cream-paper` | Page canvas, bề mặt card, button fills — màu off-white hơi ấm ngăn độ tương phản chói gắt với mực đen, mang lại cho toàn bộ site cảm giác ấm áp của giấy in thay vì cảm giác màn hình kỹ thuật số | | Mực Đen | `#000000` | `--color-ink-black` | Toàn bộ text, border, navigation background, button borders, icon strokes — màu foreground duy nhất trong hệ thống, dùng ở độ bão hòa hoàn toàn, không giảm opacity | ## Tokens — Typography

# Henry — Style Reference > Poster broadside Gothic trên giấy kem ấm. Một trăm phần trăm đơn sắc, không có điểm nhấn màu, toàn bộ cường độ thị giác được tạo ra bởi display type và các đảo ngược mực-giấy full-bleed. **Theme:** mixed Henry Codes mang phong cách broadside biên tập in bằng mực ấm: headline gần đen khắc trên nền giấy kem, xen kẽ với các mảng tối full-bleed nơi serif type màu kem phát sáng. Bảng màu là đơn sắc ấm một trăm phần trăm — không có điểm nhấn màu, không có màu sản phẩm, không có link xanh — mọi quyết định thị giác đều đến từ scale, weight và đảo ngược. Type chính là thương hiệu: một display serif (Louize) đặt thơ và văn xuôi biên tập, một condensed display sans (Manuka) đóng dấu header section ở 200–370px, và một neo-grotesque (Neue Montreal) đảm nhận toàn bộ UI ở 12–24px. Hệ thống spacing hà khắc: bước nhảy 4–32px, một radius duy nhất (12px), không có shadow. Các section lật giữa giấy và mực như một tờ broadsheet, và hầu hết màn hình nên bị chi phối bởi hai hoặc ba từ khổng lồ thay vì ảnh sản phẩm minh họa. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Paper | `#fafafa` | `--color-paper` | Nền trang, bề mặt card, type trong section inverted — nền kem trắng nơi mọi chữ tối nằm trên | | Hairline | `#eeeeee` | `--color-hairline` | Viền card và tile — chỉ hiện khi đặt trên Paper | | Midstone | `#9f9f9f` | `--color-midstone` | Viền nav, viền muted, viền trang trí nhạt trên section tối | | Ash | `#666666` | `--color-ash` | Viền thứ cấp, UI text muted, divider ưu tiên thấp |

# Creative Giants — Style Reference > oversized editorial poster on cream paper **Theme:** light Creative Giants reads like an oversized art-book spread rendered in code: a warm off-white canvas, hairline margins, and display type so large it functions as a poster rather than a heading. The whole system runs on negative space and one weight of light (300) — headlines whisper at 64–84px instead of bolding into shouting, and letter-spacing tightens aggressively (-0.04em) as type grows so the words feel chiseled, not spaced. Chromatic color is rationed into small, saturated hits: vivid magenta, deep teal, powder blue, hot pink, mint, and navy appear as card surfaces or accents, never as background floods. Interactive elements are black-on-cream pills with fully rounded (1440px) radii, and the chrome is almost invisible — a single circular logo mark and a 'Menu' button floating in white space. The visual identity is a production studio's contact sheet: one enormous headline, one full-bleed photograph, one quiet line of meta text. Every other page should follow the same economy. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#fffef7` | `--color-bone-white` | Page canvas, card surfaces, text on dark accents — a warm off-white that replaces pure #ffffff and gives the whole system a paper-like, printed feel | | Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Graphite | `#666666` | `--color-graphite` | Secondary body text, captions, metadata, helper copy — recedes so display type can dominate | | Ash | `#aaaaaa` | `--color-ash` | Input borders, inactive link color, tertiary dividers — soft structural gray that disappears when not needed |

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