Design a light-mode web interface screen: crisp sky-blue corporate utility paired with buoyant 3d clay assets and precision telemetry cards.
LAYOUT
The page opens with a top bar featuring a left logo, centered text links, and a prominent right action button. The hero section is an asymmetric two-column split: left column stacks an eyebrow pill, a massive two-line headline, body paragraph, twin CTAs, and a 3-part micro feature row; the right column frames the vertical 3D rocket. Below the hero fold sits a full-width 4-column KPI strip, directly followed by a three-card analytical grid spanning line telemetry, ranked items, and activity feeds.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Global application backdrop providing subtle contrast against bright white cards
- #FFFFFF — Surface Pure White: Card backgrounds, modal surfaces, and crisp foreground containers
- #1E60F0 — Orbital Cobalt: Primary CTA buttons, active states, sparkline trends, and primary icon containers
- #0F172A — Midnight Slate: Hero display headlines, metric numbers, and high-emphasis table values
- #64748B — Subtle Slate: Descriptive copy, subheadings, unselected navigation, and metric labels
- #10B981 — Growth Emerald: Positive delta badges, upward trajectory indicators, and green feature chips
- #F59E0B — Warm Amber: Conversion indicators, secondary product category icons, and attention dots
- #8B5CF6 — Violet Signal: System uptime badges, add-on tags, and activity feed markers
- #EEF2F6 — Card Border Tint: Fine outlines delineating dashboard cards, popover triggers, and dividers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative yet approachable, driven by geometric clarity, circular bowls, and tight character tracking (-0.03em) in display headings. The high x-height maintains supreme legibility across dense data tables, timestamps, and currency markers. If substituting, choose modern digital-native sans fonts like Plus Jakarta Sans or Inter over neutral neo-grotesques like Helvetica.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through soft, multi-layered diffuse drop shadows (0 12px 32px -4px rgba(15, 23, 42, 0.04)) rather than sharp borders. The 3D rocket introduces physical plastic realism with rendered directional lighting, casting subtle ambient light over fluffy white cloud billows. All structural cards sit comfortably on level 1 elevation with zero harsh occlusions.
IMAGERY
The imagery features a polished, stylized 3D rocket model with smooth clay/gloss finish rendered in bright white and sky blue, emitting a soft vertical propulsion glow. Fluffy, pillowy cumulus clouds anchor the bottom of the hero scene, establishing scale and whimsy. Photographic human portraits or flat wireframe illustrations would disrupt this hybrid tech-toy aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the dramatic transition from a playful, high-finish 3D rocket launching from soft clouds directly into a razor-sharp, white-card SaaS telemetry dashboard. The design feels both optimistic and hyper-functional. Misusing this pattern involves either flattening the illustration into plain vectors or allowing the 3D toy styling to invade the precision data cards below.
MUST
- Ground every large numerical value with a 12px descriptive label and an arrow-prefixed delta.
- Maintain uniform 16px corner radius across all analytics cards and metrics containers.
- Use 44px colored circular backplates for primary KPI metric icons.
- Keep card backgrounds strictly #FFFFFF over the subtle #F8FAFC canvas to retain crisp contrast.
AVOID
- Do not use dark, heavy borders; keep container dividers at #EEF2F6 or lower opacity.
- Do not apply 3D clay styling to functional icons or telemetry dashboard elements.
- Do not allow display font weights below 700 for the main hero heading.
- Do not use high-contrast black drop shadows; keep elevation blurs soft and blue-tinted.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试