# Officevibe > Officevibe — Style Reference ## Prompt Content ``` # Officevibe — Style Reference > Editorial journal trên giấy kem ấm. Hãy nghĩ về một bài luận HR sâu sắc được thể hiện dưới dạng sản phẩm — serif italics thì thầm xuyên qua giao diện xanh hiện đại. **Theme:** light Workleap Officevibe nói bằng giọng editorial điềm tĩnh: một canvas kem ấm, khoảng trắng rộng rãi, và display type serif mang lại cho sản phẩm cảm giác văn học, gần như viết tay đầy uy tín. Bảng màu xoay quanh hai tông xanh — một xanh navy đậm như mực cho heading, thẻ tối, và trọng lượng editorial, và một xanh electric rực rỡ dành riêng cho button và các điểm nhấn tương tác. Bề mặt mềm mại như giấy với đường viền kem thay vì xám; các góc được bo tròn nhẹ nhàng (thẻ 16px, pill button 100px). Những từ serif in nghiêng nằm giữa headline sans-serif ("not paying attention", "Everything") là điểm nhấn đặc trưng: chúng phá vỡ giọng SaaS doanh nghiệp và khiến giao diện giống như một tạp chí được biên tập kỹ lưỡng. Mật độ thoải mái; widget chat được neo ở cuối mỗi màn hình là một phần của bản sắc, không phải thứ thêm vào sau. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ink Navy | `#0c1754` | `--color-ink-navy` | Display heading, thẻ tính năng tối, nền footer, body text trên canvas sáng — màu có trọng lượng editorial, dùng ở bất cứ đâu trang cần cảm giác được cân nhắc thay vì trang trí | | Electric Cobalt | `#2545ff` | `--color-electric-cobalt` | Điểm nhấn tím phụ 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 CTA chính | | Charcoal | `#171417` | `--color-charcoal` | Body text và heading chính, nav text, icon stroke trên bề mặt sáng | | Warm Canvas | `#f9f8f6` | `--color-warm-canvas` | Nền trang, bề mặt footer, thẻ fill mềm, nền input — màu trắng kem ấm thống nhất | | Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ nâng cao, button text, nền nav, input field, icon fill trên nền tối | | Cream Border | `#f0e9e1` | `--color-cream-border` | Đường chia mảnh, viền thẻ, phân cách section nhẹ — thay thế xám lạnh thông thường để giữ ấm cho trang | | Graphite | `#222222` | `--color-graphite` | Secondary text, button text ở trạng thái outlined/ghost, nav inactive labels | | Stone | `#969696` | `--color-stone` | Helper text mờ, placeholder content, metadata cấp ba | | Smoke | `#cccccc` | `--color-smoke` | Input borders, disabled form states, divider trung tính trên nền trắng | | Lavender Mist | `#eaebf8` | `--color-lavender-mist` | Nền badge pha màu, highlight wash mềm trên bề mặt trắng — một gợi ý nhẹ của xanh electric | ## Tokens — Typography ### Martinaplantijn — Display serif dành riêng cho hero và section headline lớn nhất (40-64px). Các nét italic của nó mang giọng thương hiệu — những từ uốn cong tạo cảm giác cá nhân và editorial, phá vỡ giọng đều đều của SaaS. Thay thế: một humanist serif như GT Super hoặc Tiempos Text. · `--font-martinaplantijn` - **Thay thế:** GT Super Display - **Weights:** 400 - **Kích thước:** 40px, 64px - **Line height:** 1.00-1.10 - **Letter spacing:** normal - **OpenType features:** `"ss01", "ss04"` - **Vai trò:** Display serif dành riêng cho hero và section headline lớn nhất (40-64px). Các nét italic của nó mang giọng thương hiệu — những từ uốn cong tạo cảm giác cá nhân và editorial, phá vỡ giọng đều đều của SaaS. Thay thế: một humanist serif như GT Super hoặc Tiempos Text. ### Abcfavoritvariable — Geometric sans cho sub-heading, step labels, và eyebrow text (16-40px). Tracking chặt ở kích thước lớn (-0.05em) là điểm đặc trưng — nó làm cho kiểu chữ hiện đại và nén lại khi đặt cạnh display serif. Các biến thể ss01/ss04 có thể chuyển đổi chữ 'a' một tầng và đầu mút mở hơn. Thay thế: ABC Diatype Mono hoặc Inter Tight. · `--font-abcfavoritvariable` - **Thay thế:** ABC Diatype - **Weights:** 400, 500 - **Kích thước:** 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 64px - **Line height:** 1.00-1.50 - **Letter spacing:** -0.05em ở 48-64px, -0.02em ở 24-40px - **OpenType features:** `"ss01", "ss04"` - **Vai trò:** Geometric sans cho sub-heading, step labels, và eyebrow text (16-40px). Tracking chặt ở kích thước lớn (-0.05em) là điểm đặc trưng — nó làm cho kiểu chữ hiện đại và nén lại khi đặt cạnh display serif. Các biến thể ss01/ss04 có thể chuyển đổi chữ 'a' một tầng và đầu mút mở hơn. Thay thế: ABC Diatype Mono hoặc Inter Tight. ### Inter — Workhorse cho body copy, button labels, nav items, form fields, captions, và footer text. Giữ trung tính để display serif và Abcfavorit có thể mang cá tính. Các tính năng ss01/ss04 được kế thừa để giữ nhất quán họ typographic trên cả ba mặt chữ. · `--font-inter` - **Thay thế:** Inter - **Weights:** 400, 500, 700 - **Kích thước:** 12px, 14px, 16px, 20px - **Line height:** 1.20-1.60 - **Letter spacing:** normal - **OpenType features:** `"ss01", "ss04"` - **Vai trò:** Workhorse cho body copy, button labels, nav items, form fields, captions, và footer text. Giữ trung tính để display serif và Abcfavorit có thể mang cá tính. Các tính năng ss01/ss04 được kế thừa để giữ nhất quán họ typographic trên cả ba mặt chữ. ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.4 | — | `--text-caption` | | body-sm | 14px | 1.6 | — | `--text-body-sm` | | body | 16px | 1.6 | — | `--text-body` | | subheading | 20px | 1.4 | — | `--text-subheading` | | heading-sm | 24px | 1.4 | -0.48px | `--text-heading-sm` | | heading | 32px | 1.4 | -0.64px | `--text-heading` | | heading-lg | 40px | 1.2 | -0.8px | `--text-heading-lg` | | display | 48px | 1.1 | -2.4px | `--text-display` | | display-lg | 64px | 1 | -3.2px | `--text-display-lg` | ## Tokens — Spacing & Shapes **Base unit:** 8px **Density:** thoải mái ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 8 | 8px | `--spacing-8` | | 16 | 16px | `--spacing-16` | | 24 | 24px | `--spacing-24` | | 32 | 32px | `--spacing-32` | | 40 | 40px | `--spacing-40` | | 48 | 48px | `--spacing-48` | | 56 | 56px | `--spacing-56` | | 64 | 64px | `--spacing-64` | | 80 | 80px | `--spacing-80` | | 128 | 128px | `--spacing-128` | ### Border Radius | Element | Giá trị | |---------|-------| | cards | 16px | | badges | 16px | | images | 24px | | inputs | 16px | | buttons | 100px | ### Layout - **Page max-width:** 1200px - **Section gap:** 80px - **Card padding:** 32px - **Element gap:** 24px ## Components ### Filled Pill Button (Primary) **Vai trò:** Main call-to-action Hình pill với radius 100px, nền Electric Cobalt (#2545ff), chữ Paper White (#ffffff), Inter 16px weight 500, padding 12px 24px. Dùng cho 'Request a demo' và hero CTA. Không shadow — màu sắc tự làm nhiệm vụ. ### Ghost Nav Button **Vai trò:** Secondary navigation link Nền trong suốt, chữ Graphite (#222222), Inter 14px weight 500, không viền. Nằm trong nav bar, dùng padding ngang 16-24px. ### Eyebrow Label **Vai trò:** Section pre-heading Inter 12px weight 700 viết hoa toàn bộ hoặc Abcfavorit 12px weight 500, Charcoal (#171417), letter-spacing 0.12em, nằm cách 16-24px phía trên section heading. Mẫu: 'WORKLEAP OFFICEVIBE' phía trên hero headline. ### Display Headline with Italic Accent **Vai trò:** Hero và section titles Martinaplantijn 48-64px, weight 400, lineHeight 1.0-1.1, Charcoal (#171417) trên nền kem hoặc Paper White trên Ink Navy. Một cụm từ cụ thể trong headline được đặt in nghiêng (ví dụ 'not paying attention', 'Everything') — nét italic này là chữ ký typographic của thương hiệu. ### Step Card — Dark **Vai trò:** Feature step trên nền tối Nền Ink Navy (#0c1754), radius 16px, padding 24-32px. Chứa badge đánh số bằng Electric Cobalt, sub-heading Abcfavorit màu Paper White, và supporting copy màu Lavender Mist (#eaebf8) hoặc trắng với độ mờ 70%. ### Step Card — Light **Vai trò:** Feature step trên nền sáng Nền Paper White (#ffffff), radius 16px, viền kem (#f0e9e1) 1px, padding 24-32px. Thẻ ở giữa trong hàng 3 thẻ — nó giữ trung tính để các biến thể tối và có viền nổi bật. ### Step Card — Bordered Accent **Vai trò:** Feature step có điểm nhấn Nền Paper White (#ffffff), viền Electric Cobalt (#2545ff) 1.5px, radius 16px, padding 24-32px. Dùng cho thẻ 'Act with an AI coach' để thu hút mắt vào khả năng khác biệt nhất. ### Chat Widget **Vai trò:** Persistent AI assistant Cố định ở bottom-center của viewport. Nền Paper White, radius 16px, viền 1px Smoke (#cccccc), shadow mềm. Hàng header chứa avatar hình tròn nhỏ Electric Cobalt, câu hỏi Inter 14px, và ba chip gợi ý dạng pill bên dưới input. Rộng ~360px. ### FAQ Accordion Row **Vai trò:** Expandable question Nền Paper White (#ffffff), viền kem 1px (#f0e9e1) chỉ ở cạnh dưới, padding dọc 24px, câu hỏi Inter 16px weight 500 màu Charcoal (#171417), icon chevron màu Graphite ở bên phải. Mở rộng để hiển thị body copy 16px weight 400. ### Product Dashboard Card **Vai trò:** In-context product screenshot Nền Paper White (#ffffff), radius 16px, shadow nhẹ (0 4px 24px rgba(12,23,84,0.08)). Chứa biểu đồ với vùng fill gradient tím đến san hô, gauge điểm tròn bằng Electric Cobalt và Ink Navy, và các hàng metric với chấm cảm xúc xanh/cam/đỏ. ### Top Navigation Bar **Vai trò:** Global site navigation Nền Warm Canvas (#f9f8f6), Wordmark 'workleap' bên trái bằng Inter 18px weight 700, nav link ngang bằng Inter 14px weight 500 Graphite, 'Log in' dạng ghost link và 'Request a demo' dạng filled pill button bên phải. Cao 64-72px, nằm trực tiếp trên canvas không có đường phân cách. ### Metric Pill Badge **Vai trò:** Status and sentiment indicators Nền Lavender Mist (#eaebf8), chữ Ink Navy (#0c1754), Inter 12px weight 500, radius 16px, padding 4px 10px. Dùng cho category labels và inline tags. ## Do's and Don'ts ### Do - Đặt headline lớn nhất bằng Martinaplantijn 48-64px và in nghiêng một cụm từ bên trong — nét italic là giọng thương hiệu, không phải trang trí. - Dùng Electric Cobalt (#2545ff) độc quyền cho filled action button, active link, và icon quan trọng nhất trên mỗi view; để nó là dấu câu màu duy nhất trên trang. - Kết hợp Ink Navy (#0c1754) với Paper White cho thẻ tính năng tối và footer; không bao giờ dùng xám để xấp xỉ nó. - Mặc định radius pill 100px cho bất kỳ phần tử click nào cần cảm giác dễ tiếp cận (button, tag, suggestion chip). - Dùng radius 16px cho card, image, và chat widget; radius 24px chỉ dùng cho hero illustration lớn. - Giữ canvas ở #f9f8f6 và dùng viền kem #f0e9e1 cho divider — không đưa xám lạnh vào. - Áp dụng letter-spacing -0.05em cho bất kỳ text Abcfavorit nào ở 40px trở lên để geometric sans cảm giác nén và hiện đại khi đặt cạnh serif. ### Don't - Không đặt display headline bằng Inter hoặc Abcfavorit — Martinaplantijn (hoặc humanist serif) là bắt buộc cho giọng editorial. - Không dùng Electric Cobalt (#2545ff) cho body text, border, hoặc background fill lớn — nó mất sức mạnh như một điểm nhấn button. - Không dùng viền xám (#e5e5e5, #d4d4d4) — hệ thống dùng kem ấm (#f0e9e1) cho mọi đường mảnh. - Không thêm box-shadow vào filled button; màu sắc là độ nâng. - Không đưa màu heading thứ ba ngoài Charcoal, Paper White, và Ink Navy — hệ thống hai tông xanh là bảng màu. - Không căn giữa body copy hoặc đặt line-height dưới 1.5 ở kích thước body; cảm giác editorial phụ thuộc vào nhịp đọc rộng rãi. - Không dùng radius vuông hoặc 4px trên card hoặc input — độ mềm 16px là một phần của nhận diện thị giác. ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 0 | Canvas | `#f9f8f6` | Nền trang và footer | | 1 | Paper | `#ffffff` | Thẻ nâng cao, input field, chat widget | | 2 | Ink | `#0c1754` | Thẻ tính năng tối, bề mặt chữ đảo ngược | ## Elevation - **Product Dashboard Card:** `0 4px 24px rgba(12, 23, 84, 0.08)` - **Chat Widget:** `0 8px 32px rgba(12, 23, 84, 0.12)` - **Filled Pill Button:** `none — flat, màu sắc mang trọng lượng` ## Imagery Product screenshot là hình ảnh chính — dashboard mockup hiển thị sentiment score, survey results, và AI chat panel được render ở tỷ lệ lớn và đặt lệch với thẻ trang trí nghiêng phía sau để tạo chiều sâu. Biểu đồ đặc trưng của dashboard dùng vùng fill gradient tím đến san hô trên đường navy, với gauge điểm tròn bằng Electric Cobalt. Không có lifestyle photography; không có stock imagery. Thiết bị đồ họa trang trí duy nhất là thẻ tối xoay nhẹ nhô ra từ phía sau hình ảnh sản phẩm chính, tạo cảm giác editorial nhiều lớp. Icon tối giản, một màu, chỉ dùng Charcoal hoặc Electric Cobalt — không có iconography nhiều màu. ## Layout Max-width ~1200px căn giữa với padding hai bên rộng rãi. Hero là chia 2 cột: cột trái chứa eyebrow label, display headline (với cụm italic), supporting body copy, và filled CTA; cột phải chứa product dashboard mockup, căn giữa theo chiều dọc với text. Phần steps là headline căn giữa trên lưới thẻ 3 cột với badge đánh số và mũi tên vẽ tay kết nối. Phần FAQ chuyển sang layout 2 cột: cột trái cố định với display headline lớn (italic accent ở từ đầu tiên) và cột phải là các hàng accordion. Nhịp dọc dùng ~80px giữa các section chính với luồng liền mạch — không có divider section cứng, chỉ có khoảng trắng và canvas kem ấm giữ mọi thứ lại với nhau. Chat widget được cố định ở bottom-center trên mọi màn hình. ## Agent Prompt Guide **Quick Color Reference** - text: #171417 - background: #f9f8f6 - card surface: #ffffff - border: #f0e9e1 - accent: #2545ff - primary action: không có màu CTA riêng biệt **Example Component Prompts** Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì phát minh màu CTA filled. 2. Xây dựng hàng 3 thẻ tính năng. Thẻ giữa: nền #ffffff, radius 16px, viền 1px #f0e9e1, padding 32px. Thẻ trái: nền #0c1754, radius 16px, padding 32px, chữ trắng. Thẻ phải: nền #ffffff, viền 1.5px #2545ff, radius 16px, padding 32px. Badge đánh số (1, 2, 3) màu #2545ff ở góc trên bên trái mỗi thẻ. 3. Tạo chat widget cố định ghim ở bottom-center: rộng 360px, nền #ffffff, radius 16px, viền 1px #cccccc, shadow 0 8px 32px rgba(12,23,84,0.12). Hàng header có avatar hình tròn 32px #2545ff và câu hỏi Inter 14px. Ba chip gợi ý dạng pill bên dưới: nền #f9f8f6, chữ #171417, radius 100px, padding 8px 14px. 4. Xây dựng hàng accordion FAQ: nền #ffffff, không viền trên/trái/phải, viền dưới 1px #f0e9e1, padding dọc 24px. Câu hỏi Inter 16px weight 500, #171417. Icon chevron bên phải màu #222222. Mở rộng để hiển thị body copy Inter 16px weight 400, #171417, line-height 1.6. 5. Tạo product dashboard card: nền #ffffff, radius 16px, shadow 0 4px 24px rgba(12,23,84,0.08), padding 32px. Bên trong, gauge tròn hiển thị '8.2' màu #2545ff với cung mảnh #0c1754, cạnh biểu đồ vùng với fill gradient tím đến san hô và đường xu hướng navy. ## Similar Brands - **Linear** — Cùng cách tiếp cận: để một màu nhấn sống động duy nhất mang mọi tương tác trên bề mặt sáng sạch. - **Notion** — Chia sẻ mật độ canvas sáng thoải mái, card radius mềm, và primary button hình pill. - **Substack** — Cảm giác editorial với display type serif và nhấn mạnh italic đặt trên nền trắng kem ấm. - **Plausible Analytics** — Sự kiềm chế với một xanh accent duy nhất, product screenshot phẳng làm hero visual, và trang trí tối thiểu. - **Stripe** — Hệ thống hai tông xanh (navy đậm + electric blue) dùng cùng cách: một cho trọng lượng editorial, một cho hành động. ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-ink-navy: #0c1754; --color-electric-cobalt: #2545ff; --color-charcoal: #171417; --color-warm-canvas: #f9f8f6; --color-paper-white: #ffffff; --color-cream-border: #f0e9e1; --color-graphite: #222222; --color-stone: #969696; --color-smoke: #cccccc; --color-lavender-mist: #eaebf8; /* Typography — Font Families */ --font-martinaplantijn: 'Martinaplantijn', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-abcfavoritvariable: 'Abcfavoritvariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --text-body-sm: 14px; --leading-body-sm: 1.6; --text-body: 16px; --leading-body: 1.6; --text-subheading: 20px; --leading-subheading: 1.4; --text-heading-sm: 24px; --leading-heading-sm: 1.4; --tracking-heading-sm: -0.48px; --text-heading: 32px; --leading-heading: 1.4; --tracking-heading: -0.64px; --text-heading-lg: 40px; --leading-heading-lg: 1.2; --tracking-heading-lg: -0.8px; --text-display: 48px; --leading-display: 1.1; --tracking-display: -2.4px; --text-display-lg: 64px; --leading-display-lg: 1; --tracking-display-lg: -3.2px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 8px; --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px; --spacing-128: 128px; /* Layout */ --page-max-width: 1200px; --section-gap: 80px; --card-padding: 32px; --element-gap: 24px; /* Border Radius */ --radius-sm: 2px; --radius-lg: 9px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 100px; /* Named Radii */ --radius-cards: 16px; --radius-badges: 16px; --radius-images: 24px; --radius-inputs: 16px; --radius-buttons: 100px; /* Surfaces */ --surface-canvas: #f9f8f6; --surface-paper: #ffffff; --surface-ink: #0c1754; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-ink-navy: #0c1754; --color-electric-cobalt: #2545ff; --color-charcoal: #171417; --color-warm-canvas: #f9f8f6; --color-paper-white: #ffffff; --color-cream-border: #f0e9e1; --color-graphite: #222222; --color-stone: #969696; --color-smoke: #cccccc; --color-lavender-mist: #eaebf8; /* Typography */ --font-martinaplantijn: 'Martinaplantijn', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-abcfavoritvariable: 'Abcfavoritvariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --text-body-sm: 14px; --leading-body-sm: 1.6; --text-body: 16px; --leading-body: 1.6; --text-subheading: 20px; --leading-subheading: 1.4; --text-heading-sm: 24px; --leading-heading-sm: 1.4; --tracking-heading-sm: -0.48px; --text-heading: 32px; --leading-heading: 1.4; --tracking-heading: -0.64px; --text-heading-lg: 40px; --leading-heading-lg: 1.2; --tracking-heading-lg: -0.8px; --text-display: 48px; --leading-display: 1.1; --tracking-display: -2.4px; --text-display-lg: 64px; --leading-display-lg: 1; --tracking-display-lg: -3.2px; /* Spacing */ --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px; --spacing-128: 128px; /* Border Radius */ --radius-sm: 2px; --radius-lg: 9px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 100px; } ```