Design a dark-mode website section: clinical precision meets warm planetary atmosphere in a deep nocturnal telemetry layout.
LAYOUT
The composition follows a strict top-to-bottom binary hierarchy. The top half is an airy, center-aligned conversion chamber focused around a two-line title, two-line subcopy, and parallel CTA actions. Below, an abrupt horizon transition enters a structured 6-column asymmetric grid: brand monolith on the left, four equidistant link columns, and a right-aligned conversion subscription block, capped by a persistent legal bar.
PALETTE (use these exact hex values)
- #0A1E24 — Deep Petrol Base: Primary footer canvas background color delivering high contrast for dense metadata and links
- #F4EFE6 — Atmospheric Core Cream: Center highlight of the vortex backdrop in the upper CTA section
- #0C242A — Display Navy Slate: Dominant headline color on light backgrounds and hero typography
- #106869 — Marine Highlight: Accented display word 'confidence' and primary solid CTA button background
- #E87A53 — Terracotta Accent: Newsletter submission button providing sharp energetic contrast against nocturnal petrol
- #8AA3A9 — Subdued Slate Gray: Secondary copy, footer link columns, labels, and copyright metadata
- #16343C — Muted Petrol Border: Dividers, social link separators, and input box strokes in the footer
- #FFFFFF — Solid White: Footer wordmark, primary button text, and newsletter arrow icon
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px subheading, 16px body, 24px heading, 44px display, 60px heading-lg. Tracking -0.025em for display titles, 0 for body and links. Authoritative, crisp, and engineered. The choice of Plus Jakarta Sans (or Inter) provides a modern corporate infrastructure voice that balances technical rigour with high legibility at micro-scales (13px footer links). Substitution should favor grotesque typefaces with high x-heights and tight aperture tracking.
GEOMETRY & SPACING
Corner radii — cards 0px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 28px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
No simulated drop shadows or ambient blurs are placed on component containers. Depth is instead established through visual environmental atmosphere: an omnidirectional, luminous vortex gradient behind the CTA contrasting sharply with the flat, absorbing density of the deep petrol footer plate.
IMAGERY
The only graphic asset is an ethereal, swirling radial vortex displaying micro-grain noise, warm parchment luminance at the core, and teal-shadowed edges. Photography, 3D renderings, and illustrative cartoons are strictly absent, enforcing an enterprise infrastructure tone.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden vertical transition from a luminous, textured sand-to-teal atmospheric vortex CTA directly into a pitch-petrol (#0A1E24) directory footer, ignited by a solitary terracotta orange (#E87A53) micro-action button.
MUST
- Reserve the terracotta orange (#E87A53) exclusively for the newsletter submit trigger to guarantee visual hierarchy.
- Use tight negative tracking (-0.025em) exclusively on headings above 40px to preserve tight editorial solidity.
- Maintain high value contrast between the atmospheric CTA field and the pitch petrol footer baseline.
- Wrap utility indicators like minicor.com in full 999px pill geometry with 1px discrete borders.
AVOID
- Do not use generic gray or pure black for the footer; it must remain an oceanic deep petrol (#0A1E24).
- Never apply rounded pill borders (999px) to primary CTA buttons; buttons must remain clipped at 8px radius.
- Avoid multi-colored social icons; preserve monochromatic typography-based monograms with vertical rules.
- Do not introduce drop shadows on buttons or cards; depth is achieved solely through atmospheric background luminance.
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 中尝试