Design a light-mode web interface screen: warm editorial healthcare blending earthy rust tones with deep nautical navy and high-contrast literary serif typography.
LAYOUT
The page operates on an alternating 2-column editorial grid bounded by a 1280px maximum container. Hero content places the display headline, body intro, pill CTAs, and trust metrics on the left, counterbalanced by a tall portrait photograph on the right. Below, the layout flips rhythm into a balanced split-block with a deep navy content container adjacent to an elevated white team portrait card.
PALETTE (use these exact hex values)
- #FAF9F6 — Alabaster Base: Global background canvas providing a clean, warm healthcare ambience without clinical chill.
- #192E46 — Midnight Ink: High-contrast background block for secondary narrative sections and dark-mode feature cards.
- #A9533B — Terracotta Rust: Primary action color for CTA pills, accent headlines, inline rules, and floating icon buttons.
- #1E2229 — Deep Slate Text: Primary heading and body text on light surfaces.
- #606770 — Muted Sage Charcoal: Sub-captions, supporting body paragraphs, and secondary metadata.
- #FFFFFF — Crisp White: Team card backing and text elements against navy backgrounds.
- #EFECE6 — Pale Pebble: Category badge pills, light card borders, and faint decorative watermark paths.
- #9BAAA0 — Soft Sage Accent: Testimonial quote marks and subtle organic secondary highlights.
TYPOGRAPHY
Typeface Playfair Display (or Instrument Serif, Miller Display, Cormorant Garamond), weights 400/600. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 28px heading, 42px heading-lg, 60px display. Tracking -0.015em. The typography combines editorial warmth and professional medical reassurance. The transitional serif conveys literary heritage, compassion, and established pedigree, while the clean geometric sans grounding the interface provides crisp modern legibility. A libre substitution pairing of Playfair Display and Plus Jakarta Sans accurately reflects this balance without requiring custom licensing.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 999px, buttons 999px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly graphic and structural rather than simulated via volumetric shadows. Layers overlap flat planes—such as full-bleed portrait photos, rounded white cards, and navy background panels—creating depth through crisp contrast boundaries. When layered, background watermarks sit flush behind photographic subjects to create a subtle two-dimensional collage effect.
IMAGERY
Photography emphasizes warm, candid natural-light lifestyle portraits of smiling individuals and healthcare professionals wearing modern, casual scrubs. Subjects are shot against neutral, off-white architectural or clean studio backgrounds with authentic expressions, completely avoiding staged clinical equipment or grim dental procedures.
SIGNATURE DETAIL — the thing that makes this design itself
The editorial serif punchline highlight: isolating a witty, human sentence fragment (like 'Oh, and flossing!') at the end of a primary headline in terracotta rust (#A9533B). This transforms clinical copy into a warm personal conversation. It fails if applied to entire paragraphs or if multiple random words across the headline are arbitrarily highlighted.
MUST
- Reserve terracotta (#A9533B) for conversion elements and intentional editorial highlight phrases within display headers.
- Pair full-bleed lifestyle portraiture with asymmetric serif headline compositions on the opposite column.
- Use uppercase pill badges in pale pebble (#EFECE6) to establish clinical authority without visual harshness.
- Maintain high line-height (1.5-1.6) on sans-serif descriptive paragraphs for an accessible, caring tone.
AVOID
- Never use generic medical cyan, sterile teal, or cold neon blues anywhere in the palette.
- Do not set long multi-sentence body paragraphs in the serif display typeface.
- Avoid harsh black drop shadows; depth must rely on flat contrast planes and clean border delineation.
- Do not make buttons rectangular or sharp-cornered; maintain pill (999px) consistency throughout.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
