Design a light-mode web interface screen: deep navy administrative framing surrounding an airy, pastel-tinted legal intellectual property cockpit.
LAYOUT
Rigid two-pane layout beginning with a fixed-width dark navigation rail (approx. 240px). The main area presents a sticky utility header (search bar, notification bell, action button) followed by an asymmetrical welcome hero containing text on the left and a hero illustration on the right. Below sit a 4-column metric grid, a split 2:1 data visualization row (trend chart beside donut chart), and a full-width dense tabular registry concluding with a bottom support callout bar.
PALETTE (use these exact hex values)
- #0B1528 — Sidebar Midnight: Primary background for the persistent vertical navigation bar
- #F8F9FC — Canvas Background: Main dashboard background framing floating white card surfaces
- #FFFFFF — Surface Pure White: Background for dashboard metric cards, charts, and data tables
- #C84B31 — Terracotta Accent: Primary call-to-action button, notification badges, and urgent highlights
- #3B5BFD — Electric Cobalt: Hero greeting, chart trend line, selected nav states, and link text
- #111827 — Ink Navy Heading: High-contrast headings, main metrics, and table title rows
- #6B7280 — Muted Slate Text: Secondary labels, table timestamps, and inactive sidebar links
- #EDF0F5 — Card Border: 1px hairline borders bounding cards, inputs, and table rows
- #10B981 — Emerald Success: Positive delta trends and registered status pill accents
- #F59E0B — Amber Warning: Review states, pending metrics, and musical works category tags
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 24px heading, 32px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers a clean, modern, administrative precision with subtle quirky humanist touches in the alternates. Its tight aperture and crisp geometry provide legibility across numeric data tables while maintaining warmth and approachability in the display heading.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is restrained and architectural rather than floating. Surfaces rely on crisp 1px borders (#EDF0F5) separating pure white (#FFFFFF) from canvas gray (#F8F9FC), supplemented only by minimal 0 2px 4px rgba(11,21,40,0.03) shadow on elevated interactive tooltips and modals.
IMAGERY
Vector editorial illustrations rendered in flat cobalt, lilac, and mustard tones with subtle paper-sheet textures and floating decorative geometric confetti. The subject matter depicts stylized human figures interacting with oversized copyright seals and legal documentation; stock photographic imagery is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ink-navy architectural rail (#0B1528) with a terracotta primary action (#C84B31) and soft pastel categorical pills. This distinct trio keeps the app feeling like high-end legal fintech rather than standard SaaS. It is compromised if the dark rail is replaced with white or if status pills use harsh primary fills.
MUST
- Ground the interface with the heavy dark navy sidebar to give light content cards visual tension.
- Use warm terracotta (#C84B31) exclusively for primary conversion buttons and high-priority indicators.
- Pair colored category badges with subdued backgrounds at roughly 10% opacity of their text color.
- Maintain consistent 14px border radii on all content surfaces and chart cards.
AVOID
- Never use pure black (#000000) for text or panels; use #0B1528 for darks and #111827 for ink.
- Do not omit the soft 1px border on white cards over the #F8F9FC background.
- Avoid high-saturation fills on status tags; always use pastel-tinted chips with darker text.
- Do not clutter metric tiles with heavy drop shadows; rely on border definition and micro-tint icons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
