diff --git a/front/ui-docs/.vitepress/config.ts b/front/ui-docs/.vitepress/config.ts
index acb36226e..5f7453ad7 100644
--- a/front/ui-docs/.vitepress/config.ts
+++ b/front/ui-docs/.vitepress/config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
       {
         text: 'Using Components', link: '/using-components'
       },
+      {
+        text: 'Designing Pages', link: '/designing-pages'
+      },
       {
         items: [
           { text: 'Activity', link: '/components/ui/activity' },
diff --git a/front/ui-docs/designing-pages.md b/front/ui-docs/designing-pages.md
new file mode 100644
index 000000000..aea9a2f88
--- /dev/null
+++ b/front/ui-docs/designing-pages.md
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { type Track, type User } from '~/types'
+
+import Card from '~/components/ui/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
+import Button from '~/components/ui/Button.vue'
+import Activity from '~/components/ui/Activity.vue'
+
+const alignLeft = ref(false)
+
+const attributes = computed(() => ({
+  style: alignLeft.value ? 'justify-content: start' : ''
+}))
+
+const track: Track = {
+  id: 0,
+  fid: "",
+
+  title: 'Some lovely track',
+  description: {
+    content_type: 'text/markdown',
+    text: `**New:** Music for the eyes!`
+  },
+  cover: {
+    uuid: "",
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+      medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+      large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  },
+  tags: ["example"],
+  uploads: [],
+  downloads_count: 1927549377,
+  artist_credit: [{
+    artist: {
+      id: 0,
+      fid: "",
+
+      name: "The Artist",
+      description: {
+        content_type: 'text/markdown',
+        text: `I'm a musician based on the internet.
+
+  Find all my music on [Funkwhale](https://funkwhale.audio)!`},
+      tags: [],
+
+      content_category: 'music',
+      albums: [],
+      tracks_count: 1,
+      attributed_to: {
+        id: 0,
+        summary: "",
+        preferred_username: "User12345",
+        full_username: "User12345",
+        is_local: false,
+        domain: "myDomain.io"
+      },
+      is_local: false,
+      is_playable: true
+    },
+    credit: "",
+    joinphrase: " and ",
+    index: 22
+  }],
+  disc_number: 7,
+
+  listen_url: "https://funkwhale.audio",
+  creation_date: "12345",
+  attributed_to: {
+    id: 0,
+    summary: "",
+    preferred_username: "User12345",
+    full_username: "User12345",
+    is_local: false,
+    domain: "myDomain.io"
+  },
+
+  is_playable: true,
+  is_local: false
+}
+
+const user: User = {
+  id: 12,
+  avatar: {
+    uuid: "",
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+      medium_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+      large_square_crop: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  },
+  email: "user12345@example.org",
+  summary: { text: "Hi! I'm Example from The Internet.", content_type: "text" },
+  username: "user12345",
+  full_username: "user12345",
+  instance_support_message_display_date: "?",
+  funkwhale_support_message_display_date: "?",
+  is_superuser: true,
+  privacy_level: "everyone"
+}
+</script>
+
+# Designing Pages
+
+## Grid
+
+::: details Default widths
+
+![alt text](image-1.png)
+
+:::
+
+The page grid consists of 46px wide tracks, separated by 32px wide gaps.
+
+### Responsivity
+
+- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
+- On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
+- The remaining space is evenly distributed.
+- Title rows align with the content below them.
+
+Resize the window to observe how the items move.
+
+<Layout flex>
+<Toggle v-model="alignLeft" />
+Click Toggle to left-align the layout.
+</Layout>
+
+---
+
+<Layout
+grid="auto / repeat(auto-fit, calc(46px _ 3 + 32px _ 2))"
+v-bind="attributes"
+
+>
+
+    <!-- The title row's width is a multiple of 3 rows -->
+    <Layout flex no-gap
+        style="grid-column: 1 / -1; align-self: baseline;"
+    >
+        <!-- Set distance between baseline and previous row -->
+        <Spacer v
+            :size="64"
+            style="outline:1px solid red; align-self: baseline;"
+        />
+        <!-- Flexible row content -->
+        <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
+        <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
+            Albums
+        </h3>
+        <Spacer grow />
+        <Button ghost thin auto align-self="baseline"
+            style="grid-column:-1;"
+        >
+            Show all
+        </Button>
+    </Layout>
+
+</Layout>
+<Layout solid default
+    style="position:relative;"
+    grid="auto / repeat(auto-fit, 46px)"
+    v-bind="attributes"
+>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+    <Card small title="Relatively Long Album Name">
+        Artist Name
+        13 tracks
+    </Card>
+</Layout>
+
+<Layout
+grid="auto / repeat(auto-fit, calc(46px _ 4 + 32px _ 3))"
+v-bind="attributes"
+
+>
+
+    <Layout flex no-gap
+        style="grid-column: 1 / -1; align-self: baseline;"
+    >
+        <!-- Set distance between baseline and previous row -->
+        <Spacer v
+            :size="64"
+            style="outline:1px solid red; align-self: baseline;"
+        />
+        <!-- Flexible row content -->
+        <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
+        <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
+            Tracks
+        </h3>
+        <Spacer grow />
+        <Button ghost thin auto align-self="baseline"
+            style="grid-column:-1;"
+        >
+            Show all
+        </Button>
+    </Layout>
+
+</Layout>
+<Layout solid default
+    style="position:relative;"
+    grid="auto / repeat(auto-fit, 46px)"
+    v-bind="attributes"
+>
+    <Activity :track="track" :user="user" />
+    <Activity :track="track" :user="user" />
+    <Activity :track="track" :user="user" />
+</Layout>
+
+## Navigation
+
+When most of the screen changes, users perceive it as a page navigation. They will expect the "back" button to bring them to the precious screen. In addition, they may expect the URL to contain the current page for sharing.
+
+This makes a component a "page". In this sense, modals are pages.
+
+Not everything we want to share with the Url replaces most of the screen. What about switching a filter?
diff --git a/front/ui-docs/index.md b/front/ui-docs/index.md
index df701349a..f0c0a0165 100644
--- a/front/ui-docs/index.md
+++ b/front/ui-docs/index.md
@@ -29,4 +29,9 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
 Check out the design system on our Penpot.
 </Card>
 
+<Card to="designing-pages"
+  title="Page design"
+  style="width:min-content"
+  />
+
 </Layout>