site-kit

foundation v0.1.0

Color — neutrals

--sa-gray-50
#f9fafb
--sa-gray-100
#f3f4f6
--sa-gray-200
#e5e7eb
--sa-gray-300
#d1d5db
--sa-gray-400
#9ca3af
--sa-gray-500
#6b7280
--sa-gray-600
#4b5563
--sa-gray-700
#374151
--sa-gray-800
#1f2937
--sa-gray-900
#111827
--sa-gray-950
#030712

Color — semantic

--sa-accent
#1e3a5f
--sa-accent-hover
derived
--sa-bg
gray-50
--sa-bg-card
#ffffff
--sa-border
gray-200
--sa-code-bg
gray-100
--sa-code-block-bg
#1e1e1e

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body paragraph in Itim. The quick brown fox jumps over the lazy dog. Strong and emphasis still flow naturally inline. Inline code uses JetBrains Mono with a subtle background.

Links look like this and pick up --sa-accent automatically.

fn quickstart() -> Result<()> {
    let runtime = WaferRuntime::new()?;
    runtime.serve("0.0.0.0:8090").await
}
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

Spacing

--sa-space-1 (0.25rem)
--sa-space-2 (0.5rem)
--sa-space-3 (0.75rem)
--sa-space-4 (1rem)
--sa-space-6 (1.5rem)
--sa-space-8 (2rem)
--sa-space-12 (3rem)
--sa-space-16 (4rem)
--sa-space-24 (6rem)

Radii

--sa-radius-sm
--sa-radius-md
--sa-radius-lg

Shadows

--sa-shadow-sm
--sa-shadow-md

.sa-prose demo

How prose flows in site-kit

Long-form text picks up its rhythm from .sa-prose: vertical spacing scales with heading level, lists indent further than top-level paragraphs, and code blocks adopt the dark surface treatment without manual styling.

What gets styled

Direct children of .sa-prose get the rhythm rules. Nested elements (a list inside a blockquote, say) keep their own spacing, so reusable widgets dropped into prose don't fight the article rhythm.

Override surface

Sites override --sa-accent on :root after loading the kit. Hover and focus states derive automatically — no per-site recolouring.

:root { --sa-accent: #fe6627; }   /* one declaration */
  • Tokens are the contract.
  • Element styles are the defaults.
  • Utilities (.sa-container, .sa-prose) are the only kit-shipped class names.