Design a light-mode website section: crisp clinical white with deep forest accents and gentle glowing workflow nodes.
LAYOUT
The top hero section is a two-column 50/50 balance: left column handles typography, eyebrow kicker, value proposition, and twin CTAs; right column holds a spacious 5-node interactive workflow diagram. Below this, a faint horizontal line demarcates a standard 6-column footer grid: left column features brand mark and compliance badges, center four columns host link trees, and right column hosts email capture and social handles.
PALETTE (use these exact hex values)
- #ffffff — Pure White: dominant background canvas and pill surfaces
- #114238 — Deep Forest Green: primary CTA button fill, logo badge, and primary accent endpoints
- #34d399 — Emerald Mint Glow: workflow diagram connecting lines, central card border, and backdrop glow
- #0f172a — Charcoal Black: hero headline, section column titles, and bold brand wordmark
- #64748b — Slate Body Muted: body description text, footer navigation links, and copyright notices
- #e2e8f0 — Subtle Border Line: input borders, tag container outlines, and horizontal section divider
- #f8fafc — Card Surface Subtle: compliance badge surface and input placeholder background
- #f59e0b — Safety Amber: security lock indicator accent on the workflow graph
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 48px display. Tracking -0.03em at display, 0 at body, 0.08em at uppercase tags. The typography relies entirely on a modern, ultra-clean neo-grotesque sans-serif (Inter or equivalent). It balances clinical authority and modern developer-first clarity with tight negative display tracking and legible, open-aperture body styles. Any substitute must be an unadorned, neutral geometric sans.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through layered white cards on white canvases separated by gentle blur halos and subtle borders. Floating diagram cards feature a very soft drop shadow (0 12px 24px -4px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02)). The central process node is highlighted by an ambient mint-green radial backlight.
IMAGERY
The visual language rejects generic human photography in favor of a schematic diagrammatic workflow: clean vector nodes, stylized tech glyphs (database, pen, paper plane, shield), and directional connector paths. All iconography is thin-line monoline vector in dark forest or slate.
SIGNATURE DETAIL — the thing that makes this design itself
The central active node badge (dark forest green circle icon inside a mint-bordered white pill, surrounded by a soft radial mint-green atmospheric aura and connecting dotted wires to adjacent processing cards). Using this correctly requires keeping the canvas empty of other loud graphics so the workflow glow functions as the sole focal anchor.
MUST
- Use solid white (#ffffff) as the overarching background to maintain a sterile, high-credibility healthtech aesthetic.
- Limit accent colors to emerald green (#114238, #34d399) with only rare micro-accents like amber (#f59e0b) for alerts or locks.
- Maintain high contrast on headings with tight letter-spacing (-0.03em) on display sizes.
- Enclose complex technical integration steps inside uniform rounded white cards with soft shadows.
AVOID
- Do not use harsh, opaque drop shadows; keep elevation gossamer-light and diffuse.
- Avoid loud gradient fills on buttons; primary actions must remain flat, deep forest green.
- Do not use pure black (#000000) for body copy; always use slate (#64748b).
- Never drop the connecting dotted and solid workflow lines when visualizing automation logic.
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. Try in DraPub