wabi.ai — Design System
1. Visual Theme & Atmosphere
Minimal AI product landing with high-contrast dark mode. The design communicates speed and intelligence through stark typographic contrast — a custom display font with extreme negative tracking on headlines against a near-black canvas.
Mood: dark, bold, confident, tech-forward
The visual language is refined without being austere — custom typefaces carry the personality while structural clarity does the heavy lifting. Colors are applied directly without a formal token layer — values are contextual rather than systematic.
2. Color Palette & Roles
Palette philosophy: Dark-first — the background is the canvas; light only appears for contrast hierarchy.
3. Typography Rules
- h1: selecta / 58px / wt 400 / tracking -1.74px / lh 64px
- h2: selecta / 58px / wt 400 / tracking -1.74px / lh 64px
- body: selecta / 16px / wt 400 / lh 24px
- p: selecta / 25px / wt 400 / tracking -0.75px / lh 34px
- a: selecta / 16px / wt 400 / lh 24px
- button: selecta / 16px / wt 400 / lh 24px
Custom typefaces: selecta
Typography philosophy: A single custom typeface (selecta) handles all type settings, preserving consistency over variety.
Headline tracking: -1.74px — tight tracking signals confidence and editorial intent. Headline scale: h1 at 58px, h2 at 58px — generous but controlled display sizing.
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: Content-first layout — sections breathe independently; no fixed grid forces awkward compositions.
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 (selecta) — 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: 58px
- Suggest mobile: 32px–38px
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 wabi.ai, instruct the agent:
Design in the style of wabi.ai: dark, bold, confident, tech-forward.
Use a near-black background (#0a0a0a or #000). White text as primary foreground.
Primary typeface: selecta.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Accent color: #7a5af8 — 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: selecta — 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
