Loidolt design system
Useful tools, quietly exact.
A Svelte-first component library for dense creative tools and clean everyday applications. Warm surfaces, sharp edges, clear hierarchy, and no Tailwind contract.
86Components
3Packages
AAContrast target
0Runtime CSS deps
Install
npm install @loidolt/theme-svelte /* app.css — once, before your own styles */ @import '@loidolt/theme-svelte/styles.css';
<script lang="ts">
import { Button, Field, Input } from '@loidolt/theme-svelte';
let name = $state('');
</script>
<Field label="Project name">
{#snippet children({ id, describedBy, invalid })}
<Input {id} bind:value={name} aria-describedby={describedBy} aria-invalid={invalid} boxed />
{/snippet}
</Field>
<Button variant="primary">Create project</Button>What the packages are
@loidolt/theme-tokens
Typed colour, type, spacing, sizing, shadow, z-index, motion, and breakpoint values, plus the
generated CSS custom properties and a tested dark theme.
@loidolt/theme-styles
Bundled fonts, the base layer, accessibility helpers, component classes, and layout utilities
— usable on their own from plain HTML.
@loidolt/theme-svelte
The Svelte 5 components, the theme and media runtimes, and the toaster. Everything else comes
with it as a dependency.
What it commits to
Server-side rendering
Ids come from
$props.id(), so server and client markup agree and hydration never
re-labels a control. Nothing touches window during render, and the SSR suite renders
every export to prove it.Accessibility
Focus, portalling, and dismissal come from Bits UI; naming, roles, and contrast are asserted
in test. Every token pair is checked at WCAG AA, in both themes.
Cascade layers
Everything ships inside
@layer loidolt.*, so unlayered application CSS outranks
it. Overriding the system never needs !important.No framework contract
No Tailwind, no icon library, no authentication, no domain code. Tailwind-free