diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
index 62f95c8..be2de4c 100644
--- a/src/components/Link/_link.scss
+++ b/src/components/Link/_link.scss
@@ -1,30 +1,28 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
-.link { 
+.link__container {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+}
+.link {
   text-decoration: none;
   color: var(--nds-primary);
   @include text-base;
-    &:hover {
-        color: var(--nds-text);
-        opacity: 0.25;
-    }
-    &:active {
-        color: var(--nds-text);
-        opacity: 0.25;
-    }
-  &__container {
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
-    &:hover {
-      background-color: var(--nds-secondary);
-      border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent);
-    }
-    &:active {
-      background-color: var(--nds-primary);
-      border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
-    }
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nds-spacing-3xs);
+  border-bottom: 1px solid transparent;
+  transition:
+    border-color 130ms ease,
+    color 130ms ease;
+  &:hover {
+    border-bottom-color: var(--nds-primary);
   }
-}
\ No newline at end of file
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--nds-ring);
+    border-radius: var(--nds-radius-xs);
+  }
+}
diff --git a/src/components/LoadingBar/_loadingBar.scss b/src/components/LoadingBar/_loadingBar.scss
index 34b1543..3442b60 100644
--- a/src/components/LoadingBar/_loadingBar.scss
+++ b/src/components/LoadingBar/_loadingBar.scss
@@ -1,37 +1,34 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .loading-bar {
   position: relative;
   width: 100%;
   height: 6px;
-  background-color: var(--nds-text);
+  background-color: var(--nds-surface-2);
   overflow: hidden;
-  border-radius: var(--nds-radius-sm);
-
+  border-radius: var(--nds-radius-full);
   &__progress {
     height: 100%;
     background-color: var(--nds-primary);
-    transition: width 0.3s ease;
-    border-radius: var(--nds-radius-sm);
+    border-radius: var(--nds-radius-full);
+    transition: width 0.35s ease;
   }
-
   &__unknown {
     position: absolute;
     top: 0;
-    left: -50%;
-    width: 50%;
+    left: 0;
+    width: 40%;
     height: 100%;
     background-color: var(--nds-primary);
-    border-radius: var(--nds-radius-sm);
-    animation: loadingBarIndeterminate 1.5s infinite;
+    border-radius: var(--nds-radius-full);
+    animation: nds-lb 1.3s ease-in-out infinite;
   }
-
-  @keyframes loadingBarIndeterminate {
-    from {
-      left: -50%;
-    }
-    to {
-      left: 100%;
-    }
+}
+@keyframes nds-lb {
+  0% {
+    left: -40%;
   }
-}
\ No newline at end of file
+  100% {
+    left: 100%;
+  }
+}
diff --git a/src/components/LoadingBar/loadingBar.astro b/src/components/LoadingBar/loadingBar.astro
index da89a86..8a64c53 100644
--- a/src/components/LoadingBar/loadingBar.astro
+++ b/src/components/LoadingBar/loadingBar.astro
@@ -1,19 +1,25 @@
 ---
 export interface Props {
-  type:        'known' | 'unknown';
+  type: "known" | "unknown";
   percentage?: number;
-  width?:      string;
+  width?: string;
 }
 const { type, percentage, width } = Astro.props;
 ---
-<div class='loading-bar loading-bar--${type}' style={width ? `width: ${width}` : undefined}>
-  {type === 'known' && percentage !== undefined ? (
-    <div class='loading-bar__progress' style={`width: ${percentage}%`}></div>
-  ) : (
-    <div  class='loading-bar__unknown'></div>
-  )}
+
+<div
+  class={`loading-bar loading-bar--${type}`}
+  style={width ? `width: ${width}` : undefined}
+>
+  {
+    type === "known" && percentage !== undefined ? (
+      <div class="loading-bar__progress" style={`width: ${percentage}%`} />
+    ) : (
+      <div class="loading-bar__unknown" />
+    )
+  }
 </div>
 
 <style lang="scss">
-@use './loadingBar';
-</style>
\ No newline at end of file
+  @use "./_loadingBar.scss";
+</style>
diff --git a/src/components/Notifications/_notification.scss b/src/components/Notifications/_notification.scss
index ca01cc7..87068e6 100644
--- a/src/components/Notifications/_notification.scss
+++ b/src/components/Notifications/_notification.scss
@@ -1,61 +1,50 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .notification {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: center;
-  padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
-  border-radius: var(--nds-radius-md);
-  @include text-sm;
-  &__error {
-    background-color: var(--nds-error-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-error-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-error-high);
-    }
-  }
-  
-  &__success {
-    background-color: var(--nds-success-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-success-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-success-high);
-    }
-  }
-  
-  &__warning {
-    background-color: var(--nds-warning-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-warning-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-warning-high);
-    }
-  }
-  
+  gap: var(--nds-spacing-sm);
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+  border-radius: var(--nds-radius-lg);
+  background-color: var(--nds-surface);
+  box-shadow: var(--nds-shadow-md);
+  border-left: 3px solid var(--nds-info-medium);
+  @include text-base;
+  max-width: 400px;
   &__info {
-    background-color: var(--nds-info-low);
-    &__close {
-      background: transparent;
-      border: none;
-      color: var(--nds-info-medium);
-      cursor: pointer;
-    }
-    &__content {
-      color: var(--nds-info-high);
+    border-left-color: var(--nds-info-medium);
+  }
+  &__success {
+    border-left-color: var(--nds-success-medium);
+  }
+  &__warning {
+    border-left-color: var(--nds-warning-medium);
+  }
+  &__error {
+    border-left-color: var(--nds-error-medium);
+  }
+  &__info__content,
+  &__success__content,
+  &__warning__content,
+  &__error__content {
+    color: var(--nds-text);
+    flex: 1;
+  }
+  &__info__close,
+  &__success__close,
+  &__warning__close,
+  &__error__close {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    color: var(--nds-neutral);
+    padding: 0;
+    border-radius: var(--nds-radius-sm);
+    transition: color 120ms ease;
+    &:hover {
+      color: var(--nds-text);
     }
   }
 }
diff --git a/src/components/Notifications/notification.astro b/src/components/Notifications/notification.astro
index 403a115..cee7550 100644
--- a/src/components/Notifications/notification.astro
+++ b/src/components/Notifications/notification.astro
@@ -1,23 +1,30 @@
 ---
 import { CloseIcon } from "../Icons";
 
-
 export interface Props {
-  type:        'info' | 'success' | 'warning' | 'error';
+  type: "info" | "success" | "warning" | "error";
 }
-const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
+const notificationUUID = `notification-${Math.random().toString(36).slice(2, 11)}`;
 const { type } = Astro.props;
 ---
 
-<div class={`notification notification__${type}`} role="alert" id={notificationUUID}>
-  <div class=`notification__${type}__content`>
+<div
+  class={`notification notification__${type}`}
+  role="alert"
+  id={notificationUUID}
+>
+  <div class={`notification__${type}__content`}>
     <slot />
   </div>
-  <button class={`notification__${type}__close`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+  <button
+    class={`notification__${type}__close`}
+    aria-label="Close notification"
+    onclick={`document.getElementById('${notificationUUID}')?.remove()`}
+  >
     <CloseIcon size={16} label="Close notification" />
   </button>
 </div>
 
 <style lang="scss">
-@use './_notification.scss';
-</style>
\ No newline at end of file
+  @use "./_notification.scss";
+</style>
diff --git a/src/components/Tabs/_tab.scss b/src/components/Tabs/_tab.scss
index 23a7576..9655fa1 100644
--- a/src/components/Tabs/_tab.scss
+++ b/src/components/Tabs/_tab.scss
@@ -1,33 +1,40 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .tab {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--nds-spacing-xs);
-    justify-content: center;
-    width: fit-content;
-
-    &__item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: fit-content;
-        cursor: pointer;
-        padding: var(--nds-spacing-2xs);
-        @include text-base;
-
-        &--active {
-            color: var(--nds-primary);
-
-            &::after {
-                content: '';
-                display: block;
-                width: 120%;
-                height: 1px;
-                background-color: var(--nds-primary);
-                border-radius: var(--nds-radius-sm);
-            }
-        }
+  display: flex;
+  align-items: stretch;
+  gap: var(--nds-spacing-2xs);
+  border-bottom: 1px solid var(--nds-border);
+  width: fit-content;
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nds-spacing-2xs);
+    padding: var(--nds-spacing-xs) var(--nds-spacing-sm);
+    cursor: pointer;
+    @include text-label;
+    color: var(--nds-neutral);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition:
+      color 130ms ease,
+      border-color 130ms ease;
+    &:hover {
+      color: var(--nds-text);
     }
-}
\ No newline at end of file
+    &--active {
+      color: var(--nds-text);
+      border-bottom-color: var(--nds-primary);
+    }
+  }
+}
+.tab__content {
+  padding-top: var(--nds-spacing-md);
+  @include text-base;
+  color: var(--nds-text);
+  &[hidden] {
+    display: none;
+  }
+}
diff --git a/src/components/Toggle/_toggle.scss b/src/components/Toggle/_toggle.scss
index b370de1..2b23e33 100644
--- a/src/components/Toggle/_toggle.scss
+++ b/src/components/Toggle/_toggle.scss
@@ -1,33 +1,13 @@
 .toggle {
-    background-color: var(--nds-disabled);
-    border-radius: var(--nds-radius-full);
-    padding: var(--nds-spacing-2xs);
-    width: 50px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    cursor: pointer;
-    transition: background-color 160ms ease;
-    position: relative;
-    &-switch {
-        color: var(--nds-text);
-        width: 15px;
-        height: 15px;
-        background-color: var(--nds-text);
-        border-radius: var(--nds-radius-full);
-        position: absolute;
-        left: var(--nds-spacing-2xs);
-        top: 50%;
-        transform: translateY(-50%);
-        transition: left 160ms ease, background-color 160ms ease, transform 160ms ease;
-    }
-    &-active {
-        display: flex;
-        justify-content: right;
-        background-color: var(--nds-primary);
-        .toggle-switch {
-            left: calc(100% - var(--nds-spacing-2xs) - 15px);
-        }
-    }
+  --w: 44px; --h: 24px; --pad: 3px;
+  position: relative; width: var(--w); height: var(--h);
+  background-color: var(--nds-disabled); border-radius: var(--nds-radius-full);
+  padding: var(--pad); display: flex; align-items: center; cursor: pointer;
+  transition: background-color 180ms ease;
+  &-switch { width: calc(var(--h) - var(--pad) * 2); height: calc(var(--h) - var(--pad) * 2);
+    background-color: #fff; border-radius: var(--nds-radius-full); box-shadow: var(--nds-shadow-sm);
+    transition: transform 180ms cubic-bezier(.34,1.4,.6,1); }
+  &-active { background-color: var(--nds-primary); }
+  &-active .toggle-switch { transform: translateX(calc(var(--w) - var(--h))); }
 }
+toggle-switch:focus-visible .toggle { box-shadow: 0 0 0 3px var(--nds-ring); outline: none; }
\ No newline at end of file
diff --git a/src/components/Toggle/toggle.astro b/src/components/Toggle/toggle.astro
index a9a07ab..b2fc7d3 100644
--- a/src/components/Toggle/toggle.astro
+++ b/src/components/Toggle/toggle.astro
@@ -1,8 +1,6 @@
 ---
-import { boolean } from 'astro:schema';
-
 export interface Props {
-    'data-checked': boolean;
+    'data-checked'?: boolean | string;
     name?: string;
     id: string;
 }
@@ -10,7 +8,7 @@ export interface Props {
 const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.props;
 ---
 
-<toggle-switch data-checked={dataChecked} data-name={name} id={id}>
+<toggle-switch data-checked={String(dataChecked)} data-name={name} id={id}>
     <div class="toggle">
         <div class="toggle-switch"></div>
     </div>
@@ -35,7 +33,7 @@ const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.pro
 
             this.dispatchEvent(new CustomEvent('change', {
                 detail: { checked: this._checked, name: this.dataset.name },
-                bubbles: true, 
+                bubbles: true,
                 composed: true,
             }));
         }
@@ -59,4 +57,4 @@ const { 'data-checked': dataChecked = 'false', name = 'toggle', id } = Astro.pro
 
 <style lang="scss">
 @use './_toggle.scss';
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
index cb6fd0b..c9c40ba 100644
--- a/src/components/pagination/_pagination.scss
+++ b/src/components/pagination/_pagination.scss
@@ -1,6 +1,7 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .pagination {
-    display: flex;
-    gap: var(--nds-spacing-sm);
-}
\ No newline at end of file
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-2xs);
+}
diff --git a/src/components/pagination/_paginationNumber.scss b/src/components/pagination/_paginationNumber.scss
index b78cb97..fdb9ecf 100644
--- a/src/components/pagination/_paginationNumber.scss
+++ b/src/components/pagination/_paginationNumber.scss
@@ -1,26 +1,30 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .pagination-number {
-  width: 30px;
-  height: 30px;
-  display: flex;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--nds-spacing-2xs);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--nds-radius-full);
+  border-radius: var(--nds-radius-md);
+  cursor: pointer;
+  @include text-label;
+  color: var(--nds-text);
+  background: transparent;
+  border: 1px solid transparent;
+  transition: all 120ms ease;
+  user-select: none;
   &:hover:not(.pagination-number__disabled):not(.pagination-number__selected) {
-    background-color: var(--nds-secondary);
-    cursor: pointer;
-  }
-  &:active:not(.pagination-number__disabled):not(.pagination-number__selected) {
-    background-color: var(--nds-accent);
-    cursor: pointer;
-  }
-  &__disabled {
-    background-color: var(--nds-disabled);
-    cursor: not-allowed;
+    border-color: var(--nds-border-strong);
+    background-color: var(--nds-surface-hover);
   }
   &__selected {
     background-color: var(--nds-primary);
-    cursor: pointer;
+    color: var(--nds-on-primary);
   }
-}
\ No newline at end of file
+  &__disabled {
+    color: var(--nds-disabled);
+    cursor: not-allowed;
+  }
+}
diff --git a/src/components/textField/_textField.scss b/src/components/textField/_textField.scss
index 3f3dcff..795675d 100644
--- a/src/components/textField/_textField.scss
+++ b/src/components/textField/_textField.scss
@@ -42,6 +42,7 @@
     min-height: 84px;
     padding: var(--nds-spacing-sm);
     resize: vertical;
+    width: 100% !important;
     line-height: 1.5;
   }
   &__charCount {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d7d096b..d7bda3f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,29 +1,17 @@
 ---
 import '../styles/index.scss';
+interface Props { title?: string; }
+const { title = 'Nova Design System' } = Astro.props;
 ---
-
 <!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Nova Design System</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
 </html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		min-height: 100%;
-		font-family: var(--nds-font-family-base);
-		background-color: var(--nds-page-low);
-		color: var(--nds-default);
-	}
-</style>
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
new file mode 100644
index 0000000..466c558
--- /dev/null
+++ b/src/pages/gallery.astro
@@ -0,0 +1,1144 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Button from "../components/Button/button.astro";
+import Badge from "../components/Badge/badge.astro";
+import Avatar from "../components/Avatar/avatar.astro";
+import Toggle from "../components/Toggle/toggle.astro";
+import Checkbox from "../components/Checkbox/checkbox.astro";
+import Radio from "../components/Radio/radio.astro";
+import TextField from "../components/textField/textField.astro";
+import Select from "../components/Select/select.astro";
+import SelectOption from "../components/Select/selectOption.astro";
+import NumericStepper from "../components/numericStepper/numericStepper.astro";
+import Tab from "../components/Tabs/tab.astro";
+import TabItem from "../components/Tabs/tabItem.astro";
+import TabContent from "../components/Tabs/tabContent.astro";
+import Link from "../components/Link/link.astro";
+import Breadcrumb from "../components/Breadcrumb/breadcrumb.astro";
+import BreadcrumbItem from "../components/Breadcrumb/breadcrumbItem.astro";
+import Pagination from "../components/pagination/pagination.astro";
+import PaginationNumber from "../components/pagination/paginationNumber.astro";
+import Navbar from "../components/Navbar/navbar.astro";
+import Sidebar from "../components/Sidebar/sidebar.astro";
+import SidebarItem from "../components/Sidebar/sidebarItem.astro";
+import Card from "../components/Card/card.astro";
+import ListItem from "../components/ListItem/listItem.astro";
+import ListItemTitle from "../components/ListItem/listItemTitle.astro";
+import ListItemSubtitle from "../components/ListItem/listItemSubtitle.astro";
+import Notification from "../components/Notifications/notification.astro";
+import LoadingBar from "../components/LoadingBar/loadingBar.astro";
+import Tooltip from "../components/Tooltip/tooltip.astro";
+import Modal from "../components/Modal/modal.astro";
+
+import {
+  Arrow2Icon,
+  BinIcon,
+  BurgerIcon,
+  CalendarIcon,
+  CheckIcon,
+  CloseIcon,
+  CodeIcon,
+  CubeIcon,
+  DownloadIcon,
+  FilterIcon,
+  HelpIcon,
+  HomeIcon,
+  LinkIcon,
+  MinusIcon,
+  MoreIcon,
+  OverviewIcon,
+  PlusIcon,
+  ProfileIcon,
+  SearchIcon,
+  SettingsIcon,
+  ShareIcon,
+  ShieldIcon,
+  SortIcon,
+  StatsIcon,
+  UploadIcon,
+} from "../components/Icons/index.ts";
+
+const tones = [
+  "primary",
+  "neutral",
+  "success",
+  "warning",
+  "error",
+  "info",
+] as const;
+const btnTypes = ["primary", "secondary", "ghost", "danger"] as const;
+const sizes = ["sm", "md", "lg"] as const;
+const notifTypes = ["info", "success", "warning", "error"] as const;
+const notifMessages: Record<string, string> = {
+  info: "Information about the operation.",
+  success: "The operation completed successfully.",
+  warning: "A warning occurred. Please check the details.",
+  error: "An error occurred. Please try again.",
+};
+const tooltipPositions = ["top", "bottom", "left", "right"] as const;
+const iconLib = [
+  { name: "Arrow2", Icon: Arrow2Icon },
+  { name: "Bin", Icon: BinIcon },
+  { name: "Burger", Icon: BurgerIcon },
+  { name: "Calendar", Icon: CalendarIcon },
+  { name: "Check", Icon: CheckIcon },
+  { name: "Close", Icon: CloseIcon },
+  { name: "Code", Icon: CodeIcon },
+  { name: "Cube", Icon: CubeIcon },
+  { name: "Download", Icon: DownloadIcon },
+  { name: "Filter", Icon: FilterIcon },
+  { name: "Help", Icon: HelpIcon },
+  { name: "Home", Icon: HomeIcon },
+  { name: "Link", Icon: LinkIcon },
+  { name: "Minus", Icon: MinusIcon },
+  { name: "More", Icon: MoreIcon },
+  { name: "Overview", Icon: OverviewIcon },
+  { name: "Plus", Icon: PlusIcon },
+  { name: "Profile", Icon: ProfileIcon },
+  { name: "Search", Icon: SearchIcon },
+  { name: "Settings", Icon: SettingsIcon },
+  { name: "Share", Icon: ShareIcon },
+  { name: "Shield", Icon: ShieldIcon },
+  { name: "Sort", Icon: SortIcon },
+  { name: "Stats", Icon: StatsIcon },
+  { name: "Upload", Icon: UploadIcon },
+] as const;
+
+const tokenColors = [
+  "text",
+  "neutral",
+  "background",
+  "surface",
+  "surface-2",
+  "border",
+  "primary",
+  "secondary",
+  "accent",
+  "primary-soft",
+  "success-medium",
+  "warning-medium",
+  "error-medium",
+  "info-medium",
+];
+const spacingScale = [
+  ["3xs", "2"],
+  ["2xs", "4"],
+  ["xs", "8"],
+  ["sm", "12"],
+  ["md", "16"],
+  ["lg", "24"],
+  ["xl", "32"],
+  ["2xl", "48"],
+  ["3xl", "64"],
+];
+const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
+---
+
+<Layout title="Nova Design System — Gallery">
+  <div class="g-page">
+    <header class="g-topbar">
+      <div class="g-brand">
+        <span class="g-mark"></span>
+        <span class="g-name">Nova Design System</span>
+        <Badge type="primary" variant="soft">v0.06</Badge>
+      </div>
+      <Button type="secondary" size="sm" id="theme-btn">Toggle theme</Button>
+    </header>
+
+    <div class="g-layout">
+      <nav class="g-rail">
+        <p class="g-rail__head">Nova DS</p>
+        <a href="#foundations">Foundations</a>
+        <a href="#buttons">Button</a>
+        <a href="#badges">Badge</a>
+        <a href="#controls">Toggle · Check · Radio</a>
+        <a href="#textfield">TextField</a>
+        <a href="#select">Select</a>
+        <a href="#stepper">Numeric stepper</a>
+        <a href="#avatar">Avatar</a>
+        <a href="#loading">Loading bar</a>
+        <a href="#listitem">List item</a>
+        <a href="#link">Link</a>
+        <a href="#tabs">Tabs</a>
+        <a href="#breadcrumb">Breadcrumb</a>
+        <a href="#pagination">Pagination</a>
+        <a href="#notification">Notification</a>
+        <a href="#tooltip">Tooltip</a>
+        <a href="#card">Card</a>
+        <a href="#chrome">Navbar · Sidebar</a>
+        <a href="#modal">Modal</a>
+        <a href="#icons">Icons</a>
+      </nav>
+
+      <main class="g-content">
+        <!-- ── FOUNDATIONS ── -->
+        <section id="foundations" class="blk">
+          <h2>Foundations</h2>
+          <p class="blk__desc">
+            Design tokens — type, color, spacing, radius, elevation.
+          </p>
+
+          <div class="vg">
+            <span class="vg__lbl"
+              >Type scale — Intel One Mono (display) · Geist (UI)</span
+            >
+            <div class="vg__body type-scale">
+              <div class="type-row">
+                <span class="type-tag">text-5xl</span><span class="disp t5xl"
+                  >Nova 52px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-4xl</span><span class="disp t4xl"
+                  >Nova 40px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-3xl</span><span class="disp t3xl"
+                  >Nova 30px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-2xl</span><span class="disp t2xl"
+                  >Nova 22px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-xl</span><span class="disp txl"
+                  >Nova 18px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-lg</span><span class="sans tlg"
+                  >Nova 16px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-base</span><span class="sans tbase"
+                  >Nova 14px</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-label</span><span
+                  class="sans tlabel">Nova 13px 600</span>
+              </div>
+              <div class="type-row">
+                <span class="type-tag">text-sm</span><span class="sans tsm"
+                  >Nova 12px</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Color tokens (adapt to theme)</span>
+            <div class="vg__body swatch-row">
+              {
+                tokenColors.map((t) => (
+                  <div class="swatch">
+                    <div
+                      class="swatch-chip"
+                      style={`background:var(--nds-${t})`}
+                    />
+                    <span class="swatch-name">{t}</span>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Spacing scale</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:flex-start;gap:8px;"
+            >
+              {
+                spacingScale.map(([n, px]) => (
+                  <div class="sp-row">
+                    <span class="sp-label">
+                      spacing-{n} · {px}px
+                    </span>
+                    <div class="sp-bar" style={`width:${px}px`} />
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Radius scale</span>
+            <div class="vg__body">
+              {
+                radiusScale.map((n) => (
+                  <div
+                    class="rad-chip"
+                    style={`border-radius:var(--nds-radius-${n})`}
+                  >
+                    <span>{n}</span>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Elevation</span>
+            <div class="vg__body">
+              {
+                (["sm", "md", "lg"] as const).map((n) => (
+                  <div
+                    class="elev-chip"
+                    style={`box-shadow:var(--nds-shadow-${n})`}
+                  >
+                    shadow-{n}
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- ── BUTTON ── -->
+        <section id="buttons" class="blk">
+          <h2>Button</h2>
+          <p class="blk__desc">Variants, sizes, icon and disabled states.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Variants × md</span>
+            <div class="vg__body">
+              {
+                btnTypes.map((t) => (
+                  <Button type={t} size="md">
+                    {t[0].toUpperCase() + t.slice(1)}
+                  </Button>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Sizes (primary)</span>
+            <div class="vg__body">
+              {
+                sizes.map((s) => (
+                  <Button type="primary" size={s}>
+                    Size {s}
+                  </Button>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">With icon · icon-only</span>
+            <div class="vg__body">
+              <Button type="primary" size="md"
+                ><PlusIcon slot="icon-left" size={16} />New service</Button
+              >
+              <Button type="secondary" size="md"
+                >Filter<FilterIcon slot="icon-right" size={16} /></Button
+              >
+              <Button type="ghost" size="md" icon={true}
+                ><MoreIcon size={18} /></Button
+              >
+              <Button type="primary" size="md" icon={true}
+                ><DownloadIcon size={18} /></Button
+              >
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Disabled</span>
+            <div class="vg__body">
+              {
+                btnTypes.map((t) => (
+                  <Button type={t} size="md" disabled>
+                    {t}
+                  </Button>
+                ))
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- ── BADGE ── -->
+        <section id="badges" class="blk">
+          <h2>Badge</h2>
+          <p class="blk__desc">Tones × soft / solid.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Soft</span>
+            <div class="vg__body">
+              {
+                tones.map((t) => (
+                  <Badge type={t} variant="soft">
+                    {t}
+                  </Badge>
+                ))
+              }
+            </div>
+          </div>
+          <div class="vg">
+            <span class="vg__lbl">Solid</span>
+            <div class="vg__body">
+              {
+                tones.map((t) => (
+                  <Badge type={t} variant="solid">
+                    {t}
+                  </Badge>
+                ))
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- ── CONTROLS ── -->
+        <section id="controls" class="blk">
+          <h2>Toggle · Checkbox · Radio</h2>
+          <p class="blk__desc">Selection controls in every state.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Toggle — off / on</span>
+            <div class="vg__body">
+              <Toggle id="tg-off" />
+              <Toggle id="tg-on" data-checked={true} />
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl"
+              >Checkbox — unchecked / checked / disabled</span
+            >
+            <div class="vg__body">
+              <Checkbox id="cb1">Unchecked</Checkbox>
+              <Checkbox id="cb2" checked>Checked</Checkbox>
+              <Checkbox id="cb3" checked disabled>Disabled</Checkbox>
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Radio group</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:flex-start;"
+            >
+              <Radio id="rb1" name="plan" checked>On-demand</Radio>
+              <Radio id="rb2" name="plan">Reserved</Radio>
+              <Radio id="rb3" name="plan" disabled>Spot</Radio>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── TEXTFIELD ── -->
+        <section id="textfield" class="blk">
+          <h2>TextField</h2>
+          <p class="blk__desc">Text, email, password, textarea.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Fields</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:stretch;max-width:380px;"
+            >
+              <TextField label="Service name" placeholder="api-gateway" />
+              <TextField
+                label="Email"
+                type="email"
+                placeholder="you@nova.dev"
+              />
+              <TextField
+                label="Password"
+                type="password"
+                placeholder="••••••••"
+              />
+              <TextField
+                label="Message"
+                type="textarea"
+                placeholder="Type here…"
+                max={120}
+              />
+            </div>
+          </div>
+        </section>
+
+        <!-- ── SELECT ── -->
+        <section id="select" class="blk">
+          <h2>Select</h2>
+          <p class="blk__desc">Default and disabled.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Select</span>
+            <div class="vg__body">
+              <Select default="option3">
+                <SelectOption value="option1">Option 1</SelectOption>
+                <SelectOption value="option2">Option 2</SelectOption>
+                <SelectOption value="option3">Option 3</SelectOption>
+                <SelectOption value="option4">Option 4</SelectOption>
+                <SelectOption value="option5" disabled>Option 5</SelectOption>
+              </Select>
+              <Select disabled>
+                <SelectOption value="d">Disabled</SelectOption>
+              </Select>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── NUMERIC STEPPER ── -->
+        <section id="stepper" class="blk">
+          <h2>Numeric stepper</h2>
+          <p class="blk__desc">Increment / decrement control.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Stepper</span>
+            <div class="vg__body">
+              <NumericStepper min={-15} max={10} value={5} step={5} id="ns1" />
+            </div>
+          </div>
+        </section>
+
+        <!-- ── AVATAR ── -->
+        <section id="avatar" class="blk">
+          <h2>Avatar</h2>
+          <p class="blk__desc">Photo and initials.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Types</span>
+            <div class="vg__body">
+              <Avatar
+                type="photo"
+                name="John Doe"
+                image="https://i.pravatar.cc/80?img=12"
+              />
+              <Avatar type="initials" name="Ava Stone" />
+              <Avatar type="initials" name="Jane Smith" />
+            </div>
+          </div>
+        </section>
+
+        <!-- ── LOADING BAR ── -->
+        <section id="loading" class="blk">
+          <h2>Loading bar</h2>
+          <p class="blk__desc">Determinate and indeterminate.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Known 75% · indeterminate</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:stretch;width:100%"
+            >
+              <LoadingBar type="known" percentage={75} width="100%" />
+              <LoadingBar type="unknown" width="100%" />
+            </div>
+          </div>
+        </section>
+
+        <!-- ── LIST ITEM ── -->
+        <section id="listitem" class="blk">
+          <h2>List item</h2>
+          <p class="blk__desc">Title and subtitle rows.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">List</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:stretch;padding:0;gap:0;"
+            >
+              <ListItem>
+                <ListItemTitle>api-gateway</ListItemTitle>
+                <ListItemSubtitle>Edge routing · eu-west-1</ListItemSubtitle>
+              </ListItem>
+              <ListItem>
+                <ListItemTitle>postgres-main</ListItemTitle>
+                <ListItemSubtitle>Database · eu-west-1</ListItemSubtitle>
+              </ListItem>
+              <ListItem>
+                <ListItemTitle>redis-cache</ListItemTitle>
+                <ListItemSubtitle>Cache · eu-west-1</ListItemSubtitle>
+              </ListItem>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── LINK ── -->
+        <section id="link" class="blk">
+          <h2>Link</h2>
+          <p class="blk__desc">Inline and external.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Links</span>
+            <div class="vg__body">
+              <Link url="https://example.com">Documentation</Link>
+              <Link url="https://example.com" blank={true}
+                >Open dashboard ↗</Link
+              >
+            </div>
+          </div>
+        </section>
+
+        <!-- ── TABS ── -->
+        <section id="tabs" class="blk">
+          <h2>Tabs</h2>
+          <p class="blk__desc">Underline tabs with panels (interactive).</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Tabs + content</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:stretch;"
+            >
+              <Tab id="g-tab" defaultActive="images">
+                <TabItem id="images">Images</TabItem>
+                <TabItem id="videos">Videos</TabItem>
+                <TabItem id="docs">Documents</TabItem>
+              </Tab>
+              <TabContent id="g-tab" itemId="images"
+                ><p>🖼️ Image gallery content.</p></TabContent
+              >
+              <TabContent id="g-tab" itemId="videos"
+                ><p>🎬 Video player here.</p></TabContent
+              >
+              <TabContent id="g-tab" itemId="docs"
+                ><p>📄 Document list here.</p></TabContent
+              >
+            </div>
+          </div>
+        </section>
+
+        <!-- ── BREADCRUMB ── -->
+        <section id="breadcrumb" class="blk">
+          <h2>Breadcrumb</h2>
+          <p class="blk__desc">Hierarchical navigation.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Breadcrumb</span>
+            <div class="vg__body">
+              <Breadcrumb>
+                <BreadcrumbItem href="/">Home</BreadcrumbItem>
+                <BreadcrumbItem href="/services">Services</BreadcrumbItem>
+                <BreadcrumbItem current>api-gateway</BreadcrumbItem>
+              </Breadcrumb>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── PAGINATION ── -->
+        <section id="pagination" class="blk">
+          <h2>Pagination</h2>
+          <p class="blk__desc">Page numbers with disabled edges.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Pagination</span>
+            <div class="vg__body">
+              <Pagination defaultPage={3}>
+                <PaginationNumber>1</PaginationNumber>
+                <PaginationNumber>2</PaginationNumber>
+                <PaginationNumber>3</PaginationNumber>
+                <PaginationNumber>4</PaginationNumber>
+                <PaginationNumber disabled>5</PaginationNumber>
+              </Pagination>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── NOTIFICATION ── -->
+        <section id="notification" class="blk">
+          <h2>Notification</h2>
+          <p class="blk__desc">Info, success, warning and error.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">All types</span>
+            <div
+              class="vg__body"
+              style="flex-direction:column;align-items:stretch;max-width:460px;"
+            >
+              {
+                notifTypes.map((t) => (
+                  <Notification type={t}>{notifMessages[t]}</Notification>
+                ))
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- ── TOOLTIP ── -->
+        <section id="tooltip" class="blk">
+          <h2>Tooltip</h2>
+          <p class="blk__desc">Four positions — hover the buttons.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Positions</span>
+            <div class="vg__body">
+              {
+                tooltipPositions.map((pos) => (
+                  <Tooltip label={`Tooltip ${pos}`} position={pos}>
+                    <Button type="secondary" size="md">
+                      {pos[0].toUpperCase() + pos.slice(1)}
+                    </Button>
+                  </Tooltip>
+                ))
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- ── CARD ── -->
+        <section id="card" class="blk">
+          <h2>Card</h2>
+          <p class="blk__desc">With cover, plain and with footer actions.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Cover · plain · with footer</span>
+            <div class="vg__body" style="align-items:flex-start;">
+              <Card
+                title="api-gateway"
+                subtitle="Edge routing · 99.98% uptime"
+                cover="/peak.jpg"
+              >
+                <div slot="footer">
+                  <Badge type="success" variant="soft">Live</Badge>
+                </div>
+              </Card>
+              <Card
+                title="Quick note"
+                subtitle="A plain card without a cover image."
+              />
+              <Card title="Deploy" subtitle="Ship build 4821 to production.">
+                <div slot="footer" style="display:flex;gap:8px;">
+                  <Button type="ghost" size="sm">Cancel</Button>
+                  <Button type="primary" size="sm">Deploy</Button>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── APP CHROME ── -->
+        <section id="chrome" class="blk">
+          <h2>Navbar · Sidebar</h2>
+          <p class="blk__desc">App chrome.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Navbar</span>
+            <div class="vg__body" style="align-items:stretch;padding:0;">
+              <Navbar brand="Nova">
+                <a class="navbar__link navbar__link--active" href="#"
+                  >Services</a
+                >
+                <a class="navbar__link" href="#">Incidents</a>
+                <a class="navbar__link" href="#">Settings</a>
+                <Avatar slot="right" type="initials" name="Ava Stone" />
+              </Navbar>
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Sidebar</span>
+            <div class="vg__body">
+              <Sidebar header="Nova">
+                <SidebarItem href="#" active
+                  ><OverviewIcon slot="icon" size={18} />Overview</SidebarItem
+                >
+                <SidebarItem href="#"
+                  ><StatsIcon slot="icon" size={18} />Metrics</SidebarItem
+                >
+                <SidebarItem href="#"
+                  ><ShieldIcon slot="icon" size={18} />Security</SidebarItem
+                >
+                <SidebarItem href="#"
+                  ><SettingsIcon slot="icon" size={18} />Settings</SidebarItem
+                >
+              </Sidebar>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── MODAL ── -->
+        <section id="modal" class="blk">
+          <h2>Modal</h2>
+          <p class="blk__desc">
+            Overlay dialog — click to open, Escape or overlay to close.
+          </p>
+
+          <div class="vg">
+            <span class="vg__lbl">Dialog</span>
+            <div class="vg__body">
+              <Button type="primary" size="md" data-modal-open="gallery-modal"
+                >Open modal</Button
+              >
+            </div>
+          </div>
+
+          <Modal id="gallery-modal" title="Confirm deploy">
+            Ship build 4821 to production? This rolls out to all edge regions.
+            <Fragment slot="footer">
+              <Button type="ghost" size="md" data-modal-close>Cancel</Button>
+              <Button type="primary" size="md" data-modal-close>Deploy</Button>
+            </Fragment>
+          </Modal>
+        </section>
+
+        <!-- ── ICONS ── -->
+        <section id="icons" class="blk">
+          <h2>Icons</h2>
+          <p class="blk__desc">25 line icons at 16 / 24 / 32 px.</p>
+
+          <div class="vg">
+            <span class="vg__lbl">Arrow2 — orientations × 16 / 24 / 32</span>
+            <div class="vg__body">
+              {
+                ([16, 24, 32] as const).map((s) => (
+                  <span class="icon-line">
+                    <Arrow2Icon size={s} orientation="up" />
+                    <Arrow2Icon size={s} orientation="right" />
+                    <Arrow2Icon size={s} orientation="down" />
+                    <Arrow2Icon size={s} orientation="left" />
+                  </span>
+                ))
+              }
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Library — 25 icons at 24px</span>
+            <div class="vg__body" style="display:block;">
+              <div class="icon-grid">
+                {
+                  iconLib.map(({ name, Icon }) => (
+                    <div class="icon-cell">
+                      <Icon size={24} />
+                      <span>{name}</span>
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+          </div>
+
+          <div class="vg">
+            <span class="vg__lbl">Sizes — 16 / 24 / 32</span>
+            <div class="vg__body">
+              {
+                [SearchIcon, SettingsIcon, ShareIcon, DownloadIcon].map(
+                  (Icon) => (
+                    <span class="icon-line">
+                      <>
+                        <Icon size={16} />
+                        <Icon size={24} />
+                        <Icon size={32} />
+                      </>
+                    </span>
+                  ),
+                )
+              }
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</Layout>
+
+<script>
+  // Persisted theme toggle
+  const KEY = "nova-theme";
+  const saved = localStorage.getItem(KEY);
+  if (saved) document.documentElement.setAttribute("data-theme", saved);
+  document.getElementById("theme-btn")?.addEventListener("click", () => {
+    const dark = document.documentElement.getAttribute("data-theme") === "dark";
+    const next = dark ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", next);
+    localStorage.setItem(KEY, next);
+  });
+
+  // Smooth rail nav
+  document.querySelectorAll(".g-rail a").forEach((a) => {
+    a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const target = document.querySelector(
+        (a as HTMLAnchorElement).getAttribute("href")!,
+      );
+      target?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  });
+</script>
+
+<style lang="scss">
+  @use "../styles/tokens/typography" as *;
+
+  .g-page {
+    min-height: 100vh;
+    background-color: var(--nds-background);
+    color: var(--nds-text);
+  }
+
+  // ── Topbar ──
+  .g-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nds-spacing-md);
+    padding: 12px var(--nds-spacing-lg);
+    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+    background: color-mix(in srgb, var(--nds-background) 85%, transparent);
+    backdrop-filter: blur(10px);
+  }
+  .g-brand {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-xs);
+  }
+  .g-mark {
+    width: 26px;
+    height: 26px;
+    border-radius: var(--nds-radius-md);
+    background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
+  }
+  .g-name {
+    @include text-xl;
+  }
+
+  // ── Layout ──
+  .g-layout {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+  }
+
+  // ── Rail ──
+  .g-rail {
+    position: sticky;
+    top: 53px;
+    align-self: start;
+    height: calc(100vh - 53px);
+    overflow-y: auto;
+    padding: var(--nds-spacing-md) var(--nds-spacing-sm);
+    border-right: var(--nds-border-width-thin) solid var(--nds-border);
+    background: var(--nds-surface);
+    &__head {
+      @include text-label;
+      color: var(--nds-text);
+      padding: var(--nds-spacing-xs) var(--nds-spacing-xs) var(--nds-spacing-md);
+      margin: 0;
+    }
+    a {
+      display: block;
+      padding: 5px var(--nds-spacing-xs);
+      border-radius: var(--nds-radius-sm);
+      color: var(--nds-neutral);
+      text-decoration: none;
+      @include text-sm;
+      transition:
+        background-color 120ms ease,
+        color 120ms ease;
+      &:hover {
+        background: var(--nds-surface-hover);
+        color: var(--nds-text);
+      }
+    }
+  }
+
+  // ── Content ──
+  .g-content {
+    padding: var(--nds-spacing-2xl) var(--nds-spacing-2xl)
+      var(--nds-spacing-3xl);
+    max-width: 880px;
+  }
+
+  // ── Block ──
+  .blk {
+    margin-bottom: var(--nds-spacing-2xl);
+    scroll-margin-top: var(--nds-spacing-lg);
+    > h2 {
+      @include text-2xl;
+      margin: 0 0 var(--nds-spacing-3xs);
+    }
+    &__desc {
+      @include text-base;
+      color: var(--nds-neutral);
+      margin: 0 0 var(--nds-spacing-lg);
+    }
+  }
+
+  // ── Variant group ──
+  .vg {
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-lg);
+    overflow: hidden;
+    background: var(--nds-surface);
+    & + & {
+      margin-top: var(--nds-spacing-md);
+    }
+
+    &__lbl {
+      display: block;
+      @include text-sm;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--nds-neutral);
+      padding: var(--nds-spacing-xs) var(--nds-spacing-md);
+      border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+      background: color-mix(in srgb, var(--nds-text) 2.5%, var(--nds-surface));
+    }
+    &__body {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--nds-spacing-md);
+      padding: var(--nds-spacing-lg) var(--nds-spacing-md);
+    }
+  }
+
+  // ── Foundations specimens ──
+  .type-scale {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0 !important;
+    gap: 0 !important;
+  }
+  .type-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--nds-spacing-md);
+    padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .type-tag {
+    @include text-sm;
+    font-family: var(--nds-font-mono);
+    color: var(--nds-neutral);
+    width: 80px;
+    flex-shrink: 0;
+  }
+  .disp {
+    font-family: var(--nds-font-mono);
+    font-weight: 700;
+  }
+  .sans {
+    font-family: var(--nds-font-sans);
+  }
+  .t5xl {
+    font-size: 52px;
+  }
+  .t4xl {
+    font-size: 40px;
+  }
+  .t3xl {
+    font-size: 30px;
+  }
+  .t2xl {
+    font-size: 22px;
+  }
+  .txl {
+    font-size: 18px;
+  }
+  .tlg {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .tbase {
+    font-size: 14px;
+  }
+  .tlabel {
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .tsm {
+    font-size: 12px;
+  }
+
+  .swatch-row {
+    gap: var(--nds-spacing-sm) !important;
+    flex-wrap: wrap;
+  }
+  .swatch {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .swatch-chip {
+    width: 80px;
+    height: 44px;
+    border-radius: var(--nds-radius-md);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+  }
+  .swatch-name {
+    @include text-sm;
+    color: var(--nds-neutral);
+    font-family: var(--nds-font-mono);
+  }
+
+  .sp-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-md);
+  }
+  .sp-label {
+    @include text-sm;
+    color: var(--nds-neutral);
+    font-family: var(--nds-font-mono);
+    width: 160px;
+    flex-shrink: 0;
+  }
+  .sp-bar {
+    height: 14px;
+    background: var(--nds-primary);
+    border-radius: 2px;
+  }
+
+  .rad-chip {
+    width: 72px;
+    height: 72px;
+    background: var(--nds-primary-soft);
+    border: var(--nds-border-width-thin) solid var(--nds-primary);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding: 6px;
+    span {
+      @include text-sm;
+      color: var(--nds-primary);
+    }
+  }
+  .elev-chip {
+    width: 130px;
+    height: 72px;
+    background: var(--nds-surface);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include text-sm;
+    color: var(--nds-neutral);
+    font-family: var(--nds-font-mono);
+  }
+
+  // ── Icons ──
+  .icon-line {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nds-spacing-md);
+    color: var(--nds-text);
+  }
+  .icon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    gap: var(--nds-spacing-xs);
+    width: 100%;
+  }
+  .icon-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nds-spacing-xs);
+    padding: var(--nds-spacing-md) var(--nds-spacing-xs);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-md);
+    color: var(--nds-text);
+    span {
+      @include text-sm;
+      color: var(--nds-neutral);
+      font-family: var(--nds-font-mono);
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 77c640d..f80b721 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,45 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Notification from '../components/Notifications/notification.astro';
+
+// Core
+import Button from '../components/Button/button.astro';
+import Badge from '../components/Badge/badge.astro';
+import Avatar from '../components/Avatar/avatar.astro';
+
+// Forms
 import Toggle from '../components/Toggle/toggle.astro';
+import Checkbox from '../components/Checkbox/checkbox.astro';
+import Radio from '../components/Radio/radio.astro';
+import TextField from '../components/textField/textField.astro';
+import Select from '../components/Select/select.astro';
+import SelectOption from '../components/Select/selectOption.astro';
+import NumericStepper from '../components/numericStepper/numericStepper.astro';
+
+// Navigation
 import Tab from '../components/Tabs/tab.astro';
 import TabItem from '../components/Tabs/tabItem.astro';
 import TabContent from '../components/Tabs/tabContent.astro';
-import Button from '../components/Button/button.astro';
 import Link from '../components/Link/link.astro';
+import Breadcrumb from '../components/Breadcrumb/breadcrumb.astro';
+import BreadcrumbItem from '../components/Breadcrumb/breadcrumbItem.astro';
+import Pagination from '../components/pagination/pagination.astro';
+import PaginationNumber from '../components/pagination/paginationNumber.astro';
+import Navbar from '../components/Navbar/navbar.astro';
+import Sidebar from '../components/Sidebar/sidebar.astro';
+import SidebarItem from '../components/Sidebar/sidebarItem.astro';
+
+// Data
+import Card from '../components/Card/card.astro';
 import ListItem from '../components/ListItem/listItem.astro';
 import ListItemTitle from '../components/ListItem/listItemTitle.astro';
 import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
+
+// Feedback
+import Notification from '../components/Notifications/notification.astro';
 import LoadingBar from '../components/LoadingBar/loadingBar.astro';
-import NumericStepper from '../components/numericStepper/numericStepper.astro';
-import Avatar from '../components/Avatar/avatar.astro';
-import Select from '../components/Select/select.astro';
-import SelectOption from '../components/Select/selectOption.astro';
-import TextField from '../components/textField/textField.astro';
-import Pagination from '../components/pagination/pagination.astro';
-import PaginationNumber from '../components/pagination/paginationNumber.astro';
+import Tooltip from '../components/Tooltip/tooltip.astro';
+import Modal from '../components/Modal/modal.astro';
+
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -26,15 +48,204 @@ import {
   UploadIcon,
 } from '../components/Icons/index.ts';
 
-const initialChecked = true;
+const tones = ['primary', 'neutral', 'success', 'warning', 'error', 'info'] as const;
+const buttonTypes = ['primary', 'secondary', 'ghost', 'danger'] as const;
+const sizes = ['sm', 'md', 'lg'] as const;
+const libraryIcons = [
+  ['Profile', ProfileIcon], ['Search', SearchIcon], ['Settings', SettingsIcon],
+  ['Home', HomeIcon], ['Overview', OverviewIcon], ['Stats', StatsIcon],
+  ['Share', ShareIcon], ['Shield', ShieldIcon], ['Download', DownloadIcon],
+  ['Upload', UploadIcon], ['Filter', FilterIcon], ['Bin', BinIcon],
+  ['Burger', BurgerIcon], ['Calendar', CalendarIcon], ['Check', CheckIcon],
+  ['Close', CloseIcon], ['Code', CodeIcon], ['Cube', CubeIcon],
+  ['Help', HelpIcon], ['Link', LinkIcon], ['Minus', MinusIcon],
+  ['More', MoreIcon], ['Plus', PlusIcon], ['Sort', SortIcon],
+] as const;
 ---
 
 <Layout>
-  <main>
-    <h1>Nova Design System</h1>
-    <section>
+  <div class="gallery">
+    <header class="gallery__head">
+      <div class="gallery__brand">
+        <span class="gallery__mark"></span>
+        <span class="gallery__name">Nova Design System</span>
+        <Badge type="primary" variant="soft">v0.06</Badge>
+      </div>
+      <Button type="secondary" size="sm" id="theme-toggle">Toggle theme</Button>
+    </header>
+
+    <!-- BUTTON -->
+    <section class="block" id="button">
+      <h2>Button</h2>
+      <p class="block__desc">Variants, sizes, icon and disabled states.</p>
+      <div class="vgroup"><span class="vgroup__label">Variants × md</span><div class="vgroup__body">
+        {buttonTypes.map((t) => <Button type={t} size="md">{t[0].toUpperCase() + t.slice(1)}</Button>)}
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Sizes (primary)</span><div class="vgroup__body">
+        {sizes.map((s) => <Button type="primary" size={s}>Size {s}</Button>)}
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">With icon · icon-only</span><div class="vgroup__body">
+        <Button type="primary" size="md"><PlusIcon slot="icon-left" size={16} />New service</Button>
+        <Button type="secondary" size="md">Filter<FilterIcon slot="icon-right" size={16} /></Button>
+        <Button type="ghost" size="md" icon={true}><MoreIcon size={18} /></Button>
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Disabled</span><div class="vgroup__body">
+        {buttonTypes.map((t) => <Button type={t} size="md" disabled>{t}</Button>)}
+      </div></div>
+    </section>
+
+    <!-- BADGE -->
+    <section class="block" id="badge">
+      <h2>Badge</h2>
+      <p class="block__desc">Tones × soft / solid.</p>
+      <div class="vgroup"><span class="vgroup__label">Soft</span><div class="vgroup__body">
+        {tones.map((t) => <Badge type={t} variant="soft">{t}</Badge>)}
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Solid</span><div class="vgroup__body">
+        {tones.map((t) => <Badge type={t} variant="solid">{t}</Badge>)}
+      </div></div>
+    </section>
+
+    <!-- SELECTION CONTROLS -->
+    <section class="block" id="controls">
+      <h2>Toggle · Checkbox · Radio</h2>
+      <p class="block__desc">Selection controls in every state.</p>
+      <div class="vgroup"><span class="vgroup__label">Toggle — off / on</span><div class="vgroup__body">
+        <Toggle id="tg-off" />
+        <Toggle id="tg-on" data-checked={true} />
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Checkbox</span><div class="vgroup__body">
+        <Checkbox id="cb1">Unchecked</Checkbox>
+        <Checkbox id="cb2" checked>Checked</Checkbox>
+        <Checkbox id="cb3" checked disabled>Disabled</Checkbox>
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Radio group</span><div class="vgroup__body" style="flex-direction:column;align-items:flex-start;">
+        <Radio id="rb1" name="plan" checked>On-demand</Radio>
+        <Radio id="rb2" name="plan">Reserved</Radio>
+        <Radio id="rb3" name="plan" disabled>Spot</Radio>
+      </div></div>
+    </section>
+
+    <!-- TEXTFIELD -->
+    <section class="block" id="textfield">
+      <h2>TextField</h2>
+      <p class="block__desc">Text, email, password, textarea.</p>
+      <div class="vgroup"><span class="vgroup__label">Fields</span><div class="vgroup__body" style="flex-direction:column;align-items:stretch;max-width:360px;">
+        <TextField label="Service name" placeholder="api-gateway" />
+        <TextField label="Email" type="email" placeholder="you@nova.dev" />
+        <TextField label="Password" type="password" placeholder="••••••••" />
+        <TextField label="Message" type="textarea" placeholder="Type here…" max={120} />
+      </div></div>
+    </section>
+
+    <!-- SELECT -->
+    <section class="block" id="select">
+      <h2>Select</h2>
+      <p class="block__desc">Default and disabled.</p>
+      <div class="vgroup"><span class="vgroup__label">Select</span><div class="vgroup__body">
+        <Select default="option3">
+          <SelectOption value="option1">Option 1</SelectOption>
+          <SelectOption value="option2">Option 2</SelectOption>
+          <SelectOption value="option3">Option 3</SelectOption>
+          <SelectOption value="option4">Option 4</SelectOption>
+          <SelectOption value="option5" disabled>Option 5</SelectOption>
+        </Select>
+        <Select disabled>
+          <SelectOption value="option1">Disabled</SelectOption>
+        </Select>
+      </div></div>
+    </section>
+
+    <!-- NUMERIC STEPPER -->
+    <section class="block" id="stepper">
+      <h2>Numeric stepper</h2>
+      <p class="block__desc">Increment / decrement control.</p>
+      <div class="vgroup"><span class="vgroup__label">Stepper</span><div class="vgroup__body">
+        <NumericStepper min={-15} max={10} value={5} step={5} id="ns1" />
+      </div></div>
+    </section>
+
+    <!-- AVATAR -->
+    <section class="block" id="avatar">
+      <h2>Avatar</h2>
+      <p class="block__desc">Photo and initials.</p>
+      <div class="vgroup"><span class="vgroup__label">Types</span><div class="vgroup__body">
+        <Avatar type="photo" name="John Doe" image="https://i.pravatar.cc/80?img=12" />
+        <Avatar type="initials" name="Ava Stone" />
+        <Avatar type="initials" name="Jane Smith" />
+      </div></div>
+    </section>
+
+    <!-- LOADING BAR -->
+    <section class="block" id="loading">
+      <h2>Loading bar</h2>
+      <p class="block__desc">Determinate and indeterminate.</p>
+      <div class="vgroup"><span class="vgroup__label">Known 75% · indeterminate</span><div class="vgroup__body" style="flex-direction:column;align-items:stretch;">
+        <LoadingBar type="known" percentage={75} width="100%" />
+        <LoadingBar type="unknown" width="100%" />
+      </div></div>
+    </section>
+
+    <!-- LIST ITEM -->
+    <section class="block" id="listitem">
+      <h2>List item</h2>
+      <p class="block__desc">Title and subtitle rows.</p>
+      <div class="vgroup"><span class="vgroup__label">List</span><div class="vgroup__body" style="flex-direction:column;align-items:stretch;">
+        <ListItem>
+          <ListItemTitle>api-gateway</ListItemTitle>
+          <ListItemSubtitle>Edge routing · eu-west-1</ListItemSubtitle>
+        </ListItem>
+        <ListItem>
+          <ListItemTitle>postgres-main</ListItemTitle>
+          <ListItemSubtitle>Database · eu-west-1</ListItemSubtitle>
+        </ListItem>
+      </div></div>
+    </section>
+
+    <!-- LINK -->
+    <section class="block" id="link">
+      <h2>Link</h2>
+      <p class="block__desc">Inline and external.</p>
+      <div class="vgroup"><span class="vgroup__label">Links</span><div class="vgroup__body">
+        <Link url="https://example.com">Documentation</Link>
+        <Link url="https://example.com" blank={true}>Open dashboard</Link>
+      </div></div>
+    </section>
+
+    <!-- TABS -->
+    <section class="block" id="tabs">
+      <h2>Tabs</h2>
+      <p class="block__desc">Underline tabs with panels.</p>
+      <div class="vgroup"><span class="vgroup__label">Tabs</span><div class="vgroup__body" style="flex-direction:column;align-items:stretch;">
+        <Tab id="gallery-tab" defaultActive="images">
+          <TabItem id="images">Images</TabItem>
+          <TabItem id="videos">Videos</TabItem>
+          <TabItem id="docs">Documents</TabItem>
+        </Tab>
+        <TabContent id="gallery-tab" itemId="images"><p>🖼️ Image gallery content.</p></TabContent>
+        <TabContent id="gallery-tab" itemId="videos"><p>🎬 Video player here.</p></TabContent>
+        <TabContent id="gallery-tab" itemId="docs"><p>📄 Document list here.</p></TabContent>
+      </div></div>
+    </section>
+
+    <!-- BREADCRUMB -->
+    <section class="block" id="breadcrumb">
+      <h2>Breadcrumb</h2>
+      <p class="block__desc">Hierarchical navigation.</p>
+      <div class="vgroup"><span class="vgroup__label">Breadcrumb</span><div class="vgroup__body">
+        <Breadcrumb>
+          <BreadcrumbItem href="/">Home</BreadcrumbItem>
+          <BreadcrumbItem href="/services">Services</BreadcrumbItem>
+          <BreadcrumbItem current>api-gateway</BreadcrumbItem>
+        </Breadcrumb>
+      </div></div>
+    </section>
+
+    <!-- PAGINATION -->
+    <section class="block" id="pagination">
       <h2>Pagination</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+      <p class="block__desc">Page numbers with disabled edges.</p>
+      <div class="vgroup"><span class="vgroup__label">Pagination</span><div class="vgroup__body">
         <Pagination defaultPage={3}>
           <PaginationNumber>1</PaginationNumber>
           <PaginationNumber>2</PaginationNumber>
@@ -42,364 +253,192 @@ const initialChecked = true;
           <PaginationNumber>4</PaginationNumber>
           <PaginationNumber disabled>5</PaginationNumber>
         </Pagination>
-      </div>
+      </div></div>
     </section>
-    <section>
-      <h2>TextField</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <TextField label="Email" type="email" placeholder="Enter your email" />
-        <TextField label="Password" type="password" placeholder="Enter your password" />
-        <TextField label="Textarea" type="textarea" placeholder="Enter your message" max={100} />
-      </div>
-    </section>
-    <section>
-      <h2>Select</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Select default="option3">
-          <SelectOption value="option1">Option 1</SelectOption>
-          <SelectOption value="option2">Option 2</SelectOption>
-          <SelectOption value="option3" >Option 3</SelectOption>
-          <SelectOption value="option4" >Option 4</SelectOption>
-          <SelectOption value="option5" >Option 5</SelectOption>
-          <SelectOption value="option6" >Option 6</SelectOption>
-          <SelectOption value="option7" >Option 7</SelectOption>
-          <SelectOption value="option8" >Option 8</SelectOption>
-          <SelectOption value="option9" disabled>Option 9</SelectOption>
-        </Select>
-        <Select disabled>
-          <SelectOption value="option1">Option 1</SelectOption>
-        </Select>
-      </div>
-    </section>
-    <section>
-      <h2>Avatar</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Avatar image="https://static.vecteezy.com/system/resources/thumbnails/057/068/323/small/single-fresh-red-strawberry-on-table-green-background-food-fruit-sweet-macro-juicy-plant-image-photo.jpg" name="John Doe" type="photo"/>
-        <Avatar name="Jane Smith" type="initials"/>
-      </div>
-    </section>
-    <section>
-      <h2>Numeric Stepper</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <NumericStepper min={-15} max={10} value={5} step={5} id="my-numeric-stepper"/>
-      </div>
-    </section>
-    <section>
-      <h2>Loading Bar</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <LoadingBar type="known" percentage={75} width="500px" />
-        <LoadingBar type="unknown" width="500px" />
-      </div>
-    </section>
-    <section>
-      <h2>List Item</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <ListItem>
-          <ListItemTitle>List Item Title</ListItemTitle>
-          <ListItemSubtitle>List Item Subtitle</ListItemSubtitle>
-        </ListItem>
-      </div>
-    </section>
-    <section>
-      <h2>Link</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Link url="https://example.com">Example Link</Link>
-        <Link url="https://example.com" blank={true}>Example Link (opens in new tab)</Link>
-      </div>
-    </section>
-    <section>
-      <h2>Button</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Button type="primary">Primary Button</Button>
-        <Button type="secondary">Secondary Button</Button>
-        <Button type="primary" disabled>disabled</Button>
-      </div>
-    </section>
-    <section>
-      <h2>Tabs</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Tab id="my-tab" defaultActive="images">
-          <TabItem id="images">images</TabItem>
-          <TabItem id="videos">Videos</TabItem>
-          <TabItem id="docs">Documents</TabItem>
-        </Tab>
-        <TabContent id="my-tab" itemId="images">
-          <p>my images</p>
-        </TabContent>
 
-        <TabContent id="my-tab" itemId="videos">
-          <p>Video player here</p>
-        </TabContent>
+    <!-- NOTIFICATION -->
+    <section class="block" id="notification">
+      <h2>Notification</h2>
+      <p class="block__desc">Info, success, warning and error.</p>
+      <div class="vgroup"><span class="vgroup__label">All types</span><div class="vgroup__body" style="flex-direction:column;align-items:stretch;max-width:440px;">
+        <Notification type="info">Information about the operation.</Notification>
+        <Notification type="success">The operation completed successfully.</Notification>
+        <Notification type="warning">A warning occurred. Please check the details.</Notification>
+        <Notification type="error">An error occurred. Please try again.</Notification>
+      </div></div>
+    </section>
 
-        <TabContent id="my-tab" itemId="docs">
-          <p>Document list here</p>
-        </TabContent>
-      </div>
+    <!-- TOOLTIP -->
+    <section class="block" id="tooltip">
+      <h2>Tooltip</h2>
+      <p class="block__desc">Four positions — hover the buttons.</p>
+      <div class="vgroup"><span class="vgroup__label">Positions</span><div class="vgroup__body">
+        <Tooltip label="Tooltip top" position="top"><Button type="secondary" size="md">Top</Button></Tooltip>
+        <Tooltip label="Tooltip bottom" position="bottom"><Button type="secondary" size="md">Bottom</Button></Tooltip>
+        <Tooltip label="Tooltip left" position="left"><Button type="secondary" size="md">Left</Button></Tooltip>
+        <Tooltip label="Tooltip right" position="right"><Button type="secondary" size="md">Right</Button></Tooltip>
+      </div></div>
     </section>
-    <section>
-      <h2>Toggle</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
-        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
-      </div>
+
+    <!-- CARD -->
+    <section class="block" id="card">
+      <h2>Card</h2>
+      <p class="block__desc">With cover, plain and with footer.</p>
+      <div class="vgroup"><span class="vgroup__label">Cards</span><div class="vgroup__body" style="align-items:flex-start;">
+        <Card title="api-gateway" subtitle="Edge routing · 99.98% uptime">
+          <div slot="footer"><Badge type="success" variant="soft">Live</Badge></div>
+        </Card>
+        <Card title="Quick note" subtitle="A plain card without a cover image." />
+        <Card title="Deploy" subtitle="Ship build 4821 to production.">
+          <div slot="footer">
+            <Button type="ghost" size="sm">Cancel</Button>
+            <Button type="primary" size="sm">Deploy</Button>
+          </div>
+        </Card>
+      </div></div>
     </section>
-    <section>
-      <h2>Notifications — Error / Warning / Success / Info</h2>
-      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Notification type="error">
-            An error occurred during the operation. Please try again.
-        </Notification>
-        <Notification type="success">
-            The operation was completed successfully.
-        </Notification>
-        <Notification type="warning">
-            A warning occurred during the operation. Please check the details.
-        </Notification>
-        <Notification type="info">
-            Information about the operation.
-        </Notification>
-      </div>
+
+    <!-- APP CHROME -->
+    <section class="block" id="chrome">
+      <h2>Navbar · Sidebar</h2>
+      <p class="block__desc">App chrome.</p>
+      <div class="vgroup"><span class="vgroup__label">Navbar</span><div class="vgroup__body" style="align-items:stretch;">
+        <Navbar brand="Nova">
+          <a class="navbar__link navbar__link--active" href="#">Services</a>
+          <a class="navbar__link" href="#">Incidents</a>
+          <a class="navbar__link" href="#">Settings</a>
+          <Avatar slot="right" type="initials" name="Ava Stone" />
+        </Navbar>
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Sidebar</span><div class="vgroup__body">
+        <Sidebar header="Nova">
+          <SidebarItem href="#" active><OverviewIcon slot="icon" size={18} />Overview</SidebarItem>
+          <SidebarItem href="#"><StatsIcon slot="icon" size={18} />Metrics</SidebarItem>
+          <SidebarItem href="#"><ShieldIcon slot="icon" size={18} />Security</SidebarItem>
+          <SidebarItem href="#"><SettingsIcon slot="icon" size={18} />Settings</SidebarItem>
+        </Sidebar>
+      </div></div>
     </section>
-    <section>
-      <h2>Icon — 16 / 24 / 32</h2>
-      <div class="icon-grid">
-        <div class="icon-row">
-          <Arrow2Icon size={16} orientation="up" />
-          <Arrow2Icon size={16} orientation="right" />
-          <Arrow2Icon size={16} orientation="down" />
-          <Arrow2Icon size={16} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2Icon size={24} orientation="up" />
-          <Arrow2Icon size={24} orientation="right" />
-          <Arrow2Icon size={24} orientation="down" />
-          <Arrow2Icon size={24} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2Icon size={32} orientation="up" />
-          <Arrow2Icon size={32} orientation="right" />
-          <Arrow2Icon size={32} orientation="down" />
-          <Arrow2Icon size={32} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <ProfileIcon size={16} />
-          <ProfileIcon size={24} />
-          <ProfileIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <ShareIcon size={16} />
-          <ShareIcon size={24} />
-          <ShareIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SearchIcon size={16} />
-          <SearchIcon size={24} />
-          <SearchIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CloseIcon size={16} />
-          <CloseIcon size={24} />
-          <CloseIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <UploadIcon size={16} />
-          <UploadIcon size={24} />
-          <UploadIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <BinIcon size={16} />
-          <BinIcon size={24} />
-          <BinIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <BurgerIcon size={16} />
-          <BurgerIcon size={24} />
-          <BurgerIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CalendarIcon size={16} />
-          <CalendarIcon size={24} />
-          <CalendarIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CheckIcon size={16} />
-          <CheckIcon size={24} />
-          <CheckIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CodeIcon size={16} />
-          <CodeIcon size={24} />
-          <CodeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CubeIcon size={16} />
-          <CubeIcon size={24} />
-          <CubeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <DownloadIcon size={16} />
-          <DownloadIcon size={24} />
-          <DownloadIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <FilterIcon size={16} />
-          <FilterIcon size={24} />
-          <FilterIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <HelpIcon size={16} />
-          <HelpIcon size={24} />
-          <HelpIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <HomeIcon size={16} />
-          <HomeIcon size={24} />
-          <HomeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <LinkIcon size={16} />
-          <LinkIcon size={24} />
-          <LinkIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <MinusIcon size={16} />
-          <MinusIcon size={24} />
-          <MinusIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <MoreIcon size={16} />
-          <MoreIcon size={24} />
-          <MoreIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <OverviewIcon size={16} />
-          <OverviewIcon size={24} />
-          <OverviewIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <PlusIcon size={16} />
-          <PlusIcon size={24} />
-          <PlusIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SettingsIcon size={16} />
-          <SettingsIcon size={24} />
-          <SettingsIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <ShieldIcon size={16} />
-          <ShieldIcon size={24} />
-          <ShieldIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SortIcon size={16} variant="default" />
-          <SortIcon size={16} variant="ascend" />
-          <SortIcon size={16} variant="descend" />
-          <SortIcon size={24} variant="default" />
-          <SortIcon size={24} variant="ascend" />
-          <SortIcon size={24} variant="descend" />
-          <SortIcon size={32} variant="default" />
-          <SortIcon size={32} variant="ascend" />
-          <SortIcon size={32} variant="descend" />
-        </div>
-        <div class="icon-row">
-          <StatsIcon size={16} />
-          <StatsIcon size={24} />
-          <StatsIcon size={32} />
-        </div>
-      </div>
+
+    <!-- MODAL -->
+    <section class="block" id="modal">
+      <h2>Modal</h2>
+      <p class="block__desc">Overlay dialog.</p>
+      <div class="vgroup"><span class="vgroup__label">Dialog</span><div class="vgroup__body">
+        <Button type="primary" size="md" data-modal-open="demo-modal">Open modal</Button>
+      </div></div>
+      <Modal id="demo-modal" title="Confirm deploy">
+        Ship build 4821 to production? This rolls out to all edge regions.
+        <Fragment slot="footer">
+          <Button type="ghost" size="md" data-modal-close>Cancel</Button>
+          <Button type="primary" size="md" data-modal-close>Deploy</Button>
+        </Fragment>
+      </Modal>
     </section>
-  </main>
+
+    <!-- ICONS -->
+    <section class="block" id="icons">
+      <h2>Icons</h2>
+      <p class="block__desc">Library at 24px, plus arrow orientations and sizes.</p>
+      <div class="vgroup"><span class="vgroup__label">Arrow — orientations × 16/24/32</span><div class="vgroup__body">
+        {[16, 24, 32].map((s) => (
+          <span class="icon-line">
+            <Arrow2Icon size={s} orientation="up" />
+            <Arrow2Icon size={s} orientation="right" />
+            <Arrow2Icon size={s} orientation="down" />
+            <Arrow2Icon size={s} orientation="left" />
+          </span>
+        ))}
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Library (24px)</span><div class="vgroup__body" style="display:block;">
+        <div class="icon-grid">
+          {libraryIcons.map(([name, Icon]) => (
+            <div class="icon-cell"><Icon size={24} /><span>{name}</span></div>
+          ))}
+        </div>
+      </div></div>
+      <div class="vgroup"><span class="vgroup__label">Sizes — 16 / 24 / 32</span><div class="vgroup__body">
+        {[SearchIcon, SettingsIcon, ShareIcon, DownloadIcon].map((Icon) => (
+          <span class="icon-line">
+            <Icon size={16} /><Icon size={24} /><Icon size={32} />
+          </span>
+        ))}
+      </div></div>
+    </section>
+  </div>
 </Layout>
 
 <script>
-    const toggle = document.getElementById('my-toggle') as any;
-    const stateLabel = document.getElementById('toggle-state');
-
-    // Défaut: thème sombre
-    if (!document.documentElement.hasAttribute('data-theme')) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    }
-    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
-
-    toggle?.addEventListener('change', (e: CustomEvent) => {
-      const { checked } = e.detail;
-
-      if (checked) {
-        document.documentElement.setAttribute('data-theme', 'dark');
-        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
-      } else {
-        document.documentElement.setAttribute('data-theme', 'light');
-        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
-      }
-    });
+  // Theme toggle (persisted)
+  const KEY = 'nova-theme';
+  const saved = localStorage.getItem(KEY);
+  if (saved) document.documentElement.setAttribute('data-theme', saved);
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+    const next = dark ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem(KEY, next);
+  });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+  @use '../styles/tokens/typography' as *;
 
-  body {
-    background-color: var(--nds-background);
-    color: var(--nds-text);
-  }
-  
-  main {
-    max-width: 900px;
+  .gallery {
+    max-width: 1000px;
     margin: 0 auto;
-    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
+    padding: var(--nds-spacing-xl) var(--nds-spacing-lg) var(--nds-spacing-3xl);
   }
 
-  h1 {
-    font-size: var(--nds-type-h1-size);
-    font-weight: var(--nds-type-h1-weight);
-    line-height: var(--nds-type-h1-line-height);
-    letter-spacing: var(--nds-type-h1-letter-spacing);
-    margin-bottom: var(--nds-spacing-xl);
-  }
-
-  h2 {
-    font-size: var(--nds-type-h2-size);
-    font-weight: var(--nds-type-h2-weight);
-    line-height: var(--nds-type-h2-line-height);
-    letter-spacing: var(--nds-type-h2-letter-spacing);
-    color: var(--nds-text-muted);
-    margin-bottom: var(--nds-spacing-md);
-  }
-
-  section {
-    margin-bottom: var(--nds-spacing-2xl);
-  }
-
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nds-spacing-sm);
-  }
-
-  .icon-grid {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nds-spacing-xs);
-  }
-
-  .icon-row {
-    display: flex;
-    align-items: center;
-    gap: var(--nds-spacing-lg);
-    color: var(--nds-text);
-  }
-
-  .icon-name {
-    font-size: var(--nds-type-body-small-size);
-    color: var(--nds-text-muted);
-    width: 100px;
-    flex-shrink: 0;
-  }
-
-  .icon-sizes {
+  .gallery__head {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: var(--nds-spacing-md);
-    color: var(--nds-default);
+    margin-bottom: var(--nds-spacing-2xl);
+    padding-bottom: var(--nds-spacing-md);
+    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+  }
+  .gallery__brand { display: flex; align-items: center; gap: var(--nds-spacing-xs); }
+  .gallery__mark {
+    width: 26px; height: 26px; border-radius: var(--nds-radius-md);
+    background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
+  }
+  .gallery__name { @include text-xl; }
+
+  .block { margin-bottom: var(--nds-spacing-2xl); scroll-margin-top: var(--nds-spacing-lg); }
+  .block > h2 { @include text-2xl; margin: 0 0 var(--nds-spacing-3xs); }
+  .block__desc { color: var(--nds-neutral); @include text-base; margin: 0 0 var(--nds-spacing-lg); }
+
+  .vgroup {
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-lg);
+    background: var(--nds-surface);
+    overflow: hidden;
+    & + & { margin-top: var(--nds-spacing-md); }
+  }
+  .vgroup__label {
+    display: block;
+    @include text-sm; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
+    color: var(--nds-neutral);
+    padding: var(--nds-spacing-xs) var(--nds-spacing-md);
+    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+    background: color-mix(in srgb, var(--nds-text) 2.5%, var(--nds-surface));
+  }
+  .vgroup__body {
+    display: flex; flex-wrap: wrap; align-items: center;
+    gap: var(--nds-spacing-md);
+    padding: var(--nds-spacing-lg) var(--nds-spacing-md);
+  }
+
+  .icon-line { display: inline-flex; align-items: center; gap: var(--nds-spacing-md); color: var(--nds-text); }
+  .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--nds-spacing-xs); width: 100%; }
+  .icon-cell {
+    display: flex; flex-direction: column; align-items: center; gap: var(--nds-spacing-xs);
+    padding: var(--nds-spacing-md) var(--nds-spacing-xs);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-md);
+    color: var(--nds-text);
+    span { @include text-sm; color: var(--nds-neutral); font-family: var(--nds-font-mono); }
   }
 </style>