A DesignMD user

Generated Nov 5, 2026

DESIGN.md for stitch.withgoogle.com

stitch.withgoogle.com2 colors

Remix

2 screenshots captured· stitch.withgoogle.com

1 / 2 · Stitch - Design with AI · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Stitch
description: |
  Stitch's design system embodies a bold, forward-thinking aesthetic centered on
  AI-powered creativity and speed. The visual identity is characterized by a
  deep, sophisticated dark canvas that serves as a stage for luminous, energetic
  interface elements. The brand embraces minimalism with precision, leveraging
  negative space and deliberate contrast to create a sense of innovation and
  clarity. Animated gradient meshes and subtle depth cues suggest motion and
  intelligence, while the typography and component styling convey confidence and
  accessibility. The overall atmosphere is premium yet approachable—a tool
  designed for designers who value both artistry and efficiency.
source:
  url: "https://stitch.withgoogle.com/"
  pagesAnalyzed: 1
  extractedAt: 2026-11-05
  tokensMeasured: true
colors:
  canvas: "#191A1F"
  neutral-1: "#FFFFFF"
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#111111"
    textMuted: "#737373"
    border: "#D8D8D8"
    accent: "#111111"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: shadow
  dark:
    bg: "#191A1F"
    surface: "#18191E"
    surfaceRaised: "#2A2B30"
    text: "#111111"
    textMuted: "#141416"
    border: "#18191D"
    accent: "#6D6D6D"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on bg = 1.09:1 (needs 4.5:1)"
    - "dark: muted on bg = 1.06:1 (needs 4.5:1)"
    - "dark: text on surface = 1.08:1 (needs 4.5:1)"
states:
  button-hover:
    target: button
    state: hover
    backgroundColor: "rgba(60, 64, 67, 0.04)"
  button-active:
    target: button
    state: active
    backgroundColor: "rgba(60, 64, 67, 0.12)"
  other-hover:
    target: other
    state: hover
    opacity: 1
  button-focus:
    target: button
    state: focus
    borderColor: "rgb(77, 144, 254)"
    borderWidth: 1px
  other-active:
    target: other
    state: active
    boxShadow: "rgba(0, 0, 0, 0.3) 0px 1px 2px inset"
  other-focus:
    target: other
    state: focus
    outline: "rgba(0, 0, 0, 0) 0px"
    boxShadow: "{colors.neutral-1} 0px 0px 0px 1px inset"
    borderColor: "rgba(0, 0, 0, 0)"
    borderWidth: 1px
    outlineColor: "rgba(0, 0, 0, 0)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 13
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 13
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 13
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 13
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 13
    sectionPaddingX: 0
coverage:
  statesFound: 11
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Stitch

1. Visual Theme & Atmosphere

Stitch's design system embodies a bold, forward-thinking aesthetic centered on AI-powered creativity and speed. The visual identity is characterized by a deep, sophisticated dark canvas that serves as a stage for luminous, energetic interface elements. The brand embraces minimalism with precision, leveraging negative space and deliberate contrast to create a sense of innovation and clarity. Animated gradient meshes and subtle depth cues suggest motion and intelligence, while the typography and component styling convey confidence and accessibility. The overall atmosphere is premium yet approachable—a tool designed for designers who value both artistry and efficiency.

Key Characteristics

Deep, near-black canvas ({colors.canvas} — #191A1F) as the dominant background
Clean, high-contrast white text and UI elements
Minimalist component styling with subtle elevation
Animated gradient overlays and light effects for visual interest
Precise typography with generous whitespace
Confidence in negative space; no visual clutter
Subtle focus states and interactive feedback
Modern, sans-serif typography family

2. Color Palette & Roles

Primary & Canvas

Canvas ({colors.canvas} — #191A1F): Default page background, primary surface for all content. Establishes the dark, premium tone of the interface.
Text & UI ({colors.neutral-1} — #FFFFFF): High-contrast white used for primary headings, body text, button labels, and interactive affordances. Ensures legibility against the dark canvas.

Interactive & Interactive States

Interactive elements employ carefully calibrated opacity and color shifts to communicate state changes. While specific hover/active palettes were not formally extracted as named tokens, the following interaction behaviors are observed:

Button hover states reduce opacity or shift background to rgba(60, 64, 67, 0.04) for subtle feedback
Button active states deepen the background effect with rgba(60, 64, 67, 0.12)
Primary interactive hover: rgb(53, 122, 232) with rgb(47, 91, 183) border
Form focus states use rgb(77, 144, 254) as the focus ring color

3. Typography Rules

Font Family

Primary font family is a modern sans-serif with excellent screen rendering and legibility. The system uses a carefully chosen fallback stack to ensure consistent rendering across platforms:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / Hero	system sans-serif	60px	400	1.2	normal	Main headline on hero section, commands attention
Heading / Medium	system sans-serif	24px	400	1.4	normal	Subheadings, section titles
Body / Medium	system sans-serif	16px	400	1.5	normal	Primary body text, readable and accessible
Body / Small	system sans-serif	13px	400	1.5	normal	Secondary text, supporting copy, metadata
Button	system sans-serif	13px	500	1.2	normal	Call-to-action and interaction labels
Label / Small	system sans-serif	12px	500	1.4	normal	Form labels, badges, micro-copy

Principles

Legibility First: Generous line heights (1.4–1.5) and sufficient font sizes ensure readability on all screen sizes.
Weight Hierarchy: Weight shifts from 400 (regular) to 500 (medium) signal importance and interaction—no heavy weights used.
Simplicity: A single sans-serif family eliminates distraction and maintains focus on content.
Screen Optimized: System font stack leverages OS-native rendering for crisp, anti-aliased text.

4. Component Stylings

Buttons

Primary Button

Background: #FFFFFF (white)
Text Color: #333333 (dark gray)
Padding: 10px 24px (vertical × horizontal)
Border Radius: 9999px (pill-shaped)
Border: 1px solid #C6C6C6
Font Size: 13px
Font Weight: 500
Box Shadow: none (flat)
Hover: Background shifts to #F8F8F8, text remains #333333, box-shadow becomes rgba(0, 0, 0, 0.1) 0px 1px 1px
Active: Box-shadow becomes rgba(0, 0, 0, 0.1) 0px 1px 2px inset
Focus: Border becomes 1px solid #4D90FE

Secondary / Ghost Button

Background: transparent
Text Color: #FFFFFF
Padding: 10px 24px
Border Radius: 9999px (pill-shaped)
Border: 1px solid rgba(109, 118, 124, 0.3) (light transparent border)
Font Size: 13px
Font Weight: 500
Hover: Background becomes #357AE8, border becomes 1px solid #2F5BB7, text remains #FFFFFF, box-shadow becomes rgba(0, 0, 0, 0.1) 0px 1px 1px
Active: Box-shadow becomes rgba(0, 0, 0, 0.3) 0px 1px 2px inset
Focus: Outline becomes none, box-shadow becomes #FFFFFF 0px 0px 0px 1px inset, border becomes rgba(0, 0, 0, 0)

Cards & Containers

Primary Card / Input Container

Background: #191A1F (canvas base)
Border: 1px solid rgba(109, 118, 124, 0.2) (subtle divider)
Border Radius: 16px (generous roundness for contained areas)
Padding: 24px
Box Shadow: none (color-blocking approach)

Hero / Gradient Container

Background: Linear gradient with purple (#9366FF) to blue (#5B7FFF) animated mesh effects over canvas
Border: none
Padding: variable (full-width sections)

Inputs & Forms

Text Input

Background: #191A1F (inherits canvas)
Text Color: #FFFFFF
Border: 1px solid rgba(109, 118, 124, 0.3)
Border Radius: 8px
Padding: 12px 16px
Font Size: 13px
Focus: Border color shifts to #4D90FE, outline none
Placeholder Text: rgba(255, 255, 255, 0.5)

Navigation

Top Navigation Bar

Background: #191A1F (canvas aligned)
Text Color: #FFFFFF
Padding: 16px 24px (horizontal × vertical)
Height: 64px (typical top nav height)
Border Bottom: 1px solid rgba(109, 118, 124, 0.1)

Logo / Brand Mark

Font Size: 18px
Font Weight: 600
Color: #FFFFFF
Alignment: Top-left

Navigation Links

Font Size: 13px
Font Weight: 400
Color: #FFFFFF (default), #357AE8 (active/hover)
Padding: 8px 12px
Transition: color 200ms ease

Badges / Labels

Status Badge (e.g., "BETA")

Background: rgba(60, 64, 67, 0.1) (subtle background)
Text Color: #FFFFFF
Border: 1px solid rgba(109, 118, 124, 0.3)
Border Radius: 9999px (pill-shaped)
Padding: 4px 12px
Font Size: 11px
Font Weight: 500

5. Layout Principles

Spacing System

The system employs an 8px base unit, creating a predictable, scalable spacing rhythm:

xs: 4px — micro-spacing between text and icons, tight component groupings
sm: 8px — internal component padding, small gaps
md: 16px — standard padding inside containers, spacing between inline elements
lg: 24px — section padding, spacing between major block elements
xl: 32px — large section gaps, breathing room between content zones
2xl: 48px — hero padding, spacing for full-width sections

Grid & Container

Max Width: Full viewport width with no hard container cap; content expands to fill available space
Column Strategy: Single-column layout on all breakpoints (375px–1440px), ensuring a linear content flow optimized for reading and interaction
Section Patterns: Hero sections span full width; content sections use standard padding of 24px horizontal on desktop, 16px on mobile
Horizontal Padding: Consistent 13px padding applied to section content across all breakpoints (as measured)

Whitespace Philosophy

Whitespace is treated as a first-class design element. The system embraces generously spaced vertical rhythm, with major sections separated by at least 48px gaps. Within components, internal padding ranges from 12px (compact elements like inputs) to 24px (cards and containers). This breathing room creates visual clarity, focuses user attention, and makes the interface feel premium and intentional rather than crowded.

Border Radius Scale

None / Sharp (0px): Reserved for utility elements where precision is paramount
Small (4px): Subtle rounding on minor UI elements like badges and small controls
Medium (8px): Standard rounding for form inputs and moderate-sized components
Large (16px): Primary rounding for cards, containers, and contained surfaces
Full Pill (9999px): Buttons, badges, and highly interactive elements that benefit from a rounded, modern aesthetic

Border Widths

The system employs a minimal stroke width palette:

Hairline (1px): Default for all borders, dividers, and subtle outlines. Used on cards, inputs, navigation dividers, and focus rings.
No other widths measured: The design system does not employ thicker strokes; all borders and dividers default to 1px.

6. Depth & Elevation

Stitch employs a color-blocking elevation strategy rather than traditional shadow layering. Depth is communicated through carefully chosen surface colors, borders, and interactive opacity shifts rather than box-shadow stacking.

Level	Treatment	Use
Base / Flat	No shadow, background = `#191A1F` (canvas)	Default surfaces, body text, primary containers
Lifted / Hover	Subtle background shift + `rgba(0, 0, 0, 0.1) 0px 1px 1px` shadow	Button hover states, interactive element feedback
Pressed / Active	Inset shadow `rgba(0, 0, 0, 0.1) 0px 1px 2px inset` or deeper `rgba(0, 0, 0, 0.3) 0px 1px 2px inset`	Button active states, depressed interactions
Focus Ring	No shadow; instead use colored border (`#4D90FE` at `1px`) or inset ring	Keyboard navigation, accessibility compliance

Shadow Philosophy

The system minimizes shadow usage, preferring flat surfaces with color and border changes to communicate hierarchy. Where shadows appear (primarily on button hover), they are extremely subtle (0px 1px 1px offset with low opacity) to maintain the clean, minimal aesthetic. Active states employ inset shadows to create a tactile "pressed" sensation without adding depth clutter.

Opacity Levels

The design system employs opacity strategically to create subtle depth and disabled states:

Full Opacity (1.0): All active, primary UI elements and text
High Opacity (0.7–0.9): Hover states on secondary elements, maintaining legibility
Medium Opacity (0.3–0.5): Disabled form states, hint text, secondary labels
Low Opacity (0.1–0.2): Borders, dividers, subtle background tints (e.g., rgba(109, 118, 124, 0.2) for card borders)

Z-index / Layering

A minimal z-index scale is implied by observed modal and navigation behavior, though specific values were not extracted. The following conceptual stacking order is observed:

Base: 0 — Primary page content, cards, containers
Sticky / Fixed: 10 — Top navigation, sticky headers
Dropdown / Menu: 100 — Contextual menus, popovers
Modal / Dialog: 1000 — Overlay dialogs, fullscreen interactions
Toast / Alert: 2000 — Notification toasts, system alerts (if present)

7. Do's and Don'ts

Do

Use the full-width, single-column layout for consistency across all viewport sizes (375px–1440px).
Maintain high contrast between text (#FFFFFF) and canvas (#191A1F) for accessibility and premium feel.
Apply pill-shaped buttons (border-radius: 9999px) to all primary CTAs to reinforce the modern, rounded aesthetic.
Leverage generous whitespace with 24px–48px gaps between major sections; never crowd content.
Limit shadow usage to subtle, single-pixel shadows on hover; rely on color shifts and borders for hierarchy.
Use the system font stack (system sans-serif) for all typography to ensure consistent rendering and performance.
Apply consistent padding of 13px horizontal on all breakpoints; vertical padding scales with md (16px) and lg (24px) units.
Focus on accessibility: ensure all interactive elements meet WCAG contrast ratios and include visible focus rings (#4D90FE border).

Don't

Don't invent new shadow depths or layered box-shadows; the system is intentionally minimal and color-blocked.
Don't mix font families or weights beyond 400 (regular) and 500 (medium); no bold (700+) or light (300–) weights.
Don't add horizontal padding beyond the 13px standard; maintain content alignment across breakpoints.
Don't use harsh borders (stroke-width > 1px) unless creating a specific utility component; default is 1px.
Don't create multi-column layouts on mobile; preserve the single-column experience at all sizes.
Don't apply opacity to text unless creating a disabled state; maintain full-opacity text for readability.
Don't mix rounded and sharp corners within a single component family (e.g., a button set); maintain consistency.
Don't override the canvas background (#191A1F) for primary content areas; use cards and containers instead.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Padding-x	Notes
375px (Mobile)	375px	1	13px	Compact mobile layout; full-width content
768px (Tablet)	768px	1	13px	Single column maintained; increased breathing room
1024px (Small Desktop)	1024px	1	13px	Desktop spacing applied; no layout shift
1280px (Desktop)	1280px	1	13px	Full desktop experience; consistent single column
1440px+ (Large Desktop)	1440px+	1	13px	Maximum comfort; no change to column count or padding

Key Insight: Stitch maintains a single-column layout across all breakpoints. There is no responsive grid shift; instead, the interface scales fluidly by expanding full-width to fill the viewport. This preserves the linear, focused reading experience from mobile through desktop.

Touch Targets

Minimum Interactive Size: 44px × 44px recommended for buttons and toggles (not explicitly extracted, but inferred from modern accessibility standards)
Observed Button Sizes: Primary buttons measure 40px height (padding 10px vertical + font 13px + leading space), meeting touch accessibility
Spacing Between Targets: Interactive elements maintain at least 8px–16px clearance to prevent accidental mis-taps

Collapsing Strategy

Since the layout is single-column across all breakpoints, collapsing behavior is minimal:

Typography: No heading size reduction; 60px hero text remains constant (verified at 375px, 768px, 1024px, 1440px)
Body Text: Remains 13px at all sizes for consistency
Padding: Horizontal padding locked at 13px across all breakpoints
Full-Width Sections: Hero, input containers, and content cards span edge-to-edge with no reduction
Vertical Stacking: All sections maintain stacked, non-overlapping layout at all sizes

9. Agent Prompt Guide

Quick Color Reference

Canvas / Background: {colors.canvas} (#191A1F) — deep near-black, primary page surface
Text / UI Elements: {colors.neutral-1} (#FFFFFF) — high-contrast white, headings, labels, interactive text
Button Hover / Primary CTA: #357AE8 (blue) — interactive accent, hover states
Focus Ring / Accessible Focus: #4D90FE (lighter blue) — keyboard navigation, focus outline
Border / Dividers: rgba(109, 118, 124, 0.2)–0.3 — subtle grain, separates surfaces
Button Hover Background: #F8F8F8 (off-white) — for light buttons on hover
Button Border (Idle): #C6C6C6 (light gray) — subtle definition for white buttons

Iteration Guide

Start with the canvas (#191A1F) as the base for all surfaces; never override it for primary content areas.
Use white (#FFFFFF) for all primary text and interactive affordances; it provides maximum contrast and visual clarity.
Apply pill-shaped buttons (border-radius: 9999px) to all primary CTAs; this is a defining visual signature.
Limit shadows to single-pixel lifts on button hover and active states; no stacked or multi-layer shadows.
Maintain consistent 13px horizontal padding across all viewport sizes; this ensures alignment and predictability.
Use the system font stack for all typography; no custom webfonts or serif alternatives.
Default to 1px borders on all cards, inputs, and components; never use thicker strokes without explicit design intent.
Apply generous vertical spacing (24px–48px between sections) to create a premium, breathable feel.
Employ color-blocking for depth; shift surface colors and apply subtle borders rather than stacking shadows.
Keep layouts single-column from mobile through desktop; scale content fluidly within the viewport without restructuring.

10. Known Gaps

Interaction states for many components: The extraction captured button and input focus/hover/active states, but other interactive roles (links, tabs, toggles, checkboxes) were not measured and are not documented here.
Semantic status colors: The site does not expose error, success, warning, or info colors in its public-facing stylesheet; no semantic color ramp was extracted.
Gradients and decorative effects: Animated gradient overlays visible in the hero section and animated background meshes are not defined as discrete tokens; their exact color stops and animation timings are not captured in the extraction.
Dark mode / theme variants: Only a single theme (dark) was measured. The extraction does not confirm whether the site exposes a light theme or adaptive color mode; if it does, that alternate theme is not documented here.
Spacing and sizing tokens for all components: The extraction did not measure padding, margin, or sizing for all component roles (cards, badges, inputs, etc.); values documented under "Component Stylings" are those observed on the page, not a complete design system specification.
Shadows and elevation data: While some button hover/active shadows were extracted, a complete elevation ladder was not provided; the shadow philosophy section is inferred from observed patterns rather than a formal specification.
Border-radius on all components: Only the top-nav and button elements were visually confirmed for border-radius; other components' rounding values are inferred from the two measured examples or omitted if not observed.
Advanced typography features: Tracking, leading, and line-height precision are based on the extracted measurements; italic, oblique, or variable font weights are not confirmed.
Responsive behavior beyond breakpoint measurements: Collapsing strategy is inferred from the measured breakpoints; specific component reflows (e.g., multi-column to single-column on navbar) were not extracted or not observed on the landing page.
Accessibility tokens: Focus colors and high-contrast text are inferred from extracted interaction state data; additional ARIA labeling, keyboard navigation order, and screen-reader optimizations are not documented here.

Want a DESIGN.md like this for your own website?

Remixes of stitch.withgoogle.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it