jonas_pelzer___style_reference: info: "> Tờ broadsheet văn học trên giấy trắng. Một headline display duy nhất weight-400 tạo nên giọng điệu — chữ roman và italic đan xen trong cùng một hơi thở, toàn bộ type dùng chung một weight, và một lượng mực tím được tiết chế tạo điểm nhấn cho một trang gần như không màu." theme: "light" info: "Một portfolio editorial văn học được thể hiện như một tờ broadsheet typographic trên giấy trắng. Trang web mang phong cách một spread tạp chí: một headline display weight-400 duy nhất pha trộn roman và italic để tạo nhịp điệu mà không cần dùng bold, mỗi đoạn văn đều có vị trí xứng đáng, và toàn bộ hệ thống màu sắc được rút gọn chỉ còn một màu mực tím duy nhất. Màu tím thương hiệu (#3502ff) được sử dụng có chừng mực — chỉ xuất hiện ở active nav pill, accent border active, và một deep text link duy nhất — trong khi một lớp lavender nhạt hơn (#c2b3ff) tạo sự đa dạng bề mặt trên các accent card. Khoảng cách được nén chặt (compact) và grid có tính chủ kiến (opinionated), với border-radius góc cứng 12px ở mọi nơi và hầu như không có độ sâu đổ bóng. Hệ thống thị giác đề cao sự tiết chế: khoảng trống âm, type weight và một màu nhấn duy nhất làm công việc mà màu sắc, độ cao và trang trí thường làm ở nơi khác." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, nền nav |" info: "| Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, border dạng hairline, divider, list separator |" info: "| Mist Gray | `#d4d6dd` | `--color-mist-gray` | Border phụ, đường viền card, divider không hoạt động |" info: "| Violet Ink | `#3502ff` | `--color-violet-ink` | Violet outline accent cho tag, divider và cạnh UI đang focus. Không nâng cấp nó thành màu CTA chính |" info: "| Lavender Wash | `#c2b3ff` | `--color-lavender-wash` | Bề mặt accent card, khối trang trí lớn, nền section mềm |" info: "| Lavender Whisper | `#d7ccff` | `--color-lavender-whisper` | Border nav pill dạng outline, border ghost button — tím ở độ bão hòa 1/4 để các action không hoạt động thì thầm thay vì la hét |" info: "| Deep Iris | `#5d35ff` | `--color-deep-iris` | Text accent màu tím cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp nó thành màu CTA chính |" tokens___typography: scope___display__heading__nav__button___mang_toàn_bộ_giọng_điệu_cấu_trúc_và_tương_tác__chỉ_tồn_tại_weight_400__font_không_cố_gắng_to_hơn__nó_giữ_bình_tĩnh_ngay_cả_ở_42px_vì_letter_spacing_mở_rộng_xung_quanh_nó__nav_và_button_giữ_ở_13_14px__hero_display_đạt_42px_____font_scope: - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk" - "**Weights:** 400" - "**Kích thước:** 13px, 14px, 17px, 22px, 42px" - "**Line height:** 1.00–1.20" - "**Letter spacing:** 0.02em ở 17–22px, 0.036em ở 13–14px" - "**OpenType features:** `\"ss01\" on, \"cv01\" on, \"tnum\" on`" - "**Vai trò:** Display, heading, nav, button — mang toàn bộ giọng điệu cấu trúc và tương tác. Chỉ tồn tại weight 400; font không cố gắng to hơn, nó giữ bình tĩnh ngay cả ở 42px vì letter-spacing mở rộng xung quanh nó. Nav và button giữ ở 13–14px; hero display đạt 42px." signifier___body_copy__link__list_item__footer__đoạn_văn_dài___giọng_đọc__minimum_lớn_hơn_một_chút_15px_so_với_scope_ở_13px__và_là_font_duy_nhất_xuất_hiện_ở_dạng_italic_trong_hero_headline_pha_trộn_scope_roman_với_signifier_italic__được_sử_dụng_có_chừng_mực_ở_400__weight_400_ở_42px_là_một_lựa_chọn_editorial__không_phải_giới_hạn_____font_signifier: - "**Thay thế:** Source Serif Pro, Tiempos Text, Söhne Mono" - "**Weights:** 400" - "**Kích thước:** 15px, 16px, 18px, 22px, 25px, 42px" - "**Line height:** 1.00–1.20" - "**Letter spacing:** 0.02em" - "**OpenType features:** `\"kern\" on, \"liga\" on, \"onum\" on`" - "**Vai trò:** Body copy, link, list item, footer, đoạn văn dài — giọng đọc. Minimum lớn hơn một chút (15px) so với Scope ở 13px, và là font duy nhất xuất hiện ở dạng italic trong hero (headline pha trộn Scope roman với Signifier italic). Được sử dụng có chừng mực ở 400; weight 400 ở 42px là một lựa chọn editorial, không phải giới hạn." type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| caption | 13px | 1.2 | 0.47px | `--text-caption` |" info: "| body-sm | 15px | 1.2 | 0.3px | `--text-body-sm` |" info: "| body | 17px | 1.2 | 0.34px | `--text-body` |" info: "| subheading | 22px | 1.1 | 0.44px | `--text-subheading` |" info: "| heading | 25px | 1.1 | 0.5px | `--text-heading` |" info: "| display | 42px | 1 | 0.84px | `--text-display` |" tokens___spacing___shapes: đơn_vị_cơ_bản: "4px" mật_độ: "compact" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 4 | 4px | `--spacing-4` |" info: "| 16 | 16px | `--spacing-16` |" info: "| 20 | 20px | `--spacing-20` |" info: "| 40 | 40px | `--spacing-40` |" info: "| 64 | 64px | `--spacing-64` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| nav | 12px |" info: "| cards | 12px |" info: "| small | 3.5px |" info: "| buttons | 12px |" shadows: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| sm | `rgba(53, 2, 255, 0.1) 0px 1px 4px 2px` | `--shadow-sm` |" layout: - "**Page max-width:** 1400px" - "**Section gap:** 64px" - "**Card padding:** 16px" - "**Element gap:** 8px" components: editorial_display_headline: vai_trò: "Tuyên ngôn typographic cho hero section" info: "Scope 42px weight 400 ở dạng roman và italic xen kẽ trong cùng một câu, letter-spacing 0.02em, màu Ink Black trên Paper White. Điểm nhấn đặc trưng: các từ như 'is a', 'for' và 'and' chuyển sang italic Signifier trong khi các từ nội dung giữ nguyên roman Scope. Căn trái, không bao giờ căn giữa. Padding 20px bên dưới đến đoạn văn đầu tiên." active_nav_pill: vai_trò: "Chỉ báo trang hiện tại trong nav strip" info: "12px radius, fill #3502ff (Violet Ink), text 13px Scope weight 400, màu #ffffff, padding 6px 14px, letter-spacing 0.036em. Element màu sắc đậm duy nhất trên trang; nó xứng đáng với màu sắc của mình bằng cách đánh dấu vị trí người dùng đang ở." inactive_nav_pill: vai_trò: "Nav item phụ" info: "12px radius, fill trong suốt, border 1px #d7ccff (Lavender Whisper), text 13px Scope weight 400 màu Ink Black, padding 6px 14px, letter-spacing 0.036em. Ghost outline — yên tĩnh, lùi lại phía sau active pill." project_card_white: vai_trò: "Card mục project mặc định" info: "12px radius, fill #ffffff, border hairline 1px màu Mist Gray (#d4d6dd), padding 16px. Ảnh project lấp đầy phần trên, title và meta bằng Signifier 15–16px Ink Black. Không có shadow; border đảm nhận vai trò độ cao." project_card_lavender_fill: vai_trò: "Accent surface card, grid slot nổi bật" info: "12px radius, fill solid #c2b3ff (Lavender Wash), không border, padding 16px. Hoạt động như một khối màu trong grid — cùng kích thước với card trắng nhưng đảo ngược thành accent trang trí. Sử dụng tiết chế: tối đa một cái mỗi hàng." body_paragraph: vai_trò: "Mô tả hero, copy dạng đoạn văn dài" info: "Signifier 17–18px weight 400, line-height 1.2, letter-spacing 0.02em, Ink Black trên Paper White. Căn giữa hoặc căn trái trong một cột ~640px. Không có bold, không có italic nhấn mạnh inline — sự nhấn mạnh đến từ hệ thống phân cấp type xung quanh, không phải weight." feature_card_magazine_layout: vai_trò: "Trình diễn project lớn với typography và image grid" info: "12px radius, bề mặt trắng với border hairline Mist Gray, layout nội bộ: title display cỡ lớn có dotted (Scope 25–42px), subhead body bằng Signifier, 2×2 image thumbnail grid bên dưới. Xử lý project như một spread tạp chí thay vì một tile." year_index_list: vai_trò: "Dòng thời gian project theo thứ tự thời gian trong footer" info: "Hàng ngang các nhãn năm 2 chữ số (01, 02, 03 … 09), mỗi nhãn 14px Scope weight 400, letter-spacing 0.036em, Ink Black, cách nhau bởi gap 16px. Năm hiện tại được tô sáng bằng Violet Ink. Hoạt động như cả navigation và archive." footer_link_group: vai_trò: "Link social và liên hệ" info: "Nhóm inline các link Signifier 11–15px, padding-right 15px giữa các item, Ink Black, divider hairline 1px phía trên. Link chuyển sang Deep Iris (#5d35ff) khi hover — nơi duy nhất Deep Iris xuất hiện." inline_text_link: vai_trò: "Link tham chiếu inline trong body copy" info: "Signifier ở kích thước body, Ink Black với underline 1px, padding-right 15px khi được nhóm. Underline là cách xử lý link duy nhất — không thay đổi màu ở trạng thái nghỉ; màu xuất hiện khi hover qua Deep Iris." do_s_and_don_ts: do: - "Đặt mọi text element ở weight 400 — không bold, không semi-bold. Hệ thống phân cấp đến từ kích thước và letter-spacing, không bao giờ từ weight." - "Chỉ sử dụng Violet Ink (#3502ff) cho active nav pill và một brand mark chính duy nhất trên mỗi trang. Không bao giờ dùng làm fill nền button trên các bề mặt khác." - "Kết hợp Scope (sans) cho heading/nav với Signifier (serif/italic) cho body — và pha trộn roman với italic trong cùng một câu display để tạo ra âm nhạc typographic." - "Áp dụng 12px radius cho mọi element tương tác: nav pill, button, card. Sự nhất quán chính là thiết kế." - "Đặt tất cả text trên Paper White (#ffffff) và chỉ sử dụng Lavender Wash (#c2b3ff) cho full-bleed accent card fill, không bao giờ dùng làm nền text hoặc row striping." - "Sử dụng border hairline 1px (Mist Gray #d4d6dd hoặc Ink Black #000000) thay vì shadow để phân cách. Shadow duy nhất được phép là shadow pha tím rgba(53,2,255,0.1) trên active nav." - "Giữ section gap ở 64px và để trang thở với lề trái/phải rộng rãi — padding compact chỉ áp dụng bên trong component, không áp dụng giữa chúng." don_t: - "Đừng giới thiệu bất kỳ weight nào khác ngoài 400. Không 500, 600, 700. Hệ thống có một giọng nói duy nhất." - "Đừng sử dụng Violet Ink (#3502ff) làm fill nền button cho CTA chung — active nav pill là nơi duy nhất fill đó xuất hiện." - "Đừng thêm drop shadow ngoài shadow nav pha tím duy nhất. Card và panel phải dựa vào hairline border để xác định ranh giới." - "Đừng căn giữa hero headline. Nó luôn được căn trái, theo phong cách tạp chí. Căn giữa sẽ giết chết giọng điệu editorial." - "Đừng sử dụng border-radius trên 12px. Trang web sắc sảo và có tính kiến trúc, không mềm mại hay vui tươi." - "Đừng giới thiệu thêm accent color. Bảng màu là đen, trắng, xám và ba sắc tím — đó là toàn bộ vốn từ vựng về màu sắc." - "Đừng sử dụng negative letter-spacing. Tất cả type đều dùng positive tracking (0.02em–0.036em); tracking chặt thuộc về một hệ thống thiết kế khác." surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|---------|---------|" info: "| 0 | Paper | `#ffffff` | Nền trang mặc định, canvas nội dung chính |" info: "| 1 | Lavender Block | `#c2b3ff` | Bề mặt accent card, khối màu trang trí, wash cho mục nổi bật |" info: "| 2 | Ink Ground | `#000000` | Band footer, nav strip — reverse tối cho terminal UI |" elevation: - "**Active Nav Pill:** `rgba(53, 2, 255, 0.1) 0px 1px 4px 2px`" imagery: info: "Hình ảnh do project dẫn dắt và mang tính editorial: ảnh kiến trúc và sản phẩm, chủ yếu là ánh sáng ban ngày và ánh sáng tự nhiên, được trình bày dưới dạng crop chặt chẽ không có bối cảnh lối sống. Featured project card sắp xếp ảnh trong một grid 2×2 giống như layout tạp chí. Một khối accent màu vàng xuất hiện trong một section (có thể là hero của project), và các khối lavender đóng vai trò là các lớp màu trang trí thay vì container ảnh. Trang chủ yếu là text — ảnh hỗ trợ tác phẩm, không thay thế nó." layout: info: "Mô hình trang là max-width có giới hạn (~1400px), editorial căn trái thay vì marketing căn giữa. Hero là một khối typographic ở bên trái, không phải ảnh full-bleed hay split layout. Bên dưới hero, một grid 3 cột pha trộn project card trắng với accent block lavender — ít nhất một lavender fill mỗi hàng tạo nhịp điệu thị giác. Các section được phân cách bởi gap 64px rộng rãi trên Paper White. Nav strip là một hàng pill ngang ở cuối trang (không phải đầu trang), với active pill fill tím và phần còn lại ghost outline. Một year index (01–09) và social footer kết thúc trang. Không sidebar, không sticky header, không mega-menu — cấu trúc gần với layout in ấn hơn là web app." agent_prompt_guide: quick_color_reference: - "text: #000000 (Ink Black)" - "background: #ffffff (Paper White)" - "border: #d4d6dd (Mist Gray) cho secondary, #000000 cho structural" - "accent surface: #c2b3ff (Lavender Wash)" - "accent border (ghost): #d7ccff (Lavender Whisper)" - "primary action: #d7ccff (outlined action border)" - "hover/secondary accent: #5d35ff (Deep Iris)" example_component_prompts: - "Xây dựng một hero display headline ở 42px trên nền trắng. Pha trộn Scope weight 400 roman với Signifier italic weight 400 trong cùng một câu (ví dụ: 'JONAS PELZER is a DESIGNER for WEBSITES and DIGITAL PRODUCTS'). Letter-spacing 0.02em, Ink Black (#000000), căn trái, max-width 900px. Body paragraph bên dưới bằng Signifier 18px line-height 1.2, cùng màu, max-width 640px." - "Xây dựng một nav strip với 5 pill button trong một hàng ngang. Cái đầu tiên là active state: 12px radius, fill #3502ff, text trắng Scope 13px weight 400, padding 6px 14px, letter-spacing 0.036em, với shadow duy nhất được phép rgba(53,2,255,0.1) 0px 1px 4px 2px. Bốn cái còn lại là ghost: 12px radius, fill trong suốt, border 1px #d7ccff, text Ink Black Scope 13px, cùng padding." - "Xây dựng một grid project card 3 cột. Cột 1: lavender accent card, 12px radius, fill #c2b3ff, không text, padding 16px — pure color block. Cột 2: white feature card với border 1px Mist Gray, 12px radius, padding 16px, Scope 25px display title + Signifier 15px meta + 2×2 image grid bên dưới. Cột 3: một lavender accent card khác giống cột 1. Gap 16px giữa các cột." - "Xây dựng một year index list dưới dạng một hàng ngang duy nhất: '01 02 03 04 05 06 07 08 09' bằng Scope 14px weight 400, letter-spacing 0.036em, Ink Black, gap 16px giữa các item. Tô sáng năm hiện tại (08) bằng Violet Ink #3502ff. Divider hairline 1px Ink Black phía trên hàng." - "Xây dựng một footer link group: danh sách inline ngang gồm 4–6 link social (ABOUT, AWARDS, CAREER, CONTACT) bằng Signifier 15px weight 400, Ink Black, padding-right 15px giữa các item, cách biệt với nội dung phía trên bởi border 1px Mist Gray. Không có fill nền, không icon — chỉ text." similar_brands: - "**Are.na** — Cùng sự tiết chế editorial, typography một weight và màu sắc được tiết chế — cả hai đều giống như những tờ broadsheet yên tĩnh hơn là product page" - "**Hicksdesign** — Portfolio cá nhân với một accent color duy nhất, hairline border thay vì shadow, và display type pha trộn weight và style trong cùng một câu" - "**Rauno Freiberg** — Layout compact dày đặc, bảng màu accent gần tím, và hệ thống nav nằm ở cuối thay vì đầu trang" - "**Frank Chimero** — Layout magazine-spread, cặp type văn học, và bảng màu gần như không màu với một brand mark màu sắc duy nhất" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-mist-gray: #d4d6dd; --color-violet-ink: #3502ff; --color-lavender-wash: #c2b3ff; --color-lavender-whisper: #d7ccff; --color-deep-iris: #5d35ff; /* Typography — Font Families */ --font-scope: 'Scope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.2; --tracking-caption: 0.47px; --text-body-sm: 15px; --leading-body-sm: 1.2; --tracking-body-sm: 0.3px; --text-body: 17px; --leading-body: 1.2; --tracking-body: 0.34px; --text-subheading: 22px; --leading-subheading: 1.1; --tracking-subheading: 0.44px; --text-heading: 25px; --leading-heading: 1.1; --tracking-heading: 0.5px; --text-display: 42px; --leading-display: 1; --tracking-display: 0.84px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-16: 16px; --spacing-20: 20px; --spacing-40: 40px; --spacing-64: 64px; /* Layout */ --page-max-width: 1400px; --section-gap: 64px; --card-padding: 16px; --element-gap: 8px; /* Border Radius */ --radius-md: 3.5px; --radius-lg: 8.26px; --radius-xl: 12px; /* Named Radii */ --radius-nav: 12px; --radius-cards: 12px; --radius-small: 3.5px; --radius-buttons: 12px; /* Shadows */ --shadow-sm: rgba(53, 2, 255, 0.1) 0px 1px 4px 2px; /* Surfaces */ --surface-paper: #ffffff; --surface-lavender-block: #c2b3ff; --surface-ink-ground: #000000; } tailwind_v4: css: | @theme { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-mist-gray: #d4d6dd; --color-violet-ink: #3502ff; --color-lavender-wash: #c2b3ff; --color-lavender-whisper: #d7ccff; --color-deep-iris: #5d35ff; /* Typography */ --font-scope: 'Scope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-signifier: 'Signifier', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.2; --tracking-caption: 0.47px; --text-body-sm: 15px; --leading-body-sm: 1.2; --tracking-body-sm: 0.3px; --text-body: 17px; --leading-body: 1.2; --tracking-body: 0.34px; --text-subheading: 22px; --leading-subheading: 1.1; --tracking-subheading: 0.44px; --text-heading: 25px; --leading-heading: 1.1; --tracking-heading: 0.5px; --text-display: 42px; --leading-display: 1; --tracking-display: 0.84px; /* Spacing */ --spacing-4: 4px; --spacing-16: 16px; --spacing-20: 20px; --spacing-40: 40px; --spacing-64: 64px; /* Border Radius */ --radius-md: 3.5px; --radius-lg: 8.26px; --radius-xl: 12px; /* Shadows */ --shadow-sm: rgba(53, 2, 255, 0.1) 0px 1px 4px 2px; }