Shadcn Space AI Landing

Overview

Shadcn Space AI Landing represents a **Minimalist-Professional** aesthetic designed for B2B SaaS conversion. The brand serves enterprise teams seeking clarity and trust in AI-powered business tools, delivering a serene yet purposeful visual experience that prioritizes information hierarchy and user confidence. The design philosophy centers on "clarity-first minimalism"—a clean white canvas (surface: #ffffff) with strategic accent color deployment (primary: #3b82f6, a confident blue) that guides users toward conversion without visual noise or distraction.

The brand voice is authoritative yet approachable: precise, data-driven, and human-centered. Tone vocabulary emphasizes transformation, integration, and team empowerment—never hype or breathlessness. Example sentence in brand voice: "Transform tools and data into one connected system—giving teams clarity to move faster and decide confidently." The UI communicates competence through generous whitespace (lg spacing: 40px for section separation), restrained typography (Google Sans at 400–600 weight), and subtle elevation (box-shadow: 0 4px 12px rgba(0,0,0,0.1)) that suggests depth without drama.

Colors

The color system is anchored by a **neutral-dominant, accent-driven** philosophy. The surface stack (surface: #ffffff, surface-dim: #f9fafb, surface-container: #e5e7eb) creates a luminous, high-contrast foundation that maximizes readability and trust—critical for B2B contexts. Primary (#3b82f6) is a saturated, confident blue deployed exclusively on CTAs ("Book a Demo", "Try Now"), focus states, and key interactive elements; it appears ~38 times across the page, establishing visual rhythm without overwhelming. Secondary (#ef4444) is a warm red reserved for error states, alerts, and status indicators—never used for primary actions. Tertiary (#10b981) is a muted green for success states and positive feedback.

On-surface text (#030712, near-black) ensures WCAG AAA contrast (21:1) against whit

Typography

The type system employs **Google Sans** (400, 500, 600, 700 weights) as the sole typeface, creating visual cohesion and reducing cognitive load. Display (60px, 700 weight, -0.04em tracking) anchors hero headlines with commanding presence; headline-lg (40px, 600 weight) structures major section titles; headline-md (28px, 600 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is reserved for hero copy and feature descriptions, ensuring comfortable reading at arm's length. Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text throughout. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, creating visual distinction through weight rather than size. Label-sm (12px, 500 weight, 0.02em tracking) is used for

Layout

The layout employs a **fluid 12-column grid** with a fixed container-max-width of 1280px, centered on viewport. Hero section spans full width with asymmetric left-text / right-image composition (50/50 split on desktop, stacked on mobile). Spacing follows a semantic scale: unit (8px) as the base increment, with lg (40px) used for major section separation (hero to stats, stats to features), md (24px) for component padding and card internal spacing, and sm (12px) for tight groupings (icon + label pairs). Gutter (24px) defines horizontal margins on all sides, creating breathing room on tablet/mobile. The page rhythm alternates between full-width sections (hero, testimonials) and constrained containers (feature cards, CTA blocks), preventing visual monotony. White-space is treated as a design m

Elevation & Depth

Depth is conveyed through a **subtle, restrained shadow system** that avoids visual drama while maintaining clear layer hierarchy. Level 1 (Base): flat surfaces with no shadow (surface: #ffffff, border: 1px solid #e5e7eb). Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0,0,0,0.1), applied to card components, input fields, and default button states—this 4px blur radius and 12px spread create a soft, diffused depth cue suggesting elevation ~4px above the base plane. Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0,0,0,0.12), applied on card-hover, button-primary-hover, and modal o

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are applied with precision to balance approachability with professional restraint. Buttons and inputs use rounded.lg (1rem / 16px) for a friendly, modern feel that avoids sharp corners while remaining corporate-appropriate. Cards and containers use rounded.md (0.75rem / 12px) for a subtler curve that suggests structure without playfulness. Badge elements use rounded.full (9999px) for pill-shaped containers, a convention that signals status and metadata. The rationale: lg radius (16px) on interactive elements (buttons, inputs) increase

Components

Action Elements Buttons are the primary conversion driver. **button-primary** (backgroundColor: #3b82f6, padding: 8px 16px, height: 40px, rounded: 1rem, label-md typography) is the dominant CTA, appearing on "Book a Demo" and "Try Now" actions. On hover, the background shifts to #2563eb (darker blue, -10% lightness) with elevation.md shadow (0 4px 12px rgba(0,0,0,0.1)) to signal interactivity; transition timing is 200ms ease for smooth feedback. On active/click, the background darkens further to #1d4ed8 and applies transform: scale(0.98) for tactile feedback. **button-secondary** (backgroundColor: transparent, border: 1px solid #9ca3af, textColor: #3b82f6, padding: 10px 24px) is used for "About us" and secondary navigation links; on hover, the background fills with surface-container-lo

Do's and Don'ts

**Do**

• Do use primary (#3b82f6) exclusively on CTAs and interactive focus states—never on passive elements or backgrounds.
• Do maintain lg spacing (40px) between major sections to create visual rest and improve scannability.
• Do apply button-primary-hover shadow (0 4px 12px rgba(0,0,0,0.1)) and 200ms transition on all interactive elements for consistent feedback.
• Do use Google Sans 600 weight for all headlines and 400 weight for body text—never mix typefaces or weights arbitrarily.
• Do apply rounded.lg (16px) to buttons and inputs, rounded.md (12px) to cards, and rounded.full (9999px) to badges for consistent shape language.
• Do ensure on-surface text (#030712) maintains WCAG AAA contrast (21:1) against surface backgrounds for accessibility.

**Don't**

• Don't use secondary (#ef4444) or tertiary (#10b981) on primary CTAs—reserve them for status, error, and success states only.
• Don't apply box-shadow values outside the elevation scale (sm, md, lg)—custom shadows create visual inconsistency.
• Don't use border-radius values other than the defined scale (sm, DEFAULT, md, lg, xl, full)—hard corners or arbitrary curves break the shape language.
• Don't mix Google Sans with system fonts or serif typefaces—the single-typeface approach is core to the brand's clarity.
• Don't apply padding or margin values outside the spacing scale (xs, sm, md, lg, xl)—arbitrary spacing breaks rhythm and grid alignment.
• Don't use on-surface-variant (#6b7280) for primary text or headlines—it's reserved for supporting copy, metadata, and disabled states only.