Design a dark-mode web interface screen: deep-space sovereign legal intelligence rendered through luminescent cyan telemetry and disciplined dark slate architecture.
LAYOUT
Structured around a persistent left rail (approx 240px wide) housing vertical navigation and the compliance meter. The primary canvas divides into a 65/35 split: the left center holds the hero banner and dense legislative ledger, while the right rail stacks global metric quads, the regulatory donut chart, and real-time updates.
PALETTE (use these exact hex values)
- #070d18 — Deep Space Canvas: underlying root background across all views and navigation panels
- #0d1a2d — Obsidian Panel: background fill for all major modular dashboard cards and containers
- #172a45 — Hairline Border: structural 1px card and table row divider lines
- #38c9f0 — Luminescent Cyan: primary call-to-action buttons, active navigation markers, and headline emphasis
- #ffffff — Optic White: primary metrics, active headers, and essential legal legislation names
- #7e92b0 — Slate Steel: secondary metadata, table headers, breadcrumbs, and subtitle copy
- #10b981 — Compliance Emerald: enacted legislation badges, favorable donut segment, and positive compliance status
- #f43f5e — Risk Crimson: high-risk indicator badges, prohibited regulatory classifications, and alert icons
- #f59e0b — Caution Amber: pending updates tally, document icons, and review-required tags
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 38px display. Tracking -0.03em at display, 0.01em at caption. The voice is analytical, authoritative, and frictionless, driven by clean neo-grotesque type geometry. Inter or Plus Jakarta Sans provides immediate illegibility at micro sizes like 11px table tags while remaining commanding at 38px display scales.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 20px between sections, 1440px container, comfortable density.
DEPTH
Depth is created entirely through luminescent edge contrast rather than drop shadows. Surface separation relies on 1px borders in #172a45 set against the #070d18 canvas, while active states emit a soft localized cyan glow with zero hard shadow blur.
IMAGERY
Visual assets are strictly schematic and synthetic, typified by the holographic particle-dot 3D globe with glowing orbital traces. Real-world photography, corporate illustrations, or playful icons are strictly excluded in favor of technical vectors and precise country flags.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline pairing optic white with glowing electric cyan ('Cryptocurrency Legislation') set against a translucent, particle-dotted holographic globe, anchoring high-stakes legal compliance in modern sci-fi fintech aesthetics.
MUST
- Keep card backgrounds strictly at #0d1a2d with precise 1px borders in #172a45.
- Use electric cyan (#38c9f0) exclusively for primary action triggers and focus highlights.
- Render all tabular and metric figures using proportional tabular alignment and bold weights.
- Enclose state labels ('Enacted', 'In Progress') inside 999px pill containers with desaturated background tints.
AVOID
- Do not introduce opaque solid grey backgrounds or light-mode container styles.
- Never use raw saturated primaries; adhere strictly to the cyan, emerald, amber, and crimson palette.
- Do not drop container border strokes below 1px or let them exceed 1px.
- Avoid using sharp 0px corners on interactive cards or pills; maintain 8px to 12px radii.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
