SceneView Design System

March 30, 2026 · View on GitHub

Agent-friendly design system (Google Stitch DESIGN.md format). Source of truth for all UI across website, apps, docs, and store assets.

Brand Identity

  • Name: SceneView
  • Tagline: 3D and AR for every platform
  • Logo: Isometric cube, blue gradient
  • Voice: Technical but approachable. Developer-first, AI-optimized.

Design Philosophy

Material 3 Expressive

Material 3 Expressive principles guide all interactive surfaces and motion:

  • Bold colors: Use primary and gradient tokens with high saturation for hero elements; avoid washed-out or neutral-only palettes.
  • Variable typography: Scale headings expressively with clamp() — hero text should feel large and confident; body text stays readable and compact.
  • Spring animations: Interactive elements (buttons, cards, nav items) use spring-based easing (ease-spring) for physical, bouncy feedback.
  • Dynamic shapes: Corners vary by component role — small utility elements use radius-xs (8px), prominent cards use radius-lg (28px), pills use radius-full.

Liquid Glass Accents

Glassmorphism adds depth and layering to surfaces that float over content (nav, modals, cards on hero backgrounds):

  • Mechanism: backdrop-filter: blur() + semi-transparent background + subtle border
  • Restraint: Apply only to overlapping or floating surfaces — not every card. Overuse flattens the effect.
  • Dark mode: Reduce opacity further in dark mode; glass should whisper, not shout.

Professional Developer SDK Aesthetic

  • Clarity over decoration: Every design choice must serve legibility of code, APIs, and documentation.
  • AI-optimized: Consistent tokens and patterns so AI agents can generate correct UI on the first try.
  • Neutral confidence: The palette is blue-dominant and professional — no playful pastels or consumer-app softness.

Colors

Primary

TokenLightDarkUsage
primary#005bc1#a4c1ffLinks, buttons, accents
primary-hover#0050aa#b8d0ffInteractive hover states
primary-lightrgba(0,91,193,0.08)rgba(164,193,255,0.10)Subtle backgrounds
primary-subtlergba(0,91,193,0.12)rgba(164,193,255,0.15)Borders, overlays

Brand Gradient

TokenValueUsage
gradient-herolinear-gradient(135deg, #005bc1 0%, #6446cd 100%)Hero headings (light)
gradient-hero-darklinear-gradient(135deg, #a4c1ff 0%, #d2a8ff 100%)Hero headings (dark)
gradient-hero-altlinear-gradient(135deg, #0d419d 0%, #5a32a3 100%)Secondary hero treatment

Surfaces

TokenLightDarkUsage
surface#ffffff#0D1117Page background
surface-dim#f1f3f5#161B22Secondary background, cards
surface-container#ffffff#161c2cElevated surfaces

Text

TokenLightDarkUsage
on-surface#1a1a2e#f3f4f6Primary text
on-surface-dim#3d4654#9ca3afSecondary text
on-surface-faint#5c6370#6b7280Tertiary text, captions

Borders

TokenLightDarkUsage
outline#d6dae0#2a3346Default borders
outline-subtle#ebedf0#1f2937Light dividers

Status

TokenValueUsage
success#16a34aPositive states, checkmarks
warning#f59e0bCaution states
danger#ea4335Error states, destructive
info#ea580cInformational highlights

Partner Colors

TokenValueUsage
claude-orange#d97757Claude/Anthropic branded elements
claude-gradientlinear-gradient(135deg, #d97757 0%, #c4622e 100%)Claude CTA buttons
discord-purple#5865f2Discord community links

Code Syntax

TokenValueElement
syntax-keyword#cba6f7Keywords (val, fun, import)
syntax-function#89b4faFunction names, methods
syntax-string#a6e3a1String literals
syntax-number#fab387Numeric values
syntax-comment#6c7086Comments
code-bg#1e1e2eCode block background (light)
code-bg-dark#0d1117Code block background (dark)
code-text#cdd6f4Code text (light)
code-text-dark#c9d1d9Code text (dark)

Typography

Font Families

TokenValueUsage
font-body'Inter', system-ui, -apple-system, sans-serifAll body text
font-mono'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospaceCode, terminal

Font Scale (responsive)

TokenSizeUsage
text-heroclamp(2.5rem, 6vw, 4rem)Hero title
text-sectionclamp(1.75rem, 4vw, 2.5rem)Section headings
text-subtitleclamp(1rem, 2vw, 1.125rem)Section subtitles
text-card-title1.125remCard titles
text-body1rem (16px)Body text
text-small0.9remSecondary text, labels
text-xs0.85remCaptions, badges

Font Weights

TokenValueUsage
weight-regular400Body text
weight-medium500Emphasized body
weight-semibold600Subheadings, buttons
weight-bold700Section headings
weight-extrabold800Hero title

Letter Spacing

TokenValueUsage
tracking-tight-0.03emHeadlines
tracking-normal0Body text
tracking-wide0.05emUppercase labels

Spacing

Base unit: 8px

TokenValueUsage
space-xs4pxTight gaps, icon padding
space-sm8pxCompact gaps
space-md16pxDefault gaps, card padding
space-lg24pxSection gaps, card padding (mobile)
space-xl32pxCard padding (desktop)
space-2xl48pxLarge section gaps
space-3xl64pxSection separators
space-4xl96pxSection top/bottom padding

Border Radius

M3 Expressive shape scale — corner radius communicates component weight and prominence.

TokenValueM3 ScaleUsage
radius-xs8pxXSSmall elements, icon containers, chips
radius-sm12pxSCode blocks, inputs, badges, tooltips
radius-md16pxMButtons, medium cards, dialogs
radius-lg24pxLSection cards, bottom sheets
radius-xl28pxXLProminent cards, showcase items, hero panels
radius-full9999pxFullPills, avatars, FAB, fully rounded elements

Shadows

Light Mode

TokenValueUsage
shadow-sm0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)Subtle lift
shadow-md0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)Cards, dropdowns
shadow-lg0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06)Modals, prominent
shadow-primary0 2px 8px rgba(26,115,232,0.3)Primary button
shadow-primary-hover0 4px 16px rgba(26,115,232,0.4)Primary button hover

Dark Mode

TokenValue
shadow-sm0 1px 3px rgba(0,0,0,0.3)
shadow-md0 4px 12px rgba(0,0,0,0.4)
shadow-lg0 12px 40px rgba(0,0,0,0.5)

Motion

Easing

TokenValueUsage
ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Bouncy interactions — buttons, cards, spring hover
ease-expressivecubic-bezier(0.2, 0, 0, 1)Smooth transitions — page changes, reveals, drawers

Duration

TokenValueUsage
duration-short200msHover, focus, micro-interactions
duration-medium350msCard reveals, tab switches
duration-long700msScroll reveal, page transitions

Patterns

  • Spring hover: translateY(-4px) with ease-spring easing and shadow increase — feels physically responsive
  • Standard hover lift: translateY(-2px) with ease-expressive — subtler, for secondary elements
  • Scroll reveal: translateY(24px) opacity(0) to translateY(0) opacity(1) over duration-long with ease-expressive
  • Button press: scale(0.97) on active/mousedown with ease-spring, releases back with overshoot
  • Reduced motion: Respect prefers-reduced-motion: reduce — disable translateY and scale, keep opacity fades

Liquid Glass

Glassmorphism layer system for surfaces that float over content. Apply with restraint.

Light Mode

ComponentBackgroundBackdrop FilterBorder
Nav glassrgba(255,255,255,0.72)blur(20px)1px solid rgba(255,255,255,0.08)
Card glassrgba(255,255,255,0.60)blur(16px)1px solid rgba(255,255,255,0.06)
Button glassrgba(255,255,255,0.08)blur(12px)none

Dark Mode

ComponentBackgroundBackdrop FilterBorder
Nav glassrgba(255,255,255,0.05)blur(20px)1px solid rgba(255,255,255,0.08)
Card glassrgba(255,255,255,0.03)blur(16px)1px solid rgba(255,255,255,0.06)
Button glassrgba(255,255,255,0.08)blur(12px)none

Usage Rules

  • Nav glass replaces the solid surface background when the nav scrolls over hero/image content.
  • Card glass applies to cards placed directly on gradient hero sections or image backgrounds — not on flat surface-dim.
  • Button glass is for secondary ghost-style CTAs on dark/image backgrounds only.
  • Always add will-change: backdrop-filter for performance on animated glass elements.
  • Fallback for browsers without backdrop-filter support: use the solid surface or surface-container token.

Breakpoints

TokenValueDescription
bp-desktop> 1024pxFull layout, 3-column grids
bp-tablet<= 1024px2-column grids
bp-mobile<= 768pxHamburger nav, single column
bp-small<= 600pxFull-width buttons, stacked
bp-xs<= 480pxReduced padding, compact text

Layout

TokenValueUsage
container-max1200pxContent max width
container-padding24px (desktop), 16px (mobile)Horizontal page padding
nav-height64pxFixed navigation height

Components

  • Height: nav-height (64px)
  • Background: surface at 88% opacity + backdrop-filter: blur(16px)
  • Border bottom: 1px solid outline
  • Position: fixed, z-index: 100

Buttons

  • Primary: bg primary, text white, radius radius-md, shadow shadow-primary
  • Outline: border 1.5px outline, transparent bg
  • Ghost: no border, transparent bg
  • Padding: 12px 24px (default), 14px 28px (large)
  • Font: weight-semibold, text-small
  • Hover: lift -1px, shadow increase, bg darken

Cards

  • Background: surface-container
  • Border: 1px solid outline
  • Radius: radius-lg (28px)
  • Padding: space-xl (32px), space-lg on mobile
  • Hover: lift -3px, shadow shadow-lg, border primary-subtle

Code Blocks

  • Background: code-bg
  • Text: code-text, font font-mono
  • Radius: radius-sm
  • Padding: space-md
  • Border: 1px solid rgba(255,255,255,0.05)
  • Font size: text-xs (0.85rem)

Tabs

  • Padding: 10px 20px
  • Background: surface-dim
  • Radius: radius-sm
  • Active: bg surface-container, text primary, weight-semibold

Platform Mapping

PlatformFrameworkHow to apply
WebsiteHTML/CSSCSS custom properties from this file
Android DemoJetpack ComposeMaterial 3 theme with these tokens
iOS DemoSwiftUIAsset catalog + Color extensions
DocsMkDocs MaterialCSS overrides in stylesheets/
Play StoreStore listingScreenshots using these colors/typo
App StoreStore listingScreenshots using these colors/typo

Usage with AI Agents

This file is optimized for consumption by AI coding agents (Claude Code, Cursor, Gemini CLI).

To generate UI matching SceneView's design:

  1. Read this DESIGN.md for tokens and patterns
  2. Use CSS custom properties (never hardcode values)
  3. Support both light and dark modes
  4. Follow the component patterns above
  5. Use responsive typography with clamp()

With Google Stitch MCP: Import this file into a Stitch project to enforce consistent branding across all generated screens.