Wasp

Overview

Wasp is a full-stack TypeScript framework that embodies **Technical Pragmatism**—a design philosophy that rejects both over-engineered complexity and minimalist austerity in favor of developer-first clarity. The brand serves TypeScript developers building AI-ready web applications who demand speed without sacrificing ownership. The UI aesthetic is **Monochromatic Brutalism with Functional Accents**: a warm, off-white canvas (#f7f5f0) paired with sharp black typography (IBM Plex Mono at 800 weight for headlines) and a single, unmissable golden-yellow accent (#f5c842) that signals actionable moments. This creates visual tension that feels intentional, not accidental—every pixel earns its place.

Wasp's voice is direct, confident, and slightly irreverent. Sentences are short and declarative: "React, Node.js, and Prisma - wired together with auth, jobs, and deployment built in." The brand avoids marketing fluff; instead, it speaks in concrete technical benefits and ships examples that prove the framework works. Personality emerges through specificity ("Ship in a day and own every line") and a subtle wink at AI-native development ("Designed for humans, works beautifully with AI"). The tone is peer-to-peer, never patronizing—it assumes the reader is a skilled developer who values their time.

Colors

The color system is built on **Warm Minimalism**: a restricted palette that prioritizes legibility and directness over visual richness. Primary (#f5c842, a warm golden-yellow) is the sole accent color, reserved exclusively for call-to-action buttons, highlights in code examples, and the logo mark. It appears sparingly—roughly 5–8% of the interface—to maintain visual impact and prevent fatigue. Secondary (#3578e5, a medium blue) supports links, secondary CTAs, and informational elements; it is never used for primary actions. The surface stack is anchored in warm neutrals: surface (#f7f5f0) as the page background, surface-container (#ede9e0) for card backgrounds, and surface-container-high (#e3dfd6) for hover states. Text hierarchy is enforced through color: on-surface (#1c1e21, near-black)

Typography

The type system enforces a **Monospace-First Hierarchy** that reflects Wasp's technical DNA. Headlines use IBM Plex Mono at weights 700–800 (display at 52px / 800 weight for maximum impact, headline-lg at 40px / 700 weight for section titles), creating a distinctive, code-like presence that signals this is a developer tool. Body copy switches to IBM Plex Sans (400 weight, 16px, 24px line-height) for readability in longer passages; the sans-serif provides breathing room after dense monospace headlines. Labels and code snippets use JetBrains Mono (600–700 weight, 12–14px) with 0.02–0.03em letter-spacing to enhance legibility in small sizes. The contrast between monospace and sans-serif is intentional: it creates a visual rhythm that mirrors the developer experience (code ↔ documentation). Wh

Layout

The layout follows a **Fixed-Width, Guttered Grid** with a 1280px container max-width and a 12-column grid system. The page rhythm is built on the 8px spacing unit: lg (40px) separates major sections (hero from features, features from testimonials), md (24px) is used for card padding and internal section spacing, and sm (12px) for component-level spacing (button padding, input field margins). The hero section occupies the full viewport height with a two-column split: the left column (55% width) contains the headline and primary CTA, while the right column displays a code example in a card with a 1px outline-variant border and 24px padding. Section containers use a 24px gutter on left and right, collapsing to 12px on mobile. The navbar is fixed at the top with 12px vertical padding and 24px

Elevation & Depth

Depth is conveyed through **Subtle Shadows and Borders**, not color gradients or transparency. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for the navbar and subtle hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdown panels, and lg (0 12px 28px rgba(0, 0, 0, 0.2)) for modals and overlays. Cards and code blocks always have a 1px solid border in outline-variant (#bbbbbb) to define their edges crisply; the border + shadow combination creates a layered, tactile feel. Buttons do not cast shadows in their default state; they gain a md shadow on hove

Shapes

The shape philosophy is **Architectural Minimalism**: corners are sharp and functional, not decorative. The default border-radius is 0.5rem (8px) for most components (buttons, inputs, cards), creating a subtle softness that prevents the interface from feeling cold while maintaining clarity. Code blocks and larger containers use 0.75rem (12px) to provide slightly more breathing room. The logo mark and badges use full (9999px) for circular elements. Buttons have no border-radius on the text itself, only on the container, and always display a 2px solid border in on-primary (#1c1e21) to reinforce

Components

Action Elements Primary buttons use a 2px solid border in on-primary (#1c1e21), a background of primary (#f5c842), and padding of 8px 12px with a height of 40px. The typography is label-md (JetBrains Mono, 14px, 600 weight). On hover, the background shifts to primary-container (#ffd966) and a md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) appears, with a transition duration of 200ms (cubic-bezier(0.08, 0.52, 0.52, 1)). Secondary buttons use a transparent background, a 2px border in outline-variant (#bbbbbb), and on-surface text (#1c1e21). On hover, the background becomes surface-container-high (#e3dfd6) with the same shadow and transition. All buttons must have a minimum touch target of 44px height on mobile.

Containers & Surfaces Cards use a background of surface-container (#ede9e0),

Do's and Don'ts

**Do**

• Do use primary (#f5c842) exclusively for primary CTAs and critical highlights—every use of the accent color should feel earned and intentional.
• Do pair IBM Plex Mono headlines with IBM Plex Sans body text to create visual rhythm and signal the shift from technical to readable content.
• Do maintain 24px padding inside cards and 40px spacing between major sections to give the interface room to breathe and reinforce confidence.
• Do add a 2px solid border in on-primary (#1c1e21) to all primary buttons to create tactile, intentional interaction points.
• Do use the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on hover states to signal interactivity without overwhelming the interface.

**Don't**

• Don't use secondary (#3578e5) or tertiary (#5865f2) for primary actions—reserve those colors for links, secondary CTAs, and informational elements only.
• Don't apply border-radius > 1rem (16px) to buttons or cards; the sharp, minimal aesthetic depends on restrained rounding.
• Don't use gradients or transparency effects; the brand relies on solid colors, borders, and shadows for visual hierarchy.
• Don't mix monospace and sans-serif fonts within a single headline or body paragraph—use them as distinct typographic layers to create rhythm.
• Don't add shadows to buttons in their default state; shadows should appear only on hover to signal interactivity and maintain visual clarity.