Design a light-mode web interface screen: a soft ivory canvas cleaved by an organic midnight wave holding glowing operational telemetry.
LAYOUT
The viewport is organized as an asymmetrical split hero transitioning into a disciplined three-column baseline grid. The left 50% is reserved for generous white space, editorial display typography, and clear action triggers. The right 50% houses the fluid midnight backdrop containing UI artifacts and human figures, while the bottom span is anchored by a structured 3-part feature strip separated by hairline rules.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Light: dominant light background covering the primary reading zone and lower feature section
- #141923 — Workspace Midnight: curved graphic backdrop containing dashboard cards and product illustration
- #1E2634 — Card Surface Dark: elevated dashboard widget containers on the dark right panel
- #C85A48 — Terracotta Accent: primary interactive buttons, logo mark, eyebrow kicker, and active state pill
- #111827 — Deep Ink: hero display typography, logo text, and primary headings on light canvas
- #64748B — Slate Neutral: subordinate body text, metadata timestamps, and inactive navigation links
- #34D399 — Metric Mint: growth percentage text, positive trend tags, and online status indicators
- #60A5FA — Data Cyan: spline area chart line and primary telemetry indicators
- #E2E8F0 — Border Subtle: vertical dividers in the feature strip and card boundaries
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 16px body, 18px subheading, 24px heading, 64px display. Tracking -0.03em at display, 0.08em at eyebrow. Plus Jakarta Sans delivers a crisp, geometric, yet approachable executive tone. Its robust x-height and tight tracking (-0.035em) at large display sizes give the brand an authoritative architectural cadence without feeling rigid. If substituting, choose modern geometric sans fonts like Inter or Outfit that maintain sharp terminal endings and clean numerals.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 10px, buttons 12px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created primarily through chromatic contrast rather than physical layering. On the light canvas, elements sit entirely flat except for the primary button which casts a warm, low-opacity terracotta blur. In the dark region, widgets utilize soft 1px borders (#2B3545) and faint ambient shadows (0 12px 30px rgba(0,0,0,0.3)) to appear hovering over the midnight plane.
IMAGERY
Vector-based editorial character illustration combined with technical SaaS dashboard cards. Figures are rendered in flat gouache-style silhouettes with muted palettes (slate blue, warm terracotta, dark navy) interacting directly with glowing digital telemetry. Photorealistic imagery or generic corporate 3D clay figures would severely compromise the tailored editorial aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping, razor-sharp organic S-curve that bisects the canvas from top-center to bottom-mid, cleanly segregating light editorial brand messaging from a deep midnight operational console. Misuse often occurs when designers add a soft gradient blur along the edge, which destroys the crisp architectural tension between the two worlds.
MUST
- Retain the sharp vertical organic S-curve that cleanly separates the light canvas from the midnight visual zone.
- Use the terracotta tone (#C85A48) sparingly as an intentional accent thread across both light and dark regions.
- Ensure dark dashboard cards utilize subtle slate borders (#2A3444) rather than harsh outlines.
- Apply high-contrast ink headings (#111827) on the left light canvas with tight negative letter tracking.
AVOID
- Do not blur or feather the division between light and dark backgrounds; keep the boundary razor-sharp.
- Do not use generic blue for primary callouts; preserve terracotta as the sole high-intent action color.
- Do not crowd the illustration area; dashboard widgets must float with intentional negative space.
- Do not make the feature strip cards fully bordered boxes; rely on light vertical divider rules.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3200:2576. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
