SAM Design System
Super Atomized Material Design System
Cross-platform component library built for web, mobile, and spatial computing. Every component maps to a PBR material for XR rendering.
Spatial Computing Design System
Extensible for cross-platform support. Every 3D element is built on Three.js with PBR material properties, ensuring consistent rendering across web, mobile, and XR platforms. The foundation for turning flat media into spatial experiences — photos become spaces, interfaces become environments.
Globe
Interactive Three.js globes. Fibonacci-distributed dots with wireframe shell (left), and city location pins with pulse markers (right).
Ambient Globe — animated arcs, mouse parallax
City Highlights — locations lived, pulsing pins
About Globe — final state, all pins with arcs
PBR Material Physics
Four Three.js objects demonstrating material properties with real-time gravity simulation. Rubber bounces high, concrete barely bounces. Click to drop again. Toggle water simulation below the bounce plane.
Lighting
Three lighting configurations. Key light for dramatic single-source shadows, three-point for balanced cinematic rendering, and ambient for theme-reactive environmental response. Toggle light/dark mode to see the ambient scene adapt.
Key Light
Single directional
Three-Point
Key + fill + rim
Ambient
Theme-reactive
Graceful Degradation
Click to trigger destruction. Objects auto-respawn — animation patterns for user-initiated deletion and recovery of spatial elements. Two variants: fragment explosion and spark particles.
Fragment Explosion
Spark Particles
Information Architecture
Scene Based IA
Hierarchies of information have to become spatial — scene based IA.
State Based Objects
State based objects.
Work in Progress▶
Component × PBR Mapping
Every UI component has a corresponding PBR material for spatial rendering. Hover or tap each card to highlight.
Card
Frosted glass container with backdrop blur and subtle border.
Renders as translucent panel in XR with depth offset from parent surface. Supports gaze-hover highlight.
Primary CTA
Gradient button with warm-to-gold fill and uppercase tracking.
Emissive surface element in XR; gaze-targetable with 48 px minimum hit area. Haptic pulse on select.
Outline Button
Transparent button with 1 px border for secondary actions.
Wire-frame affordance in XR. Border emits subtle glow on proximity hover.
Badge
Compact label in monospace type for tags and metadata.
Fixed to parent surface in XR. Scales with viewing distance to maintain legibility.
Text Input
Single-line text field with glass backdrop and focus ring.
Opens virtual keyboard in XR on gaze-select.
Navigation Link
Uppercase tracked text with accent underline on active state.
Tab-bar affordance in XR with spatial anchoring. Active state pulses subtly.
Separator
Horizontal gradient line fading from transparent edges.
Rendered as emissive wire in XR; fades with depth to avoid visual clutter.
Isometric Tile
CSS 3D-transformed card with depth edges for domain showcase.
Becomes true 3D panel in XR with PBR surfaces on each face. Supports hand-grab reposition.
PBR Materials Reference
| Material | Roughness | Metalness | Transmission | Emissive | Used By |
|---|---|---|---|---|---|
| Frosted Glass | 0.15 | 0 | 0.6 | — | Card, Text Input |
| Brushed Gold | 0.3 | 0.9 | — | 0.1 | Primary CTA |
| Clear Coat | 0.1 | 0 | 0.85 | — | Outline Button |
| Matte Ceramic | 0.7 | 0 | — | — | Badge |
| Anodised Aluminium | 0.35 | 0.6 | — | — | Navigation Link |
| Emissive Wire | 0 | 0 | — | 0.4 | Separator |
| Satin Plastic | 0.4 | 0.1 | — | — | Isometric Tile |
| Liquid Chrome | 0.05 | 1 | — | 0.05 | Liquid Metal CTA |
Typography
Type Scale
Display Heading
Georgia Serif — clamp(2.5rem, 2rem + 2.5vw, 4.5rem)
Section Heading
Georgia Serif — clamp(2rem, 1.5rem + 2.5vw, 3.5rem)
Card Heading
Georgia Serif — clamp(1.125rem, 1rem + 0.625vw, 1.5rem)
Body text — System Sans-Serif at base size
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial
Monospace — JetBrains Mono for tags, dates, and metadata
Color Palette
UI
Navigation States
XR: Tab-bar affordance with spatial anchoring. Active state pulses subtly.
Buttons
Glow CTA
XR: Emissive surface, gaze-targetable with 48 px hit area. Haptic pulse on select.
Liquid Metal CTA
PBR: Liquid Chrome — R:0.05 M:1.0 E:0.05. Animated conic-gradient border.
Badges
Inputs
XR: Opens virtual keyboard on gaze-select.
Cards
Card Title
Frosted glass container with backdrop blur.
Accent Card
Card with gradient accent tag variant.
Minimal Card
Simple card without tags or categories.
XR: Translucent panel with depth offset. PBR: Frosted Glass — R:0.15 M:0.0 T:0.6
Blur System
Four blur tiers used across the site. All use iOS-style vibrancy with backdrop-saturate for richer colors behind glass.
Card: backdrop-blur-[12px] backdrop-saturate-[160%] — frosted glass containers
Modal: backdrop-blur-[16px] backdrop-saturate-[180%] — dialogs & overlays
Hero: backdrop-blur-[20px] backdrop-saturate-[180%] — hero glass, login
Nav: backdrop-blur-[24px] backdrop-saturate-[200%] — fixed headers, subnavs, FABs
Animation
Shimmer & Loading States
Shimmer Text
Spatial Computing
Animated metallic gradient overlay. Speed: 3 s default.
Skeleton Placeholders
Undisclosed Shimmer
Orange-silver gradient used for NDA / undisclosed client names. Reveals label on hover.
Animation Curves
Click a curve to preview. 0.8 s duration, cubic-bezier timing.
Layouts
Three-Up Display
Spatial Computing
XR interfaces and 3D interaction design
Design Engineering
From prototype to production at scale
Innovation Strategy
Research-driven product direction
Two-Up Display
Before
Initial state or reference design
After
Refined output after iteration
Content Module
1/3 Image, 2/3 Text
Asymmetric layout for longform content paired with supporting imagery. The image anchors the section while the text block provides context, narrative, or technical detail.
Thumbnail Carousel
Slide One
First slide with skeleton loading on initial render.
1 / 3