01 / Foundations
Blueprint canvas, paper surfaces, semantic colors. All values come from the shared theme.
Paper palette · Block & ToolShell
base-100base-200base-300base-contentprimarysecondaryaccentneutralinfosuccesswarningerrorBlueprint palette · site canvas
base-100base-200base-300base-contentprimarysecondaryaccentneutralinfosuccesswarningerrorTypography
Page title
Section title
Body text for tool instructions and content.
Supporting text and field hints.
Field label
Spacing & shape
8px · 2 12px · 3 16px · 4 24px · 6 32px · 8 4px base unit. Controls use radius-field; panels use radius-box. Icons: Lucide, 16–20px.
02 / Controls
Shared Button, Field and Input components. Try typing, changing a selection, or navigating with the keyboard.
Actions
States
Selection
A short, visible hint linked to the input.
Native numeric input, with min and max.
Enter a valid URL. This is an example error.
Usage · 02 / Controls
import Button from '$lib/components/Button.svelte';
import Field from '$lib/components/Field.svelte';
import Input from '$lib/components/Input.svelte';
<Button variant="primary" onclick={save} loading={saving}>Save</Button>
<Button selected={enabled} onclick={() => enabled = !enabled}>Enabled</Button>
<Field id="name" label="Name" hint="Shown in the result." error={error}>
{#snippet children(attributes)}
<Input {...attributes} bind:value={name} required />
{/snippet}
</Field>03 / Feedback
Notice provides semantic status messages. Pair color with text and an icon so meaning is never conveyed by color alone.
Badges · daisyUI
Usage · 03 / Feedback
import Notice from '$lib/components/Notice.svelte';
<Notice tone="error">{error}</Notice>
<Notice tone="success">Saved.</Notice>04 / Composition
ToolShell owns the page header and spacing; Block owns the paper panel. The Steam Widget Image tool uses these same components.
Result
Usage · 04 / Composition
import ToolShell from '$lib/components/ToolShell.svelte';
import Block from '$lib/components/Block.svelte';
<ToolShell title="Tool name" description="What the tool does.">
<div class="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]">
<Block><!-- Input and result --></Block>
<Block><!-- Settings --></Block>
</div>
</ToolShell>