Design a dark-mode web interface screen: deep cyan neon against an obsidian glass canvas for meticulous legal SaaS.
LAYOUT
The page implements a dual-pane framework: a persistent left vertical app navigation bar (~180px) coupled with a two-to-three column content grid on the right canvas. The header is right-aligned with standard SaaS navigation links and a cyan CTA. Sections progress from an expansive hero presentation to stacked two-column feature spotlights, a structured 4-column service grid, and an asymmetric CTA/testimonial closure block.
PALETTE (use these exact hex values)
- #04070D — Canvas Obsidian: The absolute bottom canvas layer underpinning the entire viewport and page body.
- #080F1B — Elevated Midnight: Background fill for standard module cards, testimonials, and sidebar panels.
- #0D1826 — Active Card Surface: Interactive card hover states and the active category card fill.
- #4DD4F0 — Cyan Electric: Primary actionable CTA buttons, active sidebar tab indicator, and headline accent text.
- #1A465B — Muted Cyan Glow: Low-opacity glow halos, active outline borders, and subtle badge tints.
- #15202E — Border Hairline: 1px hairline divider lines, inactive card outlines, and input strokes.
- #38B2D6 — Border Active: 1px highlighted border for selected practice area card and focused inputs.
- #FFFFFF — Text Primary: Primary headings, high-emphasis titles, and dark button labels.
- #7E8D9F — Text Secondary: Body copy, supporting explanatory copy, inactive nav links, and sub-captions.
- #475466 — Text Dimmed: Footer copyright lines, metadata notes, and faint input placeholders.
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, 20px subheading, 26px heading, 32px heading-lg, 44px display. Tracking -0.02em on headings, 0.05em on all-caps micro-badges. The typographic tone is technical, commanding, and impeccably crisp, utilizing Plus Jakarta Sans (or Inter). The font brings geometric rigor with neutral curves that prevent the interface from feeling playful, asserting professional confidence appropriate for enterprise and legal tooling. Clean weights (400, 500, 700) guarantee razor-sharp legibility at miniature scales against pitch-black backgrounds.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through luminescence layering rather than drop shadows. Surface 0 sits in dark void (#04070D), while Surface 1 modules lift slightly through deep midnight blue (#080F1B) wrapped in 1px low-contrast strokes (#15202E). Top-tier focus states utilize a delicate cyan border glow (#38B2D6) to simulate backlighting from beneath the glass.
IMAGERY
Visual assets feature 3D isometric dark-mode user interfaces bathed in ambient deep blue and cyan rim lighting, alongside stylized minimalist 2D character vignettes interacting with illuminated workstations. All graphics conform to a nocturnal blue palette; bright, photographic daylight lifestyle imagery would clash aggressively with the system.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone headline technique ('run a better practice') where the final phrase shifts into vibrant electric cyan (#4DD4F0), echoing the primary CTA and active module border. Misusing it across entire multi-line sentences dilutes its punch; it should strictly be applied to the terminal 2-3 impact words of a display heading.
MUST
- Reserve solid electric cyan (#4DD4F0) strictly for primary call-to-actions, accent keywords, and active selection borders.
- Use 1px hairline borders (#15202E) to define cards rather than heavy dropped shadows.
- Pair pure white (#FFFFFF) bold titles with muted blue-grey (#7E8D9F) supporting text for strict clarity.
- Maintain uniform 12px outer radii on standard content containers.
AVOID
- Do not use saturated warm hues like yellow, red, or orange except for critical operational error states.
- Do not use stark white backgrounds on any surface or modal interior.
- Do not apply diffuse, multi-colored drop shadows; use crisp borders or tight cyan inner-glows instead.
- Do not set body paragraphs in full white; keep them muted at #7E8D9F to preserve headline hierarchy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2848:2896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
