# Wavora / WAGW SaaS — Design Reference

> Style direction adopted from Buddy — "Crisp digital blueprint".

## Design Decision

WAGW SaaS should use a clean, pragmatic SaaS identity: white canvas, crisp dark typography, subtle borders/shadows, and one memorable lime-green action color.

This reference is the official visual direction for:

- Public landing pages.
- Tenant dashboard.
- Documentation/API pages.
- Marketing/product screenshots.

The custom `/app-admin` shell uses the brand colors and typography from this reference.

## Brand Fit

This style fits WAGW SaaS because the product is a developer/business WhatsApp gateway platform:

- Technical but approachable.
- SaaS/product-first.
- Dashboard-heavy.
- Needs trust, clarity, and fast comprehension.
- Similar space to developer tools: Vercel, Supabase, Railway, Clerk.

If later targeting very non-technical UMKM users, keep this base system but simplify copy, icons, and dashboard density.

## Theme

- Theme: light.
- Tone: crisp digital blueprint.
- Visual feel: clean, pragmatic, structured, efficient.
- Avoid playful/consumer-heavy styling.

## Colors

| Name | Value | Role |
|------|-------|------|
| Midnight Ink | `#1d2130` | Primary text, deep gray borders, dark accents |
| Cloud White | `#fcfcfd` | Primary background, card surfaces, ghost button bg |
| Slate Gray | `#d5d9e8` | Muted borders, secondary text, subtle shadows |
| Frost | `#ebeef7` | Subtle borders, inactive fills, list backgrounds |
| Coal Black | `#151720` | Darkest text, prominent headings, icons |
| Deep Space | `#0a0d16` | Hero/display text, strong icon fills |
| Sky Dust | `#d8fbed` | Faint background wash, subtle highlights |
| Emerald Echo | `#0b3d28` | Green outline accent, focus edges, tags |
| Sour Apple | `#bfff5a` | Primary CTA, selected nav, conversion moments |
| Hydro Blue | `#1a67fd` | Links, short text accents, tags; not primary CTA |
| Sunny Glow | `radial-gradient(100% 100% at 50% 0px, rgb(255, 216, 136) 0%, rgb(255, 198, 80) 100%)` | Feedback/testimonial highlight |
| Pink Sugar | `radial-gradient(100% 100% at 50% 0px, rgb(255, 181, 241) 0%, rgb(255, 157, 236) 100%)` | Decorative accent |
| Volt Yellow | `radial-gradient(100% 100% at 50% 0px, rgb(236, 241, 116) 0%, rgb(229, 237, 56) 100%)` | Decorative accent |
| Mint Blast | `radial-gradient(100% 100% at 50% 0px, rgb(93, 247, 182) 0%, rgb(25, 247, 154) 100%)` | Decorative accent |
| Sky Surge | `radial-gradient(100% 100% at 50% 0px, rgb(122, 227, 255) 0%, rgb(70, 216, 255) 100%)` | Decorative accent |

## Typography

### Primary Font

- Preferred: **IBM Plex Sans**.
- Practical fallback: **Inter**.
- Weights: 400, 500, 600, 700.
- Use for body, nav, headings, dashboard text.

### Mono Font

- Preferred: **IBM Plex Mono**.
- Fallback: **Fira Code**.
- Use only for API keys, code snippets, endpoints, request/response examples, technical labels.

### Type Scale

| Role | Size | Line Height | Letter Spacing |
|------|------|-------------|----------------|
| caption | 13px | 1.71 | normal |
| body | 14–16px | 1.43–1.56 | normal |
| heading | 22px | 1.33 | -0.012em |
| heading-lg | 48px | 1.00 | -0.021em |
| display | 80px | 0.90 | -0.045em |

## Spacing & Radius

- Base unit: 8px.
- Density: comfortable.
- Section gap: 64px.
- Card padding: 24px.
- Element gap: 24px.

Radius:

- Cards: 24px.
- Images/screenshots: 8px.
- Buttons: 56px.
- Nav items: 44px.
- Pills/tags: 9999px.

Dashboard adaptation:

- Landing pages may use full 56px pill buttons.
- Dense dashboard forms/tables may use slightly more compact sizes while preserving rounded/pill language.
- Do not overuse large radius inside data-heavy tables.

## Core Components

### Primary Action Button

- Background: Sour Apple `#bfff5a`.
- Text: Midnight Ink `#1d2130`.
- Radius: 56px.
- Use only for primary conversion/action moments.

### Ghost Button

- Transparent/Cloud White background.
- Midnight Ink border/text.
- Radius: 56px.
- Use for secondary actions.

### Cards

Default:

- Background: Cloud White.
- Subtle border.
- Minimal/no shadow.

Elevated feature card:

- Radius: 24px.
- 1px Midnight Ink-ish border.
- Tinted subtle shadow using Sky Surge or Sour Apple family.

### Navigation

- Persistent top bar for public pages.
- Pill-shaped active/hover states.
- Sour Apple reserved for primary CTA.
- Hydro Blue allowed for links and small emphasis.

### Tabs/Pills

- Radius: 9999px.
- Active state may use border or Cloud White fill.
- Use for filtering logs, devices, message statuses, billing tabs.

## Elevation Tokens

Image container:

```css
box-shadow: rgba(29, 33, 48, 0.04) 0px 3px 3px -1px,
  rgba(29, 33, 48, 0.04) 0px 6px 6px -3px,
  rgba(29, 33, 48, 0.04) 0px 12px 12px -6px,
  rgba(29, 33, 48, 0.04) 0px 24px 24px -12px,
  rgba(29, 33, 48, 0.04) 0px 32px 32px -16px;
```

Button:

```css
box-shadow: rgba(255, 255, 255, 0.72) 0px 1px 0px 0px inset,
  rgba(29, 33, 48, 0.12) 0px -2px 0px 0px inset,
  rgba(29, 33, 48, 0.04) 0px 1px 1px -1px,
  rgba(29, 33, 48, 0.04) 0px 4px 4px -2px;
```

Card with Sky Surge tint:

```css
box-shadow: rgba(29, 33, 48, 0.08) 0px 0px 0px 1px,
  rgba(29, 33, 48, 0.04) 0px 1px 1px -1px,
  rgba(29, 33, 48, 0.04) 0px 2px 2px -1px,
  rgba(29, 33, 48, 0.04) 0px 3px 3px -1.5px,
  rgba(29, 33, 48, 0.04) 0px 5px 5px -2.5px,
  rgba(70, 216, 255, 0.08) 0px 10px 10px -5px,
  rgba(70, 216, 255, 0.08) 0px 24px 24px -8px;
```

Card with Sour Apple tint:

```css
box-shadow: rgba(29, 33, 48, 0.08) 0px 0px 0px 1px,
  rgba(29, 33, 48, 0.04) 0px 1px 1px -1px,
  rgba(29, 33, 48, 0.04) 0px 2px 2px -1px,
  rgba(29, 33, 48, 0.04) 0px 3px 3px -1.5px,
  rgba(29, 33, 48, 0.04) 0px 5px 5px -2.5px,
  rgba(183, 255, 90, 0.08) 0px 10px 10px -5px,
  rgba(183, 255, 90, 0.08) 0px 24px 24px -8px;
```

## Page Layout Direction

Public:

- Max-width contained layout.
- Big hero with dark/high-contrast typography.
- Product UI screenshots as main visual proof.
- Feature grids with crisp cards.
- Pricing table with Sour Apple CTA.

Tenant dashboard:

- Light canvas.
- Sidebar/topbar clean navigation.
- Cards for stats and device health.
- Tables for devices, messages, webhooks, invoices.
- Sour Apple only for main action: Add Device, Send Message, Create API Key, Upgrade.

Docs/API:

- Clean two-column docs layout.
- IBM Plex Mono/Fira Code for endpoints, headers, payloads.
- Hydro Blue for links/endpoint highlights.

## Do

- Use Cloud White as primary canvas.
- Use Midnight Ink for primary text.
- Use Sour Apple only for primary CTA/conversion.
- Use Hydro Blue for links/small text accents.
- Keep sections structured with strong hierarchy.
- Use product screenshots and UI-like illustrations.
- Use subtle tinted shadows, not generic heavy shadows.

## Don't

- Do not use many saturated colors as large backgrounds.
- Do not make Hydro Blue the primary CTA.
- Do not use IBM Plex Mono for normal text/headings.
- Do not overuse gradients in dashboard pages.
- Do not use heavy borders or harsh shadows.
- Do not use full-bleed lifestyle imagery; keep product/UI focused.

## Implementation Notes

- Tailwind config should define Wavora color tokens.
- Laravel Blade components should include button/card/badge/table primitives using these tokens.
- Custom `/app-admin` shell should follow these tokens for consistency with the rest of the app.
- Landing and tenant dashboard should share the same CSS tokens.