A standalone CSS library with 920 classes — optimized to work with the ANTSAND Databoard compiler, where every deployed site ships with these styles by default.
A practical reference for the CSS framework, Databoard contracts, template system, utilities, and AI-readable workflows behind generated ANTSAND sites.
ANTSAND Styles works at every level: a standalone CSS library, a headless Databoard backend, or the full generated-site compiler.
Drop one CSS file into any HTML project. No ANTSAND backend, no build tools, no generated app required.
Use your own frontend while ANTSAND Databoard manages structured content, reusable data, and API-driven updates.
Let ANTSAND generate the HMVC website. Pages, routes, ACL, data mappings, Sass, and deploys stay connected.
These cards are structured data mapped into HTML-shaped fields, then styled by Sass v2 plus board-level Sass.
If Databoard compiles your site, antsand-v2.css is already in every page's
. If you use ANTSAND as a headless CMS with your own frontend, include the library via CDN so your app shares the same design system.For standalone projects or custom frontends, include one CSS file and start with semantic ANTSAND classes. Full installation examples belong in the deeper docs pages.
<link rel="stylesheet" href="https://styles.antsand.com/css/antsand-v2/antsand.css">Start with component identity, then add utilities only where the field needs local layout or polish.
<button class="antsand-btn antsand-btn-primary">Start</button>
<div class="antsand-card antsand-card-shadow p-6">
<h3 class="antsand-card-title">Feature card</h3>
<p class="antsand-card-text">Semantic shell, utility polish.</p>
</div>When you deploy a site through ANTSAND, the styles library is already in the rendered HTML. You style by assigning CSS class names to Databoard fields:
{
"section.container": "antsand-section theme-dark-editorial",
"data.container": "antsand-grid md-grid-cols-3 gap-6",
"data.sub_container": "antsand-card shadow-md transition-all hover-translate-y-1",
"data.h3": "line-clamp-3 font-semibold md-text-xl",
"data.p": "line-clamp-3 opacity-70",
"data.cta": "antsand-btn antsand-btn-primary antsand-btn-sm"
}How it works: The ANTSAND compiler reads a Databoard JSON object containing your content + CSS class assignments. It resolves Volt templates, applies the Header/Body/Footer section contract, compiles Sass, and deploys a production site. The antsand-v2.css stylesheet is auto-included — no manual linking needed.
# 1. Inspect current state
curl -X GET /api/v1/databoards/$BOARD_ID -H "Authorization: Bearer TOKEN"
# 2. Patch CSS classes on fields
curl -X POST /api/v1/databoards/$BOARD_ID/patch \
-H "Authorization: Bearer TOKEN" \
-d '{ "patch_delta": { "datalist.0.css.section.container": "antsand-section theme-dark-corporate" } }'
# 3. Compile utilities (generates only used CSS)
curl -X POST /api/v1/utilities/compile -H "Authorization: Bearer TOKEN"
# 4. Deploy
curl -X POST /api/v1/databoards/$BOARD_ID/deploy -H "Authorization: Bearer TOKEN"Use semantic Sass v2 classes for component identity, then add utility classes for spacing, layout, sizing, and small page-specific adjustments.
Named by role. These classes define what the element is and keep repeated patterns consistent.
Property-driven helpers that tune the semantic structure without rewriting the component.
Buttons are always antsand-btn, never only px-4 py-2 bg-blue. Already using ANTSAND? If Databoard compiles your site, antsand-v2.css is already in every page's head. If you use ANTSAND as a headless CMS with your own frontend, include the CDN so your app shares the same design system.
Copy the getting-started prompt to give your AI agent full context on using ANTSAND Styles — both standalone and with the Databoard compiler.