4 projects · 7 packages · one contract
A styling system, two component libraries and a syntax highlighter for Svelte 5 and SvelteKit. Every package works on its own. None of them needs a framework underneath.
Every package
Take one. Take the stack.
All independently installable, all MIT, none requiring the others.
A composition styling system, shipped as plain CSS and as editable Sass. The class registry is the public API: compose in markup, write no stylesheet.
A token-driven Svelte 5 runes component library. Pick a variant, shape and size with props, and restyle anything with your own CSS — the library ships in a cascade layer, so your styles always win.
Svelte 5 components drawn with characters: graphs, animated terminals, diagrams, and a node-and-edge workflow builder. Dashed frames, block glyphs, monospace type.
Lightweight, Svelte-first syntax highlighting with first-class indented Sass. Returns an HTML string without a DOM, with adapters for Svelte, mdsvex and remark.
Start anywhere
One install, then compose.
Pick your package manager once; every install block on the site follows it.
Styling system. Classes, tokens, CLI, linter and MCP server.
pnpm add -D @fractaldesign/fractalstyler sass<div class="row ycenter xbetween gap-sm pad-md bg-surface border radius-md">
<span class="text-md weight-600">Fractalstyler</span>
<button data-variant="primary" data-shape="modern">Continue</button>
</div>Component library. Components, tokens and transitions.
pnpm add @fractaldesign/fractalsvelte-ui<Button class="cta">Buy</Button>
<style>
:global(.cta) {
background: hotpink;
border-radius: 0;
}
</style>Character-drawn components. Graphs, animations, diagrams and the flow builder.
pnpm add @fractaldesign/machines-ui<script lang="ts">
import '@fractaldesign/machines-ui/style.css';
import { FlowCanvas, loadGraph, SEED_GRAPHS } from '@fractaldesign/machines-ui';
loadGraph('jev', SEED_GRAPHS.jev);
</script>
<!-- FlowCanvas fills its container: give it an explicit height -->
<div style="height: 40rem">
<FlowCanvas />
</div>import { mdsvex } from 'mdsvex';
import { fractalpopHighlighter } from '@fractaldesign/pop-mdsvex';
export default {
extensions: ['.svelte', '.svx', '.md'],
preprocess: [mdsvex({ extensions: ['.svx', '.md'], highlight: { highlighter: fractalpopHighlighter } })]
};Every page here is composed from fractalstyler's class registry. No Tailwind, no component-scoped styles, no inline styles.
The site configures fractalstyler's tokens — fonts, this orange, light and dark palettes — and adds a handful of motif classes in its sanctioned extension layer: the dashed frame you are reading, its caption and corner marks, the hairline shelf and the section kicker. Code is highlighted at build time by fractalpop. The package READMEs are synced from npm, so the docs match what you install.