Design a dark-mode web interface screen: deep void canvases punctuated by iridescent cyan, violet, and amber luminescence in hyper-refined cards.
LAYOUT
The workspace employs a fixed 240px dark left rail navigation alongside a fluid primary viewport. Content follows a strict vertical rhythm: global search header, expansive hero greeting with photographic portal graphic, horizontal 'Continue your journey' progress carousel, 5-column category cards, 4-column course grid, and a bottom structured file table. Horizontal carousels feature explicit section titles flanked by pagination chevrons.
PALETTE (use these exact hex values)
- #070B12 — Void Canvas: Deepest background layer across main viewport and page container
- #090E17 — Sidebar Surface: Left navigation drawer and low-elevation container backgrounds
- #0D1422 — Card Surface Base: Default dark surface for interactive cards, quick links, and lists
- #162338 — Subtle Border Line: 1px hairline strokes framing cards, search bars, and dividers
- #00E5FF — Iridescent Cyan: Personal Branding track, active pills, hero portal lighting, and primary ring glows
- #E040FB — Hot Magenta: Growth track identity, secondary badge highlights, and circular progress rings
- #7C4DFF — Electric Purple: Business and workshop track icons, particle backdrops, and interactive tags
- #00E676 — Mint Emerald: Public speaking indicators, high-completion progress bars, and success states
- #FFD700 — Warm Gold: Star rating figures and life inspiration heart iconography
- #FFFFFF — Text Primary: Primary headings, card titles, and high-emphasis active labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Now), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.03em on headline display, 0.05em on micro caps. The type is calm, analytical, and highly structured, powered by an unadorned contemporary geometric sans (matching Inter or Plus Jakarta Sans). It balances massive display scale with micro-scale data grids without sacrificing legibility against dark surfaces. Free substitutions like SF Pro or Roboto Flex work identically if tabular lining figures and micro-letter-spacing are preserved.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 36px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through atmospheric optical luminosity rather than traditional drop shadows. Cards emerge from the void background via 1px border highlights (#162338) and subtle interior radial tint washes originating from the upper bounds of each container. Interactive components elevate on hover via localized color blooming around borders.
IMAGERY
Hero and card imagery relies on architectural neon voids, minimal spatial portals, and cosmic generative particle threads. Imagery is low-key, mysterious, and high-contrast, dominated by deep shadows with localized cyan and magenta light sources. Candid lifestyle photography or busy daylight imagery is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The category-coded chromatic card system: each content stream is designated a singular neon accent (cyan, magenta, purple, green, yellow) that illuminates its icon, tag, progress arc, and faint card backlight while embedded in an obsidian void. It is misused if multiple neon hues are blended indiscriminately on one card.
MUST
- Use 1px borders (#162338) paired with faint interior corner radial gradients to define card architecture.
- Assign exactly one thematic hue (cyan, magenta, purple, or green) to a single content category throughout the UI.
- Maintain strict typographic contrast: pure #FFFFFF for titles, #8A99AD for supporting copy.
- Format category identifiers in uppercase 11px with +0.08em letter-spacing above titles.
AVOID
- Never apply high-opacity drop shadows; use low-opacity inner radial glows instead of blurred black drop shadows.
- Do not use saturated solid backgrounds for cards; always retain near-black dark surfaces.
- Avoid mixing category accent colors within a single card component.
- Never make metadata lines (lessons, durations, sizes) brighter than secondary muted gray (#8A99AD).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
