wavespeed.ai — Design System

1. Visual Theme & Atmosphere

Dark-first AI inference platform that balances technical credibility with approachable visual warmth. Deep navy backgrounds contrast with glowing accent blues to evoke processing power and speed.

Mood: dark, technical, glowing, professional

The visual language is refined without being austere — custom typefaces carry the personality while structural clarity does the heavy lifting. A structured token system underpins every color decision.

2. Color Palette & Roles

Design tokens found: 2 color custom properties

Named Tokens (excerpt)

• --b-100: #F2F3F7
• --s-700: #37546D

Palette philosophy: Dark-first — the background is the canvas; light only appears for contrast hierarchy.

3. Typography Rules

• h1: azeret / 60px / wt 700 / tracking -3px / lh 60px
• h2: azeret / 48px / wt 700 / tracking -1px / lh 48px
• h3: GeistSans / 24px / wt 500 / lh 28px
• body: GeistSans / 16px / wt 400 / lh 24px
• p: azeret / 16px / wt 700 / lh 24px
• a: GeistSans / 16px / wt 400 / lh 24px
• button: GeistSans / 14px / wt 400 / lh 20px
• input: GeistSans / 14px / wt 400 / lh 20px
• label: GeistSans / 16px / wt 400 / lh 24px

Custom typefaces: azeret, GeistSans

Typography philosophy: Two-typeface system: display and body voices serve distinct roles without fighting for dominance.

Headline tracking: -3px — tight tracking signals confidence and editorial intent. Headline scale: h1 at 60px, h2 at 48px — large-scale type creates immediate visual impact.

4. Component Stylings

Border radius: No border-radius — sharp edges throughout.

Shadows: Shadows are absent — depth through color and spacing alone.

• Component data limited — apply global radius and color rules consistently.

5. Layout Principles

Layout philosophy: Feature-driven vertical rhythm with dense information sections alternating with open hero areas.

Spacing cadence: Direct pixel values — consistent multiples of 4px or 8px observed in component padding.

6. Depth & Elevation

Flat design — no box shadows. Depth communicates through:

• Background color contrast between sections
• Border lines as separators
• Typography weight shifts
• Proximity and whitespace

This is an intentional choice: shadows would add visual noise to a carefully restrained palette.

7. Do’s and Don’ts

Do:

• Maintain the dark background as the dominant canvas — light is a highlight, not the base
• Use only the defined typefaces (azeret, GeistSans) — system fonts will break the brand voice
• Keep all edges sharp — border-radius destroys the visual discipline
• Keep elevation flat — adding shadows would contradict the design language

Don’t:

• Add light mode without a full color system rethink — the palette is built for dark
• Use accent colors for decoration — they are reserved for interactive signals only
• Mix more than two typeface families — typographic chaos undermines brand clarity
• Add gradient backgrounds unless they exist in the design system
• Use stock UI component defaults (e.g., Bootstrap/MUI) without full restyling

8. Responsive Behavior

Headline scale:

• Desktop: 60px
• Suggest mobile: 33px–39px

Body text: 16px — standard; consider 15px on mobile for comfort

Layout breakpoints: Standard: stack multi-column sections to single column; reduce headline size; maintain horizontal padding of at least 16px.

Navigation: Apply standard mobile nav pattern: fixed header, collapsible menu.

9. Agent Prompt Guide

When asked to create UI in the style of wavespeed.ai, instruct the agent:

Design in the style of wavespeed.ai: dark, technical, glowing, professional.
Use a near-black background (#0a0a0a or #000). White text as primary foreground.
Primary typeface: azeret, body: GeistSans.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Accent color: #37546D — use only for interactive elements.
Generous whitespace. Typography drives hierarchy.
Avoid: generic card components, gradient backgrounds, icon-heavy layouts, rounded pill buttons.

Key design signals to reference:

• Custom font: azeret — load via CDN if reproducing
• Shadow-free — use border or background contrast for separation
• Zero border-radius — rectangular everything
• Color temperature: Cool dark neutrals

Generated by Sparkbites — extracted from live CSS analysis