@ponti-studios/ui 0.1.2

package/src/tokens/color-systems.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "../components/primitives/button";
+import { colorSystems, colorTokenNames, type ColorMode } from "./colors";
+
+const meta: Meta = {
+  title: "Foundations/Colors",
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const groups = {
+  surfaces: colorTokenNames.filter((token) => token.startsWith("surface-")),
+  content: colorTokenNames.filter((token) => token.startsWith("text-")),
+  structure: colorTokenNames.filter((token) => token.startsWith("border-")),
+  intent: colorTokenNames.filter(
+    (token) =>
+      token.startsWith("accent") ||
+      token.startsWith("destructive") ||
+      token.startsWith("success") ||
+      token.startsWith("warning") ||
+      token === "overlay-scrim" ||
+      token === "ring-focus",
+  ),
+};
+
+function Swatch({ mode, token }: { mode: ColorMode; token: string }) {
+  const value = colorSystems.ponti[mode][token as keyof (typeof colorSystems.ponti)[typeof mode]];
+  const foreground = token.startsWith("text-") ? value : colorSystems.ponti[mode]["text-primary"];
+
+  return (
+    <div className="grid min-w-0 gap-2">
+      <div
+        className="flex min-h-16 items-end overflow-hidden rounded-md border p-2"
+        style={{
+          background: value,
+          color: foreground,
+          borderColor: colorSystems.ponti[mode]["border-default"],
+        }}
+      >
+        <span className="font-mono text-[11px] break-all">Aa</span>
+      </div>
+      <span
+        className="font-mono text-[11px] break-all"
+        style={{ color: colorSystems.ponti[mode]["text-secondary"] }}
+      >
+        {token}
+      </span>
+    </div>
+  );
+}
+
+function ThemePanel({ mode }: { mode: ColorMode }) {
+  const theme = colorSystems.ponti[mode];
+
+  return (
+    <section
+      className="grid min-w-0 gap-6 rounded-xl border p-5"
+      style={{
+        background: theme["surface-canvas"],
+        color: theme["text-primary"],
+        borderColor: theme["border-default"],
+      }}
+      aria-label={`Ponti ${mode} color system`}
+    >
+      <header className="grid gap-2">
+        <p className="font-mono text-xs uppercase" style={{ color: theme["text-secondary"] }}>
+          Ponti / {mode}
+        </p>
+        <h2 className="text-xl font-semibold">Semantic roles</h2>
+        <p className="max-w-prose text-sm" style={{ color: theme["text-secondary"] }}>
+          Components consume meaning, while this palette supplies the light or dark value.
+        </p>
+      </header>
+      <div className="flex flex-wrap gap-2">
+        <Button>Primary action</Button>
+        <Button variant="secondary">Secondary action</Button>
+        <Button variant="outline">Outline action</Button>
+        <Button variant="ghost">Quiet action</Button>
+        <Button variant="destructive">Delete item</Button>
+      </div>
+      <div className="grid gap-6">
+        {Object.entries(groups).map(([title, tokens]) => (
+          <section key={title} className="grid gap-3">
+            <h3 className="text-sm font-semibold capitalize">{title}</h3>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+              {tokens.map((token) => (
+                <Swatch key={token} mode={mode} token={token} />
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export const LightAndDark: Story = {
+  render: () => (
+    <main className="grid min-h-screen gap-4 bg-slate-100 p-4 md:p-6 dark:bg-slate-950">
+      <ThemePanel mode="light" />
+      <ThemePanel mode="dark" />
+    </main>
+  ),
+};
+
+export const ButtonStates: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6">
+      <header className="grid gap-2">
+        <h1 className="text-2xl font-semibold">Button state matrix</h1>
+        <p className="text-secondary max-w-prose text-sm">
+          Inspect hover, focus, press, disabled, destructive, and loading behavior in the toolbar’s
+          light and dark modes.
+        </p>
+      </header>
+      <div className="grid max-w-3xl gap-3 sm:grid-cols-2">
+        <Button>Primary action</Button>
+        <Button variant="secondary">Secondary action</Button>
+        <Button variant="outline">Outline action</Button>
+        <Button variant="ghost">Quiet action</Button>
+        <Button variant="destructive">Delete item</Button>
+        <Button variant="link">Read more</Button>
+        <Button disabled>Disabled action</Button>
+        <Button isLoading loadingLabel="Saving">
+          Save changes
+        </Button>
+      </div>
+    </main>
+  ),
+};

package/src/tokens/colors.ts

@@ -0,0 +1,156 @@
+/**
+ * Canonical semantic color contract for the Ponti Studios system.
+ *
+ * Components consume these roles. The runtime CSS provides the light and dark
+ * values; this module exists for inspection, tooling, and typed consumers.
+ */
+
+export const colorTokenNames = [
+  "surface-canvas",
+  "surface-panel",
+  "surface-raised",
+  "surface-inset",
+  "surface-hover",
+  "surface-pressed",
+  "surface-selected",
+  "surface-disabled",
+  "overlay-scrim",
+  "text-primary",
+  "text-secondary",
+  "text-tertiary",
+  "text-disabled",
+  "text-accent",
+  "text-destructive",
+  "text-success",
+  "text-warning",
+  "text-on-accent",
+  "text-on-destructive",
+  "text-on-success",
+  "text-on-warning",
+  "border-subtle",
+  "border-default",
+  "border-strong",
+  "border-focus",
+  "border-accent",
+  "border-destructive",
+  "accent",
+  "accent-hover",
+  "accent-pressed",
+  "accent-subtle",
+  "destructive",
+  "destructive-hover",
+  "destructive-pressed",
+  "destructive-subtle",
+  "success",
+  "success-subtle",
+  "warning",
+  "warning-subtle",
+  "ring-focus",
+] as const;
+
+export type ColorToken = (typeof colorTokenNames)[number];
+export type ColorMode = "light" | "dark";
+export type ColorSystem = "ponti";
+export type ColorTheme = Record<ColorToken, string>;
+export type ColorSystemThemes = Record<ColorMode, ColorTheme>;
+
+const pontiLight: ColorTheme = {
+  "surface-canvas": "#ffffff",
+  "surface-panel": "#f6f8fa",
+  "surface-raised": "#ffffff",
+  "surface-inset": "#eff2f5",
+  "surface-hover": "#e8ebef",
+  "surface-pressed": "#dfe3e8",
+  "surface-selected": "rgba(9, 105, 218, 0.1)",
+  "surface-disabled": "#eff2f5",
+  "overlay-scrim": "rgba(31, 35, 40, 0.42)",
+  "text-primary": "#25292e",
+  "text-secondary": "#59636e",
+  "text-tertiary": "#818b98",
+  "text-disabled": "#9ea7b3",
+  "text-accent": "#0969da",
+  "text-destructive": "#cf222e",
+  "text-success": "#1f883d",
+  "text-warning": "#9a6700",
+  "text-on-accent": "#ffffff",
+  "text-on-destructive": "#ffffff",
+  "text-on-success": "#ffffff",
+  "text-on-warning": "#1c1c1e",
+  "border-subtle": "rgba(129, 139, 152, 0.2)",
+  "border-default": "#d1d9e0",
+  "border-strong": "#8c959f",
+  "border-focus": "#0969da",
+  "border-accent": "#0969da",
+  "border-destructive": "#cf222e",
+  accent: "#0969da",
+  "accent-hover": "#0550ae",
+  "accent-pressed": "#033d8b",
+  "accent-subtle": "rgba(9, 105, 218, 0.1)",
+  destructive: "#cf222e",
+  "destructive-hover": "#a40e26",
+  "destructive-pressed": "#82071e",
+  "destructive-subtle": "rgba(207, 34, 46, 0.12)",
+  success: "#1f883d",
+  "success-subtle": "rgba(31, 136, 61, 0.12)",
+  warning: "#9a6700",
+  "warning-subtle": "rgba(154, 103, 0, 0.12)",
+  "ring-focus": "#0969da",
+};
+
+const pontiDark: ColorTheme = {
+  "surface-canvas": "#0d1117",
+  "surface-panel": "#161b22",
+  "surface-raised": "#21262d",
+  "surface-inset": "#1a2029",
+  "surface-hover": "#242a33",
+  "surface-pressed": "#30363d",
+  "surface-selected": "rgba(47, 129, 247, 0.18)",
+  "surface-disabled": "#1a2029",
+  "overlay-scrim": "rgba(1, 4, 9, 0.78)",
+  "text-primary": "#f0f6fc",
+  "text-secondary": "#8b949e",
+  "text-tertiary": "#6e7681",
+  "text-disabled": "#484f58",
+  "text-accent": "#58a6ff",
+  "text-destructive": "#ff7b72",
+  "text-success": "#3fb950",
+  "text-warning": "#d29922",
+  "text-on-accent": "#ffffff",
+  "text-on-destructive": "#ffffff",
+  "text-on-success": "#ffffff",
+  "text-on-warning": "#0d1117",
+  "border-subtle": "rgba(240, 246, 252, 0.14)",
+  "border-default": "#30363d",
+  "border-strong": "#6e7681",
+  "border-focus": "#2f81f7",
+  "border-accent": "#2f81f7",
+  "border-destructive": "#da3633",
+  accent: "#2f81f7",
+  "accent-hover": "#58a6ff",
+  "accent-pressed": "#1f6feb",
+  "accent-subtle": "rgba(47, 129, 247, 0.18)",
+  destructive: "#da3633",
+  "destructive-hover": "#f85149",
+  "destructive-pressed": "#b62324",
+  "destructive-subtle": "rgba(218, 54, 51, 0.18)",
+  success: "#238636",
+  "success-subtle": "rgba(35, 134, 54, 0.18)",
+  warning: "#9e6a03",
+  "warning-subtle": "rgba(158, 106, 3, 0.18)",
+  "ring-focus": "#2f81f7",
+};
+
+export const colorSystems = {
+  ponti: { light: pontiLight, dark: pontiDark },
+} as const satisfies Record<ColorSystem, ColorSystemThemes>;
+
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--color-${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--color-${string})`>,
+);
+
+export const COLOR_SYSTEM_ATTRIBUTE = "data-color-system" as const;
+export const COLOR_MODE_ATTRIBUTE = "data-color-mode" as const;

package/src/tokens/foundations.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta: Meta = {
+  title: "Foundations/System Lab",
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SpacingAndType: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary grid min-h-screen gap-10 p-6 md:p-10">
+      <section className="grid gap-6">
+        <header className="grid gap-2">
+          <p className="body-4 text-secondary">Foundations / rhythm</p>
+          <h1 className="display-1">Space gives the interface its pace.</h1>
+          <p className="body-1 text-secondary max-w-2xl">
+            The specimen uses the shared interval scale and the four local typography roles.
+          </p>
+        </header>
+        <div className="grid gap-2">
+          {[4, 8, 12, 16, 24, 32, 48, 64].map((size) => (
+            <div key={size} className="flex items-center gap-3">
+              <span className="text-secondary w-12 font-mono text-xs tabular-nums">{size}px</span>
+              <div
+                className="bg-accent h-3 rounded-sm"
+                style={{ width: size }}
+                aria-hidden="true"
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+      <section className="border-subtle grid gap-5 rounded-xl border p-6">
+        <h2 className="heading-2">Typography roles</h2>
+        <div className="grid gap-4">
+          <div>
+            <p className="text-secondary text-xs uppercase">Display</p>
+            <p className="display-2">A clear beginning</p>
+          </div>
+          <div>
+            <p className="text-secondary text-xs uppercase">Body</p>
+            <p className="body-1 max-w-2xl">
+              Readable content should have room to breathe and should not require the user to decode
+              the container.
+            </p>
+          </div>
+          <div>
+            <p className="text-secondary text-xs uppercase">Label</p>
+            <p className="body-3 font-medium">Current collection</p>
+          </div>
+          <div>
+            <p className="text-secondary text-xs uppercase">Caption</p>
+            <p className="body-4 text-secondary">Updated just now</p>
+          </div>
+        </div>
+      </section>
+    </main>
+  ),
+};
+
+export const Surfaces: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary grid min-h-screen gap-6 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="body-4 text-secondary">Foundations / surfaces</p>
+        <h1 className="display-1">Quiet layers, clear ownership.</h1>
+      </header>
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="bg-canvas border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
+          <h2 className="heading-3">Canvas</h2>
+          <p className="body-3 text-secondary">The page background.</p>
+        </div>
+        <div className="bg-panel border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
+          <h2 className="heading-3">Panel</h2>
+          <p className="body-3 text-secondary">A contained region.</p>
+        </div>
+        <div className="bg-raised border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
+          <h2 className="heading-3">Raised</h2>
+          <p className="body-3 text-secondary">An overlay or elevated layer.</p>
+        </div>
+        <div className="bg-inset border-subtle grid min-h-40 content-start gap-2 rounded-xl border p-5">
+          <h2 className="heading-3">Inset</h2>
+          <p className="body-3 text-secondary">A recessed working region.</p>
+        </div>
+      </div>
+    </main>
+  ),
+};
+
+export const Motion: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="body-4 text-secondary">Foundations / motion</p>
+        <h1 className="display-1">Motion should explain, not perform.</h1>
+        <p className="body-1 text-secondary max-w-2xl">
+          Use the Storybook motion-reduction setting to confirm that nonessential movement
+          disappears.
+        </p>
+      </header>
+      <div className="grid gap-4 sm:grid-cols-3">
+        <div className="bg-panel border-subtle motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2 grid min-h-32 place-content-center gap-2 rounded-xl border p-5 duration-150 motion-reduce:animate-none">
+          <span className="heading-3">Enter</span>
+          <span className="body-4 text-secondary">150ms / 6px</span>
+        </div>
+        <button className="bg-panel border-subtle text-primary hover:bg-surface-hover active:bg-surface-pressed focus-visible:ring-focus grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left focus-visible:ring-2 focus-visible:outline-none motion-safe:transition-colors">
+          <span className="heading-3">Press</span>
+          <span className="body-4 text-secondary">Immediate feedback</span>
+        </button>
+        <div className="bg-panel border-subtle grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
+          <span className="heading-3">Loading</span>
+          <span className="body-4 text-secondary">Geometry remains stable</span>
+        </div>
+      </div>
+    </main>
+  ),
+};
+
+export const Accessibility: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary grid min-h-screen gap-8 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="body-4 text-secondary">Foundations / accessibility</p>
+        <h1 className="display-1">The system should be calm for everyone.</h1>
+      </header>
+      <section className="border-subtle grid max-w-2xl gap-5 rounded-xl border p-6">
+        <label className="grid gap-2">
+          <span className="body-3 font-medium">Email address</span>
+          <input
+            className="bg-canvas border-default text-primary focus-visible:ring-focus h-11 rounded-md border px-3 outline-none focus-visible:ring-2"
+            placeholder="you@example.com"
+          />
+          <span className="body-4 text-secondary">Use a reachable address for notifications.</span>
+        </label>
+        <div className="flex flex-wrap gap-3">
+          <button className="bg-accent text-on-accent focus-visible:ring-focus min-h-11 rounded-md px-4 focus-visible:ring-2 focus-visible:outline-none">
+            Continue
+          </button>
+          <button disabled className="bg-panel text-disabled min-h-11 rounded-md px-4">
+            Unavailable
+          </button>
+        </div>
+        <p className="body-4 text-destructive" role="alert">
+          Example error: enter a valid email address.
+        </p>
+      </section>
+    </main>
+  ),
+};

package/src/tokens/index.ts

@@ -0,0 +1,16 @@
+export { colors } from "./colors";
+export {
+  COLOR_MODE_ATTRIBUTE,
+  COLOR_SYSTEM_ATTRIBUTE,
+  colorSystems,
+  colorTokenNames,
+} from "./colors";
+export type { ColorMode, ColorSystem, ColorToken } from "./colors";
+export { durations, easingWeb, translateDistances } from "./motion";
+export { radii } from "./radii";
+export { shadowsNative, shadowsWeb } from "./shadows";
+export { contentWidths, spacing } from "./spacing";
+export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights } from "./typography";
+export type { RadiusToken } from "./radii";
+export type { ContentWidthToken, SpacingToken } from "./spacing";
+export type { FontSizeToken, FontWeightToken } from "./typography";

package/src/tokens/layout.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta = {
+  title: "Foundations/Layout Rhythm",
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PageShell: Story = {
+  render: () => (
+    <main className="page-shell bg-canvas text-primary">
+      <header className="layout-stack">
+        <p className="body-4 text-secondary">Page shell</p>
+        <h1 className="display-1">A consistent starting point for content pages</h1>
+      </header>
+      <section className="layout-stack">
+        <h2 className="heading-2">Section rhythm</h2>
+        <p className="body-1 text-secondary max-w-2xl">
+          Page-level breathing room and internal section spacing remain consistent across indexes,
+          feeds, and editorial surfaces.
+        </p>
+      </section>
+    </main>
+  ),
+};
+
+export const ListRows: Story = {
+  render: () => (
+    <main className="page-shell bg-canvas text-primary">
+      <div className="layout-stack">
+        <h1 className="display-1">List row rhythm</h1>
+        <div className="border-subtle divide-border-subtle divide-y border-b">
+          {[
+            ["01", "A compact row", "For projects, search results, or activity."],
+            ["02", "A readable row", "Consistent padding keeps scanning calm."],
+            ["03", "A responsive row", "The same rhythm holds on mobile and desktop."],
+          ].map(([index, title, description]) => (
+            <div key={index} className="list-row items-start justify-between">
+              <span className="body-3 text-secondary tabular-nums">{index}</span>
+              <div className="layout-stack min-w-0 flex-1 gap-1">
+                <h2 className="heading-3">{title}</h2>
+                <p className="body-3 text-secondary">{description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  ),
+};
+
+export const ListRowsWithMedia: Story = {
+  render: () => (
+    <main className="page-shell bg-canvas text-primary">
+      <div className="layout-stack">
+        <h1 className="display-1">List rows with media</h1>
+        <div className="border-subtle divide-border-subtle divide-y border-b">
+          <div className="list-row items-center">
+            <div className="list-media list-media-wide bg-panel" aria-hidden="true">
+              <span className="heading-3 text-secondary">WO</span>
+            </div>
+            <div className="layout-stack min-w-0 gap-1">
+              <h2 className="heading-3">Wide media row</h2>
+              <p className="body-3 text-secondary">For client or partner marks.</p>
+            </div>
+          </div>
+          <div className="list-row items-center">
+            <div className="list-media list-media-square bg-panel" aria-hidden="true">
+              <span className="heading-3 text-secondary">PR</span>
+            </div>
+            <div className="layout-stack min-w-0 gap-1">
+              <h2 className="heading-3">Square media row</h2>
+              <p className="body-3 text-secondary">For product or project marks.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  ),
+};
+
+export const DetailSections: Story = {
+  render: () => (
+    <main className="bg-canvas text-primary">
+      <section className="section section-hero">
+        <p className="body-4 text-secondary">Detail hero</p>
+        <h1 className="display-1">A detail page with a clear vertical rhythm</h1>
+      </section>
+      <section className="section">
+        <h2 className="heading-2">Standard section</h2>
+        <p className="body-1 text-secondary max-w-2xl">
+          Sections share a border, gutter, and vertical breathing room without requiring a React
+          component.
+        </p>
+      </section>
+      <section className="section gap-8">
+        <h2 className="heading-2">Dense section</h2>
+        <ol className="layout-stack gap-8">
+          <li className="body-1">01 — Start with the problem.</li>
+          <li className="body-1">02 — Explain the approach.</li>
+          <li className="body-1">03 — Close with the outcome.</li>
+        </ol>
+      </section>
+      <div className="detail-navigation px-4 md:px-6">
+        <a className="body-2 text-secondary hover:text-primary" href="#previous">
+          ← Previous
+        </a>
+        <a className="body-2 text-secondary hover:text-primary" href="#next">
+          Next →
+        </a>
+      </div>
+    </main>
+  ),
+};

package/src/tokens/motion.ts

@@ -0,0 +1,51 @@
+/**
+ * Motion tokens — durations and translate distances.
+ *
+ * Durations are in milliseconds. Must match animations.css and
+ * apps/omiro/theme/motion.ts (which imports from here).
+ *
+ * CSS easing strings are web-only. Mobile uses react-native-reanimated
+ * Easing.* functions which cannot be expressed as strings — the mobile
+ * motion.ts keeps those local and imports only the numeric constants here.
+ *
+ * ## Animation mandate
+ *
+ * Web interactive animations MUST use the shared GSAP helpers exposed by the
+ * consuming app.
+ * The canonical sequences (playFocusExpand, playFocusCollapse,
+ * playContextSwitch, playSubmitPulse, playEnterRow, playExitRow,
+ * playShimmer) read the numeric constants from this file so all motion
+ * stays in sync.
+ *
+ * CSS `motion-anim-*` classes (animations.css) are reserved for Radix UI
+ * component enter/exit only — do not add new CSS keyframe animations for
+ * interactive product surfaces.
+ */
+
+export const durations = {
+  /** Element arrives and settles (decelerate). */
+  enter: 150,
+  /** Element leaves without lingering (accelerate). */
+  exit: 120,
+  /** Content animations: loading states, thinking indicators. */
+  standard: 120,
+  /** Loop / breezy animations. */
+  breezy: 1800,
+  spin: 1200,
+} as const;
+
+export const translateDistances = {
+  /** Enter lift (px). */
+  enterY: 6,
+  /** Exit settle (px). */
+  exitY: 4,
+  enterX: 6,
+  exitX: 4,
+} as const;
+
+/** CSS cubic-bezier strings — web only. */
+export const easingWeb = {
+  enter: "cubic-bezier(0.0, 0.0, 0.2, 1)",
+  exit: "cubic-bezier(0.4, 0.0, 1, 1)",
+  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+} as const;

package/src/tokens/radii.ts

@@ -0,0 +1,10 @@
+export const radii = {
+  sm: 6,
+  md: 10,
+  lg: 14,
+  xl: 18,
+  full: 9999,
+  icon: 20,
+} as const;
+
+export type RadiusToken = keyof typeof radii;

package/src/tokens/shadows.ts

@@ -0,0 +1,34 @@
+/**
+ * Shadow tokens.
+ *
+ * `shadowsWeb` values must match --shadow-* in globals.css.
+ * `shadowsNative` are React Native shadow object equivalents.
+ */
+
+export const shadowsWeb = {
+  low: "0 2px 8px rgba(0, 0, 0, 0.35)",
+  medium: "0 8px 24px rgba(0, 0, 0, 0.45)",
+  high: "0 20px 60px rgba(0, 0, 0, 0.55)",
+} as const;
+
+/** React Native shadow objects. Pass these into StyleSheet styles. */
+export const shadowsNative = {
+  low: {
+    shadowColor: "#0f1113",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 8,
+  },
+  medium: {
+    shadowColor: "#0f1113",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.45,
+    shadowRadius: 24,
+  },
+  high: {
+    shadowColor: "#0f1113",
+    shadowOffset: { width: 0, height: 20 },
+    shadowOpacity: 0.55,
+    shadowRadius: 60,
+  },
+} as const;