diff --git a/AGENTS.md b/AGENTS.md
index dccb27b..e3edfa8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,5 +1,9 @@
 # AGENTS
 
+Read this file together with `DESIGN.md`.
+`AGENTS.md` is the engineering and ownership source of truth.
+`DESIGN.md` is the visual and component-aesthetics source of truth.
+
 ## Purpose
 
 `mini-stim` is now a small, local-first single-person AI chat prototype.
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..c03b3bb
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,380 @@
+# mini-stim Design System
+
+This file is the visual source of truth for `mini-stim`.
+
+It exists to turn broad design inspiration into a stable local design system
+ that agents can apply repeatedly without re-deciding taste on every task.
+
+`AGENTS.md` defines ownership and engineering boundaries.
+`DESIGN.md` defines visual boundaries, component aesthetics, and the rules that
+ convert outside inspiration into reusable internal UI language.
+
+## 1. Design intent
+
+`mini-stim` is a focused work surface for a local-first AI chat product.
+
+It should feel:
+
+- calm
+- readable
+- tool-like
+- intentional
+- slightly refined, but never ornamental
+
+It should not feel:
+
+- like a marketing page
+- like a social chat app
+- playful, cute, or overly brand-heavy
+- glossy enterprise dashboard noise
+- editorial-for-editorial's-sake
+
+The interface is for sustained reading and iterative work. Visual choices must
+reduce fatigue before they add personality.
+
+## 2. Long-term system goal
+
+External references are inspiration, not templates.
+
+When a strong design reference is found, we do not copy page structure or
+ ad hoc colors into `web`. We extract the durable visual idea and translate it
+ into:
+
+- tokens
+- atom capabilities
+- surface rules
+- typography roles
+- spacing and border behavior
+
+Only after that translation should the idea appear in product UI.
+
+This is how visual taste becomes a maintainable system instead of a sequence of
+ one-off page edits.
+
+## 3. Current aesthetic direction
+
+The current direction is:
+
+- cool neutral workspace base
+- low-noise panels and surfaces
+- one restrained accent color
+- strong readability over dramatic contrast
+- subtle depth through value separation, not heavy shadowing
+
+The closest useful inspiration pattern is:
+
+- disciplined neutral surfaces
+- clear typographic hierarchy
+- sparse accent usage
+- light borders and soft separation
+
+The wrong takeaway from editorial references is warm paper nostalgia.
+The right takeaway is restraint, hierarchy, and accent discipline.
+
+## 4. Color philosophy
+
+### Base rule
+
+Use mostly neutral colors.
+
+The UI should be built from:
+
+- canvas
+- panel
+- subtle panel
+- surface
+- muted text
+- light border
+- one accent
+- success / warning / danger support tones
+
+### Accent rule
+
+Use one primary accent family at a time.
+
+Accent exists to mark:
+
+- primary action
+- selection
+- authored/account-side emphasis
+- focus states where appropriate
+
+Accent must not be sprayed across the interface. If everything is emphasized,
+ nothing is emphasized.
+
+### Contrast rule
+
+Prefer:
+
+- light or mid-light surfaces with dark text
+
+Avoid:
+
+- large deep-color surfaces with white text for reading-heavy content
+
+Dark-on-light is the default reading mode.
+Inverse surfaces should be rare and must justify themselves.
+
+### Temperature rule
+
+Default product temperature is slightly cool-neutral.
+
+Do not drift into:
+
+- yellowed paper
+- sepia
+- muddy beige
+- green-gray murk
+
+Warm accents may exist, but the workspace itself should remain clear and clean.
+
+## 5. Surface hierarchy
+
+The product should read as a stack of clear working layers:
+
+1. canvas
+2. panel
+3. surface
+4. emphasized surface
+5. feedback surface
+
+Those layers should differ primarily by:
+
+- lightness
+- border strength
+- occasional tint
+
+Not by:
+
+- large shadow jumps
+- excessive gradients
+- arbitrary color shifts
+
+Shadows should be minimal. Borders and tonal separation do most of the work.
+
+## 6. Typography roles
+
+Typography has distinct jobs.
+
+### Heading
+
+Use for:
+
+- page titles
+- section titles
+- key chat context labels
+
+It should feel compact, confident, and quiet. Not theatrical.
+
+### Body
+
+Use for:
+
+- messages
+- descriptive copy
+- empty states
+- system notes
+
+Body text is the product's main workload. Readability wins over personality.
+
+### Meta
+
+Use for:
+
+- timestamps
+- connection state
+- small labels
+- supporting status copy
+
+Meta text should step back without becoming low-contrast mush.
+
+### Mono
+
+Use for:
+
+- structured payloads
+- tool arguments/results
+- machine-readable fragments
+
+Mono is not a theme. It is a utility lane.
+
+## 7. Component translation rules
+
+Visual language must land in the component system, not in page-local styling.
+
+### Atoms
+
+Atoms are business-blind.
+
+They own:
+
+- visual primitives
+- layout primitives
+- form controls
+- surface treatments
+- token consumption
+- their own SCSS
+
+They do not own product concepts like:
+
+- session
+- message
+- tool call
+- assistant
+- transcript
+
+### Web business components
+
+Business components may compose atoms into:
+
+- session rail rows
+- transcript items
+- composer blocks
+- tool result views
+
+They may express product meaning, but they must not invent local visual rules.
+
+### Web CSS rule
+
+`apps/client/soma/web` should not become a styling escape hatch.
+
+If `web` appears to need CSS, assume atom expressiveness is missing.
+Add or refine atom capability instead of patching page-local styles.
+
+## 8. Message styling rules
+
+Messages should be visually distinct by role, but still belong to one family.
+
+### Account-side messages
+
+- may use the accent family
+- should remain highly readable
+- should prefer tinted light surfaces with dark text over saturated dark blocks
+
+### Assistant-side messages
+
+- should be the quiet default reading surface
+- should not compete with account messages
+
+### System messages
+
+- may use a soft warning/editorial tint
+- should feel special but not alarming
+
+### Tool blocks
+
+- may use a soft success/utility tint
+- should feel structured and inspectable
+- code/payload areas should remain mono and neutral enough for scanning
+
+## 9. Motion and interaction
+
+Motion should be sparse and useful.
+
+Use motion for:
+
+- hover clarity
+- focus reinforcement
+- state transition smoothness
+
+Do not use motion for:
+
+- ornament
+- bounce
+- personality signaling
+
+The interface should feel responsive, not animated.
+
+## 10. Background and atmosphere
+
+The product may have a small amount of atmosphere, but it must stay behind the
+ work.
+
+Allowed:
+
+- faint tonal variation
+- extremely subtle cool ambient gradients
+- almost invisible texture
+
+Not allowed:
+
+- obvious paper texture
+- strong noise overlays
+- decorative illustration language in the work surface
+
+If a background effect is noticeable before the content is noticeable, it is
+too strong.
+
+## 11. Borrowing from external references
+
+When studying another project, extract only stable principles such as:
+
+- accent discipline
+- hierarchy
+- spacing rhythm
+- border weight
+- typography role separation
+- panel layering
+
+Do not directly copy:
+
+- brand palettes
+- hero-page treatments
+- editorial gimmicks
+- warm/cold bias without product fit
+
+The question is never "How do we make mini-stim look like that project?"
+
+The question is:
+
+"What visual rule from that project is durable enough to become a token or atom
+ capability here?"
+
+## 12. Review heuristics
+
+A visual change is likely correct when:
+
+- readability improves
+- hierarchy gets clearer
+- fewer colors carry more meaning
+- the change can be explained through tokens or atoms
+- another screen could reuse the same rule
+
+A visual change is likely wrong when:
+
+- it only works in one page context
+- it introduces a new special-case color without a system reason
+- it depends on `web`-local CSS
+- it makes reading harder to gain personality
+- it copies a reference surface without translating its logic
+
+## 13. Near-term direction for mini-stim
+
+Near-term refinement should focus on:
+
+- better neutral layering
+- more stable accent usage
+- clearer meta typography
+- improved transcript readability
+- stronger atom capabilities for shell/layout/surfaces
+
+Not on:
+
+- decorative flourishes
+- multi-accent exploration
+- dark mode expansion before the light mode language is stable
+- high-brand marketing aesthetics inside the working chat surface
+
+## 14. Maintenance rule
+
+When `mini-stim` gains new visual capabilities, update this file if the change
+alters:
+
+- the aesthetic direction
+- the interpretation of accent usage
+- the allowed surface hierarchy
+- the boundary between inspiration and system
+- the default readability rules
+
+This file should stay opinionated, compact, and durable.
+It is not a changelog and not a moodboard.
diff --git a/apps/client/soma/web/src/App.tsx b/apps/client/soma/web/src/App.tsx
index 1597f8b..736c464 100644
--- a/apps/client/soma/web/src/App.tsx
+++ b/apps/client/soma/web/src/App.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { AppRoot } from "@mini-stim/components";
+import { AppRoot, Grid, GridItem } from "@mini-stim/components";
 import {
   useMessageConnection,
   useSelectedSessionId,
@@ -68,8 +68,9 @@ export function App() {
   }
 
   return (
-    <AppRoot
-      sidebar={
+    <AppRoot>
+      <Grid template="sidebar-main" grow>
+        <GridItem area="sidebar" tag="aside">
         <SessionRail
           busy={busy}
           onCreate={createNewSession}
@@ -77,8 +78,8 @@ export function App() {
           selectedSessionId={selectedSessionId}
           sessions={sessions}
         />
-      }
-      main={
+        </GridItem>
+        <GridItem area="main" tag="main">
         <ChatShell
           busy={busy}
           connection={connection}
@@ -90,8 +91,9 @@ export function App() {
           timeline={timeline}
           draft={draft}
         />
-      }
-    />
+        </GridItem>
+      </Grid>
+    </AppRoot>
   );
 }
 
diff --git a/apps/client/soma/web/src/components/ChatShell.tsx b/apps/client/soma/web/src/components/ChatShell.tsx
index 0d3d18c..72c8e2e 100644
--- a/apps/client/soma/web/src/components/ChatShell.tsx
+++ b/apps/client/soma/web/src/components/ChatShell.tsx
@@ -1,4 +1,4 @@
-import { Notice, Pane, Stack, Text } from "@mini-stim/components";
+import { GridRows, Notice, Pane, Stack, Text } from "@mini-stim/components";
 
 import { ChatHeader } from "./ChatHeader";
 import { Composer } from "./Composer";
@@ -17,7 +17,7 @@ export function ChatShell(props: {
 }) {
   return (
     <Pane tone="subtle" grow>
-      <Stack grow>
+      <GridRows grow template="header-body-footer">
         <ChatHeader
           busy={props.busy}
           connection={props.connection}
@@ -25,22 +25,24 @@ export function ChatShell(props: {
           title={props.title}
         />
         <Transcript timeline={props.timeline} />
-        {props.error ? (
-          <Pane padding="md">
-            <Notice tone="danger">
-              <Text>{props.error}</Text>
-            </Notice>
+        <Stack gap="none">
+          {props.error ? (
+            <Pane padding="md">
+              <Notice tone="danger">
+                <Text>{props.error}</Text>
+              </Notice>
+            </Pane>
+          ) : null}
+          <Pane border="top" padding="md" tone="panel">
+            <Composer
+              value={props.draft}
+              disabled={props.busy}
+              onChange={props.onDraftChange}
+              onSubmit={props.onSend}
+            />
           </Pane>
-        ) : null}
-        <Pane border="top" padding="md" tone="panel">
-          <Composer
-            value={props.draft}
-            disabled={props.busy}
-            onChange={props.onDraftChange}
-            onSubmit={props.onSend}
-          />
-        </Pane>
-      </Stack>
+        </Stack>
+      </GridRows>
     </Pane>
   );
 }
diff --git a/apps/client/soma/web/src/components/SessionRail.tsx b/apps/client/soma/web/src/components/SessionRail.tsx
index 8d2dbab..8992c76 100644
--- a/apps/client/soma/web/src/components/SessionRail.tsx
+++ b/apps/client/soma/web/src/components/SessionRail.tsx
@@ -1,6 +1,7 @@
 import {
   Badge,
   Button,
+  GridRows,
   Heading,
   Inline,
   Pane,
@@ -19,7 +20,7 @@ export function SessionRail(props: {
 }) {
   return (
     <Pane border="right" padding="md" tone="panel" grow>
-      <Stack gap="md" grow>
+      <GridRows grow template="header-body" gap="md">
         <Inline justify="between">
           <Heading tag="h1" size="md">mini-stim</Heading>
           <Button
@@ -57,7 +58,7 @@ export function SessionRail(props: {
             })}
           </Stack>
         </ScrollArea>
-      </Stack>
+      </GridRows>
     </Pane>
   );
 }
diff --git a/packages/components/src/atoms/AppRoot/AppRoot.scss b/packages/components/src/atoms/AppRoot/AppRoot.scss
index 958e4d7..be6890d 100644
--- a/packages/components/src/atoms/AppRoot/AppRoot.scss
+++ b/packages/components/src/atoms/AppRoot/AppRoot.scss
@@ -1,24 +1,11 @@
 .msAppRoot {
-  display: grid;
-  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
-  min-height: 100vh;
-  background: var(--ms-color-canvas);
-  color: var(--ms-color-text);
-}
-
-.msAppRoot__sidebar,
-.msAppRoot__main {
   display: flex;
+  width: 100%;
+  height: 100dvh;
   min-width: 0;
   min-height: 0;
-}
-
-.msAppRoot__main {
-  min-height: 100vh;
-}
-
-@media (max-width: 48rem) {
-  .msAppRoot {
-    grid-template-columns: 1fr;
-  }
+  background: var(--ms-color-canvas);
+  color: var(--ms-color-text);
+  overflow: hidden;
+  overscroll-behavior: none;
 }
diff --git a/packages/components/src/atoms/AppRoot/AppRoot.tsx b/packages/components/src/atoms/AppRoot/AppRoot.tsx
index c14e700..7e939a1 100644
--- a/packages/components/src/atoms/AppRoot/AppRoot.tsx
+++ b/packages/components/src/atoms/AppRoot/AppRoot.tsx
@@ -2,14 +2,6 @@ import type { ReactNode } from "react";
 
 import "./AppRoot.scss";
 
-export function AppRoot(props: {
-  sidebar: ReactNode;
-  main: ReactNode;
-}) {
-  return (
-    <div className="msAppRoot">
-      <aside className="msAppRoot__sidebar">{props.sidebar}</aside>
-      <main className="msAppRoot__main">{props.main}</main>
-    </div>
-  );
+export function AppRoot(props: { children: ReactNode }) {
+  return <div className="msAppRoot">{props.children}</div>;
 }
diff --git a/packages/components/src/atoms/Badge/Badge.scss b/packages/components/src/atoms/Badge/Badge.scss
index 60252ce..801a210 100644
--- a/packages/components/src/atoms/Badge/Badge.scss
+++ b/packages/components/src/atoms/Badge/Badge.scss
@@ -1,25 +1,32 @@
 .msBadge {
+  --ms-badge-bg: var(--ms-color-badge-neutral-bg);
+  --ms-badge-text: var(--ms-color-badge-neutral-text);
+
   display: inline-flex;
   align-items: center;
   min-width: 0;
   border: 1px solid var(--ms-color-border);
   border-radius: 999px;
-  padding: 0.1875rem var(--ms-space-2);
+  background: var(--ms-badge-bg);
+  color: var(--ms-badge-text);
+  padding: 0.25rem 0.625rem;
   font-size: var(--ms-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.01em;
   line-height: 1.2;
-}
 
-.msBadge--tone-neutral {
-  background: var(--ms-color-badge-neutral-bg);
-  color: var(--ms-color-badge-neutral-text);
-}
+  &--tone-neutral {
+    --ms-badge-bg: var(--ms-color-badge-neutral-bg);
+    --ms-badge-text: var(--ms-color-badge-neutral-text);
+  }
 
-.msBadge--tone-success {
-  background: var(--ms-color-badge-success-bg);
-  color: var(--ms-color-badge-success-text);
-}
+  &--tone-success {
+    --ms-badge-bg: var(--ms-color-badge-success-bg);
+    --ms-badge-text: var(--ms-color-badge-success-text);
+  }
 
-.msBadge--tone-danger {
-  background: var(--ms-color-badge-danger-bg);
-  color: var(--ms-color-badge-danger-text);
+  &--tone-danger {
+    --ms-badge-bg: var(--ms-color-badge-danger-bg);
+    --ms-badge-text: var(--ms-color-badge-danger-text);
+  }
 }
diff --git a/packages/components/src/atoms/Button/Button.scss b/packages/components/src/atoms/Button/Button.scss
index 0f629af..609f952 100644
--- a/packages/components/src/atoms/Button/Button.scss
+++ b/packages/components/src/atoms/Button/Button.scss
@@ -1,4 +1,24 @@
+@use "../../theme/mixins" as *;
+@use "sass:map";
+
+$button-sizes: (
+  "sm": (
+    min-height: 2rem,
+    font-size: var(--ms-font-size-sm),
+  ),
+  "md": (
+    min-height: 2.5rem,
+    font-size: var(--ms-font-size-md),
+  ),
+);
+
 .msButton {
+  --ms-button-bg: var(--ms-color-button-subtle-bg);
+  --ms-button-border: var(--ms-color-button-border);
+  --ms-button-text: var(--ms-color-button-text);
+  --ms-button-hover-bg: var(--ms-color-button-hover-bg);
+  --ms-button-hover-border: var(--ms-color-border-strong);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6,74 +26,86 @@
   min-width: 0;
   border: 1px solid transparent;
   border-radius: var(--ms-radius-md);
+  background: var(--ms-button-bg);
+  border-color: var(--ms-button-border);
+  color: var(--ms-button-text);
   padding: 0 var(--ms-space-4);
   cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease;
-}
+  box-shadow: var(--ms-shadow-button);
+  @include transition(background-color, border-color, color, box-shadow, transform);
 
-.msButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
+  @include control-disabled;
 
-.msButton--block {
-  width: 100%;
-}
+  &:not(:disabled):hover {
+    background: var(--ms-button-hover-bg);
+    border-color: var(--ms-button-hover-border);
+    transform: translateY(-1px);
+  }
 
-.msButton--justify-center {
-  justify-content: center;
-}
+  @include focus-ring;
 
-.msButton--justify-start {
-  justify-content: flex-start;
-}
+  &--block {
+    width: 100%;
+  }
 
-.msButton--justify-between {
-  justify-content: space-between;
-}
+  &--justify-center {
+    justify-content: center;
+  }
 
-.msButton--size-sm {
-  min-height: 2rem;
-  font-size: var(--ms-font-size-sm);
-}
+  &--justify-start {
+    justify-content: flex-start;
+  }
 
-.msButton--size-md {
-  min-height: 2.5rem;
-  font-size: var(--ms-font-size-md);
-}
+  &--justify-between {
+    justify-content: space-between;
+  }
 
-.msButton--variant-solid.msButton--tone-neutral {
-  background: var(--ms-color-button-bg);
-  border-color: var(--ms-color-button-border);
-  color: var(--ms-color-button-text);
-}
+  @each $name, $size in $button-sizes {
+    &--size-#{$name} {
+      min-height: map.get($size, min-height);
+      font-size: map.get($size, font-size);
+    }
+  }
 
-.msButton--variant-solid.msButton--tone-accent {
-  background: var(--ms-color-accent);
-  border-color: var(--ms-color-accent);
-  color: var(--ms-color-accent-text);
-}
+  &--variant-solid {
+    --ms-button-bg: var(--ms-color-button-subtle-bg);
+    --ms-button-border: var(--ms-color-button-border);
+    --ms-button-text: var(--ms-color-button-text);
+    --ms-button-hover-bg: var(--ms-color-button-hover-bg);
+    --ms-button-hover-border: var(--ms-color-border-strong);
+  }
 
-.msButton--variant-outline {
-  background: var(--ms-color-surface);
-  border-color: var(--ms-color-border-strong);
-  color: var(--ms-color-text);
-}
+  &--variant-solid.msButton--tone-accent {
+    --ms-button-bg: var(--ms-color-accent);
+    --ms-button-border: var(--ms-color-accent-border);
+    --ms-button-text: var(--ms-color-accent-text);
+    --ms-button-hover-bg: var(--ms-color-accent-hover);
+    --ms-button-hover-border: var(--ms-color-accent-hover);
+  }
 
-.msButton--variant-ghost {
-  background: transparent;
-  color: var(--ms-color-text);
-}
+  &--variant-outline {
+    --ms-button-bg: var(--ms-color-button-bg);
+    --ms-button-border: var(--ms-color-button-border);
+    --ms-button-text: var(--ms-color-text);
+    --ms-button-hover-bg: var(--ms-color-button-hover-bg);
+    --ms-button-hover-border: var(--ms-color-border-strong);
+  }
 
-.msButton--variant-selected {
-  background: var(--ms-color-selected-bg);
-  border-color: var(--ms-color-selected-border);
-  color: var(--ms-color-text);
-}
+  &--variant-ghost {
+    --ms-button-bg: transparent;
+    --ms-button-border: transparent;
+    --ms-button-text: var(--ms-color-text);
+    --ms-button-hover-bg: var(--ms-color-ghost-hover-bg);
+    --ms-button-hover-border: transparent;
+    box-shadow: none;
+  }
 
-.msButton:not(:disabled):hover {
-  filter: brightness(0.98);
+  &--variant-selected {
+    --ms-button-bg: var(--ms-color-selected-bg);
+    --ms-button-border: var(--ms-color-selected-border);
+    --ms-button-text: var(--ms-color-text);
+    --ms-button-hover-bg: var(--ms-color-selected-hover-bg);
+    --ms-button-hover-border: var(--ms-color-selected-border);
+    box-shadow: none;
+  }
 }
diff --git a/packages/components/src/atoms/CodeBlock/CodeBlock.scss b/packages/components/src/atoms/CodeBlock/CodeBlock.scss
index 5b75963..d32fcf8 100644
--- a/packages/components/src/atoms/CodeBlock/CodeBlock.scss
+++ b/packages/components/src/atoms/CodeBlock/CodeBlock.scss
@@ -6,6 +6,7 @@
   background: var(--ms-color-code-bg);
   color: var(--ms-color-code-text);
   padding: var(--ms-space-3);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
   font-family: var(--ms-font-family-mono);
   font-size: var(--ms-font-size-sm);
   line-height: 1.45;
diff --git a/packages/components/src/atoms/Grid/Grid.scss b/packages/components/src/atoms/Grid/Grid.scss
new file mode 100644
index 0000000..c9b693b
--- /dev/null
+++ b/packages/components/src/atoms/Grid/Grid.scss
@@ -0,0 +1,43 @@
+$grid-gaps: (
+  "none": 0,
+  "sm": var(--ms-space-3),
+  "md": var(--ms-space-4),
+);
+
+.msGrid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  &--grow {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &--template-sidebar-main {
+    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
+
+    @media (max-width: 48rem) {
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(13rem, 34vh) minmax(0, 1fr);
+    }
+  }
+
+  @each $name, $value in $grid-gaps {
+    &--gap-#{$name} {
+      gap: $value;
+    }
+  }
+
+  &__item {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+
+    &--area-main {
+      overflow: hidden;
+    }
+  }
+}
diff --git a/packages/components/src/atoms/Grid/Grid.tsx b/packages/components/src/atoms/Grid/Grid.tsx
new file mode 100644
index 0000000..186777e
--- /dev/null
+++ b/packages/components/src/atoms/Grid/Grid.tsx
@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cx } from "../../internal/cx";
+import "./Grid.scss";
+
+type GridProps = ComponentPropsWithoutRef<"div"> & {
+  gap?: "none" | "sm" | "md";
+  grow?: boolean;
+  template?: "sidebar-main";
+};
+
+type GridItemProps = ComponentPropsWithoutRef<"div"> & {
+  area: "sidebar" | "main";
+  tag?: "aside" | "div" | "main" | "section";
+};
+
+export function Grid({
+  className,
+  gap = "none",
+  grow = false,
+  template = "sidebar-main",
+  ...props
+}: GridProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        "msGrid",
+        `msGrid--gap-${gap}`,
+        `msGrid--template-${template}`,
+        grow && "msGrid--grow",
+        className,
+      )}
+    />
+  );
+}
+
+export function GridItem({
+  area,
+  className,
+  tag = "div",
+  ...props
+}: GridItemProps) {
+  const Component = tag;
+  return (
+    <Component
+      {...props}
+      className={cx("msGrid__item", `msGrid__item--area-${area}`, className)}
+    />
+  );
+}
diff --git a/packages/components/src/atoms/GridRows/GridRows.scss b/packages/components/src/atoms/GridRows/GridRows.scss
new file mode 100644
index 0000000..c73b75b
--- /dev/null
+++ b/packages/components/src/atoms/GridRows/GridRows.scss
@@ -0,0 +1,30 @@
+$grid-row-gaps: (
+  "none": 0,
+  "sm": var(--ms-space-3),
+  "md": var(--ms-space-4),
+);
+
+.msGridRows {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+
+  &--grow {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &--template-header-body {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  &--template-header-body-footer {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  @each $name, $value in $grid-row-gaps {
+    &--gap-#{$name} {
+      gap: $value;
+    }
+  }
+}
diff --git a/packages/components/src/atoms/GridRows/GridRows.tsx b/packages/components/src/atoms/GridRows/GridRows.tsx
new file mode 100644
index 0000000..91c42c7
--- /dev/null
+++ b/packages/components/src/atoms/GridRows/GridRows.tsx
@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cx } from "../../internal/cx";
+import "./GridRows.scss";
+
+type GridRowsProps = ComponentPropsWithoutRef<"div"> & {
+  gap?: "none" | "sm" | "md";
+  grow?: boolean;
+  template?: "header-body" | "header-body-footer";
+};
+
+export function GridRows({
+  className,
+  gap = "none",
+  grow = false,
+  template = "header-body",
+  ...props
+}: GridRowsProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        "msGridRows",
+        `msGridRows--gap-${gap}`,
+        `msGridRows--template-${template}`,
+        grow && "msGridRows--grow",
+        className,
+      )}
+    />
+  );
+}
diff --git a/packages/components/src/atoms/Heading/Heading.scss b/packages/components/src/atoms/Heading/Heading.scss
index 000ea16..610e87a 100644
--- a/packages/components/src/atoms/Heading/Heading.scss
+++ b/packages/components/src/atoms/Heading/Heading.scss
@@ -1,24 +1,24 @@
+@use "../../theme/mixins" as *;
+
+$heading-sizes: (
+  "sm": 1rem,
+  "md": 1.125rem,
+  "lg": 1.375rem,
+);
+
 .msHeading {
   margin: 0;
   min-width: 0;
   font-weight: 650;
   letter-spacing: -0.01em;
-}
-
-.msHeading--size-sm {
-  font-size: 1rem;
-}
-
-.msHeading--size-md {
-  font-size: 1.125rem;
-}
 
-.msHeading--size-lg {
-  font-size: 1.375rem;
-}
+  @each $name, $value in $heading-sizes {
+    &--size-#{$name} {
+      font-size: $value;
+    }
+  }
 
-.msHeading--truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  &--truncate {
+    @include truncate-single-line;
+  }
 }
diff --git a/packages/components/src/atoms/IconButton/IconButton.scss b/packages/components/src/atoms/IconButton/IconButton.scss
index f6ddfc9..52d92d6 100644
--- a/packages/components/src/atoms/IconButton/IconButton.scss
+++ b/packages/components/src/atoms/IconButton/IconButton.scss
@@ -1,3 +1,5 @@
+@use "../../theme/mixins" as *;
+
 .msIconButton {
   display: inline-grid;
   width: 2.625rem;
@@ -8,17 +10,16 @@
   background: var(--ms-color-button-bg);
   color: var(--ms-color-button-text);
   cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease;
-}
+  box-shadow: var(--ms-shadow-button);
+  @include transition(background-color, border-color, color, box-shadow, transform);
 
-.msIconButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
+  @include control-disabled;
+
+  &:not(:disabled):hover {
+    background: var(--ms-color-button-hover-bg);
+    border-color: var(--ms-color-border-strong);
+    transform: translateY(-1px);
+  }
 
-.msIconButton:not(:disabled):hover {
-  filter: brightness(0.98);
+  @include focus-ring;
 }
diff --git a/packages/components/src/atoms/Inline/Inline.scss b/packages/components/src/atoms/Inline/Inline.scss
index 903f9c4..f8754ab 100644
--- a/packages/components/src/atoms/Inline/Inline.scss
+++ b/packages/components/src/atoms/Inline/Inline.scss
@@ -1,61 +1,52 @@
+$inline-gaps: (
+  "xs": var(--ms-space-1),
+  "sm": var(--ms-space-2),
+  "md": var(--ms-space-4),
+  "lg": var(--ms-space-6),
+);
+
+$inline-alignments: (
+  "start": flex-start,
+  "center": center,
+  "end": flex-end,
+  "stretch": stretch,
+);
+
+$inline-justifications: (
+  "start": flex-start,
+  "center": center,
+  "between": space-between,
+  "end": flex-end,
+);
+
 .msInline {
   display: flex;
   min-width: 0;
-}
-
-.msInline--grow {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.msInline--wrap {
-  flex-wrap: wrap;
-}
-
-.msInline--gap-xs {
-  gap: var(--ms-space-1);
-}
-
-.msInline--gap-sm {
-  gap: var(--ms-space-2);
-}
-
-.msInline--gap-md {
-  gap: var(--ms-space-4);
-}
-
-.msInline--gap-lg {
-  gap: var(--ms-space-6);
-}
-
-.msInline--align-start {
-  align-items: flex-start;
-}
-
-.msInline--align-center {
-  align-items: center;
-}
-
-.msInline--align-end {
-  align-items: flex-end;
-}
-
-.msInline--align-stretch {
-  align-items: stretch;
-}
-
-.msInline--justify-start {
-  justify-content: flex-start;
-}
-
-.msInline--justify-center {
-  justify-content: center;
-}
-
-.msInline--justify-between {
-  justify-content: space-between;
-}
 
-.msInline--justify-end {
-  justify-content: flex-end;
+  &--grow {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
+  @each $name, $value in $inline-gaps {
+    &--gap-#{$name} {
+      gap: $value;
+    }
+  }
+
+  @each $name, $value in $inline-alignments {
+    &--align-#{$name} {
+      align-items: $value;
+    }
+  }
+
+  @each $name, $value in $inline-justifications {
+    &--justify-#{$name} {
+      justify-content: $value;
+    }
+  }
 }
diff --git a/packages/components/src/atoms/Notice/Notice.scss b/packages/components/src/atoms/Notice/Notice.scss
index 26ecb28..5d48db9 100644
--- a/packages/components/src/atoms/Notice/Notice.scss
+++ b/packages/components/src/atoms/Notice/Notice.scss
@@ -1,16 +1,25 @@
 .msNotice {
+  --ms-notice-bg: var(--ms-color-panel-subtle);
+  --ms-notice-border: var(--ms-color-border);
+  --ms-notice-text: var(--ms-color-text-muted);
+
   border: 1px solid var(--ms-color-border);
-  border-radius: var(--ms-radius-md);
-  padding: var(--ms-space-3);
-}
+  border-radius: var(--ms-radius-lg);
+  background: var(--ms-notice-bg);
+  border-color: var(--ms-notice-border);
+  color: var(--ms-notice-text);
+  padding: var(--ms-space-4);
+  box-shadow: var(--ms-shadow-card);
 
-.msNotice--tone-neutral {
-  background: var(--ms-color-panel-subtle);
-  color: var(--ms-color-text-muted);
-}
+  &--tone-neutral {
+    --ms-notice-bg: var(--ms-color-panel-subtle);
+    --ms-notice-border: var(--ms-color-border);
+    --ms-notice-text: var(--ms-color-text-muted);
+  }
 
-.msNotice--tone-danger {
-  background: var(--ms-color-danger-bg);
-  border-color: var(--ms-color-danger-border);
-  color: var(--ms-color-danger-text);
+  &--tone-danger {
+    --ms-notice-bg: var(--ms-color-danger-bg);
+    --ms-notice-border: var(--ms-color-danger-border);
+    --ms-notice-text: var(--ms-color-danger-text);
+  }
 }
diff --git a/packages/components/src/atoms/Pane/Pane.scss b/packages/components/src/atoms/Pane/Pane.scss
index 5e054e8..d7e53a4 100644
--- a/packages/components/src/atoms/Pane/Pane.scss
+++ b/packages/components/src/atoms/Pane/Pane.scss
@@ -1,53 +1,57 @@
+$pane-paddings: (
+  "none": 0,
+  "sm": var(--ms-space-3),
+  "md": var(--ms-space-4),
+  "lg": var(--ms-space-6),
+);
+
+$pane-tones: (
+  "canvas": var(--ms-color-canvas),
+  "panel": var(--ms-color-panel),
+  "subtle": var(--ms-color-panel-subtle),
+);
+
+$pane-borders: (
+  "right": (
+    border-right: 1px solid var(--ms-color-border),
+  ),
+  "top": (
+    border-top: 1px solid var(--ms-color-border),
+  ),
+  "bottom": (
+    border-bottom: 1px solid var(--ms-color-border),
+  ),
+  "around": (
+    border: 1px solid var(--ms-color-border),
+  ),
+);
+
 .msPane {
   min-width: 0;
-}
-
-.msPane--grow {
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.msPane--tone-canvas {
-  background: var(--ms-color-canvas);
-}
-
-.msPane--tone-panel {
-  background: var(--ms-color-panel);
-}
-
-.msPane--tone-subtle {
-  background: var(--ms-color-panel-subtle);
-}
-
-.msPane--padding-none {
-  padding: 0;
-}
-
-.msPane--padding-sm {
-  padding: var(--ms-space-3);
-}
-
-.msPane--padding-md {
-  padding: var(--ms-space-4);
-}
-
-.msPane--padding-lg {
-  padding: var(--ms-space-6);
-}
-
-.msPane--border-right {
-  border-right: 1px solid var(--ms-color-border);
-}
-
-.msPane--border-top {
-  border-top: 1px solid var(--ms-color-border);
-}
-
-.msPane--border-bottom {
-  border-bottom: 1px solid var(--ms-color-border);
-}
 
-.msPane--border-around {
-  border: 1px solid var(--ms-color-border);
+  &--grow {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  @each $name, $value in $pane-tones {
+    &--tone-#{$name} {
+      background: $value;
+    }
+  }
+
+  @each $name, $value in $pane-paddings {
+    &--padding-#{$name} {
+      padding: $value;
+    }
+  }
+
+  @each $name, $declarations in $pane-borders {
+    &--border-#{$name} {
+      @each $property, $property-value in $declarations {
+        #{$property}: $property-value;
+      }
+    }
+  }
 }
diff --git a/packages/components/src/atoms/ScrollArea/ScrollArea.scss b/packages/components/src/atoms/ScrollArea/ScrollArea.scss
index c6c106c..b4da96c 100644
--- a/packages/components/src/atoms/ScrollArea/ScrollArea.scss
+++ b/packages/components/src/atoms/ScrollArea/ScrollArea.scss
@@ -1,20 +1,31 @@
+$scroll-overflows: (
+  "y": (
+    overflow-y: auto,
+  ),
+  "x": (
+    overflow-x: auto,
+  ),
+  "both": (
+    overflow: auto,
+  ),
+);
+
 .msScrollArea {
   min-width: 0;
-}
-
-.msScrollArea--grow {
-  flex: 1 1 auto;
   min-height: 0;
-}
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 
-.msScrollArea--y {
-  overflow-y: auto;
-}
-
-.msScrollArea--x {
-  overflow-x: auto;
-}
+  &--grow {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
 
-.msScrollArea--both {
-  overflow: auto;
+  @each $name, $declarations in $scroll-overflows {
+    &--#{$name} {
+      @each $property, $value in $declarations {
+        #{$property}: $value;
+      }
+    }
+  }
 }
diff --git a/packages/components/src/atoms/Stack/Stack.scss b/packages/components/src/atoms/Stack/Stack.scss
index fc07d68..d4640d0 100644
--- a/packages/components/src/atoms/Stack/Stack.scss
+++ b/packages/components/src/atoms/Stack/Stack.scss
@@ -1,50 +1,48 @@
+$stack-gaps: (
+  "none": 0,
+  "xs": var(--ms-space-1),
+  "sm": var(--ms-space-2),
+  "md": var(--ms-space-4),
+  "lg": var(--ms-space-6),
+);
+
+$stack-alignments: (
+  "start": flex-start,
+  "center": center,
+  "stretch": stretch,
+);
+
+$stack-justifications: (
+  "start": flex-start,
+  "center": center,
+  "between": space-between,
+);
+
 .msStack {
   display: flex;
   min-width: 0;
   flex-direction: column;
-}
-
-.msStack--grow {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.msStack--gap-xs {
-  gap: var(--ms-space-1);
-}
-
-.msStack--gap-sm {
-  gap: var(--ms-space-2);
-}
-
-.msStack--gap-md {
-  gap: var(--ms-space-4);
-}
-
-.msStack--gap-lg {
-  gap: var(--ms-space-6);
-}
-
-.msStack--align-start {
-  align-items: flex-start;
-}
-
-.msStack--align-center {
-  align-items: center;
-}
-
-.msStack--align-stretch {
-  align-items: stretch;
-}
-
-.msStack--justify-start {
-  justify-content: flex-start;
-}
-
-.msStack--justify-center {
-  justify-content: center;
-}
 
-.msStack--justify-between {
-  justify-content: space-between;
+  &--grow {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  @each $name, $value in $stack-gaps {
+    &--gap-#{$name} {
+      gap: $value;
+    }
+  }
+
+  @each $name, $value in $stack-alignments {
+    &--align-#{$name} {
+      align-items: $value;
+    }
+  }
+
+  @each $name, $value in $stack-justifications {
+    &--justify-#{$name} {
+      justify-content: $value;
+    }
+  }
 }
diff --git a/packages/components/src/atoms/Stack/Stack.tsx b/packages/components/src/atoms/Stack/Stack.tsx
index 6dd6f37..6f320a6 100644
--- a/packages/components/src/atoms/Stack/Stack.tsx
+++ b/packages/components/src/atoms/Stack/Stack.tsx
@@ -5,7 +5,7 @@ import "./Stack.scss";
 
 type StackProps = ComponentPropsWithoutRef<"div"> & {
   align?: "start" | "center" | "stretch";
-  gap?: "xs" | "sm" | "md" | "lg";
+  gap?: "none" | "xs" | "sm" | "md" | "lg";
   grow?: boolean;
   justify?: "start" | "center" | "between";
   tag?: "div" | "span";
diff --git a/packages/components/src/atoms/Surface/Surface.scss b/packages/components/src/atoms/Surface/Surface.scss
index d703825..9d75a49 100644
--- a/packages/components/src/atoms/Surface/Surface.scss
+++ b/packages/components/src/atoms/Surface/Surface.scss
@@ -1,76 +1,92 @@
+$surface-alignments: (
+  "start": flex-start,
+  "center": center,
+  "end": flex-end,
+  "stretch": stretch,
+);
+
+$surface-widths: (
+  "full": (
+    width: 100%,
+  ),
+  "content": (
+    width: fit-content,
+    max-width: min(48rem, 88%),
+  ),
+);
+
+$surface-paddings: (
+  "sm": var(--ms-space-3),
+  "md": var(--ms-space-4),
+  "lg": var(--ms-space-5),
+);
+
 .msSurface {
+  --ms-surface-bg: var(--ms-color-surface);
+  --ms-surface-border: var(--ms-color-border);
+  --ms-surface-text: var(--ms-color-text);
+
   min-width: 0;
   border: 1px solid var(--ms-color-border);
   border-radius: var(--ms-radius-lg);
+  background: var(--ms-surface-bg);
+  border-color: var(--ms-surface-border);
+  color: var(--ms-surface-text);
   box-shadow: var(--ms-shadow-card);
-}
 
-.msSurface--align-start {
-  align-self: flex-start;
-}
+  @each $name, $value in $surface-alignments {
+    &--align-#{$name} {
+      align-self: $value;
+    }
+  }
 
-.msSurface--align-center {
-  align-self: center;
-}
+  @each $name, $declarations in $surface-widths {
+    &--width-#{$name} {
+      @each $property, $value in $declarations {
+        #{$property}: $value;
+      }
+    }
+  }
 
-.msSurface--align-end {
-  align-self: flex-end;
-}
+  @each $name, $value in $surface-paddings {
+    &--padding-#{$name} {
+      padding: $value;
+    }
+  }
 
-.msSurface--align-stretch {
-  align-self: stretch;
-}
+  &--tone-default {
+    --ms-surface-bg: var(--ms-color-surface);
+    --ms-surface-border: var(--ms-color-border);
+    --ms-surface-text: var(--ms-color-text);
+  }
 
-.msSurface--width-full {
-  width: 100%;
-}
+  &--tone-accent {
+    --ms-surface-bg: var(--ms-color-surface-accent-bg);
+    --ms-surface-border: var(--ms-color-surface-accent-border);
+    --ms-surface-text: var(--ms-color-surface-accent-text);
+  }
 
-.msSurface--width-content {
-  width: fit-content;
-  max-width: min(48rem, 88%);
-}
+  &--tone-muted {
+    --ms-surface-bg: var(--ms-color-surface-muted-bg);
+    --ms-surface-border: var(--ms-color-surface-muted-border);
+    --ms-surface-text: var(--ms-color-text);
+  }
 
-.msSurface--padding-sm {
-  padding: var(--ms-space-3);
-}
+  &--tone-warning {
+    --ms-surface-bg: var(--ms-color-surface-warning-bg);
+    --ms-surface-border: var(--ms-color-surface-warning-border);
+    --ms-surface-text: var(--ms-color-surface-warning-text);
+  }
 
-.msSurface--padding-md {
-  padding: var(--ms-space-4);
-}
-
-.msSurface--padding-lg {
-  padding: var(--ms-space-5);
-}
-
-.msSurface--tone-default {
-  background: var(--ms-color-surface);
-  color: var(--ms-color-text);
-}
-
-.msSurface--tone-accent {
-  background: var(--ms-color-surface-accent-bg);
-  border-color: var(--ms-color-surface-accent-border);
-  color: var(--ms-color-surface-accent-text);
-}
-
-.msSurface--tone-muted {
-  background: var(--ms-color-surface);
-}
-
-.msSurface--tone-warning {
-  background: var(--ms-color-surface-warning-bg);
-  border-color: var(--ms-color-surface-warning-border);
-  color: var(--ms-color-surface-warning-text);
-}
-
-.msSurface--tone-success {
-  background: var(--ms-color-surface-success-bg);
-  border-color: var(--ms-color-surface-success-border);
-  color: var(--ms-color-surface-success-text);
-}
+  &--tone-success {
+    --ms-surface-bg: var(--ms-color-surface-success-bg);
+    --ms-surface-border: var(--ms-color-surface-success-border);
+    --ms-surface-text: var(--ms-color-surface-success-text);
+  }
 
-.msSurface--tone-danger {
-  background: var(--ms-color-danger-bg);
-  border-color: var(--ms-color-danger-border);
-  color: var(--ms-color-danger-text);
+  &--tone-danger {
+    --ms-surface-bg: var(--ms-color-danger-bg);
+    --ms-surface-border: var(--ms-color-danger-border);
+    --ms-surface-text: var(--ms-color-danger-text);
+  }
 }
diff --git a/packages/components/src/atoms/Text/Text.scss b/packages/components/src/atoms/Text/Text.scss
index bdaf96f..071e1cc 100644
--- a/packages/components/src/atoms/Text/Text.scss
+++ b/packages/components/src/atoms/Text/Text.scss
@@ -1,27 +1,33 @@
+@use "../../theme/mixins" as *;
+
+$text-sizes: (
+  "sm": var(--ms-font-size-sm),
+  "md": var(--ms-font-size-md),
+);
+
+$text-tones: (
+  "default": var(--ms-color-text),
+  "muted": var(--ms-color-text-muted),
+);
+
 .msText {
   margin: 0;
   min-width: 0;
   line-height: 1.45;
-}
-
-.msText--size-sm {
-  font-size: var(--ms-font-size-sm);
-}
 
-.msText--size-md {
-  font-size: var(--ms-font-size-md);
-}
+  @each $name, $value in $text-sizes {
+    &--size-#{$name} {
+      font-size: $value;
+    }
+  }
 
-.msText--tone-default {
-  color: var(--ms-color-text);
-}
-
-.msText--tone-muted {
-  color: var(--ms-color-text-muted);
-}
+  @each $name, $value in $text-tones {
+    &--tone-#{$name} {
+      color: $value;
+    }
+  }
 
-.msText--truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  &--truncate {
+    @include truncate-single-line;
+  }
 }
diff --git a/packages/components/src/atoms/TextArea/TextArea.scss b/packages/components/src/atoms/TextArea/TextArea.scss
index 2c94e70..42e4405 100644
--- a/packages/components/src/atoms/TextArea/TextArea.scss
+++ b/packages/components/src/atoms/TextArea/TextArea.scss
@@ -1,4 +1,7 @@
+@use "../../theme/mixins" as *;
+
 .msTextArea {
+  display: block;
   width: 100%;
   min-height: 5.25rem;
   border: 1px solid var(--ms-color-input-border);
@@ -7,17 +10,18 @@
   color: var(--ms-color-text);
   padding: var(--ms-space-3);
   line-height: 1.45;
-}
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+  @include transition(background-color, border-color, box-shadow);
 
-.msTextArea:disabled {
-  cursor: not-allowed;
-  opacity: 0.7;
-}
+  @include control-disabled(0.7);
 
-.msTextArea--resize-none {
-  resize: none;
-}
+  @include focus-ring("&:focus");
+
+  &--resize-none {
+    resize: none;
+  }
 
-.msTextArea--resize-vertical {
-  resize: vertical;
+  &--resize-vertical {
+    resize: vertical;
+  }
 }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5751f0e..ec2b3cd 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -2,6 +2,8 @@ export { AppRoot } from "./atoms/AppRoot/AppRoot";
 export { Badge } from "./atoms/Badge/Badge";
 export { Button } from "./atoms/Button/Button";
 export { CodeBlock } from "./atoms/CodeBlock/CodeBlock";
+export { Grid, GridItem } from "./atoms/Grid/Grid";
+export { GridRows } from "./atoms/GridRows/GridRows";
 export { Heading } from "./atoms/Heading/Heading";
 export { IconButton } from "./atoms/IconButton/IconButton";
 export { Inline } from "./atoms/Inline/Inline";
diff --git a/packages/components/src/theme/_mixins.scss b/packages/components/src/theme/_mixins.scss
new file mode 100644
index 0000000..7a5f19a
--- /dev/null
+++ b/packages/components/src/theme/_mixins.scss
@@ -0,0 +1,35 @@
+@use "sass:list";
+
+@mixin control-disabled($opacity: 0.58) {
+  &:disabled {
+    cursor: not-allowed;
+    opacity: $opacity;
+  }
+}
+
+@mixin focus-ring($selector: "&:focus-visible") {
+  #{$selector} {
+    outline: none;
+    box-shadow: var(--ms-shadow-focus);
+  }
+}
+
+@mixin transition($properties...) {
+  $transitions: ();
+
+  @each $property in $properties {
+    $transitions: list.append(
+      $transitions,
+      #{$property} var(--ms-motion-duration-fast) var(--ms-motion-ease-standard),
+      comma
+    );
+  }
+
+  transition: $transitions;
+}
+
+@mixin truncate-single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/packages/components/src/theme/default.scss b/packages/components/src/theme/default.scss
index a40c1e1..c6dee71 100644
--- a/packages/components/src/theme/default.scss
+++ b/packages/components/src/theme/default.scss
@@ -3,6 +3,7 @@
 @use "./tokens.radius.scss" as *;
 @use "./tokens.typography.scss" as *;
 @use "./tokens.border.scss" as *;
+@use "./tokens.motion.scss" as *;
 
 :root {
   color: var(--ms-color-text);
@@ -17,14 +18,18 @@
 html,
 body,
 #root {
+  height: 100%;
   min-height: 100%;
 }
 
 body {
   margin: 0;
-  background: var(--ms-color-canvas);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 28rem),
+    linear-gradient(180deg, #f3f7fa 0%, var(--ms-color-canvas) 100%);
   color: var(--ms-color-text);
   font-family: var(--ms-font-family-sans);
+  overflow: hidden;
 }
 
 button,
diff --git a/packages/components/src/theme/tokens.border.scss b/packages/components/src/theme/tokens.border.scss
index 764296a..26c5991 100644
--- a/packages/components/src/theme/tokens.border.scss
+++ b/packages/components/src/theme/tokens.border.scss
@@ -1,3 +1,6 @@
 :root {
-  --ms-shadow-card: 0 0 0 rgba(0, 0, 0, 0);
+  --ms-shadow-shell: 0 18px 42px -28px rgba(36, 56, 74, 0.28);
+  --ms-shadow-card: 0 10px 24px -22px rgba(34, 51, 66, 0.3);
+  --ms-shadow-button: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+  --ms-shadow-focus: 0 0 0 3px rgba(44, 108, 163, 0.14);
 }
diff --git a/packages/components/src/theme/tokens.colors.scss b/packages/components/src/theme/tokens.colors.scss
index 2a4bd4c..36ec8b7 100644
--- a/packages/components/src/theme/tokens.colors.scss
+++ b/packages/components/src/theme/tokens.colors.scss
@@ -1,48 +1,57 @@
 :root {
-  --ms-color-canvas: #f4f1ea;
-  --ms-color-panel: #fbfaf6;
-  --ms-color-panel-subtle: #f7f3ea;
+  --ms-color-canvas: #e9eff4;
+  --ms-color-panel: #f8fbfd;
+  --ms-color-panel-subtle: #f1f6fa;
   --ms-color-surface: #ffffff;
-  --ms-color-text: #1d2430;
-  --ms-color-text-muted: #6f6a62;
-  --ms-color-border: #d7d0c2;
-  --ms-color-border-strong: #b8afa1;
+  --ms-color-surface-muted-bg: #f7fafc;
+  --ms-color-surface-muted-border: #d7e2ea;
+  --ms-color-text: #17212b;
+  --ms-color-text-muted: #617181;
+  --ms-color-border: #d6e0e8;
+  --ms-color-border-strong: #aab9c7;
+  --ms-color-frame-border: rgba(155, 174, 190, 0.32);
 
   --ms-color-button-bg: #ffffff;
-  --ms-color-button-border: #b8afa1;
-  --ms-color-button-text: #202833;
-  --ms-color-accent: #20302d;
+  --ms-color-button-subtle-bg: #fbfdff;
+  --ms-color-button-hover-bg: #f0f5f9;
+  --ms-color-button-border: #c7d2dc;
+  --ms-color-button-text: #1c2a35;
+  --ms-color-ghost-hover-bg: rgba(91, 116, 139, 0.08);
+  --ms-color-accent: #235f90;
+  --ms-color-accent-border: #235f90;
+  --ms-color-accent-hover: #1e547f;
   --ms-color-accent-text: #ffffff;
-  --ms-color-selected-bg: #eee7d8;
-  --ms-color-selected-border: #c9bea9;
+  --ms-color-selected-bg: #e4eff8;
+  --ms-color-selected-hover-bg: #dbe9f5;
+  --ms-color-selected-border: #a8c3dc;
 
   --ms-color-input-bg: #ffffff;
-  --ms-color-input-border: #c7bdad;
-
-  --ms-color-surface-accent-bg: #20302d;
-  --ms-color-surface-accent-border: #20302d;
-  --ms-color-surface-accent-text: #ffffff;
-
-  --ms-color-surface-warning-bg: #fff8e8;
-  --ms-color-surface-warning-border: #e5d7b5;
-  --ms-color-surface-warning-text: #4f4532;
-
-  --ms-color-surface-success-bg: #edf4f0;
-  --ms-color-surface-success-border: #bbc8c1;
-  --ms-color-surface-success-text: #26342e;
-
-  --ms-color-danger-bg: #fff2f2;
-  --ms-color-danger-border: #e0a0a0;
-  --ms-color-danger-text: #8f1f1f;
-
-  --ms-color-code-bg: #f8fbf9;
-  --ms-color-code-border: #d3ddd8;
-  --ms-color-code-text: #26342e;
-
-  --ms-color-badge-neutral-bg: #f0ece3;
-  --ms-color-badge-neutral-text: #4f4532;
-  --ms-color-badge-success-bg: #e6f3eb;
-  --ms-color-badge-success-text: #1f5b38;
-  --ms-color-badge-danger-bg: #fff2f2;
-  --ms-color-badge-danger-text: #8f1f1f;
+  --ms-color-input-border: #cad6e0;
+
+  --ms-color-surface-accent-bg: #dce9f5;
+  --ms-color-surface-accent-border: #a8c2d8;
+  --ms-color-surface-accent-text: #163a54;
+
+  --ms-color-surface-warning-bg: #fff4e4;
+  --ms-color-surface-warning-border: #ead1a5;
+  --ms-color-surface-warning-text: #6c4a12;
+
+  --ms-color-surface-success-bg: #e7f2ec;
+  --ms-color-surface-success-border: #bad5c8;
+  --ms-color-surface-success-text: #234f3d;
+
+  --ms-color-danger-bg: #fff1f1;
+  --ms-color-danger-border: #e2aaaa;
+  --ms-color-danger-text: #8d2222;
+
+  --ms-color-code-bg: #f3f8fb;
+  --ms-color-code-border: #cfd9e3;
+  --ms-color-code-text: #22323e;
+
+  --ms-color-badge-neutral-bg: #eaf1f6;
+  --ms-color-badge-neutral-text: #476173;
+  --ms-color-badge-success-bg: #dff1e8;
+  --ms-color-badge-success-text: #21553d;
+  --ms-color-badge-danger-bg: #fff0f0;
+  --ms-color-badge-danger-text: #8d2222;
 }
diff --git a/packages/components/src/theme/tokens.motion.scss b/packages/components/src/theme/tokens.motion.scss
new file mode 100644
index 0000000..98ff442
--- /dev/null
+++ b/packages/components/src/theme/tokens.motion.scss
@@ -0,0 +1,4 @@
+:root {
+  --ms-motion-duration-fast: 120ms;
+  --ms-motion-ease-standard: ease;
+}
diff --git a/packages/components/src/theme/tokens.radius.scss b/packages/components/src/theme/tokens.radius.scss
index fbf701a..21ddb9d 100644
--- a/packages/components/src/theme/tokens.radius.scss
+++ b/packages/components/src/theme/tokens.radius.scss
@@ -1,4 +1,5 @@
 :root {
   --ms-radius-md: 0.375rem;
   --ms-radius-lg: 0.5rem;
+  --ms-radius-xl: 0.875rem;
 }