Design a light-mode website section: sculpted porcelain callout card hovering gracefully over an ink-black telemetry base.
LAYOUT
The vertical composition is divided into two distinct tonal halves. The top portion is an open, centered marketing card flanked by orbit satellites, leading with a pill badge, two-tone display headline, description, and dual actions. Below, the page transitions immediately into a dark, multi-column grid containing brand bio, four link columns, newsletter signup, and horizontal legal sub-bar.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Light: ambient background behind the elevated cta card
- #FFFFFF — Card Surface: primary container surface for the floating cta
- #0B132B — Midnight Ink: foundation surface for the structured footer section
- #2563EB — Electric Cobalt: primary cta buttons, logo accents, highlighted text, and submit icons
- #0F172A — Primary Text Light: headlines and high-emphasis labels on light surfaces
- #64748B — Muted Slate: subheadings, descriptive body paragraphs, and footer copyright
- #F8FAFC — Footer Text Active: column headings and white labels on dark surfaces
- #94A3B8 — Footer Text Link: link lists and metadata within the dark footer
- #1E293B — Field Border Dark: borders on footer newsletter inputs and separator lines
- #ECFDF5 — Telemetry Mint: background for the floating pulse stat orb
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 15px subheading, 18px body-lg, 24px heading, 52px display. Tracking -0.03em on display, 0 on body. The typographic tone is authoritative, clean, and modern athletic-tech. Rendered in a neo-grotesque sans-serif with tight display letter-spacing, the large display header reads with crisp urgency, softened only by the balanced, spacious line height in descriptive body copies.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, airy density.
DEPTH
Depth is created via soft, atmospheric layering rather than harsh borders. The upper white card uses a diffuse low-contrast drop shadow (blur radius 40px, opacity 5%) to float over the slightly grey canvas, while the blue button projects an intense vibrant blue cast shadow (blur 24px) for tactile affordance.
IMAGERY
Visual interest is driven purely by iconography and abstract telemetry points rather than human imagery. Circular satellite badges containing clean line icons (heart rate pulse, bluetooth, lightning bolt, chart bars) rest on faint dashed orbital paths, evoking biometric measurement.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the floating porcelain card bordered by ghosted telemetry satellites on dashed orbital paths, positioned directly atop an ink-black footer shelf. Misusing this pattern usually involves cluttering the satellites with heavy backgrounds or breaking the tonal split between the upper card and the dark footer.
MUST
- Retain the sharp contrast split between the white CTA card and the midnight footer.
- Use colored glow shadows strictly under the primary electric blue CTA buttons.
- Highlight key verbs in headline displays using brand blue (#2563EB) against black.
- Keep footer column headers in white (#F8FAFC) and standard links in muted slate (#94A3B8).
AVOID
- Do not extend the dark midnight background up into the primary CTA card.
- Do not use sharp 0px or pill 999px radii on standard call-to-action buttons.
- Avoid heavy dark borders on the white floating CTA container.
- Do not saturate footer link text; keep links subdued until hover.
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 中尝试 
