Design a light-mode website section: radiant isometric glass architecture anchors clean developer infrastructure on an airy, ambient-lit canvas.
LAYOUT
The layout is constructed as a two-column 1280px hero container flanked by an airy perimeter. The left column (spanning ~45% width) holds the text hierarchy: announcement pill, 56px headline, descriptive paragraph, dual CTAs, and a performance badge. The right column (spanning ~55% width) stages the visual diagram with the glowing isometric stack at center, surrounded radially by five squircle integration nodes and anchored at the bottom right by an overlapping dark terminal window. A multi-column metric bar stabilizes the bottom edge.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary layout canvas and card background fill.
- #F1F5FD — Peripheral Lavender Mesh: Soft atmospheric glow mapped onto canvas margins and diagram perimeter.
- #0F172A — Ink Navy: Hero display text, logo, terminal background, and primary dark button.
- #64748B — Muted Slate: Subheaders, body descriptions, code line numbers, and secondary node labels.
- linear-gradient(135deg, #6366F1 0%, #A855F7 45%, #F43F5E 100%) — Headline Spectral Gradient: Emphasized target text 'Property Management' in the hero title.
- #6366F1 — Electric Indigo: Status badge indicators, connector line highlights, and ambient wafer reflections.
- #0B1120 — Terminal Surface: Deep navy background container for the interactive API code simulator.
- #E2E8F0 — Border Subtle: Hairline 1px stroke around secondary buttons, pills, and node cards.
- #10B981 — Emerald Success: Terminal 200 OK status badge and agent deployment indicator.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading-lg, 56px display. Tracking -0.02em at display, 0em at body. The typography is clean, authoritative, and developer-first, projecting precision engineering through Plus Jakarta Sans (or Inter). The heavy 800-weight display size gives monumental weight to the product thesis while maintaining strict legibility. JetBrains Mono provides technical authenticity inside code contexts and micro-badges.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through layered translucency and soft atmospheric light rather than heavy dark shadows. Elevated items such as the service nodes and code card cast very diffuse, low-opacity shadows (0 12px 32px rgba(15, 23, 42, 0.06)). The central isometric glass wafers utilize internal luminous edge glows and light refraction to separate vertical layers without opaque occlusions.
IMAGERY
The imagery language relies strictly on bespoke 3D isometric glass representations and precise vector schematics. The central motif is an illuminated tiered wafer stack glowing with internal chromatic violet-to-coral light, surrounded by delicate traced circuit paths. Photographic elements and cartoonish illustrations are strictly avoided in favor of high-fidelity spatial glassmorphism.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the radiant, multi-layered isometric glass wafer stack at the core of the hub-and-spoke diagram. It channels chromatic purple-to-amber lighting through frosted translucent planes, radiating out to peripheral service nodes. Misusing this signature involves flattening the 3D planes into 2D solid icons or oversaturating the canvas with heavy background gradients, which destroys the delicate glass optical illusion.
MUST
- Restrain vivid color exclusively to the key focal point: the headline gradient and central glass isometric wafers.
- Use strict 10px border-radius on action buttons and 999px on status/trust chips.
- Keep connecting diagram lines thin (1.5px) and colored in soft periwinkle (#C7D2FE) with smooth bezier curves.
- Maintain high contrast on the code terminal using deep obsidian navy (#0B1120) against the white canvas.
AVOID
- Do not fill the entire canvas with dark mode or harsh saturated gradient backgrounds.
- Do not use sharp 0px corners on interactive buttons or service nodes.
- Do not apply drop shadows to primary text or headlines.
- Do not mix multiple gradient directions; keep the spectral text gradient consistent at 135 degrees.
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 中尝试 
