# Blog Component Wireframes โ Content Pipeline v2
**Author:** Daedalus ๐จ
**Date:** 2026-04-22
**Status:** Draft โ for Matt review
**Based on:** `design-v2-spec.md` + `design-tokens/blog-v2.md`
---
## How to Read These Wireframes
Each wireframe shows:
- **Mobile-first layout** (320px base)
- **Spacing annotations** using `--space-*` tokens
- **Component states** (default, hover, etc.)
- **Tailwind equivalents** where applicable
---
## 1. Article Card (List View)
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ [Category Badge] [Date] โ โ space-4 top, space-5 sides
โ โ
โ Article Title Here That โ font: var(--font-body)
โ Might Wrap to Two Lines โ font-size: var(--text-h3)
โ โ font-weight: 600
โ Excerpt text that gives readers โ font: var(--font-display)
โ a preview of the content inside. โ font-size: var(--text-body)
โ โ line-height: 1.75
โ [Read more โ] โ color: var(--accent-primary)
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Spacing & Layout
| Element | Token | Value |
|---------|-------|-------|
| Card padding | `space-5` | 24px |
| Card gap (list) | `space-6` | 32px |
| Title to excerpt | `space-3` | 12px |
| Excerpt to CTA | `space-4` | 16px |
### Component States
**Default:**
- Background: `var(--bg-secondary)`
- Border: `1px solid var(--border-default)`
- Border-radius: `var(--radius-md)` (12px)
**Hover:**
- Transform: `translateY(-2px)`
- Border: `var(--border-hover)`
- Box-shadow: `0 8px 24px rgba(0,0,0,0.3)`
### Tailwind Equivalent
```html
```
### Category Badge Colors
| Category | Tailwind bg | Text color |
|----------|-------------|------------|
| Home Lab | `bg-orange-500/20` | `text-orange-400` |
| OpenClaw | `bg-violet-500/20` | `text-violet-400` |
| AI | `bg-cyan-500/20` | `text-cyan-400` |
---
## 2. Article View (Single Post)
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ [โ Back] [Share] โ โ Header: space-4, sticky
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ [Category Badge] โ โ center-aligned
โ โ
โ Article Title That Spans โ var(--text-hero)
โ Multiple Lines Gracefully โ font-family: var(--font-body)
โ โ font-weight: 700
โ Author Name ยท April 22, 2026 โ var(--text-secondary)
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ 1px border, space-8 margin
โ โ
โ Body text in Source Serif 4 for โ var(--font-display)
โ comfortable reading. Line height โ var(--text-body)
โ at 1.75 for that premium feel. โ line-height: 1.75
โ โ
โ ## Heading Level 2 โ var(--font-body)
โ โ var(--text-h2)
โ More paragraph content here with โ margin-top: var(--space-12)
โ comfortable spacing between sections. โ
โ โ
โ > Blockquote text that's styled โ var(--space-10) margin
โ > with left border and padding โ border-left: 3px solid
โ > for visual emphasis. โ var(--accent-primary)
โ โ
โ ### Heading Level 3 โ var(--text-h3)
โ โ margin-top: var(--space-10)
โ Code block styling: โ var(--font-mono)
โ `inline code` stands out โ bg: var(--bg-tertiary)
โ โ radius: var(--radius-sm)
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ [Related Posts] โ โ After article
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Spacing System (Article Body)
| Element | Token | Value |
|---------|-------|-------|
| Max content width | `content-max` | 680px |
| Hero padding top | `space-12` | 96px |
| Title margin bottom | `space-4` | 16px |
| Meta margin bottom | `space-8` | 32px |
| Paragraph spacing | `p-margin-bottom` | 32px |
| H2 margin top | `h2-margin-top` | 96px |
| H3 margin top | `h3-margin-top` | 64px |
| Blockquote margin | `blockquote-margin` | 64px 0 |
### Typography Mapping
| Element | Font | Size | Weight | Line Height |
|---------|------|------|--------|-------------|
| Article title | `var(--font-body)` | `var(--text-hero)` | 700 | 1.2 |
| Meta text | `var(--font-body)` | `var(--text-caption)` | 400 | 1.5 |
| Body paragraphs | `var(--font-display)` | `var(--text-body)` | 400 | 1.75 |
| H2 | `var(--font-body)` | `var(--text-h2)` | 600 | 1.3 |
| H3 | `var(--font-body)` | `var(--text-h3)` | 600 | 1.3 |
| Inline code | `var(--font-mono)` | 0.9em | 400 | โ |
| Blockquote | `var(--font-display)` | `var(--text-body)` | 400 | 1.75 |
### Code Block Styling
```css
pre, .code-block {
background: var(--bg-tertiary);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-5);
overflow-x: auto;
margin: var(--space-8) 0;
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* Inline code */
p code, li code {
background: var(--bg-tertiary);
padding: 0.1em 0.4em;
border-radius: var(--radius-sm);
color: var(--accent-primary);
}
```
### Link Underline Animation (from spec)
```css
.blog-article-body a {
text-decoration: none;
background-image: linear-gradient(var(--accent-primary), var(--accent-primary));
background-size: 0% 2px;
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background-size var(--transition-fast);
}
.blog-article-body a:hover {
background-size: 100% 2px;
}
```
---
## 3. Admin Panel โ Post List
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Blog Admin [Logout]โ โ header, space-4 padding
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ [+ New Post] โ โ primary action button
โ โ bg: var(--accent-primary)
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ [Draft] โ Article Title Here โโ โ status dot + title
โ โ Apr 22, 2026 ยท Home Lab โโ โ date + category
โ โ [Edit] [Preview] [Delete] โโ โ action buttons
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ [Published] โ Another Article โโ
โ โ Apr 20, 2026 ยท OpenClaw โโ
โ โ [Edit] [Preview] [Delete] โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Post Row Component
| Element | Style |
|---------|-------|
| Container | `bg-secondary`, `border-default`, `radius-md`, `p-4` |
| Status dot | 8px circle โ `bg-yellow-400` draft, `bg-green-400` published |
| Title | `font-body`, `text-body`, `text-primary`, font-weight 500 |
| Meta | `text-caption`, `text-tertiary` |
| Actions | Text buttons, `text-secondary`, hover `accent-primary` |
### Action Buttons
```html
```
---
## 4. Admin Panel โ Editor (Modal/Drawer)
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ [Save] โ โ close + save
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ โ
โ Title โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ Enter post title... โโ โ input, large font
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ Category โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ [Dropdown: Home Lab โผ] โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ Status โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ [Draft โผ] โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ Content (Markdown) โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โโ โ textarea, mono font
โ โ Write your content here... โโ
โ โ โโ
โ โ โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โ Featured Image (optional) โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ URL: https://... โโ
โ โ [Preview] โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Form Input Styling
```css
input[type="text"],
select,
textarea {
width: 100%;
background: var(--bg-tertiary);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
font-family: var(--font-body);
transition: border-color var(--transition-fast);
}
input[type="text"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Title input โ larger */
input.post-title {
font-size: var(--text-h3);
font-weight: 600;
padding: var(--space-4);
}
/* Textarea โ mono for markdown */
textarea.content {
font-family: var(--font-mono);
font-size: var(--text-caption);
min-height: 300px;
resize: vertical;
}
```
---
## 5. Header Component
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ [Logo] Blog About [Admin] โ โ space-4 horizontal
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ blur backdrop
โ โ border-bottom
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Glassmorphism Header
```css
.blog-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10, 12, 16, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border-default);
}
```
### Nav Links
| State | Style |
|-------|-------|
| Default | `text-secondary`, `font-body` |
| Hover | `text-primary` |
| Active | `text-accent-primary`, font-weight 500 |
```css
.blog-nav a {
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: 500;
transition: color var(--transition-fast);
}
.blog-nav a:hover,
.blog-nav a.active {
color: var(--text-primary);
}
.blog-nav a.active {
color: var(--accent-primary);
}
```
---
## 6. Digest Card (for Telegram/notification)
### Visual Structure
```
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๐ HoffDesk Blog Digest โ โ header
โ April 22, 2026 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ ๐ Building a NAS on a Budget โ โ category icon + title
โ Quick guide to cheap storage... โ โ excerpt (truncated)
โ โ
โ ๐ค OpenClaw v2 Released โ
โ Major update with new features... โ
โ โ
โ [View all posts โ] โ โ CTA
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
```
### Digest Card Tokens
| Element | Token | Value |
|---------|-------|-------|
| Card bg | `bg-secondary` | `#111318` |
| Card border | `border-default` | `rgba(255,255,255,0.08)` |
| Card radius | `radius-md` | 12px |
| Card padding | `space-5` | 24px |
| Title size | `text-body` | clamp(1rem, 1.5vw, 1.125rem) |
| Excerpt size | `text-caption` | 14px |
| Category icon | โ | Emoji prefix |
---
## Implementation Files
These wireframes map to this file structure:
```
blog/
โโโ templates/
โ โโโ base.html.j2 โ Google Fonts, header
โ โโโ blog_index.html.j2 โ Article list (wireframe 1)
โ โโโ blog_article.html.j2 โ Single article (wireframe 2)
โ โโโ admin/
โ โโโ admin.html.j2 โ Post list (wireframe 3)
โ โโโ post_editor.html.j2โ Editor modal (wireframe 4)
โโโ static/
โโโ blog.css โ All new tokens + components
```
---
## Next Steps
- [ ] **Socrates:** Implement design tokens in `blog/static/blog.css`
- [ ] **Socrates:** Update `base.html.j2` with Google Fonts
- [ ] **Daedalus:** Review rendered result against wireframes
- [ ] **Matt:** Final approval
---
โ Daedalus ๐จ