Design a light-mode web interface screen: calm terracotta and deep spruce accents softening clinical precision through gentle arches and warm neutrals.
LAYOUT
The layout uses a 1240px centered container with generous vertical breathing room (96px between major sections). The hero utilizes an asymmetric 55/45 split balancing text copy against an arched doctor portrait. Lower sections deploy clean four-column service grids and asymmetric multi-card bento arrangements with clear entry and exit points.
PALETTE (use these exact hex values)
- #F9F9F7 — Alabaster Ground: page background providing a warm, non-sterile canvas
- #FFFFFF — Pure White: card bodies and floating overlay container surfaces
- #EDF0EE — Spruce Tint: secondary card surfaces and icon badge backgrounds
- #BC5A3D — Terracotta Rust: primary interactive buttons, active indicators, and category overlines
- #365351 — Deep Spruce: highlighted service card background and icon outlines
- #1C2422 — Deep Charcoal: primary headings, stat counters, and title copy
- #676E6A — Sage Slate: paragraph body copy, secondary labels, and inactive links
- #E3E7E4 — Border Grey: hairline dividers, outline buttons, and card borders
- #ECA644 — Warm Gold: rating star glyph and high-trust signals
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 34px heading-lg, 52px display. Tracking -0.025em on display, 0.08em on overlines, 0 on body. Plus Jakarta Sans delivers approachable authority without descending into corporate coldness. The tight negative tracking on display sizes (-0.03em) lends editorial weight, while generously tracked terracotta overlines establish clean visual punctuation. If substituting, choose humanist grotesques like Outfit or DM Sans over rigid geometric sans like Helvetica.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled through surface layering and hairline borders rather than heavy drop shadows. Cards sit flat against the off-white canvas with 1px borders (#E3E7E4), except for the floating rating badge in the hero which employs a faint, highly diffused ambient shadow (0px 10px 30px rgba(0,0,0,0.04)).
IMAGERY
Photography depicts warm, naturalistic medical professionals and smiling multi-generational families in soft daylight with unforced smiles. Images are framed in arched pill containers or soft 18px rounded rectangles, accented by delicate contour linework and subtle botanical leaf vector illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the inverted deep spruce card (#365351) standing out among light service cards, complemented by arch-masked medical portraits and terracotta highlights. Designers misuse this by inverting all cards to dark green, destroying the intentional focal gravity of the single highlighted department.
MUST
- Ground the interface in warm alabaster (#F9F9F7) rather than sterile blue-white (#FFFFFF).
- Reserve deep spruce (#365351) for exactly one featured card per grid to maintain asymmetric focus.
- Use warm terracotta (#BC5A3D) exclusively for key navigation actions, category tags, and primary CTAs.
- Keep card corners consistently curved at 18px with minimal hairline outlines (#E3E7E4).
AVOID
- Do not use generic hospital cyan or cold royal blues anywhere in the palette.
- Do not give every service card an identical colored background; maintain a mostly white grid.
- Do not use sharp 0px or pill 999px radii on cards; stick strictly to 18px.
- Do not introduce heavy black drop shadows; keep elevation flat or hairline-bordered.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
