Design a light-mode website section: clinical authority rendered through warm literary serif typography, terracotta signals, and a vast parchment-toned canvas.
LAYOUT
The page flows vertically through three clear movements: an asymmetrical hero-style CTA aligned to the left, followed by a balanced 4-column trust strip. Below this sits a massive architectural typographic pause (the watermark), transitioning into a structured 6-column footer grid. The layout resolves with a horizontal baseline bar anchoring copyright, central compliance, and legal terms.
PALETTE (use these exact hex values)
- #FAF8F5 — Parchment Canvas: Primary background surface across the entire page layout
- #BD3528 — Terracotta Accent: Interactive primary buttons, headline highlights, and active indicator dot
- #1D1E20 — Ink Primary: Headlines, section titles, brand mark, and high-priority copy
- #62676C — Muted Slate: Supporting body copy, feature subtexts, and footer category links
- #E8E3DB — Parchment Rule: Subtle hairline section dividers and structural boundary rules
- #ECE7DF — Watermark Ghost: Giant decorative brand typography running behind the lower transition
- #3E6B89 — Clinical Blue Dot: Category status dot for Solutions and soft badge backgrounds
- #4D7858 — Compliance Green Dot: Category status dot for Resources and security check iconography
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Georgia, Merriweather), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 48px heading-lg, 64px display. Tracking -0.02em at display, 0 at wordmark. The typographic tone is literary, sober, and unmistakably enterprise-grade. The serif display brings gravitas and medical legacy reminiscent of established scientific journals, stripping away typical SaaS flippancy. Paired with a neutral, highly legible sans-serif for UI utility, it communicates high compliance, human touch, and clinical safety.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated purely through planar layering and tint contrast rather than drop shadows. The surface relies on crisp 1px borders (#E8E3DB) and high-key background variations to define compartments. Buttons and inputs sit flat against the canvas with absolute edge clarity.
IMAGERY
Iconography is purely linear and minimal (stroke width 1.5px), held within low-contrast soft rounded squares tinted in muted pastels. Full photographic imagery is absent in this section, replaced entirely by bold typographic scale and regulatory trust emblems. Photography in this system must be documentary, warm-toned, and avoid clichéd clinical stock.
SIGNATURE DETAIL — the thing that makes this design itself
The monumental, ultra-faint serif brand watermark (#ECE7DF) spanning the width of the canvas right before the footer border. It bridges the action-oriented CTA block and the functional directory below, turning brand presence into an architectural texture without shouting. Misusing it involves making it too opaque, turning a quiet architectural whisper into distracting clutter.
MUST
- Use Newsreader or an equivalent high-character editorial serif for main value statements.
- Highlight impactful key phrases in headlines with the signature terracotta color (#BD3528).
- Anchor footer categories with tiny color-coded semantic dots (6px) aligned with header text.
- Maintain the warm linen background (#FAF8F5) continuously without introducing harsh pure white sections.
AVOID
- Never replace the warm linen canvas with sterile #FFFFFF or cold blue-gray backgrounds.
- Do not use high-drop shadows or heavy bevels; depth must remain flat and graphic.
- Never make the gigantic watermark high contrast; it must stay beneath 8% perceptual delta.
- Do not use generic pill-radius buttons; keep radii restrained between 6px and 8px.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
