Components

The base surface for everything:border border-zmoki-stone-200 +bg-white shadow-sm. A card is defined by a soft stone border plus a subtle shadow, with rounded corners. Compose them into agrid + gap-4.

<div class="rounded-xl border border-zmoki-stone-200 bg-white p-6 shadow-sm">…</div>

Links carry the green accent, with a clean underline. In prose, thedata-* attributes are added automatically by the rehype pipeline.

• Internal linkdefault
• External link[data-external]
• Resource link[data-resource]
• Anchor link[data-anchor]

One reusableButton.astro, built from pure Tailwind utilities. It renders a<button>, or an<a> when given an href (a button-like link). Three variants — primary (green fill), secondary (white + soft stone border), and inverse (white, for use on an green band) — in two sizes (md / lg).

<Button href="/signup" variant="primary" size="lg">Get started</Button>

The top nav and footer wrap every page (BaseLayout). A soft bottom border under the nav and a soft top border above the footer (border-b / border-t border-zmoki-stone-200), the brand mark (public/brand-mark.svg) linking home, medium-weight links, and a rounded green CTA pill.

FeaturesBlogGet started

page content

© Claravine 2026Privacy · Terms · Source

The home page stacks three blocks: a centered hero with CTAs, a soft feature grid, and an green closing CTA band. PostCard is the blog-list item.

Clean sans, normal case, muted stone — used for dates, Previous / Next nav, section eyebrows, and the footer. Rendered intext-zmoki-stone-500.