Design a light-mode website section: calm editorial precision where deep forest green elevates automated velocity against muted legacy friction.
LAYOUT
Asymmetric two-panel composition: the left third houses headline typography, subcopy, dual CTA buttons, and floating 3D logo iconography. The right two-thirds is dominated by the monolithic comparison table, centered around an elevated primary dark column. Beneath the entire split view, an ultra-fine divider anchors a horizontal four-up trust/value proposition grid.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Off-White: Global application background setting a warm, tactile, non-glare reading environment.
- #FFFFFF — Card White: Surface layer for comparison table container and secondary chip wrappers.
- #043B33 — Forest Primary: Primary brand shade for hero title, featured column fill, and main CTA button.
- #10B981 — Success Emerald: Circular check badges and positive validation signals inside the winning column.
- #E06A3B — Warning Ochre: Minus/dash icon pills indicating latency, manual toil, and legacy friction.
- #111827 — Text Heading: Primary labels, feature row titles, and competitor column headers.
- #6B7280 — Text Muted: Secondary feature descriptions, subheadlines, and competitor subtitles.
- #E5E7EB — Border Subtle: Horizontal rule dividers, icon chip borders, and table outline frames.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px heading-lg. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The voice is engineered, confident, and unapologetically direct. A high-clarity neo-grotesque (closely matching Inter Display or Plus Jakarta Sans) communicates surgical velocity and developer precision without feeling clinical. Tight tracking on display headlines keeps statements assertive, while relaxed line heights on secondary copy prevent visual fatigue.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is created by juxtaposing a luminous, softly shadowed white table container against an off-white plane, layered with a sunken dark forest pill that feels forward-floating. Shadows are diffuse and ambient (0px 20px 40px rgba(0, 0, 0, 0.05)) without sharp hard outlines. Isometric 3D frosted glass tiles on the lower-left add tangible physical dimension without cluttering data tables.
IMAGERY
A single hero illustration on the bottom-left shows stacked semi-translucent frosted glass tiles in soft isometric projection, crowned with an engraved brand glyph. Photographic elements are completely avoided in favor of crisp vectorial icon chips and matte 3D geometric hardware cues. Anything hand-drawn, sketch-like, or overly photorealistic is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated vertical 'evergreen pillar' — an inverted dark forest rounded column embedded directly within a light comparison matrix, punctuated with mint green circular check marks that effortlessly command visual dominance over muted legacy columns.
MUST
- Use deep forest green (#043B33) exclusively for the winning product column and primary hero interactions.
- Pair emerald checkmarks with white text inside dark cards, but use dark text on light rows.
- Render competitor latency with muted burnt-orange status discs to cleanly delineate failure states.
- Ensure table rows have generous 14-16px vertical padding to preserve scanning ease.
AVOID
- Do not use stark red or harsh warning tones; burnt orange (#E06A3B) is the maximum severity color.
- Do not add heavy borders or high-contrast grids across table columns; rely on subtle horizontal lines.
- Never make competitor columns dark or visually prominent; keep them stark white with muted gray text.
- Avoid sharp 0px corners; all interactive cards and pill indicators must maintain 8px to 16px radii.
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 中尝试 
