diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx
new file mode 100644
index 0000000000..447bd3cbf0
--- /dev/null
+++ b/packages/canon/docs/Responsive.mdx
@@ -0,0 +1,150 @@
+import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks';
+import {
+  Columns,
+  Text,
+  ComponentStatus,
+  Banner,
+  Title,
+  Roadmap,
+} from './components';
+import { list } from './components/Roadmap/list';
+import * as HeadingStories from '../src/components/Heading/Heading.stories';
+import * as TextStories from '../src/components/Text/Text.stories';
+import * as Table from './components/Table';
+import { Chip } from './components/Chip';
+
+<Meta title="Core Concepts/Responsive" />
+
+<Unstyled>
+
+<Title type="h1">Responsive</Title>
+<Text>
+  Canon is built on a responsive design system, meaning that the components are
+  designed to adapt to different screen sizes. By default we offer a set of
+  breakpoints that you can use to create responsive components.
+</Text>
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  Breakpoints
+</Title>
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Breakpoint prefix</Table.HeaderCell>
+      <Table.HeaderCell>Minimum width</Table.HeaderCell>
+      <Table.HeaderCell>CSS</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>xs</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>0px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`{ ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>sm</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>640px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`@media (min-width: 640px) { ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>md</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>768px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`@media (min-width: 768px) { ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>lg</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>1024px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`@media (min-width: 1024px) { ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>xl</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>1280px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`@media (min-width: 1280px) { ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>2xl</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>1536px</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        <Chip>{`@media (min-width: 1536px) { ... }`}</Chip>
+      </Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
+<Title type="h2">Responsive components</Title>
+
+<Text>
+  Canon components are designed to be responsive, meaning that they will adapt
+  to different screen sizes. Not every component is responsive, but the ones
+  that are will have a prop to control the responsive behavior.
+</Text>
+
+<Text>
+  The behaviour is the same for each component. For each prop, instead of adding
+  the value, you add an object with the value and the breakpoint prefix.
+</Text>
+
+<Source
+  code={`// Fixed value
+
+<Button size="small">Button</Button>
+
+// Responsive value
+
+<Button size={{ xs: 'small', md: 'medium' }}>Button</Button>`} dark />
+
+<Title type="h2">How to update breakpoints</Title>
+
+<Text>
+  The set of keys are not to be changed, but you can update the minimum width of
+  each breakpoint in the theme provider.
+</Text>
+
+<Source
+  code={`<ThemeProvider breakpoints={{
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+}} />`}
+  dark
+/>
+
+</Unstyled>
diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css
index 6fec3345ae..d20e14ce0b 100644
--- a/packages/canon/docs/components/Banner/styles.css
+++ b/packages/canon/docs/components/Banner/styles.css
@@ -1,7 +1,6 @@
 .banner {
   display: flex;
   align-items: center;
-  font-family: 'Geist', sans-serif;
   font-size: 16px;
   line-height: 28px;
   padding: 16px;
diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css
index f800e659e0..6ef02ccf3f 100644
--- a/packages/canon/docs/components/ComponentStatus/styles.css
+++ b/packages/canon/docs/components/ComponentStatus/styles.css
@@ -20,14 +20,12 @@
 
   & .title {
     color: #3b59ff;
-    font-family: 'Geist', sans-serif;
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;
   }
 
   & .pill {
-    font-family: 'Geist', sans-serif;
     display: inline-flex;
     align-items: center;
     color: #000;
diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css
index c2a819cf6b..9319121224 100644
--- a/packages/canon/docs/components/LayoutComponents/styles.css
+++ b/packages/canon/docs/components/LayoutComponents/styles.css
@@ -47,14 +47,12 @@
 
   & .title {
     font-size: 16px;
-    font-family: 'Geist', sans-serif;
     transition: color 0.2s ease-in-out;
     margin-bottom: 0.25rem;
   }
 
   & .description {
     font-size: 16px;
-    font-family: 'Geist', sans-serif;
     color: #9e9e9e;
   }
 }
diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css
index e47aecf7fa..10d177bf0f 100644
--- a/packages/canon/docs/components/Roadmap/styles.css
+++ b/packages/canon/docs/components/Roadmap/styles.css
@@ -4,7 +4,6 @@
 }
 
 .roadmap .roadmap-item {
-  font-family: 'Geist', sans-serif;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css
index fb9faf17eb..9ce32124c6 100644
--- a/packages/canon/docs/components/Table/styles.css
+++ b/packages/canon/docs/components/Table/styles.css
@@ -18,8 +18,6 @@
   border: 1px solid #e7e7e7;
   border-radius: 4px;
   overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
   & .sb-table {
     width: 100%;
@@ -34,7 +32,6 @@
     border: none !important;
     text-align: left;
     background-color: white !important;
-    font-family: 'Geist', sans-serif;
     font-size: 16px;
     font-weight: 300;
 
diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css
index 7255ea802b..516f7212bf 100644
--- a/packages/canon/docs/components/Text/styles.css
+++ b/packages/canon/docs/components/Text/styles.css
@@ -15,8 +15,6 @@
  */
 
 .sb-text {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-size: 16px;
   line-height: 28px;
   margin: 0;
@@ -24,9 +22,6 @@
   margin-bottom: 16px;
 
   & p {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-      'Segoe UI Symbol';
     font-size: 16px;
     line-height: 28px;
     margin: 0;
diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css
index 6b4084cf3b..7c2f18815e 100644
--- a/packages/canon/docs/components/Title/styles.css
+++ b/packages/canon/docs/components/Title/styles.css
@@ -15,8 +15,6 @@
  */
 
 .sb-title {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   margin: 0;
   font-weight: 500;
   border: none;
diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css
index 670b0c3046..706b1626b3 100644
--- a/packages/canon/docs/components/styles.css
+++ b/packages/canon/docs/components/styles.css
@@ -1,3 +1,8 @@
+.sbdocs-content {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
 @import './Banner/styles.css';
 @import './Chip/styles.css';
 @import './Columns/styles.css';