Design a light-mode web interface screen: fresh folded cotton warmth balanced by clinical cobalt precision.
LAYOUT
The layout follows a disciplined vertical hierarchy: sticky clean header with logo, center navigation, and dual contact/booking CTAs; a 2-column asymmetric hero pairing high-impact typography/services grid on the left against a stacked towel photograph and floating contact card on the right; followed by a wide-radius soft blue process block with four connected horizontal steps; a 4-column balanced trust and offer section; and terminating in a grounded dark navy statistics bar.
PALETTE (use these exact hex values)
- #ffffff — Pure White: Main canvas background and raised card surface fill.
- #f0f6ff — Powder Sky Tint: Large rounded section backgrounds and icon circular backdrops.
- #fdf8ec — Warm Cream Tint: Background fill for promotional discount card.
- #10213d — Deep Midnight: Background for bottom statistics bar and primary body headings.
- #1a64ea — Cobalt Blue: Primary buttons, key phrase highlights, step indicators, and active links.
- #f59e0b — Amber Gold: Discount numeric value, coupon tag background, and star rating accents.
- #10b981 — Mint Emerald: Checkmark icon outlines and trust indicator badges.
- #6b7280 — Slate Text: Secondary descriptors, subheadings, micro-copy, and operating hours.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 28px heading, 54px display. Tracking -0.03em for display headings, 0 for body copy. The typographic tone is reassuring, crisp, and clinically professional without feeling cold. Rendered in an approachable geometric grotesque like Plus Jakarta Sans or DM Sans, the heavy titles establish confidence while round apertures mirror the circular motifs in the UI. Inter or Outfit can serve as seamless open-source drop-ins provided tight tracking (-0.02em) is applied to display weights.
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through pristine surface layering rather than heavy shadow. White cards hovering over tinted backgrounds or photography use an ultra-diffuse, low-opacity drop shadow: 0 14px 36px rgba(16, 33, 61, 0.06). Base cards in the grid utilize very fine borders (#eef3fb) without shadows to maintain a flat, hygienic cleanliness.
IMAGERY
Photography emphasizes tactile, hyper-clean domestic luxury: neatly folded pastel and white towels stacked on cool polished marble, and crisply laundered shirts inside protective dry-cleaner bags hung on stainless steel racks. Lighting is diffused morning window light with soft gradients and zero harsh artificial flash. Unorganized, crumpled clothes or dingy commercial laundromats are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of circular numbered step badges linked by delicate dotted tracks nestled inside a broad, soft-sky rounded island (#f0f6ff). This layout communicates structured, effortless domestic service. Misusing it by overcrowding the steps, removing the generous outer padding, or replacing the clean sky background with plain white destroys the breezy, stress-free impression.
MUST
- Use high-key photographic assets with soft daylight, pristine folded fabrics, and neutral marble textures.
- Pair deep midnight navy headings (#10213d) with vibrant cobalt blue (#1a64ea) on key single words.
- Enclose multi-step diagrams inside a single light blue tinted container with generous corner radii (20px to 24px).
- Keep icon backdrops circular with 44px to 56px dimensions and a pale tint matched to their accent color.
AVOID
- Do not use dark, moody, or underexposed laundry room photography.
- Never apply harsh black (#000000) for body text; use charcoal slate (#6b7280) or midnight navy (#10213d).
- Avoid sharp 0px or small 2px corners on cards and panels.
- Do not use heavy multi-layered saturated drop shadows; keep shadows diffuse, low-opacity, and cool-toned.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1728:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试