Leon Serfaty
224 lines
10 KiB
Markdown
224 lines
10 KiB
Markdown
# 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 **orange** accent — never decoratively.
|
||
3. **Black is the primary action.** Primary buttons are solid black pills. Orange 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 |
|
||
| **Brand Orange** | `#E65100` | `21 100% 45%` | Links, focus rings, active states, highlights, brand mark |
|
||
| **Orange (hover)**| `#B84500` | `21 100% 39%` | Orange 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 21 100% 45% /* ORANGE — 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 21 100% 45% /* focus ring = brand orange */
|
||
```
|
||
|
||
**Rules**
|
||
- Default text = `foreground`. Secondary text = `muted-foreground`. Never lighter than `#6A6A6A` on white.
|
||
- Links and any "interactive accent" = **orange** (`text-brand`). Hover → underline or darker orange.
|
||
- Primary CTA = **black** pill. Never orange and black competing in the same button group.
|
||
- Focus is always a **2px orange 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 **orange** 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` | **orange** fill, white text, `rounded-full`, `hover:bg-brand-hover`. 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` | orange text, underline on hover, no padding. |
|
||
| `destructive`| `destructive` fill, white text, `rounded-full`. |
|
||
|
||
Icon buttons: `rounded-full`, square. Always include the orange 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` → orange 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 an orange dot/`Sparkles` and uppercase label.
|
||
|
||
### Navigation
|
||
- **Marketing header:** white, hairline bottom border, `backdrop-blur`. Black wordmark
|
||
with orange 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 orange.**
|
||
|
||
### Pricing cards
|
||
White cards, big display price (weight 800). Highlighted plan: `ring-2 ring-brand` +
|
||
floating orange "Most popular" pill + `shadow-lg`. Feature list uses orange `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 orange
|
||
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 — orange 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 + orange accents. ❌ Purple/gradient primary buttons.
|
||
- ✅ One orange 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.
|
||
- ✅ Orange focus ring everywhere. ❌ Default browser outline or no focus state.
|