diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
index eebd464dcb..c5fa21ace2 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
@@ -16,7 +16,7 @@ You can build your entire app with Svelte (for example, using an application fra
 
 ## How to use this tutorial
 
-> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
+> [!NOTE] You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
 
 This tutorial is split into four main parts:
 
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md
index 9da965ae17..f18f8a20da 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/05-nested-components/index.md
@@ -23,4 +23,4 @@ Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...
 
 Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
 
-> Component names are capitalised, to distinguish them from HTML elements.
+> [!NOTE] Component names are capitalised, to distinguish them from HTML elements.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/06-html-tags/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/06-html-tags/index.md
index 801b22a1d4..97195fa015 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/06-html-tags/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/06-html-tags/index.md
@@ -13,4 +13,4 @@ In Svelte, you do this with the special `{@html ...}` tag:
 <p>{+++@html+++ string}</p>
 ```
 
-> **Warning!** Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. This isn't an issue if the content is something you trust like an article you wrote yourself. However if it's some untrusted user content, e.g. a comment on an article, then it's critical that you manually escape it, otherwise you risk exposing your users to <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) attacks.
+> [!NOTE] Important: Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. This isn't an issue if the content is something you trust like an article you wrote yourself. However if it's some untrusted user content, e.g. a comment on an article, then it's critical that you manually escape it, otherwise you risk exposing your users to <a href="https://owasp.org/www-community/attacks/xss/" target="_blank">Cross-Site Scripting</a> (XSS) attacks.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
index 74d752fc8d..e5caebe2f2 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/02-deep-state/index.md
@@ -29,4 +29,4 @@ function addNumber() {
 }
 ```
 
-> Deep reactivity is implemented using [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and mutations to the proxy do not affect the original object.
+> [!NOTE] Deep reactivity is implemented using [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and mutations to the proxy do not affect the original object.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md
index 6a33a6d84b..54e8d996b1 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md
@@ -6,7 +6,7 @@ So far we've talked about reactivity in terms of state. But that's only half of
 
 The thing that reacts is called an _effect_. You've already encountered effects — the ones that Svelte creates on your behalf to update the DOM in response to state changes — but you can also create your own with the `$effect` rune.
 
-> Most of the time, you shouldn't. `$effect` is best thought of as an escape hatch, rather than something to use frequently. If you can put your side effects in an [event handler](dom-events), for example, that's almost always preferable.
+> [!NOTE] Most of the time, you shouldn't. `$effect` is best thought of as an escape hatch, rather than something to use frequently. If you can put your side effects in an [event handler](dom-events), for example, that's almost always preferable.
 
 Let's say we want to use `setInterval` to keep track of how long the component has been mounted. Create the effect:
 
@@ -45,4 +45,4 @@ The cleanup function is called immediately before the effect function re-runs wh
 
 If the effect function doesn't read any state when it runs, it will only run once, when the component mounts.
 
-> Effects do not run during server-side rendering.
+> [!NOTE] Effects do not run during server-side rendering.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
index 0b389f3539..daded48b5e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/03-props/03-spread-props/index.md
@@ -23,7 +23,7 @@ We _could_ fix it by adding the prop...
 <PackageInfo +++{...pkg}+++ />
 ```
 
-> Conversely, you can get an object containing all the props that were passed into a component using a rest property...
+> [!NOTE] Conversely, you can get an object containing all the props that were passed into a component using a rest property...
 >
 > ```js
 > let { name, ...stuff } = $props();
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
index d8d5b92a84..f14d90a2e8 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/index.md
@@ -20,7 +20,7 @@ Instead of laboriously copying, pasting and editing, we can get rid of all but t
 </div>
 ```
 
-> The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
+> [!NOTE] The expression (`colors`, in this case) can be any iterable or array-like object — in other words, anything that works with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
 
 Now we need to use the `color` variable in place of `"red"`:
 
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
index eb219ea593..2df9594247 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/index.md
@@ -11,7 +11,7 @@ Click the 'Remove first thing' button a few times, and notice what happens:
 1. It removes the last component.
 2. It then updates the `name` value in the remaining DOM nodes, but not the emoji.
 
-> If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
+> [!NOTE] If you're coming from React, this might seem strange, because you're used to the entire component re-rendering when state changes. Svelte works differently: the component 'runs' once, and subsequent updates are 'fine-grained'. This makes things faster and gives you more control.
 
 One way to fix it would be to make `emoji` a [`$derived`](derived-state) value. But it makes more sense to remove the first `<Thing>` component altogether than to remove the _last_ one and update all the others.
 
@@ -24,4 +24,4 @@ To do that, we specify a unique _key_ for each iteration of the `each` block:
 {/each}
 ```
 
-> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
+> [!NOTE] You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
index 2ac78a3d6d..9f2cfc0e5c 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/04-logic/06-await-blocks/index.md
@@ -15,7 +15,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 {/await}+++
 ```
 
-> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+> [!NOTE] Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
 
 If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
 
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
index d55f7eb5ee..e918bd185a 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md
@@ -14,4 +14,4 @@ We can also use `bind:value` with `<select>` elements:
 
 Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> [!NOTE] Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/index.md b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/index.md
index 142555adee..09acbc9f42 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/06-bindings/06-multiple-select-bindings/index.md
@@ -19,4 +19,4 @@ Replace the checkboxes with a `<select multiple>`:
 
 Note that we're able to omit the `value` attribute on the `<option>`, since the value is identical to the element's contents.
 
-> Press and hold the `control` key (or the `command` key on MacOS) to select multiple options.
+> [!NOTE] Press and hold the `control` key (or the `command` key on MacOS) to select multiple options.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md
index 68f96f811b..38f5f708da 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md
@@ -32,7 +32,7 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 </script>
 ```
 
-> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
+> [!NOTE] The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
 
 The full set of options available to `tweened`:
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md
index 10135b894d..c1d2a25858 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md
@@ -15,4 +15,4 @@ We can achieve this with a _global_ transition, which plays when _any_ block con
 </div>
 ```
 
-> In Svelte 3, transitions were global by default and you had to use the `|local` modifier to make them local.
+> [!NOTE] In Svelte 3, transitions were global by default and you had to use the `|local` modifier to make them local.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md
index 3fc7417edb..bcd3e0dd58 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md
@@ -43,6 +43,6 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 >
 ```
 
-> `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
+> [!NOTE] `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
 
 Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md
index c898b5869a..884fa6e70f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md
@@ -22,4 +22,4 @@ You can even bind to properties inside an `each` block.
 {/each}
 ```
 
-> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
+> [!NOTE] Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md
index bbc62bfb4f..392da6fcd5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md
@@ -14,6 +14,8 @@ Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `
 
 These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
 
-> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+TODO this next thing is no longer true I think?
+
+> [!NOTE] Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
 >
 > `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md
index c57380f6ce..761092049c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md
@@ -14,4 +14,4 @@ Just as you can bind to properties of DOM elements, you can bind to component pr
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
 
-> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
+> [!NOTE] Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md
index c8dbd89a4f..b766b74fe0 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/index.md
@@ -50,4 +50,4 @@ Finally, get rid of the placeholder variable, which we no longer need:
 </script>
 ```
 
-> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
+> [!NOTE] Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
index 5ff7472a63..7d7ad36732 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
@@ -11,4 +11,4 @@ Add the `selectionchange` handler to the `<svelte:document>` tag:
 <svelte:document +++on:selectionchange={handleSelectionChange}+++ />
 ```
 
-> Avoid `mouseenter` and `mouseleave` handlers on this element, as these events are not fired on `document` in all browsers. Use `<svelte:body>` instead.
+> [!NOTE] Avoid `mouseenter` and `mouseleave` handlers on this element, as these events are not fired on `document` in all browsers. Use `<svelte:body>` instead.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md
index a054bb47ba..082b8a02fa 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md
@@ -20,4 +20,4 @@ Since those are quite hard to show in the context of this tutorial, we'll use it
 <h1>Welcome to my site!</h1>
 ```
 
-> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
+> [!NOTE] In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md
index 6514e388cc..0530054951 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md
@@ -15,7 +15,7 @@ Add this to the top of `Todo.svelte`:
 <svelte:options immutable={true} />
 ```
 
-> You can shorten this to `<svelte:options immutable/>` if you prefer.
+> [!NOTE] You can shorten this to `<svelte:options immutable/>` if you prefer.
 
 Now, when you toggle todos by clicking on them, only the updated component flashes.
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md
index eb202715d9..4399b64b8b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md
@@ -40,4 +40,4 @@ We can now import `stopAll` in `App.svelte`...
 </div>
 ```
 
-> You can't have a default export, because the component _is_ the default export.
+> [!NOTE] You can't have a default export, because the component _is_ the default export.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md
index 0c43d72f01..330efe3f5d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/01-concepts/01-introducing-sveltekit/index.md
@@ -26,7 +26,7 @@ On the right, in the file tree viewer, you'll see a handful of files that Svelte
 
 `package.json` will be familiar if you've worked with Node.js before. It lists the project's dependencies — including `svelte` and `@sveltejs/kit` — and a variety of `scripts` for interacting with the SvelteKit CLI. (We're currently running `npm run dev` in the bottom window.)
 
-> Note that it also specifies `"type": "module"`, which means that `.js` files are treated as native JavaScript modules by default, rather than the legacy CommonJS format.
+> [!NOTE] Note that it also specifies `"type": "module"`, which means that `.js` files are treated as native JavaScript modules by default, rather than the legacy CommonJS format.
 
 `svelte.config.js` contains your project configuration. We don't need to worry about this file for now, but if you're curious, [visit the documentation](https://kit.svelte.dev/docs/configuration).
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/01-pages/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/01-pages/index.md
index 59cdb80641..8aa227546d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/01-pages/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/01-pages/index.md
@@ -21,4 +21,4 @@ Let's fix that. Add a second page, `src/routes/about/+page.svelte`, copy the con
 
 We can now navigate between `/` and `/about`.
 
-> Unlike traditional multi-page apps, navigating to `/about` and back updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation. (This behaviour can be [configured](https://kit.svelte.dev/docs/page-options).)
+> [!NOTE] Unlike traditional multi-page apps, navigating to `/about` and back updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation. (This behaviour can be [configured](https://kit.svelte.dev/docs/page-options).)
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/index.md
index 2c99e5459d..5ebff0c2e9 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/02-routing/03-params/index.md
@@ -14,4 +14,4 @@ Let's create that file:
 
 We can now navigate from the `/blog` page to individual blog posts. In the next chapter, we'll see how to load their content.
 
-> Multiple route parameters can appear _within_ one URL segment, as long as they are separated by at least one static character: `foo/[bar]x[baz]` is a valid route where `[bar]` and `[baz]` are dynamic parameters.
+> [!NOTE] Multiple route parameters can appear _within_ one URL segment, as long as they are separated by at least one static character: `foo/[bar]x[baz]` is a valid route where `[bar]` and `[baz]` are dynamic parameters.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
index 7040400ced..5d81299834 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/03-loading-data/01-page-data/index.md
@@ -27,7 +27,7 @@ export function load() {
 }
 ```
 
-> For the sake of the tutorial, we're importing data from `src/routes/blog/data.js`. In a real app, you'd be more likely to load the data from a database or a CMS, but for now we'll do it like this.
+> [!NOTE] For the sake of the tutorial, we're importing data from `src/routes/blog/data.js`. In a real app, you'd be more likely to load the data from a database or a CMS, but for now we'll do it like this.
 
 We can access this data in `src/routes/blog/+page.svelte` via the `data` prop:
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/index.md
index cd83beefa1..f0b3355993 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/index.md
@@ -21,7 +21,7 @@ export const actions = {
 };
 ```
 
-> Default actions cannot coexist with named actions.
+> [!NOTE] Default actions cannot coexist with named actions.
 
 The `<form>` element has an optional `action` attribute, which is similar to an `<a>` element's `href` attribute. Update the existing form so that it points to the new `create` action:
 
@@ -38,7 +38,7 @@ The `<form>` element has an optional `action` attribute, which is similar to an
 </form>
 ```
 
-> The `action` attribute can be any URL — if the action was defined on another page, you might have something like `/todos?/create`. Since the action is on _this_ page, we can omit the pathname altogether, hence the leading `?` character.
+> [!NOTE] The `action` attribute can be any URL — if the action was defined on another page, you might have something like `/todos?/create`. Since the action is on _this_ page, we can omit the pathname altogether, hence the leading `?` character.
 
 Next, we want to create a form for each todo, complete with a hidden `<input>` that uniquely identifies it:
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
index a9c079070c..254a33f4ae 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/03-form-validation/index.md
@@ -101,4 +101,4 @@ In `src/routes/+page.svelte`, we can access the returned value via the `form` pr
 	</form>
 ```
 
-> You can also return data from an action _without_ wrapping it in `fail` — for example to show a 'success!' message when data was saved — and it will be available via the `form` prop.
+> [!NOTE] You can also return data from an action _without_ wrapping it in `fail` — for example to show a 'success!' message when data was saved — and it will be available via the `form` prop.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
index 89ce68391a..cf6b99ff6a 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/index.md
@@ -104,4 +104,4 @@ In the case of deletions, we don't really need to wait for the server to validat
 </ul>
 ```
 
-> `use:enhance` is very customizable — you can `cancel()` submissions, handle redirects, control whether the form is reset, and so on. [See the docs](https://kit.svelte.dev/docs/modules#$app-forms-enhance) for full details.
+> [!NOTE] `use:enhance` is very customizable — you can `cancel()` submissions, handle redirects, control whether the form is reset, and so on. [See the docs](https://kit.svelte.dev/docs/modules#$app-forms-enhance) for full details.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
index 8a02c6aff1..3a83537f09 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -84,4 +84,4 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 />
 ```
 
-> You should only mutate `data` in such a way that you'd get the same result by reloading the page.
+> [!NOTE] You should only mutate `data` in such a way that you'd get the same result by reloading the page.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
index 2145760bc6..cfe9c6b964 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/08-stores/02-navigating-store/index.md
@@ -7,7 +7,7 @@ The `navigating` store represents the current navigation. When a navigation star
 - `from` and `to` — objects with `params`, `route` and `url` properties
 - `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
 
-> For complete type information visit the [`Navigation`](https://kit.svelte.dev/docs/types#public-types-navigation) documentation.
+> [!NOTE] For complete type information visit the [`Navigation`](https://kit.svelte.dev/docs/types#public-types-navigation) documentation.
 
 It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` store and add a message to the nav bar:
 
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
index baa89050c1..2f6227f897 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/01-error-basics/index.md
@@ -26,6 +26,6 @@ export function load() {
 
 When you throw an expected error, you're telling SvelteKit 'don't worry, I know what I'm doing here'. An unexpected error, by contrast, is assumed to be a bug in your app. When an unexpected error is thrown, its message and stack trace will be logged to the console.
 
-> In a later chapter we'll learn about how to add custom error handling using the `handleError` hook.
+> [!NOTE] In a later chapter we'll learn about how to add custom error handling using the `handleError` hook.
 
 If you click the links in this app, you'll notice an important difference: the expected error message is shown to the user, whereas the unexpected error message is redacted and replaced with a generic 'Internal Error' message and a 500 status code. That's because error messages can contain sensitive data.
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
index 77f50d5897..fcef02066d 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/09-errors-and-redirects/xx-custom-error-messages/index.md
@@ -51,4 +51,4 @@ You could also call your error reporting service in these hooks.
 
 Note that you can return more than an error message if you like. Whatever object shape you return will be available in `$page.error`, the only requirement is a `message` property. You can read more about this (and how to make it type-safe!) in the [error docs](https://kit.svelte.dev/docs/errors).
 
-> When handling errors, be careful to not assume it's an `Error` object, anything could be thrown. Also make sure not to expose senstive data by forwarding too much information
+> [!NOTE] When handling errors, be careful to not assume it's an `Error` object, anything could be thrown. Also make sure not to expose senstive data by forwarding too much information
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/02-ssr/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/02-ssr/index.md
index 33ad7584fd..b221e8c157 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/02-ssr/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/02-ssr/index.md
@@ -11,4 +11,4 @@ That said, some components _can't_ be rendered on the server, perhaps because th
 export const ssr = false;
 ```
 
-> Setting `ssr` to `false` inside your root `+layout.server.js` effectively turns your entire app into a single-page app (SPA).
+> [!NOTE] Setting `ssr` to `false` inside your root `+layout.server.js` effectively turns your entire app into a single-page app (SPA).
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/04-prerender/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/04-prerender/index.md
index ea6cf68d64..c251ae816d 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/04-prerender/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/02-page-options/04-prerender/index.md
@@ -19,4 +19,4 @@ Here in the tutorial, this won't have any observable effect, since the applicati
 
 Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain form actions. Pages with dynamic route parameters can be prerendered as long as they are specified in the [`prerender.entries`](https://kit.svelte.dev/docs/configuration#prerender) configuration or can be reached by following links from pages that _are_ in `prerender.entries`.
 
-> Setting `prerender` to `true` inside your root `+layout.server.js` effectively turns SvelteKit into a static site generator (SSG).
+> [!NOTE] Setting `prerender` to `true` inside your root `+layout.server.js` effectively turns SvelteKit into a static site generator (SSG).
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
index 0bb89f7c00..eb972fb86d 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
@@ -8,7 +8,7 @@ To match an unknown number of path segments, use a `[...rest]` parameter, so nam
 
 Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any path.
 
-> Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files:
+> [!NOTE] Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files:
 >
 > ```tree
 > src/routes/
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/index.md
index 9a9313d524..ec96f08a36 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/03-param-matchers/index.md
@@ -18,4 +18,4 @@ Then, to use the new matcher, rename `src/routes/colors/[color]` to `src/routes/
 
 Now, whenever someone navigates to that route, SvelteKit will verify that `color` is a valid `hex` value. If not, SvelteKit will try to match other routes, before eventually returning a 404.
 
-> Matchers run both on the server and in the browser.
+> [!NOTE] Matchers run both on the server and in the browser.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/index.md
index c3efb9938b..b25c11bc3c 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/index.md
@@ -15,4 +15,4 @@ Occasionally, it's useful to break out of the current layout hierarchy. We can d
 
 Let's reset it all the way to the root layout, by renaming it to `+page@.svelte`.
 
-> The root layout applies to every page of your app, you cannot break out of it.
+> [!NOTE] The root layout applies to every page of your app, you cannot break out of it.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/index.md
index 6b7cf8443b..0327e67933 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/02-using-both-load-functions/index.md
@@ -22,4 +22,4 @@ export async function load(+++{ data }+++) {
 }
 ```
 
-> Note that the data isn't merged — we must explicitly return `message` from the universal `load` function.
+> [!NOTE] Note that the data isn't merged — we must explicitly return `message` from the universal `load` function.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md
index 1938c78465..b7c29ac708 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/03-await-parent/index.md
@@ -25,7 +25,7 @@ export async function load(+++{ parent }+++) {
 }
 ```
 
-> Notice that a [universal](/tutorial/kit/universal-load-functions) `load` function can get data from a parent _server_ `load` function. The reverse is not true — a server load function can only get parent data from another server load function.
+> [!NOTE] Notice that a [universal](/tutorial/kit/universal-load-functions) `load` function can get data from a parent _server_ `load` function. The reverse is not true — a server load function can only get parent data from another server load function.
 
 Finally, in `src/routes/sum/+page.js`, get parent data from both `load` functions:
 
@@ -37,4 +37,4 @@ export async function load(+++{ parent }+++) {
 }
 ```
 
-> Take care not to introduce waterfalls when using `await parent()`. If you can `fetch` other data that is not dependent on parent data, do that first.
+> [!NOTE] Take care not to introduce waterfalls when using `await parent()`. If you can `fetch` other data that is not dependent on parent data, do that first.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
index 1cd1051705..bf70393bda 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/index.md
@@ -38,4 +38,4 @@ In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls
 </h1>
 ```
 
-> You can also pass a function to `invalidate`, in case you want to invalidate based on a pattern and not specific URLs
+> [!NOTE] You can also pass a function to `invalidate`, in case you want to invalidate based on a pattern and not specific URLs
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
index 2769bed54e..802f19463f 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/06-invalidate-all/index.md
@@ -40,4 +40,4 @@ export async function load(---{ depends }---) {
 }
 ```
 
-> `invalidate(() => true)` and `invalidateAll` are _not_ the same. `invalidateAll` also re-runs `load` functions without any `url` dependencies, which `invalidate(() => true)` does not.
+> [!NOTE] `invalidate(() => true)` and `invalidateAll` are _not_ the same. `invalidateAll` also re-runs `load` functions without any `url` dependencies, which `invalidate(() => true)` does not.
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
index 2a3a7370de..b92291a2d0 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/06-environment-variables/01-env-static-private/index.md
@@ -4,7 +4,7 @@ title: $env/static/private
 
 Environment variables — like API keys and database credentials — can be added to a `.env` file, and they will be made available to your application.
 
-> You can also use `.env.local` or `.env.[mode]` files — see the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) for more information. Make sure you add any files containing sensitive information to your `.gitignore` file!
+> [!NOTE] You can also use `.env.local` or `.env.[mode]` files — see the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) for more information. Make sure you add any files containing sensitive information to your `.gitignore` file!
 >
 > Environment variables in `process.env` are also available via `$env/static/private`.