diff --git a/apps/demo/package.json b/apps/demo/package.json
index a36aa7e..ca534da 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
     "dev": "vite & nodemon --watch cunningham.ts --exec yarn build-theme",
-    "build-theme": "cunningham -o src -g css,ts",
+    "build-theme": "cunningham -o src -g css,ts,scss && mv src/cunningham-tokens.scss src/cunningham-tokens-sass.scss",
     "build": "tsc && vite build",
     "build-demo": "tsc && vite build --base=/cunningham/demo/",
     "preview": "vite preview"
diff --git a/apps/demo/public/pattern_dark.png b/apps/demo/public/pattern_dark.png
index 8256464..f251cba 100644
Binary files a/apps/demo/public/pattern_dark.png and b/apps/demo/public/pattern_dark.png differ
diff --git a/apps/demo/public/pattern_default.png b/apps/demo/public/pattern_default.png
index 9764ce8..d19b72f 100644
Binary files a/apps/demo/public/pattern_default.png and b/apps/demo/public/pattern_default.png differ
diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx
index 4cb349e..ccff576 100644
--- a/apps/demo/src/App.tsx
+++ b/apps/demo/src/App.tsx
@@ -80,17 +80,6 @@ export const App = () => {
   return (
     <CunninghamProvider currentLocale={locale} theme={activeTheme}>
       <div className="container">
-        {theme === Theme.CUNNINGHAM && (
-          <img
-            className="pattern"
-            src={
-              variant === Variant.DARK
-                ? "pattern_dark.png"
-                : "pattern_default.png"
-            }
-            alt="Background pattern"
-          />
-        )}
         <Onboarding />
         <Home modal={modal} />
         <Create {...modal} />
diff --git a/apps/demo/src/Create.tsx b/apps/demo/src/Create.tsx
index cfa2eac..0b76194 100644
--- a/apps/demo/src/Create.tsx
+++ b/apps/demo/src/Create.tsx
@@ -47,10 +47,14 @@ export const Create = (props: PageProps) => {
   };
 
   return (
-    <Modal {...props} size={ModalSize.LARGE} closeOnClickOutside>
+    <Modal
+      {...props}
+      size={ModalSize.MEDIUM}
+      title="Add character"
+      closeOnClickOutside
+    >
       <form className="page__create clr-greyscale-900" onSubmit={submit}>
-        <h1>Add a character</h1>
-        <div className="card">
+        <div className="page__create__group">
           <h3 className="fw-bold fs-h3">General Information</h3>
           <Alert type={VariantType.INFO}>
             You are about to add a new character to the collection
@@ -86,7 +90,7 @@ export const Create = (props: PageProps) => {
           />
           <Checkbox name="is_guest" label="This character is a guest" />
         </div>
-        <div className="card mt-l">
+        <div className="page__create__group mt-l">
           <h3 className="fw-bold fs-h3">Bio</h3>
           <Alert type={VariantType.WARNING}>
             Please be exhaustive, every detail counts!
diff --git a/apps/demo/src/Onboarding.tsx b/apps/demo/src/Onboarding.tsx
index f197c33..3218876 100644
--- a/apps/demo/src/Onboarding.tsx
+++ b/apps/demo/src/Onboarding.tsx
@@ -19,7 +19,12 @@ const Onboarding = () => {
       closeOnClickOutside
       rightActions={
         <div className="onboarding__footer">
-          <Button color="primary" iconPosition="right" onClick={handleClose}>
+          <Button
+            color="primary"
+            iconPosition="right"
+            fullWidth={true}
+            onClick={handleClose}
+          >
             Let&apos;s go!
           </Button>
           <Button
@@ -27,6 +32,7 @@ const Onboarding = () => {
             color="tertiary-text"
             size="small"
             icon={<span className="material-icons">open_in_new</span>}
+            fullWidth={true}
           >
             Go to the documentation
           </Button>
diff --git a/apps/demo/src/cunningham-tokens-sass.scss b/apps/demo/src/cunningham-tokens-sass.scss
new file mode 100644
index 0000000..cb3bc77
--- /dev/null
+++ b/apps/demo/src/cunningham-tokens-sass.scss
@@ -0,0 +1,461 @@
+$themes: (
+  'default': (
+    'theme': (
+      'colors': (
+        'secondary-text': #555F6B,
+        'secondary-100': #F2F7FC,
+        'secondary-200': #EBF3FA,
+        'secondary-300': #E2EEF8,
+        'secondary-400': #DDEAF7,
+        'secondary-500': #D4E5F5,
+        'secondary-600': #C1D0DF,
+        'secondary-700': #97A3AE,
+        'secondary-800': #757E87,
+        'secondary-900': #596067,
+        'info-text': #FFFFFF,
+        'info-100': #EBF2FC,
+        'info-200': #8CB5EA,
+        'info-300': #5894E1,
+        'info-400': #377FDB,
+        'info-500': #055FD2,
+        'info-600': #0556BF,
+        'info-700': #044395,
+        'info-800': #033474,
+        'info-900': #022858,
+        'greyscale-100': #FAFAFB,
+        'greyscale-200': #F3F4F4,
+        'greyscale-300': #E7E8EA,
+        'greyscale-400': #C2C6CA,
+        'greyscale-500': #9EA3AA,
+        'greyscale-600': #79818A,
+        'greyscale-700': #555F6B,
+        'greyscale-800': #303C4B,
+        'greyscale-900': #0C1A2B,
+        'greyscale-000': #FFFFFF,
+        'primary-100': #EBF2FC,
+        'primary-200': #8CB5EA,
+        'primary-300': #5894E1,
+        'primary-400': #377FDB,
+        'primary-500': #055FD2,
+        'primary-600': #0556BF,
+        'primary-700': #044395,
+        'primary-800': #033474,
+        'primary-900': #022858,
+        'success-100': #EFFCD3,
+        'success-200': #DBFAA9,
+        'success-300': #BEF27C,
+        'success-400': #A0E659,
+        'success-500': #76D628,
+        'success-600': #5AB81D,
+        'success-700': #419A14,
+        'success-800': #2C7C0C,
+        'success-900': #1D6607,
+        'warning-100': #FFF8CD,
+        'warning-200': #FFEF9B,
+        'warning-300': #FFE469,
+        'warning-400': #FFDA43,
+        'warning-500': #FFC805,
+        'warning-600': #DBA603,
+        'warning-700': #B78702,
+        'warning-800': #936901,
+        'warning-900': #7A5400,
+        'danger-100': #F4B0B0,
+        'danger-200': #EE8A8A,
+        'danger-300': #E65454,
+        'danger-400': #E13333,
+        'danger-500': #DA0000,
+        'danger-600': #C60000,
+        'danger-700': #9B0000,
+        'danger-800': #780000,
+        'danger-900': #5C0000,
+        'primary-text': #FFFFFF,
+        'success-text': #FFFFFF,
+        'warning-text': #FFFFFF,
+        'danger-text': #FFFFFF
+      ),
+      'font': (
+        'sizes': (
+          'h1': 1.75rem,
+          'h2': 1.375rem,
+          'h3': 1.125rem,
+          'h4': 0.8125rem,
+          'h5': 0.625rem,
+          'h6': 0.5rem,
+          'l': 1rem,
+          'm': 0.8125rem,
+          's': 0.6875rem
+        ),
+        'weights': (
+          'thin': 200,
+          'light': 300,
+          'regular': 400,
+          'medium': 500,
+          'bold': 600,
+          'extrabold': 700,
+          'black': 800
+        ),
+        'families': (
+          'base': #{\Roboto Flex Variable\, sans-serif},
+          'accent': #{\Roboto Flex Variable\, sans-serif}
+        ),
+        'letterSpacings': (
+          'h1': normal,
+          'h2': normal,
+          'h3': normal,
+          'h4': normal,
+          'h5': 1px,
+          'h6': normal,
+          'l': normal,
+          'm': normal,
+          's': normal
+        )
+      ),
+      'spacings': (
+        'xl': 4rem,
+        'l': 3rem,
+        'b': 1.625rem,
+        's': 1rem,
+        't': 0.5rem,
+        'st': 0.25rem
+      ),
+      'transitions': (
+        'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)},
+        'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)},
+        'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)},
+        'duration': 250ms
+      ),
+      'breakpoints': (
+        'xs': 0,
+        'sm': 576px,
+        'md': 768px,
+        'lg': 992px,
+        'xl': 1200px,
+        'xxl': 1400px
+      )
+    )
+  ),
+  'dark': (
+    'theme': (
+      'colors': (
+        'greyscale-100': #182536,
+        'greyscale-200': #303C4B,
+        'greyscale-300': #555F6B,
+        'greyscale-400': #79818A,
+        'greyscale-500': #9EA3AA,
+        'greyscale-600': #C2C6CA,
+        'greyscale-700': #E7E8EA,
+        'greyscale-800': #F3F4F4,
+        'greyscale-900': #FAFAFB,
+        'greyscale-000': #0C1A2B,
+        'primary-100': #3B4C62,
+        'primary-200': #4D6481,
+        'primary-300': #6381A6,
+        'primary-400': #7FA5D5,
+        'primary-500': #8CB5EA,
+        'primary-600': #A3C4EE,
+        'primary-700': #C3D8F4,
+        'primary-800': #DDE9F8,
+        'primary-900': #F4F8FD,
+        'success-100': #EEF8D7,
+        'success-200': #D9F1B2,
+        'success-300': #BDE985,
+        'success-400': #A0E25D,
+        'success-500': #76D628,
+        'success-600': #5BB520,
+        'success-700': #43941A,
+        'success-800': #307414,
+        'success-900': #225D10,
+        'warning-100': #F7F3D5,
+        'warning-200': #F0E5AA,
+        'warning-300': #E8D680,
+        'warning-400': #E3C95F,
+        'warning-500': #D9B32B,
+        'warning-600': #BD9721,
+        'warning-700': #9D7B1C,
+        'warning-800': #7E6016,
+        'warning-900': #684D12,
+        'danger-100': #F8D0D0,
+        'danger-200': #F09898,
+        'danger-300': #F09898,
+        'danger-400': #ED8585,
+        'danger-500': #E96666,
+        'danger-600': #DD6666,
+        'danger-700': #C36666,
+        'danger-800': #AE6666,
+        'danger-900': #9D6666
+      )
+    ),
+    'components': (
+      'card': (
+        'border-width': none,
+        'box-shadow': #{rgba(0, 8, 16, 0.3) 0px 16px 24px}
+      )
+    )
+  ),
+  'redflux_dark': (
+    'theme': (
+      'colors': (
+        'primary-text': #FFFFFF,
+        'primary-100': #FA8D92,
+        'primary-200': #F95B63,
+        'primary-300': #F72A35,
+        'primary-400': #E50914,
+        'primary-500': #C30811,
+        'primary-600': #A0060E,
+        'primary-700': #7E050B,
+        'primary-800': #5C0408,
+        'primary-900': #390205,
+        'secondary-text': #FFF,
+        'secondary-100': #1b5ad7,
+        'secondary-200': #146cea,
+        'secondary-300': #007ffe,
+        'secondary-400': #008eff,
+        'secondary-500': #279eff,
+        'secondary-600': #56b0ff,
+        'secondary-700': #8ac6ff,
+        'secondary-800': #b9dcff,
+        'secondary-900': #e2f1ff,
+        'greyscale-000': #000000BB,
+        'greyscale-100': #191919BB,
+        'greyscale-200': #232323,
+        'greyscale-300': #292929,
+        'greyscale-400': #343434,
+        'greyscale-500': #404040,
+        'greyscale-600': #aaaaaa,
+        'greyscale-700': #cccccc,
+        'greyscale-800': #eeeeee,
+        'greyscale-900': #f7f7f7,
+        'danger-900': #FACED0,
+        'danger-800': #F7A9AD,
+        'danger-700': #F38389,
+        'danger-600': #F05E66,
+        'danger-500': #EC3942,
+        'danger-400': #D8151F,
+        'danger-300': #A51017,
+        'danger-200': #720B10,
+        'danger-100': #3F0609,
+        'info-900': #53A4FD,
+        'info-800': #2B8FFC,
+        'info-700': #047AFA,
+        'info-600': #0366D2,
+        'info-500': #0255AF,
+        'info-400': #02448C,
+        'info-300': #013368,
+        'info-200': #012245,
+        'info-100': #001122,
+        'success-900': #A9F7C0,
+        'success-800': #8DF4AC,
+        'success-700': #71F198,
+        'success-600': #55EF83,
+        'success-500': #39EC6F,
+        'success-400': #14CF4C,
+        'success-300': #0E9236,
+        'success-200': #085620,
+        'success-100': #021909,
+        'warning-900': #EAC88B,
+        'warning-800': #E4BA6D,
+        'warning-700': #DFAB4F,
+        'warning-600': #D99D31,
+        'warning-500': #B68121,
+        'warning-400': #8A621A,
+        'warning-300': #5F4412,
+        'warning-200': #34250A,
+        'warning-100': #090702
+      ),
+      'font': (
+        'families': (
+          'base': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif},
+          'accent': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif}
+        )
+      )
+    ),
+    'components': (
+      'button': (
+        'border-radius': 0.1875rem
+      ),
+      'forms-input': (
+        'border-radius': 0.1875rem,
+        'border-color': #9EA3AA,
+        'border-color--hover': #79818A,
+        'background-color': #FAFAFB,
+        'label-color--focus': #555F6B
+      ),
+      'forms-select': (
+        'border-radius': 0.1875rem,
+        'border-color': #9EA3AA,
+        'border-color--hover': #79818A,
+        'background-color': #FAFAFB,
+        'border-color--focus': #555F6B,
+        'label-color--focus': #555F6B,
+        'menu-background-color': #191919,
+        'item-background-color--selected': #0556BF
+      ),
+      'forms-datepicker': (
+        'border-radius': 0.1875rem,
+        'border-color': #9EA3AA,
+        'border-color--hover': #79818A,
+        'background-color': #FAFAFB,
+        'border-color--focus': #555F6B,
+        'label-color--focus': #555F6B,
+        'menu-background-color': #191919,
+        'grid-cell--border-color--today': #303C4B,
+        'grid-cell--color--today': #303C4B,
+        'range-selection-background-color': #022858,
+        'item-background-color--selected': #0556BF
+      ),
+      'forms-fileuploader': (
+        'border-color': #9EA3AA,
+        'border-color--hover': #79818A,
+        'background-color': #FAFAFB,
+        'background-color--active': #9EA3AA,
+        'accent-color': #303C4B
+      ),
+      'forms-textarea': (
+        'border-radius': 0.1875rem,
+        'border-color': #9EA3AA,
+        'border-color--hover': #79818A,
+        'background-color': #FAFAFB,
+        'border-color--focus': #555F6B,
+        'label-color--focus': #555F6B
+      ),
+      'forms-checkbox': (
+        'border-radius': 0.1875rem,
+        'accent-color': #FAFAFB,
+        'background-color': #303C4B
+      ),
+      'forms-switch': (
+        'handle-border-radius': 0.3rem,
+        'rail-border-radius': 0.500rem,
+        'accent-color': #303C4B,
+        'handle-background-color': #FAFAFB,
+        'rail-background-color': #C2C6CA
+      ),
+      'forms-radio': (
+        'accent-color': #FAFAFB,
+        'background-color': #303C4B
+      ),
+      'modal': (
+        'border-radius': 0.1875rem,
+        'background-color': #191919,
+        'backdrop-color': #FFFFFF
+      ),
+      'card': (
+        'border-radius': 0.1875rem,
+        'border-width': none,
+        'box-shadow': #{rgba(255, 220, 220, 0.05) 0px 0px 60px 10px}
+      )
+    )
+  ),
+  'blueney_dark': (
+    'theme': (
+      'colors': (
+        'primary-text': #FFFFFF,
+        'primary-900': #53B0FF,
+        'primary-800': #39A4FF,
+        'primary-700': #2099FF,
+        'primary-600': #068DFF,
+        'primary-500': #0080EB,
+        'primary-400': #0072D2,
+        'primary-300': #00549A,
+        'primary-200': #003562,
+        'primary-100': #00172A,
+        'greyscale-900': #FAFAFC,
+        'greyscale-800': #DBDDE7,
+        'greyscale-700': #BCC0D3,
+        'greyscale-600': #9EA2BF,
+        'greyscale-500': #7F85AB,
+        'greyscale-400': #626995,
+        'greyscale-300': #4E5376,
+        'greyscale-200': #393E57,
+        'greyscale-100': #1B1D29,
+        'greyscale-000': #151823
+      ),
+      'font': (
+        'families': (
+          'base': #{Avenir, sans-serif},
+          'accent': #{Avenir, sans-serif}
+        )
+      )
+    ),
+    'components': (
+      'card': (
+        'border-radius': 0.25rem,
+        'border-width': none,
+        'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
+      ),
+      'button': (
+        'border-radius': 0.25rem
+      ),
+      'forms-input': (
+        'border-radius': 0.25rem,
+        'border-color': transparent,
+        'border-color--hover': transparent,
+        'border-color--focus': #555F6B,
+        'background-color': #F3F4F4,
+        'label-color--focus': #555F6B,
+        'label-color': #555F6B
+      ),
+      'forms-select': (
+        'border-radius': 0.25rem,
+        'border-color': transparent,
+        'border-color--hover': transparent,
+        'border-color--focus': #555F6B,
+        'background-color': #F3F4F4,
+        'label-color--focus': #555F6B,
+        'menu-background-color': #F3F4F4,
+        'item-background-color--hover': #E7E8EA,
+        'item-background-color--selected': #377FDB
+      ),
+      'forms-datepicker': (
+        'border-radius': 0.25rem,
+        'border-color': transparent,
+        'border-color--hover': transparent,
+        'border-color--focus': #555F6B,
+        'background-color': #F3F4F4,
+        'label-color--focus': #555F6B,
+        'menu-background-color': #F3F4F4,
+        'grid-cell--border-color--today': #9EA3AA,
+        'grid-cell--color--today': #555F6B,
+        'grid-cell--color--selected': #0556BF,
+        'range-selection-background-color': #EBF2FC,
+        'item-background-color--hover': #E7E8EA,
+        'item-background-color--selected': #377FDB
+      ),
+      'forms-fileuploader': (
+        'background-color': #F3F4F4,
+        'background-color--active': #E7E8EA,
+        'border-color': transparent
+      ),
+      'forms-textarea': (
+        'border-color': transparent,
+        'border-color--hover': transparent,
+        'border-color--focus': #555F6B,
+        'border-radius': 0.25rem,
+        'background-color': #F3F4F4,
+        'label-color--focus': #555F6B
+      ),
+      'forms-checkbox': (
+        'border-radius': 0.25rem,
+        'border-color': #E7E8EA,
+        'accent-color': #0C1A2B,
+        'background-color': #F3F4F4
+      ),
+      'forms-switch': (
+        'rail-background-color': #F3F4F4,
+        'accent-color': #377FDB
+      ),
+      'forms-radio': (
+        'border-color': #E7E8EA,
+        'accent-color': #0C1A2B,
+        'background-color': #F3F4F4
+      ),
+      'modal': (
+        'border-radius': 0.25rem,
+        'background-color': #FAFAFB,
+        'backdrop-color': #00172AAB,
+        'border-color': transparent,
+        'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
+      )
+    )
+  )
+) !default;
diff --git a/apps/demo/src/index.scss b/apps/demo/src/index.scss
index e20abf4..da8d3e6 100644
--- a/apps/demo/src/index.scss
+++ b/apps/demo/src/index.scss
@@ -2,7 +2,10 @@
 @use "@openfun/cunningham-react/sass/icons";
 @use "@openfun/cunningham-react/style";
 @use "cunningham-tokens";
+@use "cunningham-tokens-sass" as *;
 
+$lg: map-get($themes, "default", "theme", "breakpoints", "lg");
+$sm: map-get($themes, "default", "theme", "breakpoints", "sm");
 
 // Reset
 h1 {
@@ -64,9 +67,13 @@ html {
 .container {
   margin: auto;
   position: relative;
-  height: 100%;
-
+  overflow: hidden;
   width: 1100px;
+
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  
   @media (max-width: 1200px) {
     width: calc(100% - 2rem);
   }
@@ -76,13 +83,17 @@ html {
 // Home
 .page__home {
   display: flex;
-  height: 100%;
+  flex-grow: 1;
   flex-direction: column;
 
   &__title {
     gap: 1.5rem;
     margin: 4rem 0;
 
+    @media (max-width: $lg) {
+      margin: 6rem 0 4rem 0;
+    }
+
     button {
       margin-top: 1.5rem;
     }
@@ -93,6 +104,20 @@ html {
   }
 }
 
+html[data-theme="cunningham"] body {
+  background-repeat: no-repeat;
+  background-position: -300px -300px;
+  background-attachment: fixed;
+}
+
+html[data-theme="cunningham"][data-variant="dark"] body {
+  background-image: url(/pattern_dark.png);
+}
+
+html[data-theme="cunningham"][data-variant="light"] body {
+  background-image: url(/pattern_default.png);
+}
+
 html[data-theme="redflux"] {
   background: #000000D7 url(/redflux_bg.webp) 50%/cover no-repeat fixed;
   background-blend-mode: darken;
@@ -100,21 +125,17 @@ html[data-theme="redflux"] {
 
 html[data-theme="blueney"] {
   background: url(/blueney_bg.jpg) 50%/cover no-repeat fixed;
-
 }
 
 // Create
 .page__create {
-  max-width: 960px;
-  margin: 0 auto;
-  padding-bottom: 5rem;
 
   h1 {
     text-align: center;
     margin: 4rem 0;
   }
 
-  .card {
+  &__group {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
@@ -155,14 +176,24 @@ html[data-theme="blueney"] {
     min-width: 200px;
     justify-content: center;
   }
+
+  @media (max-width: $sm) {
+    flex-direction: column;
+    flex-grow: 1;
+
+    > .c__button {
+      width: 100%;
+      min-width: auto;
+    }
+  }
 }
 
-// links
 .links {
   border-top: thin solid var(--c--theme--colors--greyscale-300);
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;
+  margin-top: 5rem;
 
   ul {
     text-align: right;