Design a light-mode web interface screen: structured executive clarity grounded by warm terracotta accents and soft isometric office architecture.
LAYOUT
The screen follows a clear horizontal split hero anchored within a max-width 1280px frame. The upper band is occupied by a lightweight utility header, transitioning to a two-column 50/50 hero: copy stack and micro-features on the left, sprawling isometric environment on the right. Anchoring the bottom of the canvas is a persistent, four-column horizontally segmented value bar creating a solid visual baseline.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary background for the application card and main reading surface.
- #f1f5f9 — Illumination Tint: Soft neutral fill defining the organic backdrop shape behind the isometric art.
- #d04933 — Terracotta Red: Primary conversion pill buttons, prominent icon strokes, and eyebrow accent typography.
- #131b26 — Executive Navy: Primary headings, brandmark container, and high-emphasis display type.
- #667085 — Slate Neutral: Body descriptions, navigation links, and subordinate subtext.
- #e2e8f0 — Muted Border: Hairline card borders and vertical column dividers in feature bands.
- #e8f5e9 — Mint Sage: Background container for efficiency and task-oriented icon badges.
- #e0f2fe — Glacier Sky: Background container for scheduling, calendar, and analytics icon tiles.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Gilroy, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.08em at uppercase tags. Plus Jakarta Sans delivers an unmistakable sense of modern institutional precision. Its exaggerated large apertures and tight tracking at display weights give 'Business Meetings' an authoritative, executive character. When dropped to 11px-14px for body and metadata, the tall x-height preserves effortless legibility without appearing clumsy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated through architectural layering rather than diffuse blur shadows. The canvas rests inside a soft ambient frame, while the hero illustration relies on precise axonometric isometric occlusion and multi-tiered desk platforms. Floating cards and icon backplates utilize flat pastel fills with minimal 1px borders (#e2e8f0) to retain an editorial, crisp feel.
IMAGERY
The visual anchor is a detailed isometric vector render of a modern collaboration office featuring stylized figurines, dual-curved dashboard displays, stacked modular workstations, and potted greenery. Surfaces within the graphic repeat the brand's terracotta, navy, and sky accents. Hyper-realistic 3D, photorealistic renders, or messy flat vectors would thoroughly clash with this disciplined axonometric language.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive hallmark is the pairing of a multi-tiered, striped isometric desk system with the docked, quadruple-segmented feature bar at the canvas baseline. To implement it faithfully, construct an asymmetric tinted underlay behind the 3D graphic and align the bottom card exactly to the grid margins with vertical hairline dividers separating each pastel icon cluster.
MUST
- Keep primary callouts and button fills strictly in terracotta #d04933 to maintain precise focal hierarchy.
- Ensure all primary button treatments use pure pill geometries with 999px corner rounding.
- Pair heavy 56px display titles directly with crisp, highly-legible 14px body text at 1.55 line height.
- Use soft tinted background rectangles (8px radius) for micro-icons to create soft semantic anchors.
AVOID
- Do not introduce competing saturated primary colors like cobalt blue or emerald for conversion elements.
- Do not use sharp 0px corners on interactive buttons or icon badges.
- Do not allow the isometric illustration to sprawl across the left typographic half of the canvas.
- Do not set body copy in heavy font weights; maintain 400 regular for maximum white space breathability.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2352. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
