Design a light-mode web interface screen: warm editorial magazine elegance fused with precision saas utilities in deep midnight slate and cobalt blue.
LAYOUT
The interface operates on a fixed two-zone structure: a 240px utility sidebar on the left, and a multi-tiered editorial canvas on the right. The canvas initiates with an asymmetrical hero section (arch image left, two-tone text and resources right), transitions through a full-width dark slate banner to reset visual fatigue, and settles into an orderly three-column card catalog below.
PALETTE (use these exact hex values)
- #F8F9FB — Canvas Background: Global application page surface behind all workspace content and layout columns.
- #FFFFFF — Pure White Surface: Sidebar background, content card bodies, circular metric badge, and secondary button fills.
- #141E30 — Midnight Slate: Dark feature hero section background providing high-contrast visual weight.
- #2563EB — Cobalt Blue: Primary interactive buttons, eyebrow category pills, progress meters, and active icon accents.
- #EFF6FF — Active Nav Tint: Background pill fill for the currently active sidebar navigation item.
- #0F172A — Obsidian Slate: Primary headings, title locks, and strong data readouts across light surfaces.
- #64748B — Cool Slate: Body copy, secondary navigation labels, metadata tags, and muted subheadings.
- #E2E8F0 — Hairline Border: Subtle card outlines, section dividers, and icon button stroke borders.
- #10B981 — Emerald Growth: Positive metric tags, growth trend icons, and dark-card eyebrow highlights.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.03em at display, 0.05em at uppercase eyebrows. The typographic tone is intellectual, structured, and confident, balancing creative magazine prestige with modern software utility. Plus Jakarta Sans handles both high-character editorial headings through tight negative tracking and utilitarian dashboard figures through clean geometric proportions. Inter or General Sans can be substituted without compromising layout cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled almost entirely through planar stacking and crisp hairline borders rather than heavy blur shadows. Where elevation exists—such as the floating circular metric badge—it relies on a faint, wide-dispersion ambient shadow (0 10px 30px rgba(15, 23, 42, 0.08)). Surface changes from white to off-white and dark slate provide architectural depth without muddy overlays.
IMAGERY
Photography follows an architectural, warm-minimalist editorial direction reminiscent of Kinfolk or Cereal magazines. Images highlight warm linen textures, ceramics, subtle sunlight, and focused creative professionals in candid postures. 3D renders, neon graphics, and generic corporate stock are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of the architectural Roman arch photo mask paired beside a split-tone display heading (bold obsidian atop softened slate). To execute correctly, ensure the image container curves deeply at the top (180px–200px) while maintaining standard 16px rounded corners at the bottom. It is commonly misused by applying the curve to all four corners, turning an architectural vignette into an unrefined generic pill.
MUST
- Use the signature rounded arch mask (top radius 180px, bottom radius 16px) exclusively for primary hero imagery.
- Split large display headings across two lines using high-contrast color values: bold obsidian on top, muted cool slate below.
- Frame secondary features in rich midnight slate (#141E30) to create dynamic page tempo and visual grounding.
- Set category eyebrows to uppercase, tracking at +0.08em in either cobalt blue or emerald green.
AVOID
- Never apply the top-arch masking curve to all four corners; keep the bottom edge grounded with a 16px radius.
- Avoid loud gradient backgrounds; keep surfaces flat, crisp, and high-key editorial white or slate.
- Do not use dark text inside the Midnight Slate feature block; retain pure white and light cool-blue tints.
- Never use fully rounded pill shapes for primary action buttons; enforce an 8px radius.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
