Design a dark-mode website section: deep devtool obsidian illuminated by fluted amber glow and precision telemetry.
LAYOUT
The composition follows a two-tier stacked structure. The upper tier is a high-impact conversion hero split 50/50 between a left-aligned typographic value proposition with dual action buttons and a right-aligned live API terminal window. Below this sits a comprehensive six-column footer containing brand metadata, status telemetry, four categorized navigation link stacks, and a dedicated newsletter form, terminating in an edge-to-edge legal disclaimer bar.
PALETTE (use these exact hex values)
- #060810 — Obsidian Abyss: Primary solid page canvas for the footer and underbelly of the interface
- #0d111c — Midnight Surface: Translucent background fill for code cards, input containers, and social icon buttons
- linear-gradient(90deg, #f95721 0%, #db2777 100%) — Ember Flame Gradient: High-visibility conversion buttons, submit icons, and brand logomark ribbon
- #ea580c — Amber Monogram: CLI prompt symbol ($) and footer column header chevron indicators
- #22c55e — Operational Emerald: Live system status indicator dot within telemetry verification badges
- #ffffff — Pure White: Display headlines, active input text, and high-emphasis labels
- #8b949e — Slate Fog: Body copy, footer navigation links, secondary labels, and copyright notices
- #1e2638 — Hairline Border: Structural dividing rules, card borders, and input field strokes
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.025em at display, -0.01em at body. The typography speaks with authoritative, engineering-grade clarity. The pairing of a tight, ink-trapped grotesque (Inter match) with an uncompromising developer mono (JetBrains Mono match) signals high-throughput reliability suitable for healthcare infrastructure. The tight negative tracking on display headings creates a dense, decisive editorial presence.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical glow, background texture luminance, and hairline strokes rather than box-shadows. Elevated panels such as the code window and input fields use dark translucent surfaces (#0d111c with alpha) edged with 1px borders in #1e2638. The background itself transitions from an intense back-lit vertical fluting on the left into pitch obsidian on the right.
IMAGERY
The dominant visual element is an architectural 3D background featuring tight vertical fluted/pleated wall geometry lit from the left edge by an intense glowing amber-red light source. Imagery is strictly non-photographic of people, focusing instead on physical textures rendered digitally and high-fidelity code/data representations. Realistic photos or playful illustrations would completely break the enterprise-developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the combination of the warm amber-red directional rim light catching the 3D fluted texture behind a floating, ultra-sharp code inspector card. This juxtaposes organic architectural warmth with clinical developer syntax, rescuing a standard dark-mode layout from looking sterile.
MUST
- Anchor code snippets inside high-contrast translucent cards with 1px hairline borders.
- Pair terminal-style prompt pills with bold display typography for developer authority.
- Use warm orange-to-magenta gradients strictly on conversion points and primary accents.
- Place small amber chevrons ('>') next to category titles in the multi-column footer.
AVOID
- Do not use flat bright backgrounds; the identity requires deep obsidian and navy tones.
- Never drop the directional fluted texture in the CTA section for flat fills.
- Do not round buttons beyond 8px; avoid full pill shapes on primary action buttons.
- Never use serif typefaces anywhere in this technical developer interface.
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