admin/podcastdistributiona
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive /features page + allow Unsplash imagery

Browse Source
This commit is contained in:
Leon Serfaty
2026-06-08 04:37:10 -04:00
parent 8138827657
commit 305278a846
11 changed files with 1008 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+23 -23
View File
@@ -15,8 +15,8 @@ Reference: [Wix Design Assets & Guidelines](https://www.wix.com/about/design-ass
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
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
@@ -36,8 +36,8 @@ Reference: [Wix Design Assets & Guidelines](https://www.wix.com/about/design-ass
| ---------------- | ---------- | ------------------ | --- |
| **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 |
| **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 |
@@ -65,7 +65,7 @@ status, and small decorative moments — never for primary UI chrome.
--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 21 100% 45% /* ORANGE — links, accents, active */
--brand-foreground 0 0% 100%
--secondary 0 0% 96% /* surface gray fill */
--secondary-foreground 0 0% 7%
@@ -78,14 +78,14 @@ status, and small decorative moments — never for primary UI chrome.
--warning 24 100% 50%
--border 0 0% 89%
--input 0 0% 89%
--ring 217 100% 53% /* focus ring = Wix Blue */
--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" = **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.
- 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.
---
@@ -108,7 +108,7 @@ System fallback stack: `ui-sans-serif, system-ui, -apple-system, "Segoe UI", san
| 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 |
| 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]`.
@@ -154,14 +154,14 @@ Pill shape, Madefor, weight 600, `transition`. Sizes: `sm h-9`, `default h-11`,
| 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. |
| `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` | Wix‑Blue text, underline on hover, no padding. |
| `link` | orange text, underline on hover, no padding. |
| `destructive`| `destructive` fill, white text, `rounded-full`. |
Icon buttons: `rounded-full`, square. Always include the blue focus ring.
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`.
@@ -174,22 +174,22 @@ 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`.
- `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 a blue dot/`Sparkles` and uppercase label.
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 blue mic mark. Nav links muted → ink on hover. Right side: `ghost` "Log in" +
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 Wix Blue.**
- **Active link accent is always orange.**
### 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.
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,
@@ -198,10 +198,10 @@ ink wordmark. Calm and quiet.
---
## 6. Iconography & imagery
- **Icons:** `lucide-react`, `1.5` stroke, `size-4`/`size-5`. Inherit text color; use blue
- **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 — blue tile / white glyph on light, or
- **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.
@@ -215,9 +215,9 @@ ink wordmark. Calm and quiet.
---
## 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.
- ✅ 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.
- ✅ Blue focus ring everywhere. ❌ Default browser outline or no focus state.
- ✅ Orange focus ring everywhere. ❌ Default browser outline or no focus state.