Design a dark-mode website section: deep space telemetry with biophotonic emerald glow and warm thermal atmospheric wash.
LAYOUT
The canvas begins with a vertically centered, high-impact CTA block that spans the full viewport width, anchored by dual action buttons and a row of trust chips. Directly beneath, a subtle 1px border establishes the footer boundary. The footer organizes content into a left-aligned brand block, four categorical link columns, and a right-aligned newsletter capture field, closing with an operational status bar and legal baseline.
PALETTE (use these exact hex values)
- #060B11 — Obsidian Base: Deepest foundation background across the entire viewport
- #080E17 — Footer Dark: Footer section solid surface base below the atmospheric divider
- #4ADE80 — Mint Emerald: Primary CTA fill, headline accent, status beacons, and active micro-highlights
- #E64A19 — Deep Thermal Glow: Atmospheric blurred edge gradient emerging from the right horizon
- #004D40 — Deep Cyan Glow: Subtle ambient vignette on the left CTA background
- #1E2C3D — Subtle Border Slate: 1px hairline borders for outline buttons, inputs, chips, and horizontal rules
- #FFFFFF — White Display Text: High-contrast headings, main logo title, and button icons
- #94A3B8 — Muted Slate Text: Supporting descriptive text, column header overlines, and footer body
- #64748B — Dim Slate Text: Secondary footer links, privacy disclaimer notes, and copyright text
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 22px heading, 42px display. Tracking -0.03em at display, 0.05em on tracking tags. The typographic tone is architectural, technical, and ultra-precise, evocative of mission-critical developer platforms like Okta or Vercel. Inter or Geist Sans provides neutral geometric authority, allowing the emerald keyword emphasis to deliver the emotional punch. If licensing alternatives are needed, Plus Jakarta Sans preserves the geometric legibility and round letterforms.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly planar and optical rather than skeuomorphic. Subtle layered depth is generated through ambient linear mesh glows falling behind crisp, flat foreground cards and hairlines. No cast shadows (box-shadow) exist; boundaries are defined purely by 1px stroke contrasts (#1E2C3D) over deep base surfaces (#060B11).
IMAGERY
The interface avoids photographic or illustrative assets entirely, relying solely on atmospheric ambient gradients and minimalist vector glyphs. Icons are uniform 16px geometric line-art paths matched to typography metrics. Any introduction of saturated 3D renders or generic photography would break the high-precision developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric atmospheric horizon: a deep obsidian sky illuminated by a cool cyan glow on the left and an incendiary warm orange heat wash on the right, punctuated centrally by vibrant spring emerald (#4ADE80) typography. If replicated, keep the orange bloom soft and far to the edge; over-saturating or centering the warm gradient destroys the dark telemetry aesthetic.
MUST
- Reserve #4ADE80 green strictly for interactive primary targets and positive verification marks.
- Maintain the asymmetric ambient backlight with teal/cyan on the west edge and warm orange on the east edge.
- Enforce a 1px #1E2C3D border on interactive dark surfaces like text inputs and outline pills.
- Keep display headings tightly tracked (-0.03em) and set at least 2.5x larger than body text.
AVOID
- Do not saturate the entire background with gradient; restrict glows to subtle edge falloffs.
- Do not use high-contrast white text for body paragraphs or secondary links.
- Do not use sharp 0px or rounded 999px pills for standard buttons; stick to 8px rounded corners.
- Do not add drop shadows to cards or inputs; rely strictly on 1px translucent borders.
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