Design a dark-mode website section: surgical operations orchestrated through deep midnight glass and glowing bio-emerald telemetry.
LAYOUT
The section adopts a two-row macro architecture inside a 1240px container. The top row splits 60/40 between the headline/summary lockup and dual CTAs. The middle zone is a strict 4-column timeline grid containing numbered tags, preview tiles, and column copy. The bottom is anchored by a full-width horizontally divided banner communicating trust pillars.
PALETTE (use these exact hex values)
- #070E12 — Deep Petrol Void: Root canvas background framing all content and cards
- #0D181D — Subsea Card Surface: Background fill for workflow tiles and bottom capability strip
- #091216 — Card Inset Dark: Nested pill containers, metric cards, and secondary buttons
- #182C34 — Subtle Cyan Stroke: 1px hairline borders on cards, buttons, and divider lines
- #00B86B — Bio Emerald Primary: Primary CTA fill, display heading accents, step counters, and status badges
- #E26538 — Amber Embers: Eyebrow badge dot, in-progress card highlights, and radar sparks
- #FFFFFF — Primary Snow: Display headings, active card titles, and high-emphasis labels
- #84969E — Muted Slate Blue: Body descriptions, inactive step numbers, and secondary icons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.02em at display, 0.01em at body. Plus Jakarta Sans delivers an assertive, highly engineered, enterprise-grade voice that feels both technical and human. The tight tracking at display sizes (-0.03em) creates an authoritative headline presence, while neutral numerals maintain dashboard clarity. Freely replaceable with Inter or General Sans without losing visual weight.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly planar and constructed via nested tonal values (Canvas #070E12 -> Card #0D181D -> Inset #091216). Edges are sharpened using hairline 1px borders (#182C34) rather than diffuse box shadows. Very restrained radial glow is allowed behind central orbital vectors to simulate luminescence without sacrificing structure.
IMAGERY
Visual assets are exclusively faux-UI schematics, radar wireframes, checklist components, and data sparklines rendered in matching palette colors. No photographic imagery, avatars, or decorative 3D models are permitted. Lines are crisp, 1-1.5px thick, with soft emerald and amber vector nodes.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline (crisp white transitioning to deep bio-emerald) positioned directly over a 4-step connected timeline of dark-mode UI micro-dashboards. Misusing it means making the second line a generic grey or using multi-color gradients instead of the solid emerald cutoff.
MUST
- Use emerald green (#00B86B) strictly for the primary CTA, the active step accent, and positive metric deltas.
- Maintain high contrast by keeping supporting body copy at #84969E against the #070E12 canvas.
- Pair every workflow stage card with its dedicated headline and 2-line description directly beneath it.
- Apply subtle 1px border strokes (#182C34) on all surface transitions to create crisp boundary definition.
AVOID
- Do not introduce pure white container cards; all surfaces must remain in the dark petrol/slate family.
- Do not use high-blur glowing dropshadows that muddy the crisp vector schematics.
- Avoid centering body copy under workflow cards; align text to the left margin of each column.
- Never use generic photography; every visual tile must be an abstract vector product schematic.
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 中尝试 
