Design a dark-mode website section: deep marine midnight panels lit by point-cloud cyan particulates and muted terracotta action triggers.
LAYOUT
The section starts with an asymmetric 2-column bento grid: a dominant wide hero card on the left (spanning roughly 60%) flanked by two stacked feature micro-cards on the right (40%). Below, a full-width footer is separated by ample negative space and a delicate horizontal hairline rule. The footer spans five clear vertical columns followed by a bottom legal strip with flex-between alignment.
PALETTE (use these exact hex values)
- #070d14 — Deep Ocean Void: Absolute canvas base color used for background and overall page frame.
- #0b1520 — Panel Slate Surface: Background fill for elevated feature and hero CTA card containers.
- #c24b48 — Terracotta Flame: Primary interactive call to action background on buttons.
- #2dd4bf — Bio Marine Cyan: Accent glow, point cloud particle streams, and feature icon outlines.
- #84cc16 — Algae Lime Tint: Secondary accent highlight within particle streams and hero title emphasis.
- #1e2c3d — Panel Border Subdued: Hairline 1px border stroke on cards, inputs, and divider rules.
- #ffffff — Pure White Text: High-emphasis headings, button text, and primary titles.
- #94a3b8 — Muted Slate Text: Body copy, secondary links, metadata, and form placeholders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,Geist), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 36px display. Tracking -0.02em on headings, +0.06em on uppercase tags. The typography is crisp, clinical, and institutional. A technical grotesque sans-serif (Inter match) conveys enterprise reliability and scientific rigor. It balances dense technical copy with generous display scale headings that feel authoritative yet restrained.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through tonal stratification rather than traditional drop shadows. Surfaces step from base dark (#070d14) to card containers (#0b1520), delineated solely by 1px crisp strokes (#1e2c3d) and background particle glows that illuminate edges.
IMAGERY
Visual assets consist of programmatic 3D particle systems and point clouds in bioluminescent cyan and lime against pure black voids. Imagery represents computer vision scanning volumes, sonar, and marine robotics; flat vector illustrations or realistic unaugmented farm stock photos are forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an organic bioluminescent point-cloud vortex (cyan-lime) emerging from pitch-black card surfaces, contrasted against warm terracotta-red CTA buttons. This pair firmly signals precision aquaculture robotics without ever displaying a generic fish illustration.
MUST
- Use solid terracotta (#c24b48) sparingly, reserving it exclusively for primary actions.
- Frame cards with subtle 1px border strokes (#1e2c3d) to separate dark planes from the abyss background.
- Incorporate generative point-cloud particle imagery in cyan and lime to represent computer vision.
- Maintain high typographic contrast: bright white for headlines, slate-gray (#94a3b8) for secondary text.
AVOID
- Do not use bright blue or generic SaaS gradients; lean strictly into bioluminescent cyan, lime, and terracotta.
- Do not drop heavy cast shadows; rely exclusively on 1px borders and slight tone changes for depth.
- Never use photography of literal fish or farms unless treated with robotics/point-cloud overlays.
- Avoid pill-shaped buttons for CTAs; use 8px rounded rectangles to maintain precision tech aesthetics.
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 中尝试 
