Design a light-mode website section: monumental brand typography over crisp white paper grounding directly into an uncompromising deep obsidian footer.
LAYOUT
Asymmetric two-column hero composition where the left two-thirds holds the monumental typography, headline, subcopy, and dual CTAs, while the right third stacks concise feature proof points. The lower viewport instantly transitions into a full-width dark five-column sitemap topped with an inline newsletter capture unit and anchored by a slim legal bar.
PALETTE (use these exact hex values)
- #fafafa — Canvas Light: Primary background for the hero CTA section, creating maximum contrast with heavy typography.
- #0a0a0c — Obsidian Ground: Solid foundation color for the multi-column sitemap footer and legal strip.
- #0b63f6 — Action Cobalt: Primary interactive button fill for high-intent conversion actions and submit triggers.
- #111113 — Pure Charcoal: High-contrast headings, main display titles, and brand wordmarks on light surfaces.
- #5e6068 — Slate Body: Secondary descriptive copy, subheadings, and supporting feature text.
- #9e9ea6 — Footer Muted Text: Footer navigation links, descriptive text, and secondary copyright statements.
- #1f2026 — Dark Border: Delicate separation lines, input outlines, and icon badge borders in dark mode.
- #f1f3f6 — Subtle Pill Surface: Background tone for top pill badges and icon container tiles in the hero.
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 36px heading, 120px display. Tracking -0.035em at display, -0.01em at body, 0.01em at captions. Inter Display (or Geist) brings hyper-rational, Swiss-modernist authority to clinical software. Its tight apertures and heavy weight in the 120px mark feel authoritative and engineered, while crisp body scaling preserves legibility even down to 12px legal disclaimers.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 100px between sections, 1240px container, comfortable density.
DEPTH
Elevation is completely flat and planar. No atmospheric drop shadows or layered translucent surfaces are present. Depth is created strictly through extreme value contrast—the pure white hero plane abruptly cutting to the dense black footer.
IMAGERY
Iconography is thin, monolinear, and clinical (1.5px stroke weight, enclosed within soft rounded-square glyph tiles). Vector dot grids in the upper-right corner provide subtle atmospheric texture without introducing photographic or illustrative distraction.
SIGNATURE DETAIL — the thing that makes this design itself
The massive, unapologetic brand name rendered as an immovable typographic anchor directly above the value proposition headline, instantly grounding the product's stature before a single feature is read. Misusing this requires shrinking it to a standard navbar logo size, which drains the layout of its confidence.
MUST
- Keep hero typography aggressively scaled with negative tracking on the display logo.
- Maintain strict separation between the light upper section and dark lower footer.
- Reserve vibrant cobalt blue (#0b63f6) strictly for primary forward actions and triggers.
- Use light gray rounded squares (44x44px, 10px radius) for supporting benefit icons.
AVOID
- Never apply drop shadows or elevated card borders in the hero area.
- Do not dilute the electric blue action color across non-clickable interface elements.
- Avoid centering the hero copy; maintain strict flush-left typographic alignment.
- Never use serif fonts or playful display scripts in this clinical B2B system.
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 
