admin/podcastdistributiona
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8138827657b4755bb867d4d969cf74678beda4c7
podcastdistributiona/DESIGN.md
T
Leon Serfaty 155507f21a Initial commit: PodcastYes — AI podcast platform
2026-06-07 03:58:32 -04:00

10 KiB
Raw Blame History

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, Wix Studio Brand Guidelines, 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.
Reference in New Issue View Git Blame Copy Permalink