Design a light-mode website section: calm editorial authority meets precision automation across an ivory canvas tethered to floating satellite telemetry.
LAYOUT
The viewport is organized into a clean 50/50 two-column asymmetric hero grid bounded within a 1240px container. The left column stacks vertically with intentional rhythmic gaps: announcement pill, headline, paragraph, dual-CTA cluster, micro-reassurance badges, and social proof. The right column holds a centered radial system where five telemetry cards orbit an isometric brand tile via fine radial guides.
PALETTE (use these exact hex values)
- #FAF8F5 — Porcelain Canvas: Global background color establishing warm tactile tone
- #FFFFFF — Pure Floating White: Background for floating feature cards, avatar rings, and secondary buttons
- #0E4338 — Heritage Emerald: Primary conversion button, key italicised headline phrases, and central hub motif
- #15574A — Forest Hover: Interactive state for primary action buttons
- #141716 — Ink Carbon: Primary display text, headers, and card titles
- #585C59 — Subtle Charcoal: Body copy, supporting metadata, and trust micro-copy
- #E8E4DD — Alabaster Border: Delicate borders on floating cards, secondary buttons, and orbital tracks
- #EBF6F2 — Mint Glaze: Background tint for match status chip and crosshair icon badge
- #E08338 — Amber Star: Review stars, application badge icons, and announcement pill spark icon
TYPOGRAPHY
Typeface Fraunces (or Recoleta, Newsreader, Playfair Display), weights 400/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 60px display. Tracking -0.025em. The typographic tone is bookish, prestigious, and radically self-assured. Fraunces brings the warmth and intellect of an old-world broadsheet or high-end magazine, tempered immediately by Plus Jakarta Sans which supplies contemporary SaaS clarity. If Fraunces is unavailable, substitute with Recoleta or Editorial New to preserve the lush, calligraphic italic terminal strokes.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through soft, dispersed multi-layer shadows on floating white elements against the warm ivory ground (0 8px 30px rgba(20, 23, 22, 0.05)). The 3D central hub introduces volumetric z-axis height via isometric extrusion and localized emerald light pooling. Satellite cards sit deliberately higher than the orbital baseline using clean optical detachment.
IMAGERY
Visual imagery is entirely graphic, diagrammatic, and product-focused without generic stock photography. Micro-portraits are limited to circular avatar badges representing real verified users in the social proof bar and application counts. The centerpiece is an isometric, stylized application icon surrounded by delicate schematic orbits and floating UI cards.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the lush, italicized emerald serif punchline ('You get interviews.') and the precise, mechanical orbital diagram floating beside it. It communicates that high-end, human-feeling professional outcomes are being quietly driven by systematic background computation.
MUST
- Pair the Fraunces display serif strictly with neutral, low-contrast sans-serif body copy.
- Reserve the emerald green (#0E4338) strictly for high-impact brand moments, primary CTAs, and pivotal italics.
- Render all orbital trajectory lines as thin 1px dashed or solid paths in #E8E4DD.
- Enclose icon containers inside telemetry cards within pale pastel squares with 8px corner radii.
AVOID
- Never replace the warm #FAF8F5 porcelain canvas with pure sterile #FFFFFF.
- Do not use dark backgrounds, high-saturation neon gradients, or futuristic cyber aesthetics.
- Avoid setting paragraph text or telemetry metadata in serif typefaces.
- Never apply hard black box shadows or heavy borders thicker than 1px to floating cards.
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 中尝试 
