Stitch

Overview

Stitch is an AI-powered UI generation platform that embodies the aesthetic of "Futuristic Minimalism"—a design philosophy that pairs austere dark surfaces with vibrant, purposeful accent colors and subtle gradient overlays. The brand serves designers and developers who want to accelerate ideation by transforming natural language prompts into production-ready component designs. The visual language evokes precision, speed, and technological sophistication: a near-black canvas (#191a1f) anchors the interface, while electric blue (#4d90fe) and purple (#6200ee) accents punctuate interactive moments and draw focus to generative actions. The emotional response is one of calm confidence—the UI feels powerful yet approachable, never overwhelming.

The tone of voice is direct, optimistic, and technical without jargon. Stitch speaks to makers: "Design at the speed of AI," "Transform ideas into UI designs," "What native mobile app shall we design?" The vocabulary emphasizes agency and speed (generate, transform, design, create) over passive consumption. Brand personality is forward-thinking but grounded—Stitch doesn't oversell AI magic; instead, it positions the tool as a collaborative partner that amplifies human creativity. Example sentence in brand voice: "Describe your app, and Stitch generates a polished UI in seconds."

Colors

The color system is built on a dark-first foundation with strategic accent deployment. **Primary (#4d90fe)** is Google's signature blue—used exclusively on CTAs, focus states, and interactive affordances. It appears on the "Try now" button, input field borders on focus, and link states. **Secondary (#6200ee)** is a deep purple reserved for status indicators, badges, and secondary action emphasis. **Tertiary (#f0f4f9)** is a near-white used sparingly for contrast and light-mode surfaces in modals or overlays. The surface stack is critical: **surface (#191a1f)** is the base canvas; **surface-container (#1d1f26)** lifts cards and panels 1 level; **surface-container-high (#282a31)** is used for hover states and elevated interactive elements. **On-surface (#ffffff)** is pure white for maximum c

Typography

The type system uses Google Sans exclusively, a humanist sans-serif that balances geometric precision with warmth. **Display (60px, 700 weight, -0.04em tracking)** is reserved for hero headlines like "Design at the speed of AI"—the negative letter-spacing tightens the letterforms and creates visual impact. **Headline-lg (40px, 600 weight)** is used for section titles and major UI headings. **Body-md (16px, 400 weight, 24px line-height)** is the workhorse for interface copy, input labels, and descriptive text. The 24px line-height (1.5x the font size) ensures readability on dark backgrounds and provides breathing room. **Label-md (14px, 600 weight)** is applied to button text and form labels—the increased weight compensates for the smaller size and ensures legibility. When small labels appe

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The hero section uses full-width background gradients that extend edge-to-edge, while content is constrained to the grid. Spacing follows a semantic scale: **md (24px)** is the default gutter between sections and card padding; **lg (40px)** separates major sections (hero, features, CTA); **xl (64px)** is used for top-level page margins. The input field in the hero ("What native mobile app shall we design?") uses 24px padding internally and sits within a 40px-tall container, creating a comfortable touch target. Cards and modals use 24px padding with 12px gaps between nested elements. The "Try now" button in the top-right uses 12px horizontal padding and 8px vertical padding, resulting in a compac

Elevation & Depth

Depth is conveyed through a layered shadow system and subtle background color shifts rather than heavy drop shadows. **Level 1 (Base):** The background is a solid #191a1f with a subtle radial gradient overlay (purple/magenta fading to transparent in the bottom corners) to add visual interest without distraction. **Level 2 (Standard Cards/Panels):** Cards use box-shadow: 0 4px 16px rgba(0,0,0,0.2) and a 1px border at rgba(255,255,255,0.05) to define edges. The input field in the hero sits at this level. **Level 3 (Elevated/Modals):** Modals and floating panels use box-shadow: 0 8px 32px rgba(0,

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but never excessively, balancing approachability with precision. **Buttons and pills** use rounded: full (border-radius: 9999px), creating a soft, inviting appearance that encourages interaction. The "Try now" button and input field buttons (App, Web, 3 Flash) all use this radius. **Cards and containers** use rounded: lg (1rem / 16px), providing a subtle softness that feels modern without being playful. **Input fields** use rounded: md (0.75rem / 12px), a middle ground that signals interactivity without the extreme

Components

Action Elements **Button-primary** is the hero CTA: background-color: #4d90fe, color: #ffffff, border-radius: 9999px, padding: 12px 24px, height: 48px, font-weight: 600, font-size: 14px. On hover, background-color transitions to #357ae8 and box-shadow expands from 0 4px 16px rgba(77,144,254,0.3) to 0 8px 24px rgba(77,144,254,0.4) over 200ms. On active/press, background-color becomes #1a73e8 with an inset shadow: inset 0 2px 4px rgba(0,0,0,0.2). **Button-secondary** has a transparent background with a 1px border at #4d90fe and text-color: #4d90fe. On hover, background-color becomes rgba(77,144,254,0.08) without changing the border. **Button-ghost** has no background or border; on hover, background-color becomes #282a31 (surface-container-high) over 150ms.

Containers & Surfaces **Ca

Do's and Don'ts

**Do**

• Do use primary blue (#4d90fe) exclusively for interactive affordances—buttons, links, focus states, and active indicators. This creates a consistent, predictable interaction model.
• Do maintain 24px padding on cards and containers; this spacing is the foundation of the visual rhythm and prevents the interface from feeling cramped.
• Do apply box-shadow: 0 4px 16px rgba(0,0,0,0.2) to all elevated surfaces (cards, modals, dropdowns) to establish clear depth hierarchy.
• Do use Google Sans at 400 weight for body text and 600 weight for labels and buttons; this pairing is optimized for screen legibility and brand consistency.
• Do apply transition: all 200ms cubic-bezier(0.2,0.0,0.2,1) to interactive elements (buttons, cards, inputs) for smooth, predictable motion.
• Do use full-radius (border-radius: 9999px) only on buttons and pill-shaped elements; use 16px for cards and 12px for inputs to maintain visual hierarchy.

**Don't**

• Don't use secondary purple (#6200ee) or tertiary light (#f0f4f9) as primary CTAs; reserve these for badges, status indicators, and secondary actions only.
• Don't apply shadows darker than 0 8px 32px rgba(0,0,0,0.3) or lighter than 0 1px 1px rgba(0,0,0,0.1); this range maintains the dark-mode aesthetic without crushing contrast.
• Don't use system fonts or generic sans-serif fallbacks; always load Google Sans from fonts.googleapis.com to ensure brand consistency across all platforms.
• Don't apply border-radius greater than 16px on cards or containers; excessive rounding dilutes the technical precision of the Soft-Technical aesthetic.
• Don't use opacity-based text for body copy; on-surface (#ffffff) and on-surface-variant (#c4c7c8) are the only approved text colors for readability.
• Don't animate transitions faster than 150ms or slower than 300ms; this range feels responsive without appearing sluggish or jarring.