UI/UX 设计智库 UI/UX Pro Max

I didn't run the skill's search script because this session has no shell tool. The palette and font recommendations come from rows I read in data/colors.csv and data/typography.csv. The style recommendation and the contrast notes are my own judgment and aren't from a database match. I also didn't read styles.csv or the landing-page data.

Visual style

Use soft, calm minimalism with generous whitespace, large photography and gentle rounded cards. Avoid heavy glass, neon and brutalist treatments.

• Layout: one primary CTA, "Book a treatment" (primary-action). Keep it in the hero and repeat it in a sticky header or bottom bar.
• Spacing and containers: use the spacing-scale rule and a consistent max-w-6xl container.
• Motion: use slow, subtle fades and transform/opacity only. Animate one or two elements per view.
• Icons: use one SVG icon set, such as Lucide. No emoji.

Color palette

This is the "Beauty/Spa/Wellness Service" row (#32) from the dataset, which it describes as "soft pink + lavender luxury":

• Tokens: put these in your Tailwind theme as semantic tokens (bg-background, text-foreground, bg-primary) rather than raw hex in components.
• Pink as text: #EC4899 and #F9A8D4 are fine for fills and buttons but don't use them as text on the pink background. Body text should be #831843 or #475569.
• Button text: the dataset pairs black text with the primary and accent fills. White on #EC4899 or #8B5CF6 is roughly 3.5–4.2:1, which fails AA for normal text. My estimate is about 6:1 for black on #EC4899, but verify it.
• If pink is too playful: the Mental Health row (#22: lavender #8B5CF6 with green #059669) is a calmer alternative. Run any substitute through a contrast checker too.

Font pairing

Use "Wellness Calm" (pairing #8): Lora for headings and Raleway for body. The dataset describes it as "Lora's organic curves with Raleway's elegant simplicity."

// next/font/google, with display: 'swap'
Lora({ subsets: ['latin'], variable: '--font-serif' })
Raleway({ subsets: ['latin'], variable: '--font-sans' })

• Tailwind config: fontFamily: { serif: ['Lora','serif'], sans: ['Raleway','sans-serif'] }.
• Body text: use at least 16px with 1.5–1.75 line height and 65–75 characters per line. Use weight 400 or heavier for body, since Raleway's light weights get thin on tinted backgrounds.
• Alternative: "Classic Elegant" (Playfair Display + Inter) is the dataset's pick if you want a more luxury feel.

Checks before shipping

Ordered by the skill's priority list, with the booking flow in mind.

Accessibility (critical)

1. Check contrast on every text/background pair: 4.5:1 for normal text and 3:1 for large text. Include text over hero images, which needs a scrim.
2. Keep visible focus rings on every interactive element, and make sure the sticky header doesn't hide the focused control (WCAG 2.2 focus-not-obscured).
3. Make sure Tab order matches visual order, add a skip-to-content link, and keep headings sequential (one h1, no skipped levels).
4. Write meaningful alt text for treatment photos, and hide decorative icons from screen readers. Icon-only buttons need an aria-label.
5. Give every booking-form field a visible label, not placeholder-only. Show errors below the field and link them with aria-describedby. After a failed submit, focus an error summary or the first invalid field.
6. Use autocomplete and semantic input types (email, tel) so autofill and the right mobile keyboard work.
7. Respect prefers-reduced-motion. Any carousel needs pause and stop controls.
8. Don't rely on color alone, for example for available versus unavailable time slots. Add text or an icon.
9. Make sure the date or time picker works fully by keyboard, with no drag-only interaction.

Touch and interaction (critical)

1. Make targets at least 44×44px (WCAG 2.2 AA minimum is 24×24) with at least 8px between them.
2. Don't rely on hover for anything important, such as service details or pricing.
3. Show loading and disabled states on the submit button, then a clear success or error confirmation. Give visual press feedback within about 100ms.
4. Add cursor-pointer on clickable elements, and use touch-action: manipulation.
5. Offer visible controls and a way to cancel or go back at each step if booking is multi-step.

Performance and layout

1. Serve the hero as AVIF or WebP using next/image with the hero set to priority, set explicit dimensions, and lazy-load images below the fold. CLS should be under 0.1.
2. Use next/font with display: swap and load only the weights you use.
3. Check that there's no horizontal scroll at 375px. Don't disable zoom, and use min-h-dvh instead of 100vh.
4. Give the fixed header padding offsets so it doesn't cover content or anchor targets.

I can run through these against your code once there's a page to check. If you want database-verified style and landing-structure matches, I'd need a shell tool to run the search script.