The Editable Design System

Page limiter

Center each block with mx-auto max-w-7xl, then add px-5 sm:px-7 inside it. The width limit is 80rem (1280px), including side padding: 1.25rem (20px) on small screens and 1.75rem (28px) from the 40rem (640px) breakpoint, at the default root font size.

Content tracks

A track controls how much of the page limiter a block occupies and where it sits. Prose and descriptive listings share narrow left, center, and right tracks, plus a wide layout. Alternating their positions adds variation while keeping shared alignment edges.

Narrow tracks use max-w-4xl (56rem / 896px) inside the max-w-7xl page limiter (80rem / 1280px). These are maximum widths, not fixed proportions. Both include the shared side padding.

Vertical block spacing

Generous spacing separates sections. Compact spacing pulls related blocks together. Each block has its own top and bottom padding, chosen independently.

Padding per edge

Pixel equivalents assume the default 16px root font size. Adjacent padding adds up: two compact edges create a 32px gap, or 56px from 1024px. Two generous edges create an 80px, 112px, 128px, or 224px gap across the same viewport ranges.

<script lang="ts">
	import { Node, NodeArrayProperty } from 'svedit';
	import type { DocumentPath, NodeArrayAttachmentContext } from 'svedit';

	let {
		path,
		mark: section = null
	}: {
		path: DocumentPath;
		mark?: NodeArrayAttachmentContext | null;
	} = $props();

	let padding_top_generous = $derived(!section || section.is_start);
	let padding_bottom_generous = $derived(!section || section.is_end);
</script>

<Node {path} class="bg-(--background) text-(--foreground)">
	<div class="mx-auto max-w-7xl">
		<div class={[
			'px-5 sm:px-7',
			padding_top_generous ? 'pt-block-generous' : 'pt-block-compact',
			padding_bottom_generous ? 'pb-block-generous' : 'pb-block-compact'
		]}>
			<NodeArrayProperty
				path={[...path, 'body']}
				class="flex flex-col gap-5 sm:gap-7"
			/>
		</div>
	</div>
</Node>

• No section mark: both edges are generous.
• section.is_start: the top edge is generous.
• section.is_end: the bottom edge is generous.
• section.is_middle: both edges are compact; the two boundary checks already cover this case.
• A one-block section is both the start and the end, so both edges are generous.

The app uses shared utilities in src/app.css for the default rhythm: pt-block-generous, pt-block-compact, and their pb- equivalents. They apply the values above to existing elements without adding a wrapper component.

For a custom rhythm, replace the default utility on that edge with explicit responsive classes, such as pt-8 lg:pt-16. Avoid combining a default utility with overrides on the same edge. Keep deliberate exceptions local: flush and full-bleed figures have no vertical padding.

Typography

A shared scale for headings and body text.

Inline formatting

Emphasis and detail within the flow of a sentence.

Buttons

Standard size. Hover, press, or tab to explore the states.

Small buttons

For navigation and compact layouts. Small buttons keep a 36px minimum height on all devices.

Disabled buttons

Buttons and pill controls use 40% opacity with the default cursor. Native disabled buttons skip keyboard focus and suppress hover and press feedback. Menu rows instead use muted text to keep unavailable actions legible.

Editing pill

Descriptive listing

A linked row with a title, description, and optional metadata. Hover or press anywhere on the row to strengthen the title underline; keyboard focus outlines the whole row. A plain listing uses the same recipe with the description omitted.

Boxed items

Boxed items use a muted surface. Their secondary buttons use the background color at rest and the muted color on hover. This styling applies only to secondary buttons inside the box.

Navigation

A placeholder logo, main links, and small primary and secondary buttons.

Mobile navigation controls

The application switches to a menu on small screens. Use an opaque page background, these icon buttons, and larger navigation links. Controls share the 2px focus outline and offset, with 44px touch targets. Opening and dismissal belong to the application.

Editor pills

Compact surfaces for tools, actions, and previews.

Editor forms

Link and media prompts use an opaque surface with 4px padding, no shadow, and the button radius capped at 1rem. Fields and actions subtract the padding and border from that radius. Text inputs and textareas use 16px text and an editing-color border on focus.

Page browser

A muted editing fill marks the result Enter will open. Only keyboard-focused rows get a ring, drawn inside the row to keep tree guides and adjacent rows clear. Search focus uses a thin editing-color border. Action menus reuse the list popover recipe.

List popovers

Compact lists with a shared surface and aligned rows.