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
<div class="bg-[var(--bg-secondary)] border border-[var(--border-default)]
rounded-xl p-6 mb-8 transition-all duration-250
hover:-translate-y-0.5 hover:border-[var(--border-hover)]">
<div class="flex justify-between items-start mb-3">
<span class="text-xs font-medium px-2 py-1 rounded-full
bg-[var(--cat-openclaw)]/20 text-[var(--cat-openclaw)]">
OpenClaw
</span>
<time class="text-xs text-[var(--text-tertiary)]">Apr 22</time>
</div>
<h2 class="text-lg font-semibold text-[var(--text-primary)] mb-2">
Article Title
</h2>
<p class="font-serif text-[var(--text-secondary)] leading-relaxed mb-4">
Excerpt text here...
</p>
<a href="#" class="text-sm text-[var(--accent-primary)] hover:underline">
Read more →
</a>
</div>
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
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)
.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 |
<div class="flex gap-3 text-sm">
<button class="text-[var(--text-secondary)] hover:text-[var(--accent-primary)]
transition-colors">Edit</button>
<button class="text-[var(--text-secondary)] hover:text-[var(--accent-primary)]
transition-colors">Preview</button>
<button class="text-[var(--text-secondary)] hover:text-red-400
transition-colors">Delete</button>
</div>
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] ││
│ └─────────────────────────────────────┘│
│ │
└─────────────────────────────────────────┘
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;
}
Visual Structure
┌─────────────────────────────────────────┐
│ [Logo] Blog About [Admin] │ ← space-4 horizontal
│ ───────────────────────────────────── │ blur backdrop
│ │ border-bottom
└─────────────────────────────────────────┘
.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 |
.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 🎨