LaunchWP Brand & Frontend System
Design system launchwp · v1.0.0 · published 18/04/2026
Foundation
The brand's rules - philosophy, color and type tokens, usage guidelines - defined once on the design system.
The primary accent sits at hsl(221, 83%, 53%) - a modern blue-indigo that occupies the trusted "technical credibility" zone (Fly.io: 210°, Vercel's previous blue: 220°) while remaining clearly distinct from WordPress.com's brand blue (#0073aa, ~215°).
In dark mode, the accent shifts to hsl(221, 88%, 64%) - slightly lighter and more saturated - to maintain the critical 4.5:1 contrast ratio against dark surfaces without the washed-out appearance that simple lightening produces.
The neutral scale uses a subtle 228° cool undertone (0-5% saturation) rather than pure grays, giving the palette coherence and a faint WordPress-adjacent familiarity.
The dark background uses hsl(240, 20%, 4%) - near-black with a barely perceptible blue undertone - so dark mode feels crafted, not inverted.
Warning amber (#d97706) at 3.1:1 on white does not meet 4.5:1 alone, which is expected for this hue.
Per WCAG 2.1 AA and the design rule requiring color + icon + text for all status communication, warning states must always pair the amber color with an icon and text label, and the text itself uses foreground (#0f1117) on the warning background (#fef3c7) which passes at 4.6:1.
This is consistent with how Vercel, Railway, and all benchmarks handle amber warning states.
Inter was selected over Geist for its battle-tested dashboard density rendering, superior multilingual support, and universal recognition in the developer SaaS space (Linear, Railway, Notion).
The single-family system (Inter for headings and body, JetBrains Mono for technical content) eliminates pairing friction and ensures visual cohesion across 22 pages.
Heading weights (700) with tight tracking (-0.01em to -0.02em) deliver confident hierarchy; body at 400/1.6 line-height serves extended reading sessions in documentation and billing pages.
All spacing values are multiples of 4px, following the 8px base grid. Component internal padding uses the "comfortable" density (16-24px) that serves both developer information density and SMB approachability. Marketing sections use 64-96px vertical spacing for breathing room.
The grid aligns natively with Tailwind CSS and shadcn/ui's default spacing scale, minimizing implementation friction on the Next.js stack.
6px for inputs/buttons, 8px for cards, 12px for modals. This range signals approachability (not austere 0px) without tipping into consumer-app playfulness (full-radius cards). Consistent with Railway and Linear's radius philosophy.
Dark mode uses independent HSL values per token - never simple inversion. Background steps (background → card → popover) communicate elevation through lightness rather than shadow opacity, which disappears on dark surfaces. The accent lightens and saturates in dark mode to maintain contrast.
Muted foreground (#8b92a8) passes 5.0:1 on dark card, exceeding AA requirements.
Five chart colors span blue (brand), green (success-adjacent), amber (warning-adjacent), purple (neutral data), and teal (info-adjacent) - all perceptually distinct for colorblind users when combined with pattern/shape differentiation per the color + icon + text rule.
Three shadow levels: flat (border only), cards (subtle 1px shadow), modals (16px spread). In dark mode, elevation relies on background lightness steps rather than shadow, preventing the "invisible shadow" problem on dark surfaces."
--color-accent
#eff4ff / #1e2a45
Accent tint surfaces - hover states, selected item backgrounds, accent highlights
On white Fail 1.1:1 · On dark AAA 17.1:1
--color-accent-foreground
#1d4ed8 / #7ba8f8
Text/icons on accent-tinted surfaces
On white AA 6.7:1 · On dark Fail 2.8:1
--color-background
#ffffff / #0a0a0f
Base page background - light mode white, dark mode near-black with faint blue undertone
On white Fail 1.0:1 · On dark AAA 18.8:1
--color-border
#e2e5ef / #252838
Borders for cards, inputs, dividers, table rows
On white Fail 1.2:1 · On dark AAA 15.0:1
--color-card
#ffffff / #13141a
Card and panel surfaces - matches background in light, slightly elevated in dark
On white Fail 1.0:1 · On dark AAA 18.8:1
--color-card-foreground
#0f1117 / #f0f1f5
Text on card surfaces
On white AAA 18.8:1 · On dark Fail 1.0:1
--color-destructive
#dc2626 / #ef4444
Error and danger states - delete actions, critical alerts, form errors
On white AA 4.8:1 · On dark AA large 3.9:1
--color-destructive-foreground
#ffffff / #ffffff
Text on destructive-colored surfaces
On white Fail 1.0:1 · On dark AAA 18.8:1
--color-foreground
#0f1117 / #f0f1f5
Primary text and icon color - near-black in light, near-white in dark
On white AAA 18.8:1 · On dark Fail 1.0:1
--color-input
#e2e5ef / #252838
Input field border color
On white Fail 1.2:1 · On dark AAA 15.0:1
--color-muted
#f4f5f9 / #16171f
Muted backgrounds - code blocks, table stripes, disabled states, sidebar background
On white Fail 1.0:1 · On dark AAA 17.3:1
--color-muted-foreground
#6b7280 / #8b92a8
Secondary text - help text, captions, placeholders, timestamps
On white AA 4.8:1 · On dark AA large 3.9:1
--color-popover
#ffffff / #1a1b23
Dropdown, popover, and tooltip backgrounds
On white Fail 1.0:1 · On dark AAA 18.8:1
--color-popover-foreground
#0f1117 / #f0f1f5
Text inside popovers and dropdowns
On white AAA 18.8:1 · On dark Fail 1.0:1
--color-primary
#2563eb / #4f87f5
Brand accent - primary CTAs, active nav states, focus rings, key indicators. Applied sparingly.
On white AA 5.1:1 · On dark AA large 3.6:1
--color-primary-foreground
#ffffff / #ffffff
Text/icons on primary-colored surfaces
On white Fail 1.0:1 · On dark AAA 18.8:1
--color-ring
#2563eb / #4f87f5
Focus ring color - 2px solid, 2px offset, applied to all interactive elements
On white AA 5.1:1 · On dark AA large 3.6:1
--color-secondary
#f1f3f9 / #1e2130
Secondary button backgrounds, subdued interactive surfaces
On white Fail 1.1:1 · On dark AAA 17.0:1
--color-secondary-foreground
#0f1117 / #d4d8e8
Text on secondary surfaces
On white AAA 18.8:1 · On dark Fail 1.0:1
heading
"Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
primary
"Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
Scale
Durations
Easings
Hover
Icon Style
Lucide React icon set - stroke-based, 1.5px stroke width, rounded line caps and joins, 24×24px default size (16px for dense UI, 20px for navigation). Consistent single-weight throughout. Icons always paired with text labels except in collapsed sidebar (tooltip required). No filled icon variants mixed with stroke variants in the same context.
Pattern Guidelines
Subtle dot grid or fine line grid as optional background texture for hero sections only - low opacity (3-5%), single color (accent or neutral), never on dashboard surfaces. Code snippet backgrounds use a muted surface token with monospace font. No decorative patterns on card backgrounds, sidebar, or data surfaces.
Photographic Style
Not recommended as a primary visual element per brief. If used in blog or testimonial sections: cool-toned, desaturated, professional context (workspace, laptop, team). Never stock-photo-obvious. Prefer real product screenshots over lifestyle photography.
Illustration Approach
Avoided per brief. Empty states and onboarding confirmations may use minimal geometric SVG compositions (abstract shapes, not characters or scenes) in accent color + muted neutral. Maximum 2-color, line-art style, never decorative.
Do Examples
- Your site is live. Here's what happens next.
- Choose a GPL theme - you can change it anytime, no downtime.
- Agency plan: up to 15 sites, $X/month. No per-site fees. No surprises.
- Something went wrong provisioning your server. We're on it - check status.launchwp.com.
- Need more sites? Upgrade takes 30 seconds.
- Your next invoice is $X on [date]. Here's the breakdown.
- Advanced settings are optional - most users skip this step.
Dont Examples
- Unlock the power of unlimited WordPress possibilities!
- Our cutting-edge synergistic hosting solution empowers your digital journey.
- Oops! Something went wrong. Please try again later.
- This feature is only available on higher-tier plans. Upgrade now!
- Don't worry, it's super easy! Even non-techies can do it!
- Your account has been successfully onboarded to our platform ecosystem.
- Click here to get started on your amazing website adventure!
Tone Description
LaunchWP speaks like a senior developer who genuinely wants you to succeed - technically precise without being condescending, encouraging without being cheerleader-hollow. For developer audiences, it respects their intelligence: no over-explaining, no jargon avoidance, just clear and direct. For non-technical users, it translates complexity into plain language with confidence, never talking down. Billing, pricing, and limitations are communicated honestly and proactively. The brand never hides complexity behind vague marketing language, and it never makes users feel stupid for asking a basic question. Think: the best technical documentation you've ever read, written by someone who actually uses the product.
Voice Attributes
Clear Space
Minimum clear space equal to the cap-height of the wordmark on all four sides of the logo lockup. For the icon mark alone, minimum clear space equal to 50% of the mark's width on all sides.
Minimum Size
Logo horizontal lockup: never below 120px wide. Icon mark alone: never below 24px (favicon use at 16px is the only exception, using a simplified 1-color variant). Wordmark alone: never below 80px wide.
Background Rules
Logo renders on: white (#ffffff), near-white (background token light), dark background (background token dark), and solid accent color (primary token). Never render on busy photographic backgrounds, gradient backgrounds, or patterned surfaces without a solid backing container. In dark mode, use the light-foreground logo variant.
Incorrect Usages
- Do not use WordPress blue (#0073aa) as the logo accent color - brand confusion with Automattic
- Do not stretch, skew, or alter the logo proportions
- Do not apply drop shadows, glows, or gradients to the logo mark
- Do not use the wordmark without the icon mark in primary brand contexts (hero, navbar, favicon excluded)
- Do not place the logo on low-contrast backgrounds that fail 3:1 contrast ratio
- Do not use the logo in a color not defined in the brand token set
- Do not rotate or flip the logo mark
- Do not recreate the wordmark in a different typeface
Identity
How the brand looks in practice - logos, imagery and artwork produced by its current design.
Shown from Midnight Orbit · v1.0.0
LaunchWP Brand Icon Mark
logo icon · 512×512
LaunchWP Logo Dark
logo icon · iconDark · 512×512
LaunchWP Logo Monochrome
logo icon · iconMono · 512×512
LaunchWP Logo Light
logo icon · iconLight · 512×512
LaunchWP Logo Reversed
logo icon · iconReversed · 512×512
LaunchWP Wordmark Light
logo wordmark · wordmarkLight · 1024×256
LaunchWP Wordmark
logo wordmark · wordmark · 1024×256
LaunchWP Wordmark Dark
logo wordmark · wordmarkDark · 1024×256
LaunchWP Wordmark Monochrome
logo wordmark · wordmarkMono · 1024×256
LaunchWP Horizontal Dark
logo horizontal · horizontalDark · 1536×512
LaunchWP Horizontal Monochrome
logo horizontal · horizontalMono · 1536×512
LaunchWP Horizontal Light
logo horizontal · horizontalLight · 1536×512
LaunchWP Horizontal
logo horizontal · horizontal · 1536×512
launchwp-favicon
favicon · 32×32
Clear-space and minimum-size rules above apply to every reproduction of the mark. Served read-only by BrandPilot. Tokens, previews and the agent prompt update in place when the owner publishes a new version.