Ship & extend

Reference

Tokens, element attributes, motion attributes and keyboard shortcuts, in tables.

Everything worth looking up, in tables.

Design-system tokens

Token	From	Is
`--{role}`	Colors	a palette role: `primary` `secondary` `tertiary` `accent` `base` `neutral` `success` `warning` `info` `danger` `white` `black`
`--{role}-h` `-s` `-l`	Colors	its hue, saturation and lightness, separately
`--{role}-hover`	Colors	the same colour, one step along
`--{role}-ultra-light` `-light` `-medium` `-dark` `-ultra-dark`	Colors	the shade strip
`--{role}-trans-10` … `-90`	Colors	the transparency ramp
`--text-xs` … `--text-xxl`	Typography	the fluid text scale
`--h1` … `--h6`	Typography	the fluid heading scale
`--text-size` `--text-color` `--text-line-height`	Typography	the running text
`--heading-weight` `--heading-color` `--heading-line-height` `--heading-letter-spacing`	Typography	headings
`--font-primary` `--font-heading`	Typography	the families
`--space-xs` … `--space-xxl`	Spacing	space inside things
`--section-space-s/m/l`	Spacing	space between bands
`--content-gap` `--container-gap` `--grid-gap`	Spacing	the named gaps
`--content-width`	Layout	how wide the content column may get
`--content-width-safe`	Layout	the same, minus the gutter
`--gutter`	Layout	the distance to the screen edge
`--border-width` `--border-light` `--border-dark`	Borders	the parts
`--border` `--border-strong`	Borders	ready-made shorthands
`--radius-s` `--radius-m` `--radius-l`	Borders	corners
`--shadow-s` `--shadow-m` `--shadow-l`	Shadows	depth
`--motion-duration` `--motion-ease` `--motion-distance` `--motion-stagger`	Motion	what animation is like here
`--btn-*`	Buttons	the button's shape, type, tone and motion
`--transition`	always	`200ms ease`

Element attribute

Every node carries builder-data-element. The design system styles it as :where([builder-data-element="…"]).

Group	Values
Layout	`section` `container` `flex` `div` `figure` `loop` `condition` `site-content`
Content	`heading` `text` `span` `link` `button` `image` `svg` `list`
Navigation	`nav` `nav-list` `nav-item` `nav-link` `nav-dropdown` `nav-trigger` `nav-caret` `nav-sub` `nav-mega` `nav-panel` `nav-toggle` `nav-burger` `nav-close` `nav-scrim` `nav-skip`

Motion attributes

Attribute	Values
`data-motion`	`fade` `rise` `sink` `slide-right` `slide-left` `zoom` `pop` `blur` `tilt` `custom`
`data-motion-duration` / `-delay`	milliseconds
`data-motion-ease`	`smooth` `out` `in-out` `bouncy` `linear`, or any curve
`data-motion-spring`	`stiffness damping mass`, e.g. `400 30 1`
`data-motion-opacity` `-x` `-y` `-scale` `-rotate` `-blur`	where it comes from
`data-motion-exit-*`	the same six, for where it leaves to
`data-motion-trigger`	what starts it
`data-motion-start`	% of the viewport before a reveal fires
`data-motion-once`	`false` replays it on the way back
`data-motion-stagger`	ms between children
`data-scroll-speed`	how much slower than the page; negative leads
`data-scroll-rotate`	degrees across the range
`data-scroll-scale`	scale added across the range

Overlay and nav attributes

Attribute	On	Means
`popover`	the panel	it is an overlay — the browser's own
`popovertarget`	any element	this is the trigger for that panel
`data-overlay`	the panel	`fixed` (modal, no script) or `relative` (hangs off the trigger)
`data-nav-part`	nav parts	what `nav.js` finds — not editable
`data-nav-open-on`	a dropdown	`hover` or `click`; default is both
`data-nav-align`	a dropdown	`center` or `end`; default hangs from the start and flips itself
`data-nav-open` / `data-nav-peek`	—	canvas preview only, never saved into a page

Button variants

Kind	Classes
Colour	`.btn--primary` `--secondary` `--tertiary` `--accent` `--base` `--neutral` `--success` `--warning` `--info` `--danger`
Style	`.btn--outline` `--soft` `--text` `--pill` `--block`
Size	`.btn--xs` `--s` `--l` `--xl` (`m` is the button itself)
Opt out	`.btn--none`

Keyboard

Shortcut	Does
`⌘S`	save the page
`⌘Z` / `⇧⌘Z`	undo / redo
`⌘D`	duplicate the selection
`⌘C` / `⌘V`	copy / paste an element
`Delete` / `Backspace`	delete the selection
`Esc`	deselect
`?` in the CSS body	expand a recipe

Generated files

Path	Written when
`src/pages/<route>.astro`	the page is saved
`src/components/<Name>.astro`	components are saved
`src/styles/generated/framework.css`	the design system changes
`src/styles/generated/global.css`	global styles change
`src/styles/generated/pages/<route>.css`	the page is saved
`src/styles/generated/templates/<id>.css`	templates change
`src/styles/generated/snippets/<id>.css`	CSS snippets change
`public/scripts/nav.js` `motion.js` `overlay.js`	a page needs one
`public/scripts/snippets/<id>.js`	JS snippets change
`src/data/<slug>.json`	a queryable content type is saved
`public/robots.txt` `public/sitemap.xml`	SEO settings, while marked as generated
`site.sitereal`	any change — the engine is its only writer

Project layout

my-site/
  site.sitereal              everything the builder knows
  .sitereal/                 engine state — gitignored
  .mcp.json                  this project's MCP server
  astro.config.mjs
  package.json
  public/
    fonts/                   installed families
    scripts/                 the runtimes
    uploads/                 assets added through the app
  src/
    components/              emitted components
    content/                 markdown entries
    data/                    content-type rows
    layouts/PlainBase.astro  yours
    pages/                   emitted pages
    styles/generated/        the generated CSS