Liquid Glass

Concept shot — generated from this style's terms, the way a designer would present it. The specimen below is the contract: rendered from the exact tokens on this page.

Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.

Design this interface in the Liquid Glass style. Surfaces are glass rather than paper. Each panel refracts what is behind it, carries a specular line along its top edge and a thin ring of light all the way round, and floats on a wide soft shadow. Radii are concentric — a nested corner is always smaller than the one containing it.

Build every surface the Liquid glass way: Panels are lenses: they blur and re-saturate what is behind them, catch a specular line along the top edge, and carry a thin ring of light all the way round.

Use exactly these values: background #eef1f8, surfaces #f7f9ff, text #141a26, secondary text #4f5a6e, accent #0a6cf0 with #ffffff on it; corner radius 12/18/26px; no borders and no separators at all; a single soft ambient shadow; system-ui for body at 14px, line height 1.45; 4px spacing grid, regular spacing; 26px backdrop blur on floating surfaces.

Never: opaque panels; hard outlines or hairline borders; flat single-color fills on floating surfaces; square corners.

Dark mode uses background #0a0e17, surfaces #141b2a, text #eaf0fb, accent #5ea8ff — the same style, not an inverted one.

The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.

Measured contrast — body 15.41:1 light, 16.87:1 dark; secondary text 6.15:1 and 7.57:1. Every pair clears WCAG AA in both themes, checked on each build.

import type { CSSProperties } from "react";

/**
 * Vibary · Liquid Glass
 *
 * Panels behave like lenses: they blur and re-saturate the page behind them and catch light along their edges.
 *
 * One complete product screen, rendered from the token object below —
 * the same screen every other Vibary specimen renders, so the style
 * is the only variable. Self-contained: React only, no CSS file, no
 * assets, no chart library.
 *
 * `theme` defaults to following the system setting; pass "light" or
 * "dark" to pin one.
 */

export const TOKENS = {
  "material": "liquid-glass",
  "color": {
    "light": {
      "bg": "#eef1f8",
      "surface": "#f7f9ff",
      "border": "#c9d3e8",
      "text": "#141a26",
      "muted": "#4f5a6e",
      "accent": "#0a6cf0",
      "accentText": "#ffffff"
    },
    "dark": {
      "bg": "#0a0e17",
      "surface": "#141b2a",
      "border": "#2b3752",
      "text": "#eaf0fb",
      "muted": "#94a3bd",
      "accent": "#5ea8ff",
      "accentText": "#03142c"
    }
  },
  "radius": {
    "sm": 12,
    "md": 18,
    "lg": 26,
    "pill": 999
  },
  "border": {
    "width": 0,
    "style": "none"
  },
  "shadow": {
    "level": "soft",
    "value": "0 10px 30px -12px rgba(0, 0, 0, 0.22)"
  },
  "type": {
    "family": {
      "display": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
      "body": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
      "mono": "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
    },
    "scale": [
      11,
      12,
      14,
      16,
      21,
      30
    ],
    "weight": {
      "body": 400,
      "strong": 600,
      "display": 700
    },
    "lineHeight": 1.45,
    "tracking": -0.005
  },
  "space": {
    "unit": 4,
    "density": "regular"
  },
  "effects": {
    "surface": "gradient",
    "accentStyle": "filled",
    "separator": "none",
    "labelCase": "none",
    "blur": 26
  }
};

type Palette = typeof TOKENS.color.light;

export type LiquidGlassSpecimenProps = {
  theme?: "system" | "light" | "dark";
  /** Scopes the custom properties; only matters if you render two. */
  scope?: string;
};

function vars(palette: Palette): string {
  return [
    `--sp-bg: ${palette.bg}`,
    `--sp-surface: ${palette.surface}`,
    `--sp-border: ${palette.border}`,
    `--sp-text: ${palette.text}`,
    `--sp-muted: ${palette.muted}`,
    `--sp-accent: ${palette.accent}`,
    `--sp-accent-text: ${palette.accentText}`,
  ].join("; ");
}

/** Fixed content: identical in every specimen, on purpose. */
const NAV: readonly { label: string; path: string }[] = [
  { label: "Overview", path: "M3 9.5 9 4.5l6 5V15a1 1 0 0 1-1 1h-2.5v-4h-5v4H4a1 1 0 0 1-1-1z" },
  { label: "Orders", path: "M4 5h10l-1 9H5zM7 5V3.5h4V5" },
  { label: "Customers", path: "M9 9a2.6 2.6 0 1 0 0-5.2A2.6 2.6 0 0 0 9 9M3.6 15.4c0-2.4 2.4-3.8 5.4-3.8s5.4 1.4 5.4 3.8" },
  { label: "Reports", path: "M4.5 15V8M9 15V4.5M13.5 15v-4.5" },
  { label: "Settings", path: "M9 11.4A2.4 2.4 0 1 0 9 6.6a2.4 2.4 0 0 0 0 4.8M9 2.6v1.4M9 14v1.4M15.4 9H14M4 9H2.6M13.5 4.5l-1 1M5.5 12.5l-1 1M13.5 13.5l-1-1M5.5 5.5l-1-1" },
];

const STATS: readonly { label: string; value: string; delta: string; up: boolean }[] = [
  { label: "Revenue", value: "$48,290", delta: "+12.4%", up: true },
  { label: "Orders", value: "1,284", delta: "+3.1%", up: true },
  { label: "Refunds", value: "42", delta: "-1.8%", up: false },
];

const BARS: readonly { day: string; value: number }[] = [
  { day: "M", value: 0.42 },
  { day: "T", value: 0.61 },
  { day: "W", value: 0.38 },
  { day: "T", value: 0.74 },
  { day: "F", value: 0.93 },
  { day: "S", value: 0.55 },
  { day: "S", value: 0.29 },
];

const ROWS: readonly { name: string; meta: string; state: string; amount: string }[] = [
  { name: "Kyoto Print Co.", meta: "Invoice 2841", state: "Paid", amount: "420.00" },
  { name: "Aurora Supply", meta: "Invoice 2839", state: "Pending", amount: "186.50" },
  { name: "Northwind Studio", meta: "Invoice 2836", state: "Overdue", amount: "678.00" },
];

const SWITCHES: readonly { label: string; on: boolean }[] = [
  { label: "Auto-pay invoices", on: true },
  { label: "Email receipts", on: false },
];

/**
 * The material: how this style paints an element, as opposed to what
 * color it paints it. This is the part that makes Liquid glass
 * a different design language rather than a different theme —
 * Panels are lenses: they blur and re-saturate what is behind them, catch a specular line along the top edge, and carry a thin ring of light all the way round.
 */
const MATERIAL = {
  "surface": {
    "background": "linear-gradient(160deg, color-mix(in srgb, #ffffff 22%, transparent) 0%, transparent 38%), color-mix(in srgb, var(--sp-surface) 58%, transparent)",
    "backdropFilter": "blur(26px) saturate(185%)",
    "WebkitBackdropFilter": "blur(26px) saturate(185%)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent), inset 0 -1px 0 color-mix(in srgb, #ffffff 16%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent), 0 22px 48px -24px color-mix(in srgb, #000000 60%, transparent)",
    "border": "none"
  },
  "button": {
    "background": "linear-gradient(180deg, color-mix(in srgb, #ffffff 35%, transparent) 0%, transparent 55%), color-mix(in srgb, var(--sp-accent) 82%, transparent)",
    "color": "var(--sp-accent-text)",
    "backdropFilter": "blur(14px) saturate(160%)",
    "WebkitBackdropFilter": "blur(14px) saturate(160%)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 65%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent), 0 10px 24px -12px color-mix(in srgb, #000000 55%, transparent)",
    "border": "none"
  },
  "switchOn": {
    "background": "color-mix(in srgb, var(--sp-accent) 86%, transparent)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent)",
    "border": "none"
  },
  "switchOff": {
    "background": "color-mix(in srgb, var(--sp-text) 12%, transparent)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 14%, transparent)",
    "border": "none"
  },
  "knob": {
    "background": "linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #ffffff 78%, transparent) 100%)",
    "boxShadow": "0 1px 3px color-mix(in srgb, #000000 35%, transparent), inset 0 1px 0 #ffffff"
  },
  "navActive": {
    "background": "linear-gradient(180deg, color-mix(in srgb, #ffffff 26%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--sp-accent) 24%, transparent)",
    "backdropFilter": "blur(12px)",
    "WebkitBackdropFilter": "blur(12px)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 16%, transparent)"
  },
  "bar": {
    "background": "linear-gradient(180deg, color-mix(in srgb, #ffffff 30%, transparent) 0%, color-mix(in srgb, var(--sp-accent) 78%, transparent) 100%)",
    "boxShadow": "inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent), 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent)",
    "border": "none"
  }
};

const BACKDROP = [
  {
    "x": "12%",
    "y": "18%",
    "size": 320,
    "color": "var(--sp-accent)",
    "alpha": 55
  },
  {
    "x": "78%",
    "y": "8%",
    "size": 260,
    "color": "var(--sp-text)",
    "alpha": 22
  },
  {
    "x": "62%",
    "y": "82%",
    "size": 300,
    "color": "var(--sp-accent)",
    "alpha": 38
  }
];

const SURFACE_BORDER = "none";
const ROW_SEPARATOR = "none";
const RING = 0.68;

export function LiquidGlassSpecimen({ theme = "system", scope = "sp-liquid-glass" }: LiquidGlassSpecimenProps) {
  const css =
    theme === "light"
      ? `.${scope}{${vars(TOKENS.color.light)}}`
      : theme === "dark"
        ? `.${scope}{${vars(TOKENS.color.dark)}}`
        : `.${scope}{${vars(TOKENS.color.light)}}@media(prefers-color-scheme:dark){.${scope}{${vars(TOKENS.color.dark)}}}`;

  const label: CSSProperties = {
    font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
    letterSpacing: `${TOKENS.type.tracking}em`,
    textTransform: "none",
    color: "var(--sp-muted)",
  };

  const meta: CSSProperties = {
    font: `${TOKENS.type.weight.body} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
    color: "var(--sp-muted)",
  };

  const card: CSSProperties = {
    ...MATERIAL.surface,
    borderRadius: TOKENS.radius.md,
    padding: 15,
  };

  const heading: CSSProperties = {
    font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[2]}px ${TOKENS.type.family.display}`,
    textTransform: "none",
    letterSpacing: "0",
  };

  const primary: CSSProperties = { ...MATERIAL.button, borderRadius: TOKENS.radius.sm };

  const pill = (active: boolean): CSSProperties => ({
    padding: "2px 8px",
    borderRadius: TOKENS.radius.pill,
    background: active
      ? "var(--sp-accent)"
      : "color-mix(in srgb, var(--sp-text) 10%, transparent)",
    color: active ? "var(--sp-accent-text)" : "var(--sp-muted)",
    font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
    textTransform: "none",
    letterSpacing: "0",
  });

  return (
    <div
      className={scope}
      style={{
        width: 760,
        display: "flex",
        background: "linear-gradient(155deg, color-mix(in srgb, var(--sp-accent) 24%, var(--sp-bg)) 0%, var(--sp-bg) 55%, color-mix(in srgb, var(--sp-accent) 14%, var(--sp-bg)) 100%)",
        color: "var(--sp-text)",
        font: `${TOKENS.type.weight.body} ${TOKENS.type.scale[1]}px/${TOKENS.type.lineHeight} ${TOKENS.type.family.body}`,
        letterSpacing: `${TOKENS.type.tracking}em`,
        overflow: "hidden",
        position: "relative",
      }}
    >
      <style>{css}</style>
      {/* What the glass refracts. Without a field behind it, a lens
          looks like a flat panel. */}
      {BACKDROP.map((blob, index) => (
        <span
          key={index}
          aria-hidden="true"
          style={{
            position: "absolute",
            left: blob.x,
            top: blob.y,
            width: blob.size,
            height: blob.size,
            marginLeft: -blob.size / 2,
            marginTop: -blob.size / 2,
            borderRadius: "50%",
            filter: "blur(28px)",
            background: `color-mix(in srgb, ${blob.color} ${blob.alpha}%, transparent)`,
            pointerEvents: "none",
          }}
        />
      ))}

      {/* Sidebar */}
      <div
        style={{
          width: 176,
          flex: "none",
          display: "flex",
          flexDirection: "column",
          gap: 4,
          padding: 18,
          borderRight: "1px solid var(--sp-border)",
          background: "color-mix(in srgb, var(--sp-surface) 70%, transparent)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
          <span
            style={{
              width: 22,
              height: 22,
              borderRadius: TOKENS.radius.sm,
              background: "var(--sp-accent)",
              display: "grid",
              placeItems: "center",
              color: "var(--sp-accent-text)",
              font: `${TOKENS.type.weight.display} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.display}`,
            }}
          >
            N
          </span>
          <span
            style={{
              font: `${TOKENS.type.weight.display} ${TOKENS.type.scale[2]}px ${TOKENS.type.family.display}`,
              textTransform: "none",
              letterSpacing: "0",
            }}
          >
            Northwind
          </span>
        </div>

        {NAV.map((item, index) => (
          <span
            key={item.label}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 9,
              height: 34,
              padding: "0 9px",
              borderRadius: TOKENS.radius.sm,
              ...(index === 0 ? MATERIAL.navActive : null),
              color: index === 0 ? "var(--sp-accent)" : "var(--sp-muted)",
              font: `${index === 0 ? TOKENS.type.weight.strong : TOKENS.type.weight.body} ${TOKENS.type.scale[1]}px ${TOKENS.type.family.body}`,
              textTransform: "none",
              letterSpacing: "0",
            }}
          >
            <svg width="17" height="17" viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path
                d={item.path}
                stroke="currentColor"
                strokeWidth={index === 0 ? 1.7 : 1.3}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            {item.label}
          </span>
        ))}

        <span style={{ flex: 1 }} />

        <span
          style={{
            display: "flex",
            alignItems: "center",
            gap: 8,
            paddingTop: 14,
            borderTop: "1px solid var(--sp-border)",
          }}
        >
          <span
            style={{
              width: 26,
              height: 26,
              flex: "none",
              display: "grid",
              placeItems: "center",
              borderRadius: TOKENS.radius.pill,
              background: "color-mix(in srgb, var(--sp-text) 12%, transparent)",
              font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
            }}
          >
            MK
          </span>
          <span style={{ minWidth: 0 }}>
            <span style={{ display: "block", font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}` }}>
              Mika Ito
            </span>
            <span style={{ ...meta, display: "block" }}>Finance</span>
          </span>
        </span>
      </div>

      {/* Main */}
      <div
        style={{
          flex: 1,
          minWidth: 0,
          display: "flex",
          flexDirection: "column",
          gap: 14,
          padding: 18,
        }}
      >
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ ...label, display: "block" }}>March 2026</span>
            <span
              style={{
                display: "block",
                font: `${TOKENS.type.weight.display} ${TOKENS.type.scale[4]}px ${TOKENS.type.family.display}`,
                textTransform: "none",
                letterSpacing: `${TOKENS.type.tracking}em`,
              }}
            >
              Overview
            </span>
          </span>
          <span
            style={{
              display: "flex",
              alignItems: "center",
              gap: 7,
              padding: "7px 11px",
              background: "var(--sp-surface)",
              border: "1px solid var(--sp-border)",
              borderRadius: TOKENS.radius.sm,
              color: "var(--sp-muted)",
              font: `${TOKENS.type.weight.body} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
            }}
          >
            <svg width="13" height="13" viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <circle cx="8" cy="8" r="5.4" stroke="currentColor" strokeWidth="1.5" />
              <path d="M12.4 12.4 16 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            Search
          </span>
          <span
            style={{
              ...primary,
              padding: "8px 13px",
              font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}`,
              textTransform: "none",
              letterSpacing: "0",
            }}
          >
            New report
          </span>
        </div>

        {/* Stats */}
        <div style={{ display: "flex", gap: 14 }}>
          {STATS.map((stat) => (
            <div key={stat.label} style={{ ...card, flex: 1, minWidth: 0 }}>
              <span style={{ ...label, display: "block" }}>{stat.label}</span>
              <span
                style={{
                  display: "block",
                  marginTop: 3,
                  fontVariantNumeric: "tabular-nums",
                  font: `${TOKENS.type.weight.display} ${TOKENS.type.scale[4]}px ${TOKENS.type.family.display}`,
                }}
              >
                {stat.value}
              </span>
              <span style={{ display: "inline-flex", marginTop: 6, ...pill(stat.up) }}>
                {stat.delta}
              </span>
            </div>
          ))}
        </div>

        {/* Chart + ring */}
        <div style={{ display: "flex", gap: 14 }}>
          <div style={{ ...card, flex: 1.6, minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
              <span style={heading}>Revenue by day</span>
              <span style={meta}>7 days</span>
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "flex-end",
                gap: 7,
                height: 92,
                marginTop: 10,
              }}
            >
              {BARS.map((bar, index) => (
                <span key={index} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
                  <span
                    style={{
                      width: "100%",
                      height: bar.value * 74,
                      borderRadius: `${TOKENS.radius.sm}px ${TOKENS.radius.sm}px 0 0`,
                      ...(index === 4
                        ? MATERIAL.bar
                        : {
                            background: "color-mix(in srgb, var(--sp-accent) 32%, var(--sp-surface))",
                            border: SURFACE_BORDER,
                          }),
                    }}
                  />
                  <span style={meta}>{bar.day}</span>
                </span>
              ))}
            </div>
          </div>

          <div style={{ ...card, flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 12 }}>
            <span
              style={{
                width: 74,
                height: 74,
                flex: "none",
                borderRadius: TOKENS.radius.pill,
                display: "grid",
                placeItems: "center",
                background: `conic-gradient(var(--sp-accent) 0turn ${RING}turn, color-mix(in srgb, var(--sp-text) 12%, transparent) ${RING}turn 1turn)`,
              }}
            >
              <span
                style={{
                  width: 52,
                  height: 52,
                  borderRadius: TOKENS.radius.pill,
                  background: "var(--sp-surface)",
                  display: "grid",
                  placeItems: "center",
                  fontVariantNumeric: "tabular-nums",
                  font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[2]}px ${TOKENS.type.family.mono}`,
                }}
              >
                68%
              </span>
            </span>
            <span style={{ minWidth: 0 }}>
              <span style={{ ...heading, display: "block" }}>Budget</span>
              <span style={{ ...meta, display: "block", marginTop: 4 }}>Spent $34,120</span>
              <span style={{ ...meta, display: "block" }}>Left $16,170</span>
            </span>
          </div>
        </div>

        {/* Table + controls */}
        <div style={{ display: "flex", gap: 14 }}>
          <div style={{ ...card, flex: 1.6, minWidth: 0, padding: 0, overflow: "hidden" }}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: `${15}px ${15}px 8px`,
              }}
            >
              <span style={heading}>Recent orders</span>
              <span style={{ color: "var(--sp-accent)", font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}` }}>
                View all
              </span>
            </div>
            {ROWS.map((row, index) => (
              <div
                key={row.name}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  height: 44,
                  padding: `0 ${15}px`,
                  borderTop: ROW_SEPARATOR,
                }}
              >
                <span
                  style={{
                    width: 24,
                    height: 24,
                    flex: "none",
                    display: "grid",
                    placeItems: "center",
                    borderRadius: TOKENS.radius.sm,
                    background: "color-mix(in srgb, var(--sp-text) 9%, transparent)",
                    font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.mono}`,
                  }}
                >
                  {row.name.slice(0, 1)}
                </span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: "block", font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[1]}px ${TOKENS.type.family.body}` }}>
                    {row.name}
                  </span>
                  <span style={{ ...meta, display: "block" }}>{row.meta}</span>
                </span>
                <span style={pill(index === 0)}>{row.state}</span>
                <span
                  style={{
                    width: 66,
                    textAlign: "right",
                    fontVariantNumeric: "tabular-nums",
                    font: `${TOKENS.type.weight.strong} ${TOKENS.type.scale[1]}px ${TOKENS.type.family.mono}`,
                  }}
                >
                  {row.amount}
                </span>
              </div>
            ))}
          </div>

          <div style={{ ...card, flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={heading}>Preferences</span>
            {SWITCHES.map((item) => (
              <span key={item.label} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ flex: 1, minWidth: 0, font: `${TOKENS.type.weight.body} ${TOKENS.type.scale[0]}px ${TOKENS.type.family.body}` }}>
                  {item.label}
                </span>
                <span
                  style={{
                    width: 34,
                    height: 20,
                    flex: "none",
                    position: "relative",
                    borderRadius: TOKENS.radius.pill,
                    ...(item.on ? MATERIAL.switchOn : MATERIAL.switchOff),
                  }}
                >
                  <span
                    style={{
                      position: "absolute",
                      top: 3,
                      left: item.on ? 17 : 3,
                      width: 14,
                      height: 14,
                      borderRadius: TOKENS.radius.pill,
                      ...MATERIAL.knob,
                    }}
                  />
                </span>
              </span>
            ))}
            <span style={{ marginTop: 2 }}>
              <span style={{ display: "flex", justifyContent: "space-between" }}>
                <span style={meta}>Alert threshold</span>
                <span style={{ ...meta, fontVariantNumeric: "tabular-nums" }}>62%</span>
              </span>
              <span
                style={{
                  display: "block",
                  position: "relative",
                  height: 5,
                  marginTop: 7,
                  borderRadius: TOKENS.radius.pill,
                  background: "color-mix(in srgb, var(--sp-text) 14%, transparent)",
                }}
              >
                <span
                  style={{
                    position: "absolute",
                    inset: "0 38% 0 0",
                    borderRadius: TOKENS.radius.pill,
                    background: "var(--sp-accent)",
                  }}
                />
                <span
                  style={{
                    position: "absolute",
                    top: -5,
                    left: "62%",
                    width: 15,
                    height: 15,
                    marginLeft: -7,
                    borderRadius: TOKENS.radius.pill,
                    background: "var(--sp-surface)",
                    border: `2px solid var(--sp-accent)`,
                  }}
                />
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LiquidGlassSpecimen;