Emergent

Overview

Emergent is an AI-powered application development platform that democratizes software creation by allowing users to describe their ideas in natural language and instantly generate functional websites and applications. The design system embodies a philosophy of "Purposeful Minimalism"—a clean, light-dominant aesthetic where every visual element serves a functional purpose. The interface prioritizes clarity and directness, using a restrained color palette anchored by a vibrant blue accent (#3b82f6) that draws attention to primary actions and interactive elements. The emotional response is one of confidence and accessibility: users feel empowered to create without technical barriers, while the interface itself feels trustworthy and professional.

The brand voice is conversational yet precise, avoiding jargon while maintaining technical credibility. Emergent speaks to users as capable creators, using language like "Describe your idea" and "Build websites & apps with AI"—direct, action-oriented, and optimistic. The vocabulary emphasizes possibility ("Build," "Create," "Generate") over complexity. Example sentence in brand voice: "Your idea becomes code in seconds—no expertise required."

Colors

The color system operates on a light-first foundation with strategic accent deployment. The primary color, Blue (#3b82f6), is reserved exclusively for call-to-action buttons, interactive focus states, and key brand moments—it appears sparingly but decisively, creating visual hierarchy through restraint rather than saturation. Secondary color, Deep Charcoal (#1f1f1f), anchors the interface as the primary text color and is used for high-contrast interactive elements like the "Continue with Google" button (rendered as dark pill-shaped buttons with rgba(0,0,0,0.5) text overlay). The tertiary accent, Neon Green (#81ff89), is deployed for success states, confirmations, and positive feedback—it appears in badges and status indicators but never on primary CTAs. The surface stack progresses from pu

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys both technical sophistication and approachability. Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section breaks, establishing visual dominance through size rather than decoration. Headline-lg (36px, 600 weight) and headline-md (28px, 600 weight) create a two-tier hierarchy for section titles and card headers, with the md variant used most frequently across the interface. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, set with 0.02em letter-spacing to maintain legibility at smaller sizes. Label-md (14px, 500 weight) is applied to button text and form labels, with 0.01em tracking to add subtle visual weight. Label-sm (12px, 500 weight, 0.04em tracki

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter spacing is consistently 24px, creating breathing room between grid items without excessive whitespace. The spacing scale (4px unit base) is applied semantically: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The page rhythm follows a "content-first" approach where the hero section (containing the Emergent logo, headline, and primary CTA buttons) occupies the full viewport height with centered alignment, then flows i

Elevation & Depth

Elevation in Emergent is achieved through a restrained shadow system that emphasizes flatness while providing subtle depth cues. The elevation scale consists of three levels: sm (0 1px 2px rgba(0,0,0,0.05)) for hover states on secondary elements and subtle depth on cards, md (0 4px 12px rgba(0,0,0,0.08)) for primary button hover states and elevated cards, and lg (0 16px 40px rgba(0,0,0,0.12)) for modals and the highest-priority interactive surfaces. No element uses a shadow larger than lg; the system deliberately avoids the "floating" aesthetic in favor of a grounded, confident appearance. Int

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the interface while maintaining a sense of control and clarity. Buttons and primary interactive elements use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable; this is the most distinctive shape in the system and appears on all primary CTAs, secondary buttons, and icon buttons. Cards and containers use lg (1rem / 16px) border-radius to create subtle rounding that distinguishes them from the background without appearing cartoonish. Input fields also use

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict hierarchy. Primary buttons (button-primary) use the brand blue (#3b82f6) background with white text, full radius, 48px height, and 12px 32px padding. On hover, the background darkens to #2563eb and the shadow elevates to md (0 4px 12px rgba(0,0,0,0.08)), creating a tactile press effect. On active/click, the background further darkens to #1d4ed8 with no shadow change, indicating the button is being pressed. Secondary buttons (button-secondary) use surface-container (#ebebeb) background with on-surface text (#1a1a1a), a 1px outline-variant border, and the same 48px height and full radius. Secondary buttons elevate to sm shadow on hover. Ghost buttons (button-ghost) have transparent backgrounds with primary-

Do's and Don'ts

**Do**

• Do use the primary blue (#3b82f6) exclusively on call-to-action buttons and interactive focus states—never use it for backgrounds, text, or decorative elements.
• Do maintain consistent 24px (md) spacing between major content sections and 12px (sm) spacing between related elements within a section.
• Do apply the full (9999px) border-radius to all buttons and input fields to create visual cohesion and signal interactivity.
• Do use Inter at 16px body-md size with 24px line-height for all paragraph text to ensure optimal readability and accessibility.
• Do layer interactive elements with subtle shadows (sm/md/lg) and smooth 200ms transitions to create tactile, responsive feedback.
• Do reserve the neon green tertiary accent (#81ff89) for success states, confirmations, and positive feedback only—never use it for primary actions.

**Don't**

• Don't use multiple accent colors on a single page—primary blue should dominate interactive hierarchy, with secondary/tertiary accents used sparingly.
• Don't apply shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) or use drop-shadow filters; the system uses only box-shadow for consistency.
• Don't round corners below lg (16px) on cards or containers—use full (9999px) only for buttons, inputs, and badges.
• Don't set body text smaller than 16px or use line-height below 24px; this violates WCAG readability standards and the brand's clarity-first philosophy.
• Don't mix font families—Inter is the only typeface; avoid system fonts, serif fonts, or decorative typefaces in the UI.
• Don't use near-black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use the appropriate on-* token to ensure sufficient contrast.