Design a light-mode website section: warm cream minimalism anchored by a chromatic fan diagram and precise workflow nodes.
LAYOUT
Asymmetric two-column split. The left column (approximately 45% width) holds the announcement badge, compressed multi-line display headline, explanatory paragraph, dual CTA buttons, and bottom three-part value proposition. The right column holds the expansive spectral graphic with branching data nodes.
PALETTE (use these exact hex values)
- #FBF9F4 — Parchment Canvas: Primary background for the entire hero canvas and page wrapper.
- #FFFFFF — Node Elevation White: Floating interactive pipeline cards and connector path outlines.
- #121316 — Ink Obsidian: Headings, logo wordmark, and primary button background.
- #5E5D5A — Faded Charcoal: Sub-headline text, secondary navigation links, and card descriptions.
- #DE4330 — Friction Coral: Highlight text for friction phrase and announcement badge sparkle.
- #E3DFD7 — Hairline Sand: Outlines on secondary buttons, badge borders, and light separation strokes.
- #0D2B45 — Spectrum Indigo: Deep trailing edge of the radial background process fan.
- #F4D03F — Spectrum Solar: Central luminous arc within the radial background fan visualization.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. Modern editorial geometric sans. It projects technical competence without the cold sterility of typical developer tools, blending razor-sharp kerning with rounded, human apertures.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled sparingly. The primary canvas is completely flat, while floating workflow nodes cast soft, ambient drop shadows (0 10px 30px rgba(0, 0, 0, 0.07)) to lift them distinctly over the rich color spectrum fan.
IMAGERY
Abstract geometric visualization replacing traditional product screenshots. It relies on a dense array of vertical color-calibrated laths creating an expansive circular sweep, overlaid with high-precision UI nodes. Photography is strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-lath chromatic spectrum fan with white bezier node branches running directly across its center. It is used to instantly communicate complex process harmonization. Misusing it involves replacing the complex color gradient with flat solid fills or muddying the white bezier paths.
MUST
- Keep the canvas background warm cream (#FBF9F4) rather than clinical sterile #FFFFFF.
- Use tight negative letter tracking (-0.035em) on display headings to maintain editorial authority.
- Reserve the vivid coral (#DE4330) strictly for words denoting friction, delay, or key accents.
- Render workflow connector lines in clean white against the vibrant spectrum visual.
AVOID
- Do not use generic blue gradients; use the structured multi-stop chromatic fan curve.
- Do not apply dark background themes to the page wrapper or compromise the paper-like warmth.
- Do not round buttons into full pills; preserve the modern 8px rounded rect geometry.
- Do not introduce colored outlines around white workflow node cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试