diff --git a/dist/example-assets/style.css b/dist/example-assets/style.css
index a410c21b..11ee91ad 100644
--- a/dist/example-assets/style.css
+++ b/dist/example-assets/style.css
@@ -291,5 +291,8 @@ a.Tile:active {
 }
 
 .orejime-Env {
-	--orejime-background: #eff9fd !important;
+	--orejime-color-background: #eff9fd !important;
+	--orejime-color-text: var(--on-surface) !important;
+	--orejime-color-interactive: var(--interactive) !important;
+	--orejime-color-shadow: 2, 10, 15 !important;
 }
diff --git a/src/styles/orejime.scss b/src/styles/orejime.scss
index 79ccaafb..8108889a 100644
--- a/src/styles/orejime.scss
+++ b/src/styles/orejime.scss
@@ -1,5 +1,3 @@
-$orejime-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19) !default;
-
 $orejime-breakpoint-notice: 990px !default;
 
 // micro css reset for everything orejime related
@@ -7,7 +5,7 @@ $orejime-breakpoint-notice: 990px !default;
     margin: 0;
     padding: 0;
     border: 0;
-    line-height: var(--orejime-space-1);
+    line-height: var(--orejime-space-m);
     font-family: var(--orejime-font-family);
     font-size: inherit;
     color: inherit;
@@ -20,21 +18,25 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Env {
-    --orejime-space-1: 1.4em;
-    --orejime-space-2: calc(2 * var(--orejime-space-1));
-    --orejime-space-05: calc(var(--orejime-space-1) / 2);
-    --orejime-space-025: calc(var(--orejime-space-1) / 4);
+    --orejime-space-m: 1.4em;
+    --orejime-space-l: calc(2 * var(--orejime-space-m));
+    --orejime-space-s: calc(var(--orejime-space-m) / 2);
+    --orejime-space-xs: calc(var(--orejime-space-m) / 4);
     --orejime-font-size-small: 0.8rem;
     --orejime-font-family: sans-serif;
-    --orejime-gap: 1ch;
-    --orejime-radius: calc(var(--orejime-space-1) / 4);
-    --orejime-overlay-background: rgba(0,0,0,0.5);
-    --orejime-background: #fff;
-    --orejime-color: #222;
-    --orejime-color-subdued: #555;
-    --orejime-color-interactive: #d6084f;
+    --orejime-radius: calc(var(--orejime-space-m) / 4);
+    --orejime-color-background: #fff;
+    --orejime-color-text: #222;
+    --orejime-color-subdued: #666;
+    --orejime-color-interactive: royalblue;
+    --orejime-color-on-interactive: #fff;
+    --orejime-color-backdrop: rgba(0, 0, 0, 0.5);
+    --orejime-color-shadow: 0, 0, 0;
+    --orejime-shadow:
+        0.1em 0.2em 0.4em rgba(var(--orejime-color-shadow), 0.25),
+        0.2em 0.6em 1.5em rgba(var(--orejime-color-shadow), 0.2);
     --orejime-banner-max-width: 45ch;
-    --orejime-modal-max-width: 75ch;
+    --orejime-modal-max-width: 65ch;
 
     all: unset;
 
@@ -50,39 +52,48 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Button {
-    box-shadow: inset 0 0 0 2px currentColor;
     margin: 0;
     border: 0;
     border-radius: var(--orejime-radius);
-    padding: var(--orejime-space-025) var(--orejime-space-05);
-    color: var(--orejime-color-interactive);
-    background: transparent;
+    padding: var(--orejime-space-xs) var(--orejime-space-s);
+    color: var(--orejime-color-on-interactive);
+    background: var(--orejime-color-interactive);
     font: inherit;
     cursor: pointer;
+}
 
-    &[disabled] {
-        color: var(--orejime-color-subdued);
-    }
+.orejime-Button:is([disabled], [aria-disabled="true"]) {
+    background: var(--orejime-color-subdued);
+}
+
+.orejime-Button:not(:is([disabled], [aria-disabled="true"])):is(:hover, :focus) {
+    outline: 1px solid var(--orejime-color-interactive);
+    outline-offset: 1px;
+}
+
+.orejime-Button:not(:is([disabled], [aria-disabled="true"])):active {
+    outline-width: 2px;
 }
 
-.orejime-Button:not([disabled]):hover,
-.orejime-Button:not([disabled]):focus {
-    box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px currentColor;
+.orejime-ButtonList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5ch;
 }
 
 .orejime-Banner {
-    background: var(--orejime-background);
-    color: var(--orejime-color);
+    background: var(--orejime-color-background);
+    color: var(--orejime-color-text);
     position: fixed;
     z-index: 1000;
     width: 100%;
     bottom: 0;
 
     @media (min-width: $orejime-breakpoint-notice) {
-        box-shadow: $orejime-box-shadow;
+        box-shadow: var(--orejime-shadow);
         border-radius: var(--orejime-radius);
-        bottom: var(--orejime-space-1);
-        right: var(--orejime-space-1);
+        bottom: var(--orejime-space-m);
+        right: var(--orejime-space-m);
         max-width: var(--orejime-banner-max-width);
     }
 
@@ -102,7 +113,7 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Banner-body {
-    padding: var(--orejime-space-1);
+    padding: var(--orejime-space-m);
 }
 
 .orejime-Banner-logo {
@@ -110,10 +121,10 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Banner-title {
-    margin-bottom: var(--orejime-space-05);
+    margin-bottom: var(--orejime-space-s);
     font-weight: bold;
     font-size: 1em;
-    line-height: var(--orejime-space-1);
+    line-height: var(--orejime-space-m);
 }
 
 .orejime-Banner-description {
@@ -125,15 +136,12 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Banner-changes {
-    margin-top: var(--orejime-space-05);
+    margin-top: var(--orejime-space-s);
     font-weight: bold;
 }
 
 .orejime-Banner-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--orejime-gap);
-    margin-top: var(--orejime-space-1);
+    margin-top: var(--orejime-space-s);
 }
 
 .orejime-Banner-actionItem {
@@ -158,7 +166,7 @@ $orejime-breakpoint-notice: 990px !default;
 .orejime-ModalOverlay,
 .orejime-BannerOverlay {
     z-index: 1000;
-    background: var(--orejime-overlay-background);
+    background: var(--orejime-color-backdrop);
     position: fixed;
     top: 0;
     left: 0;
@@ -166,34 +174,38 @@ $orejime-breakpoint-notice: 990px !default;
     bottom: 0;
 }
 
-.orejime-ModalWrapper {
+.orejime-ModalOverlay {
     z-index: 1001;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    margin: 0;
-    width: var(--orejime-modal-max-width);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.orejime-ModalWrapper {
+    box-shadow: var(--orejime-shadow);
+    border-radius: var(--orejime-radius);
     max-width: 100%;
     max-height: 100%;
     overflow: auto;
 }
 
  .orejime-Modal {
-    padding: var(--orejime-space-2);
-    background: var(--orejime-background);
-    color: var(--orejime-color);
-    border-radius: var(--orejime-radius);
-    box-shadow: $orejime-box-shadow;
+    position: relative;
+    padding: var(--orejime-space-l);
+    max-width: var(--orejime-modal-max-width);
+    background: var(--orejime-color-background);
+    color: var(--orejime-color-text);
 }
 
 .orejime-Modal-header {
-    margin-bottom: calc(var(--orejime-space-1) + var(--orejime-space-05));
+    margin-bottom: calc(var(--orejime-space-m) + var(--orejime-space-s));
 }
 
 .orejime-Modal-title {
     display: block;
-    margin: 0 0 var(--orejime-space-05) 0;
+    margin: 0 0 var(--orejime-space-s) 0;
     font-size: 2em;
     font-weight: bold;
 }
@@ -201,19 +213,28 @@ $orejime-breakpoint-notice: 990px !default;
 .orejime-Modal-closeButton {
     border: none;
     background: none;
-    color: inherit;
+    color: var(--orejime-color-subdued);
     position: absolute;
-    top: calc(-1 * var(--orejime-space-1));
-    right: calc(-1 * var(--orejime-space-1));
+    top: var(--orejime-space-s);
+    right: var(--orejime-space-s);
+    padding: var(--orejime-space-s);
+    cursor: pointer;
 }
 
 .orejime-CloseIcon {
+    display: block;
     stroke: currentColor;
+    stroke-width: 2px;
     width: 1em;
+    height: 1em;
+}
+
+.orejime-Modal-closeButton:is(:hover, :focus) .orejime-CloseIcon {
+    color: var(--orejime-color-text);
 }
 
 .orejime-Modal-body {
-    margin-bottom: var(--orejime-space-2);
+    margin-bottom: var(--orejime-space-l);
 }
 
 .orejime-Modal-description {
@@ -225,7 +246,7 @@ $orejime-breakpoint-notice: 990px !default;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-end;
-    gap: var(--orejime-gap);
+    gap: 1ch;
 }
 
 .orejime-Modal-poweredByLink {
@@ -234,10 +255,7 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-PurposeToggles {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--orejime-gap);
-    margin-bottom: var(--orejime-space-1);
+    margin-bottom: var(--orejime-space-m);
 }
 
 .orejime-PurposeList {
@@ -245,11 +263,18 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Purpose {
-    margin-top: var(--orejime-space-05);
+    display: grid;
+    grid-template:
+        'input label'
+        'empty description'
+        'empty children'
+        / min-content auto;
+    gap: 0 1ch;
+    margin-top: var(--orejime-space-s);
 }
 
-.orejime-Purpose .orejime-Purpose {
-    padding-left: var(--orejime-space-2);
+.orejime-Purpose-label {
+    grid-area: label;
 }
 
 .orejime-Purpose-title {
@@ -258,7 +283,7 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Purpose-description {
-    padding-left: var(--orejime-space-2);
+    grid-area: description;
     color: var(--orejime-color-subdued);
     white-space: pre-line;
 }
@@ -283,10 +308,10 @@ $orejime-breakpoint-notice: 990px !default;
 }
 
 .orejime-Purpose-input {
-    float: left;
-    margin-right: var(--orejime-space-1);
-    width: var(--orejime-space-1);
-    height: var(--orejime-space-1);
+    grid-area: input;
+    align-self: center;
+    width: var(--orejime-space-m);
+    height: var(--orejime-space-m);
     appearance: revert;
     background: revert;
     accent-color: var(--orejime-color-interactive);
@@ -295,3 +320,7 @@ $orejime-breakpoint-notice: 990px !default;
 .orejime-Purpose-input:disabled {
     accent-color: var(--orejime-color-subdued);
 }
+
+.orejime-Purpose-children {
+    grid-area: children;
+}
diff --git a/src/ui/themes/dsfr/Modal.tsx b/src/ui/themes/dsfr/Modal.tsx
index 26bec562..da88f66e 100644
--- a/src/ui/themes/dsfr/Modal.tsx
+++ b/src/ui/themes/dsfr/Modal.tsx
@@ -20,75 +20,76 @@ const Modal: ModalComponent = ({
 			isAlert={isForced}
 			onRequestClose={onClose}
 			htmlClassName="fr-no-scroll"
-			portalClassName="fr-modal fr-modal--opened"
-			overlayClassName="fr-container fr-container--fluid fr-container-md"
-			className="fr-grid-row fr-grid-row--center"
+			overlayClassName="fr-modal fr-modal--opened"
+			className="fr-container fr-container--fluid fr-container-md"
 			labelId='fr-consent-modal-title'
 		>
-			<div className="fr-col-12 fr-col-md-10 fr-col-lg-8">
-				<div className="fr-modal__body">
-					<div className="fr-modal__header">
-						{isForced ? null : (
-							<button
-								type="button"
-								className="fr-link--close fr-link"
-								title={t.modal.closeTitle}
-								onClick={onClose}
-							>
-								{t.modal.close}
-							</button>
-						)}
-					</div>
+			<div className="fr-grid-row fr-grid-row--center">
+				<div className="fr-col-12 fr-col-md-10 fr-col-lg-8">
+					<div className="fr-modal__body">
+						<div className="fr-modal__header">
+							{isForced ? null : (
+								<button
+									type="button"
+									className="fr-link--close fr-link"
+									title={t.modal.closeTitle}
+									onClick={onClose}
+								>
+									{t.modal.close}
+								</button>
+							)}
+						</div>
 
-					<div className="fr-modal__content">
-						<h1 id="fr-consent-modal-title" className="fr-modal__title">
-							{t.modal.title}
-						</h1>
+						<div className="fr-modal__content">
+							<h1 id="fr-consent-modal-title" className="fr-modal__title">
+								{t.modal.title}
+							</h1>
+
+							<div>
+								{isForced && needsUpdate ? (
+									<p>
+										<strong>{t.misc.updateNeeded}</strong>
+									</p>
+								) : null}
 
-						<div>
-							{isForced && needsUpdate ? (
 								<p>
-									<strong>{t.misc.updateNeeded}</strong>
+									{template(t.modal.description, {
+										privacyPolicy: (
+											<a
+												key="privacyPolicyLink"
+												href={privacyPolicyUrl}
+												onClick={onClose}
+											>
+												{t.modal.privacyPolicyLabel}
+											</a>
+										)
+									})}
 								</p>
-							) : null}
+							</div>
 
-							<p>
-								{template(t.modal.description, {
-									privacyPolicy: (
-										<a
-											key="privacyPolicyLink"
-											href={privacyPolicyUrl}
-											onClick={onClose}
-										>
-											{t.modal.privacyPolicyLabel}
-										</a>
-									)
-								})}
-							</p>
-						</div>
+							<div className="fr-consent-manager">
+								{children}
 
-						<div className="fr-consent-manager">
-							{children}
+								<ul className="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm">
+									<li>
+										<button
+											className="fr-btn"
+											title={t.modal.saveTitle}
+											onClick={onSave}
+										>
+											{t.modal.save}
+										</button>
+									</li>
+								</ul>
+							</div>
 
-							<ul className="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm">
-								<li>
-									<button
-										className="fr-btn"
-										title={t.modal.saveTitle}
-										onClick={onSave}
-									>
-										{t.modal.save}
-									</button>
-								</li>
-							</ul>
+							<p
+								className="fr-mt-8w fr-text--sm"
+								style={{textAlign: 'right'}}
+							>
+								<PoweredByLink />
+							</p>
 						</div>
-
-						<p
-							className="fr-mt-8w fr-text--sm"
-							style={{textAlign: 'right'}}
-						>
-							<PoweredByLink />
-						</p>
 					</div>
 				</div>
 			</div>
diff --git a/src/ui/themes/orejime/Banner.tsx b/src/ui/themes/orejime/Banner.tsx
index 3231c622..01b9f161 100644
--- a/src/ui/themes/orejime/Banner.tsx
+++ b/src/ui/themes/orejime/Banner.tsx
@@ -71,7 +71,7 @@ const Banner: BannerComponent = ({
 					<p className="orejime-Banner-changes">{t.misc.updateNeeded}</p>
 				)}
 
-				<ul className="orejime-Banner-actions">
+				<ul className="orejime-Banner-actions orejime-ButtonList">
 					<li className="orejime-Banner-actionItem orejime-Banner-actionItem--save">
 						<button
 							className="orejime-Button orejime-Button--save orejime-Banner-button orejime-Banner-saveButton"
diff --git a/src/ui/themes/orejime/GlobalConsent.tsx b/src/ui/themes/orejime/GlobalConsent.tsx
index cfc8c1c8..7db58fb9 100644
--- a/src/ui/themes/orejime/GlobalConsent.tsx
+++ b/src/ui/themes/orejime/GlobalConsent.tsx
@@ -11,11 +11,11 @@ const GlobalConsent: GlobalConsentComponent = ({
 	const t = useTranslations();
 
 	return (
-		<div className="orejime-PurposeToggles">
+		<div className="orejime-PurposeToggles orejime-ButtonList">
 			<button
 				type="button"
 				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-enableAll"
-				disabled={isEnabled}
+				aria-disabled={isEnabled}
 				onClick={acceptAll}
 			>
 				{t.modal.acceptAll}
@@ -24,7 +24,7 @@ const GlobalConsent: GlobalConsentComponent = ({
 			<button
 				type="button"
 				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-disableAll"
-				disabled={isDisabled}
+				aria-disabled={isDisabled}
 				onClick={declineAll}
 			>
 				{t.modal.declineAll}
diff --git a/src/ui/themes/orejime/Icons.tsx b/src/ui/themes/orejime/Icons.tsx
index 674d6fd1..dd80d733 100644
--- a/src/ui/themes/orejime/Icons.tsx
+++ b/src/ui/themes/orejime/Icons.tsx
@@ -9,13 +9,12 @@ export const Close = ({title}: CloseProps) => (
 		role="img"
 		className="orejime-CloseIcon"
 		aria-label={title}
-		width="12"
-		height="12"
+		viewBox="0 0 12 12"
 		version="1.1"
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<title>{title}</title>
-		<line x1="1" y1="11" x2="11" y2="1" strokeWidth="1" />
-		<line x1="1" y1="1" x2="11" y2="11" strokeWidth="1" />
+		<line x1="1" y1="11" x2="11" y2="1" stroke-linecap="round" />
+		<line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" />
 	</svg>
 );
diff --git a/src/ui/themes/orejime/Purpose.tsx b/src/ui/themes/orejime/Purpose.tsx
index 963f0021..285e583b 100644
--- a/src/ui/themes/orejime/Purpose.tsx
+++ b/src/ui/themes/orejime/Purpose.tsx
@@ -71,17 +71,13 @@ const Purpose: PurposeComponent = ({
 				</span>
 			</label>
 			{description ? (
-				<div
+				<p
 					id={`${domId}-description`}
-					className="orejime-Purpose-fullDescription"
-				>
-					<p
-						className="orejime-Purpose-description"
-						dangerouslySetInnerHTML={{
-							__html: description
-						}}
-					/>
-				</div>
+					className="orejime-Purpose-description"
+					dangerouslySetInnerHTML={{
+						__html: description
+					}}
+				/>
 			) : null}
 			<div className="orejime-Purpose-children">{children}</div>
 		</div>