@basementstudio/shader-lab 0.1.0

package/public/assets/patterns/bars/1.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="28" width="8" height="64" transform="rotate(90 64 28)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/bars/2.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="20" width="24" height="64" transform="rotate(90 64 20)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/bars/3.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="12" width="40" height="64" transform="rotate(90 64 12)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/bars/4.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="4" width="56" height="64" transform="rotate(90 64 4)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/bars/5.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="12" width="40" height="64" transform="rotate(90 64 12)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/bars/6.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="20" width="24" height="64" transform="rotate(90 64 20)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/candles/1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7" width="2" height="16" fill="#696969"/>
+</svg>

package/public/assets/patterns/candles/2.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" width="6" height="16" fill="#696969"/>
+</svg>

package/public/assets/patterns/candles/3.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="10" height="16" fill="#696969"/>
+</svg>

package/public/assets/patterns/candles/4.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" width="14" height="16" fill="#696969"/>
+</svg>

package/public/assets/patterns/shapes/1.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="31.5" y="31.5" width="1" height="1" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/shapes/2.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="28" width="8" height="8" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/shapes/3.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="16" width="8" height="32" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/shapes/4.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="16" width="8" height="32" fill="#D9D9D9"/>
+<rect x="48" y="28" width="8" height="32" transform="rotate(90 48 28)" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/shapes/5.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16" y="16" width="32" height="32" fill="#D9D9D9"/>
+</svg>

package/public/assets/patterns/shapes/6.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" fill="#D9D9D9"/>
+<rect x="32.373" y="32.3726" width="32" height="32" fill="#D9D9D9"/>
+</svg>

package/src/app/design/page.tsx

@@ -0,0 +1,398 @@
+import type { CSSProperties } from "react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/cn"
+import { GlassPanel } from "@/components/ui/glass-panel"
+import { IconButton } from "@/components/ui/icon-button"
+import { Select } from "@/components/ui/select"
+import { Slider } from "@/components/ui/slider"
+import { Toggle } from "@/components/ui/toggle"
+import { Typography } from "@/components/ui/typography"
+
+const typeSamples = [
+  {
+    label: "Display / 48px / 700",
+    variant: "display",
+    text: "Shader Lab Aa",
+  },
+  {
+    label: "Heading / 24px / 600",
+    variant: "heading",
+    text: "Heading Aa Bb Cc",
+  },
+  {
+    label: "Title / 16px / 500",
+    variant: "title",
+    text: "Panel Title Aa Bb Cc Dd",
+  },
+  {
+    label: "Body / 13px / 500",
+    variant: "body",
+    text: "Project name, navigation items",
+  },
+  {
+    label: "Label / 12px / 400",
+    variant: "label",
+    text: "Layer names, property labels",
+  },
+  {
+    label: "Caption / 11px / 400",
+    variant: "caption",
+    text: "Secondary labels, control text",
+  },
+  {
+    label: "Overline / 10px / 500",
+    variant: "overline",
+    text: "Section headers, overlines",
+  },
+  {
+    label: "Mono / 13px / 400",
+    variant: "monoMd",
+    text: "vec3(0.5, 0.8, 1.0)",
+  },
+  {
+    label: "Mono / 11px / 400",
+    variant: "monoSm",
+    text: "Auto (Base) Normal 100% 0.00 1:1 80% 4.00s",
+  },
+  {
+    label: "Mono / 10px / 400",
+    variant: "monoXs",
+    text: "0.00s / 4.00s rgba(255,255,255,0.5)",
+  },
+] as const
+
+const blendModeOptions = [
+  { label: "Normal", value: "normal" },
+  { label: "Multiply", value: "multiply" },
+  { label: "Screen", value: "screen" },
+  { label: "Overlay", value: "overlay" },
+  { label: "Soft Light", value: "soft-light" },
+] as const
+
+function PlusIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 14 14">
+      <path
+        d="M7 3V11M3 7H11"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.3"
+      />
+    </svg>
+  )
+}
+
+function MinusIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 14 14">
+      <path
+        d="M3 7H11"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.3"
+      />
+    </svg>
+  )
+}
+
+function FocusIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 14 14">
+      <path
+        d="M2.5 5V2.5H5M9 2.5H11.5V5M11.5 9V11.5H9M5 11.5H2.5V9"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.3"
+      />
+    </svg>
+  )
+}
+
+function GlassPreview({
+  caption,
+  className,
+  light,
+  style,
+}: {
+  caption: string
+  className: string
+  light?: boolean
+  style?: CSSProperties
+}) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[260px] flex-col gap-[var(--ds-space-3)] overflow-hidden rounded-[var(--ds-radius-panel)] p-[20px]",
+        className
+      )}
+      style={style}
+    >
+      <Typography
+        className="relative z-1"
+        tone={light ? "onLight" : "muted"}
+        variant="monoXs"
+      >
+        {caption}
+      </Typography>
+
+      <GlassPanel
+        className={cn(
+          "relative z-1",
+          light ? "shadow-[var(--ds-shadow-panel-light)]" : undefined
+        )}
+        variant="panel"
+      >
+        <div className="border-white/6 border-b px-[12px] py-[10px]">
+          <Typography tone="secondary" variant="overline">
+            Layers
+          </Typography>
+        </div>
+
+        <div className="mx-[4px] mt-[4px] flex items-center gap-[var(--ds-space-2)] rounded-[var(--ds-radius-icon)] bg-[var(--ds-color-surface-active)] px-[8px] py-[6px]">
+          <div className="h-[24px] w-[24px] flex-shrink-0 rounded-[var(--ds-radius-thumb)] bg-white/6" />
+          <Typography variant="label">Image</Typography>
+        </div>
+
+        <div className="mx-[4px] flex items-center gap-[var(--ds-space-2)] px-[8px] py-[6px]">
+          <div className="h-[24px] w-[24px] flex-shrink-0 rounded-[var(--ds-radius-thumb)] bg-white/4" />
+          <Typography tone="secondary" variant="label">
+            Exposure
+          </Typography>
+        </div>
+      </GlassPanel>
+
+      <GlassPanel
+        className={cn(
+          "relative z-1",
+          light ? "shadow-[var(--ds-shadow-pill-light)]" : undefined
+        )}
+        variant="pill"
+      >
+        <Typography variant="body">shader lab</Typography>
+        <div className="h-[14px] w-px bg-white/8" />
+        <Typography tone="secondary" variant="monoSm">
+          80%
+        </Typography>
+      </GlassPanel>
+    </div>
+  )
+}
+
+export default function DesignPage() {
+  return (
+    <main className="relative mx-auto flex min-h-screen max-w-[1280px] flex-col gap-[var(--ds-space-8)] px-[clamp(24px,4vw,48px)] py-[clamp(24px,4vw,48px)]">
+      <div className="pointer-events-none absolute inset-0" />
+
+      <section className="relative z-1 grid gap-[var(--ds-space-6)] pt-[clamp(24px,7vh,72px)] lg:grid-cols-[minmax(0,1.4fr)_minmax(320px,0.9fr)]">
+        <div className="flex max-w-[720px] flex-col gap-[var(--ds-space-4)]">
+          <Typography tone="muted" variant="overline">
+            Shader Lab UI Foundation
+          </Typography>
+          <Typography as="h1" variant="display">
+            Design System
+          </Typography>
+          <Typography className="max-w-[46ch]" tone="secondary" variant="body">
+            Typography, glass surfaces, and core controls aligned to the Paper
+            system. This page is the implementation specimen, not a marketing
+            page.
+          </Typography>
+        </div>
+
+        <GlassPanel
+          className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+          variant="panel"
+        >
+          <Typography tone="secondary" variant="overline">
+            Primitives
+          </Typography>
+          <div className="grid gap-[var(--ds-space-4)] sm:grid-cols-2 lg:grid-cols-2">
+            <div>
+              <Typography variant="title">4 Shared Components</Typography>
+              <Typography tone="secondary" variant="caption">
+                Typography, button, icon button, glass panel
+              </Typography>
+            </div>
+            <div>
+              <Typography variant="title">Dark Editor Base</Typography>
+              <Typography tone="secondary" variant="caption">
+                Monochrome, alpha-led, glass-first
+              </Typography>
+            </div>
+          </div>
+        </GlassPanel>
+      </section>
+
+      <section className="relative z-1 flex flex-col gap-[var(--ds-space-5)]">
+        <div className="flex max-w-[720px] flex-col gap-[var(--ds-space-2)]">
+          <Typography tone="muted" variant="overline">
+            Typography
+          </Typography>
+          <Typography as="h2" variant="heading">
+            Type scale from the design system
+          </Typography>
+        </div>
+
+        <GlassPanel
+          className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+          variant="panel"
+        >
+          {typeSamples.map((sample) => (
+            <div
+              className="grid gap-[var(--ds-space-2)] border-white/4 border-b py-[12px] first:pt-0 last:border-b-0 last:pb-0 sm:grid-cols-[minmax(140px,180px)_minmax(0,1fr)] sm:gap-[var(--ds-space-4)]"
+              key={sample.label}
+            >
+              <Typography tone="muted" variant="monoXs">
+                {sample.label}
+              </Typography>
+              <Typography variant={sample.variant}>{sample.text}</Typography>
+            </div>
+          ))}
+        </GlassPanel>
+      </section>
+
+      <section className="relative z-1 flex flex-col gap-[var(--ds-space-5)]">
+        <div className="flex max-w-[720px] flex-col gap-[var(--ds-space-2)]">
+          <Typography tone="muted" variant="overline">
+            Components
+          </Typography>
+          <Typography as="h2" variant="heading">
+            Core custom controls
+          </Typography>
+        </div>
+
+        <div className="grid gap-[var(--ds-space-4)] lg:grid-cols-2">
+          <GlassPanel
+            className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+            variant="panel"
+          >
+            <Typography tone="muted" variant="overline">
+              Buttons
+            </Typography>
+            <div className="flex flex-wrap items-center gap-[var(--ds-space-3)]">
+              <Button variant="primary">Primary</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button disabled variant="neutral">
+                Disabled
+              </Button>
+            </div>
+          </GlassPanel>
+
+          <GlassPanel
+            className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+            variant="panel"
+          >
+            <Typography tone="muted" variant="overline">
+              Slider
+            </Typography>
+            <div className="flex max-w-[320px] flex-col gap-[var(--ds-space-4)]">
+              <Slider
+                defaultValue={75}
+                label="Opacity"
+                valueFormatOptions={{ maximumFractionDigits: 0 }}
+                valueSuffix="%"
+              />
+              <Slider
+                defaultValue={50}
+                label="Exposure"
+                max={2}
+                min={-2}
+                step={0.01}
+                valueFormatOptions={{
+                  maximumFractionDigits: 2,
+                  minimumFractionDigits: 2,
+                }}
+              />
+            </div>
+          </GlassPanel>
+
+          <GlassPanel
+            className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+            variant="panel"
+          >
+            <Typography tone="muted" variant="overline">
+              Icon Buttons
+            </Typography>
+            <div className="flex flex-wrap items-center gap-[var(--ds-space-3)]">
+              <IconButton aria-label="Add" variant="default">
+                <PlusIcon />
+              </IconButton>
+              <IconButton aria-label="Hover state" variant="hover">
+                <MinusIcon />
+              </IconButton>
+              <IconButton aria-label="Active state" variant="active">
+                <FocusIcon />
+              </IconButton>
+            </div>
+          </GlassPanel>
+
+          <GlassPanel
+            className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+            variant="panel"
+          >
+            <Typography tone="muted" variant="overline">
+              Toggle
+            </Typography>
+            <div className="flex flex-wrap items-center gap-[24px]">
+              <Toggle defaultChecked label="On" />
+              <Toggle label="Off" />
+            </div>
+          </GlassPanel>
+
+          <GlassPanel
+            className="flex flex-col gap-[var(--ds-space-4)] p-[20px]"
+            variant="panel"
+          >
+            <Typography tone="muted" variant="overline">
+              Select
+            </Typography>
+            <Select
+              defaultValue="normal"
+              label="Blend mode"
+              options={blendModeOptions}
+              placeholder="Select mode"
+            />
+          </GlassPanel>
+        </div>
+      </section>
+
+      <section className="relative z-1 flex flex-col gap-[var(--ds-space-5)]">
+        <div className="flex max-w-[720px] flex-col gap-[var(--ds-space-2)]">
+          <Typography tone="muted" variant="overline">
+            Glass
+          </Typography>
+          <Typography as="h2" variant="heading">
+            Same glass language over three backgrounds
+          </Typography>
+          <Typography tone="secondary" variant="body">
+            White, black, and a flower image from the local asset set. The
+            surface stays translucent, bordered, and readable in all three
+            contexts.
+          </Typography>
+        </div>
+
+        <div className="grid gap-[var(--ds-space-4)] lg:grid-cols-3">
+          <GlassPreview
+            caption="On black #080808"
+            className="bg-[var(--ds-color-canvas)]"
+          />
+          <GlassPreview
+            caption="On white #F5F5F5"
+            className="bg-[linear-gradient(135deg,rgba(255,255,255,0.8),rgba(245,245,245,1))]"
+            light
+          />
+          <GlassPreview
+            caption="On flower image"
+            className="before:absolute before:inset-0 before:bg-[linear-gradient(180deg,rgba(8,8,8,0.08),rgba(8,8,8,0.32))] before:content-['']"
+            style={{
+              backgroundImage: "url('/assets/flowers-01.jpeg')",
+              backgroundPosition: "center",
+              backgroundSize: "cover",
+            }}
+          />
+        </div>
+      </section>
+    </main>
+  )
+}