---
version: alpha
name: "Google Stitch"
description: "Google Stitch frames AI interface generation as a focused design canvas: a near-black dotted field, enormous white Google Sans headline, a soft violet product glow, and one centered prompt composer that previews the product before sign-in."
colors:
  bg: "#050505"
  bg-deep: "#000000"
  surface: "#111111"
  surface-raised: "#18181b"
  text: "#ffffff"
  text-muted: "#b8b8c2"
  brand: "#8b83ff"
  accent: "#5b57d9"
  accent-soft: "#24204d"
  border: "rgba(255, 255, 255, 0.14)"
  grid-dot: "rgba(255, 255, 255, 0.12)"
  on-brand: "#080808"
typography:
  display:
    fontFamily: "Google Sans"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Google Sans"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "Roboto Mono"
rounded:
  button: "16px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Use a near-black full-viewport canvas with a quiet dotted grid. White typography carries the hierarchy while a violet glow rises behind the composer, making the AI system feel active without filling the page with decoration.

## Colors

Reserve `#8b83ff` and `#5b57d9` for model status, glow, and selected controls. Keep primary copy white, supporting copy muted gray, and product surfaces only one or two steps lighter than the page.

## Typography

Google Sans is the visible identity. Hero type is large, regular-weight, centered, and split into two deliberate lines; UI labels remain compact and medium-weight.

## Layout

Center the headline and composer on one vertical axis. Keep the header sparse, let the composer enter the first viewport, and avoid surrounding either element with a marketing card.

On mobile, reduce the headline to roughly 48px and let the composer span the viewport with 16px gutters. Wrap composer tools into two rows without shrinking icon targets below 44px.

## Elevation & Depth

Create depth with tonal separation and a blurred violet light behind the composer. Shadows should be dark and broad; bright borders would break the canvas illusion.

## Shapes

Use 8px for small controls, 16px for secondary panels, 28px for the prompt composer, and full pills only for short mode or command controls.

## Components

The prompt composer is a wide dark panel with 28px corners, a generous text area, and a single compact toolbar. Use pills for App/Web and model selection, icon buttons for utilities, and a white pill for `Try now`.

Hover states can brighten borders and text in 140ms. Model changes and generated previews may cross-fade over 240-500ms; reduced motion removes glow drift and spatial movement.

Keep body text at least `#b8b8c2` on black, expose names for every icon-only command, and show a visible violet focus ring. The prompt mode selector must work as a keyboard-accessible segmented control.

Use direct creative prompts and outcome language: design, transform, mobile, web, generate, and iterate. Supporting copy should explain the output, not the underlying model architecture.

Dark is the product identity and default theme. A light output preview can appear inside the composer, but the surrounding authoring canvas remains black.

The composition inherits Google clarity, then removes the usual white product shell. Dotted-grid texture and a command composer place it closer to a creative IDE than a conventional Google landing page.

## Do's and Don'ts

Do keep the page sparse, the headline regular-weight, and the product surface visible. Do not add colorful cards, heavy gradients, or multiple competing CTAs.

Create a near-black Google Stitch-style AI design canvas with a centered two-line Google Sans headline, subtle dotted grid, violet glow, wide rounded prompt composer, App/Web segmented control, model pill, and one white `Try now` action.