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 48px gap, 64px from 1024px, always wider than the gap between elements inside a block. Two generous edges create a gap of 128px on phones, 192px from 640px, and 256px from 1024px. Only the rows of a plain prose grid sit further apart than two compact edges: with nothing but whitespace between their items, they are 96px apart, 128px from 1024px.

<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.

eyebrow

Inline formatting

Emphasis and detail within the flow of a sentence.

Card

A 4:3 media area, a display-5 title like heading 4, and an optional description. Shared by gallery cards; width and arrangement belong to the surrounding layout. Linked cards underline the title and make the whole card clickable. Use a div and omit the underline for an unlinked card. Keyboard focus uses a 2px editing-color outline with a 2px offset; scroll containers use an inset outline to prevent clipping.

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 semibold title, description, and optional metadata. Hover or press anywhere on the row to show the title underline in full; keyboard focus outlines the whole row. A plain listing uses the same recipe with the description omitted.

Dialog buttons

For the editing dialogs outside the toolbar: the login dialog, the save conflict dialog, and the OAuth consent page. The primary action uses the editing colors, since these dialogs belong to editing rather than to the site.

Boxed items

Boxed items use ew-muted-surface: they fill with the muted color, and their children swap background and muted, so an eyebrow, inline code, or a secondary button stands out from the box. Accent boxes use ew-accent-surface: they fill with the accent of their color set, and their children get matching tokens, so every recipe inside stays readable.

Navigation

A placeholder logo, main links, and small primary and secondary buttons. Links use the foreground color and fade to muted on hover and press, without an underline, like the mobile menu.

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.