admin/podcastdistributiona
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
35379212fbc28d411b1e0fc4ac9be75bae368381
podcastdistributiona/DESIGN.md
T

10 KiB
Raw Blame History

Podcast Distribution AI — 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 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.
Reference in New Issue View Git Blame Copy Permalink