Good blog design starts with readable structure.
A brand layer should tune rhythm, color, and type without changing the article contract for every post.
Structure first. Brand second. Post faster.
Sass v2 gives you reusable article shells, callouts, cards, media, galleries, tabs, carousels, code blocks, and image expansion.
Your site branding layer only needs to override tokens and scoped selectors: palette, fonts, spacing, borders, shadows, and the mood of the blog.
The best posts still stay simple. Use these enhancements sparingly when they clarify the writing: a callout for a key idea, a figure for proof, a code block for the real contract, or a card for a related idea.
Use these when the post itself is the product: essays, research, notes, long form tutorials, and documentation. Start with clean paragraphs and headings before adding visual components.
A brand layer should tune rhythm, color, and type without changing the article contract for every post.
Structure first. Brand second. Post faster.
Callouts break up long posts and make research, warnings, source notes, and key decisions visible. Use them for emphasis, not for every paragraph.
Use callouts for claims, caveats, source lists, and action summaries inside long posts.
Use these for blog homepages, tag pages, related posts, newsletter previews, and syndicated excerpts.
Use reusable contracts, scoped brand classes, and deployment checks instead of one-off page CSS.
Use media classes when a post needs diagrams, screenshots, visual proof, or image-heavy storytelling.
For Notes and blog detail pages, write clean HTML directly. Use code styling classes when the post needs API calls, JSON, Sass, shell commands, generated HTML, or verifier output.
<section class="antsand-code-preview">
<div class="antsand-code-header">
<span class="antsand-code-label">Deployment check</span>
<span class="antsand-code-lang">bash</span>
</div>
<pre class="antsand-code-pre"><code>curl /api/v1/databoards/{id}/verify-deployment</code></pre>
</section>Use interactive components sparingly inside posts when they clarify alternatives, steps, before/after examples, diagrams, or copy-to-AI workflows.
Use this when asking an AI agent to draft or convert a blog post for ShivasNotes, ANTSAND Blog, or another generated site.
Write this blog post as ANTSAND-ready HTML for Notes/blog detail rendering.
Rules:
- Use semantic HTML: article, section, h2, h3, p, ul, ol, blockquote, figure, figcaption, pre, code.
- Prefer p tags for paragraphs. Do not wrap every paragraph in generic div tags.
- Use div only for actual layout widgets, cards, callouts, galleries, tabs, or custom preview blocks.
- Keep the article body inside .antsand-blog-content or .antsand-article.
- Use .antsand-blog-lede for the opening paragraph.
- Use .antsand-blog-callout or .antsand-callout-* for important notes, warnings, source notes, and conclusions.
- Use .antsand-blog-figure for images and include alt text plus figcaption.
- Use .antsand-code-preview with pre/code for code examples.
- Use .blog-card, .blog-card-meta, .blog-card-tag, and .blog-card-excerpt for related posts or summaries.
- Keep brand-specific colors out of inline styles unless explicitly requested. Use the site brand class such as .shivasnotes-blog or .antsand-blog-brand.
- Return clean HTML only, ready to paste into ANTSAND Notes or a blog content field.
Output structure:
<article class="antsand-blog-content antsand-blog-content-editorial">
<p class="antsand-blog-lede">...</p>
<section>
<h2>...</h2>
<p>...</p>
</section>
<section class="antsand-blog-callout">
<h3>...</h3>
<p>...</p>
</section>
</article>Sass v2 gives the structure. Your blog brand layer should override only the scoped selectors and variables that make the site feel like ShivasNotes, ANTSAND Blog, Robotics, or any other property.
.shivasnotes-blog {
--antsand-blog-accent: #b90000;
--antsand-blog-soft: #fff0f0;
--antsand-blog-heading: #111111;
--antsand-blog-text: #222222;
--antsand-blog-measure: 760px;
}
.shivasnotes-blog .blog-card-avatar {
background: #b90000 !important;
}
.shivasnotes-blog .blog-media-header .media-header-overlay {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.76),
rgba(0, 0, 0, 0.44),
rgba(0, 0, 0, 0.16)
) !important;
}
.shivasnotes-blog .antsand-blog-callout {
border-left-color: #b90000;
}Blog details usually render saved HTML directly. Databoard mapping is still useful when the blog home, tag pages, cards, or documentation pages are generated from section data.
{
"css": {
"section": {
"container": {
"css_class": "antsand-section shivasnotes-blog"
},
"wrapper": {
"css_class": "antsand-container"
}
},
"data": {
"sub_container": {
"css_class": "blog-card shivasnotes-blog-card"
},
"description": {
"css_class": "antsand-blog-content antsand-blog-content-editorial"
},
"code_block": {
"css_class": "antsand-code-preview shivasnotes-code"
}
}
}
}