# PodcastYes — Design System

> A Wix.com‑inspired visual language. This document is the single source of truth for
> the look and feel of the entire platform — marketing, auth, app, and admin. Every
> screen must follow it. When a component or page disagrees with this doc, the doc wins.

Reference: [Wix Design Assets & Guidelines](https://www.wix.com/about/design-assets),
[Wix Studio Brand Guidelines](https://www.wix.com/studio/about/brand-guidelines),
[About the Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system).

---

## 1. Design principles (the Wix feel)

1. **Confident & editorial.** Big, bold, tightly‑tracked headlines. Generous whitespace.
   Let one idea own each section. Marketing reads like a magazine, not a SaaS dashboard.
2. **High contrast, mostly monochrome.** Near‑black on white is the base. Color is used
   deliberately — almost always the single **Wix Blue** accent — never decoratively.
3. **Black is the primary action.** Primary buttons are solid black pills. Blue is the
   *interactive / accent* color (links, focus rings, active nav, highlights). This is the
   defining Wix.com marketing combination.
4. **Soft, rounded, friendly.** Pill buttons, large card radii, gentle shadows. Nothing
   sharp; nothing heavy.
5. **Calm surfaces.** White and one light‑gray (`#F4F4F4`). Borders are hairline and light.
   Depth comes from spacing and soft shadow, not from boxes inside boxes.
6. **One typeface, many weights.** Wix Madefor everywhere. Hierarchy comes from size and
   weight, not from mixing families.

---

## 2. Color

### Core palette

| Token            | Hex        | HSL                | Use |
| ---------------- | ---------- | ------------------ | --- |
| **Ink / black**  | `#0B0B0B`  | `0 0% 5%`          | Primary buttons, headlines, default text |
| **White**        | `#FFFFFF`  | `0 0% 100%`        | Page background, cards |
| **Wix Blue**     | `#116DFF`  | `217 100% 53%`     | Links, focus rings, active states, highlights, brand mark |
| **Blue (hover)** | `#0B57E0`  | `219 90% 46%`      | Blue hover / pressed |
| **Surface**      | `#F4F4F4`  | `0 0% 96%`         | Section backgrounds, muted fills, inputs‑on‑white |
| **Border**       | `#E4E4E4`  | `0 0% 89%`         | Hairline dividers, card borders, input borders |
| **Muted text**   | `#6A6A6A`  | `0 0% 42%`         | Secondary / supporting copy |
| **Foreground**   | `#111111`  | `0 0% 7%`          | Body text |

### Accent markers (use sparingly, for illustration/badges/status only)

Wix pairs its monochrome base with a few bright markers. Use these only for data viz,
status, and small decorative moments — never for primary UI chrome.

| Name        | Hex        | Use |
| ----------- | ---------- | --- |
| Lime        | `#DEFF00`  | Highlight chip, "new" marker |
| Orange      | `#FF5500`  | Warning / attention |
| Green       | `#00C271`  | Success |
| Deep Purple | `#3910ED`  | Secondary data series |
| Light Blue  | `#ADD7FF`  | Tints, illustration fills |

### Semantic mapping (CSS variables, HSL triplets)

```
--background        0 0% 100%      /* white page */
--foreground        0 0% 7%        /* near-black text */
--card              0 0% 100%
--card-foreground   0 0% 7%
--primary           0 0% 5%        /* INK — black buttons */
--primary-foreground 0 0% 100%
--brand             217 100% 53%   /* WIX BLUE — links, accents, active */
--brand-foreground  0 0% 100%
--secondary         0 0% 96%       /* surface gray fill */
--secondary-foreground 0 0% 7%
--muted             0 0% 96%
--muted-foreground  0 0% 42%
--accent            0 0% 96%       /* hover fill */
--accent-foreground 0 0% 7%
--destructive       4 86% 58%
--success           157 100% 38%
--warning           24 100% 50%
--border            0 0% 89%
--input             0 0% 89%
--ring              217 100% 53%   /* focus ring = Wix Blue */
```

**Rules**
- Default text = `foreground`. Secondary text = `muted-foreground`. Never lighter than `#6A6A6A` on white.
- Links and any "interactive accent" = **Wix Blue** (`text-brand`). Hover → underline or darker blue.
- Primary CTA = **black** pill. Never blue and black competing in the same button group.
- Focus is always a **2px Wix‑Blue ring** with a 2px offset. No exceptions.

---

## 3. Typography

**Family:** **Wix Madefor** (via Google Fonts / `next/font`).
- `Wix Madefor Display` → headings (`--font-display`).
- `Wix Madefor Text` → body & UI (`--font-sans`).

System fallback stack: `ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif`.

### Type scale

| Role            | Size (desktop)        | Weight | Tracking | Notes |
| --------------- | --------------------- | ------ | -------- | ----- |
| Display / Hero  | `clamp(2.75rem,6vw,4.5rem)` (44–72px) | 800 | `-0.03em` | Display font, `leading-[1.05]` |
| H1 (page)       | `2.25–3rem` (36–48px)  | 700    | `-0.02em` | Display font |
| H2 (section)    | `1.75–2.25rem` (28–36px)| 700   | `-0.02em` | Display font |
| H3              | `1.25rem` (20px)       | 600    | `-0.01em` | |
| Lead paragraph  | `1.125–1.25rem` (18–20px)| 400  | normal   | `text-muted-foreground` |
| Body            | `1rem` (16px)          | 400    | normal   | base UI = 14–16px |
| Small / meta    | `0.875rem` (14px)      | 500    | normal   | |
| Eyebrow / label | `0.8125rem` (13px)     | 600    | `0.04em` UPPERCASE | Use **Wix Blue** or muted |

**Rules**
- Headlines are tight: always pair big display sizes with `tracking-tight` and `leading-[1.05–1.1]`.
- Body line length caps at ~`max-w-2xl` (≈42rem) for readability.
- Don't uppercase anything except small eyebrows/labels.
- Numbers in stats/pricing use the display font, weight 800.

---

## 4. Shape, elevation, spacing

### Radius
- **Buttons:** pill — `rounded-full` (Wix CTA buttons ≈ 18px+; pill at our sizes).
- **Inputs / selects:** `rounded-xl` (12px).
- **Cards / panels:** `rounded-2xl` (16px) default; hero/feature cards `rounded-3xl` (24px).
- **Chips / badges:** `rounded-full`.
- Base `--radius: 0.875rem`.

### Elevation (soft, never harsh)
```
shadow-sm   → 0 1px 2px rgba(11,11,11,.05)
shadow      → 0 2px 8px rgba(11,11,11,.06)
shadow-md   → 0 8px 24px rgba(11,11,11,.08)   /* raised cards, menus */
shadow-lg   → 0 16px 48px rgba(11,11,11,.12)  /* popovers, highlighted pricing */
```
Cards default to a hairline `border` + `shadow-sm`. Elevate on hover (`hover:shadow-md`)
for interactive cards. No hard drop shadows, no inner shadows.

### Spacing & layout
- Container: centered, `max-w-[1280px]`, horizontal padding `1.5rem` (mobile) → `2rem`.
- **Section rhythm:** `py-20` mobile → `py-28`/`py-32` desktop. Marketing breathes.
- Alternate section backgrounds white ↔ `secondary` (`#F4F4F4`) to segment the page.
- Card padding: `p-6` (compact) to `p-8` (marketing).
- Grid gaps: `gap-6` default, `gap-8` for marketing feature grids.

---

## 5. Components

### Buttons (`<Button>`)
Pill shape, Madefor, weight 600, `transition`. Sizes: `sm h-9`, `default h-11`, `lg h-12`/`px-8`.

| Variant      | Style |
| ------------ | ----- |
| `default`    | **Black** fill, white text, `rounded-full`, `hover:bg-black/85`, soft shadow. Primary CTA. |
| `brand`      | **Wix Blue** fill, white text, `rounded-full`, `hover:bg-[#0B57E0]`. Use for the single hero/marketing accent action when black isn't wanted. |
| `secondary`  | `secondary` gray fill, ink text, `rounded-full`, `hover:bg-black/[.06]`. |
| `outline`    | White fill, `border` (1.5px) ink/border color, ink text, `rounded-full`, hover gray fill. |
| `ghost`      | Transparent, ink text, `hover:bg-secondary`. |
| `link`       | Wix‑Blue text, underline on hover, no padding. |
| `destructive`| `destructive` fill, white text, `rounded-full`. |

Icon buttons: `rounded-full`, square. Always include the blue focus ring.

### Cards (`<Card>`)
`rounded-2xl border bg-card shadow-sm`. Interactive cards add `transition hover:shadow-md hover:-translate-y-0.5`.
Highlighted/"most popular" card: `border-2 border-foreground` or `ring-2 ring-brand` + `shadow-lg`.

### Inputs / textarea / select
`h-11 rounded-xl border border-input bg-white px-4 text-base`. Placeholder = muted.
Focus: `ring-2 ring-brand border-transparent`. Labels: 14px weight 600, `mb-2`.

### Badges / chips
`rounded-full px-3 py-1 text-xs font-semibold`.
- `default` → ink fill / white text.
- `brand` → blue tint `bg-brand/10 text-brand`.
- `secondary` → gray fill.
- `success / warning / destructive` → tinted (`bg-x/12 text-x`).
Eyebrow chips on marketing: `bg-secondary` pill with a blue dot/`Sparkles` and uppercase label.

### Navigation
- **Marketing header:** white, hairline bottom border, `backdrop-blur`. Black wordmark
  with blue mic mark. Nav links muted → ink on hover. Right side: `ghost` "Log in" +
  black pill "Get Started".
- **App sidebar:** white, hairline right border. Item = `rounded-full px-4 py-2.5`.
  Active = `bg-brand/10 text-brand font-semibold`; idle = muted, `hover:bg-secondary`.
- **Active link accent is always Wix Blue.**

### Pricing cards
White cards, big display price (weight 800). Highlighted plan: `ring-2 ring-brand` +
floating blue "Most popular" pill + `shadow-lg`. Feature list uses blue `Check` icons.

### Footer
`bg-secondary` (`#F4F4F4`), hairline top border, multi‑column link lists, muted labels,
ink wordmark. Calm and quiet.

---

## 6. Iconography & imagery
- **Icons:** `lucide-react`, `1.5` stroke, `size-4`/`size-5`. Inherit text color; use blue
  only for accent/active. Icon "chips" = `rounded-2xl bg-secondary` (neutral) or
  `bg-brand/10 text-brand` (accent) tile.
- **Brand mark:** mic glyph in a `rounded-2xl` tile — blue tile / white glyph on light, or
  black tile on accent surfaces.
- **Imagery:** large, rounded (`rounded-3xl`), full‑bleed where possible. Generous.

---

## 7. Motion
- Transitions `150–200ms ease-out` for color/shadow/transform.
- Hover lift on cards: `-translate-y-0.5`. Buttons: shade shift only.
- Respect `prefers-reduced-motion`. Keep it subtle — Wix is smooth, not bouncy.

---

## 8. Do / Don't
- ✅ Black primary pill + Wix‑Blue accents. ❌ Purple/gradient primary buttons.
- ✅ One blue accent per view. ❌ Rainbow of brand colors in core UI.
- ✅ Big tight headlines in Madefor Display. ❌ Small timid headings.
- ✅ Hairline borders + soft shadows + whitespace. ❌ Heavy borders, boxes‑in‑boxes.
- ✅ Pill buttons & chips, `rounded-2xl` cards. ❌ Sharp corners / `rounded-md` chrome.
- ✅ Blue focus ring everywhere. ❌ Default browser outline or no focus state.