Design a dark-mode website section: deep obsidian surfaces anchored by ambient teal luminescence and crisp compliance proof points.
LAYOUT
The view uses a centered single-column composition constrained to roughly 1080px max-width. The rhythm flows vertically: eyebrow badge with star icon, dual-color headline, muted subtitle, large monolithic accordion card, and a docked trust bar. Within the accordion card, horizontal rows are evenly partitioned across an icon slot, question column, inline answer block, and right-aligned disclosure chevron.
PALETTE (use these exact hex values)
- #030708 — Obsidian Base: Deepest canvas background behind all content containers
- #070F12 — Surface Charcoal: Background fill for the primary accordion container and trust bar
- #102326 — Border Subtle: Dividing lines between accordion rows and container borders
- #1E4B48 — Border Highlight: Top and left gradient border highlight conveying subtle rim lighting
- #4ECCA3 — Emerald Glow: Accent text in headline and icon accent outlines
- #FFFFFF — Text Primary: High-contrast headings, active icons, and primary questions
- #8FA3A3 — Text Muted: Answers, descriptions, and secondary metadata
- #5A6D6D — Text Dim: Chevron toggles, vertical dividers, and inactive icons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 36px display. Tracking -0.02em at display, 0 at body. The voice is confident, technical, and compliance-driven. Rendered in a modern neutral sans-serif like Inter or Geist, the type pairs clinical clarity with enterprise authority. The dual-color display headline softens the technical density by introducing a touch of human warmth via the muted mint green emphasis.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1080px container, comfortable density.
DEPTH
Depth is created without drop shadows, using surface luminosity and localized gradient backdrops instead. The main FAQ card appears elevated due to a 1px top-left border sheen (#1E4B48 fading to #102326) and a faint ambient teal glow diffusing through the canvas behind the upper-left quadrant.
IMAGERY
No photographic imagery is present. The visual language relies purely on crisp, line-drawn vector icons (20px-24px bounding box, 1.5px stroke width) featuring rounded geometric joints. Adding photographic avatars or decorative 3D assets would contradict the technical compliance tone.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal two-column accordion row layout (fixed-width bold question directly paired with an inline flowing answer) unified inside a single glowing-edge obsidian panel, underpinned by an enterprise security credential dock.
MUST
- Reserve the emerald accent (#4ECCA3) strictly for the headline hook and key trust signals.
- Maintain strict horizontal alignment between the question heading and answer text baseline.
- Use a subtle 1px border gradient to indicate top-left light source reflection on dark cards.
- Keep icon strokes thin (1.25px to 1.5px) and geometrically clean on dark teal backgrounds.
AVOID
- Do not use pure black (#000000); maintain the deep sea teal-black (#030708).
- Never make question and answer text the exact same font weight and color.
- Avoid loud solid teal buttons or heavy fills; rely on line-weight glows and borders.
- Do not omit the icon column in the accordion; it provides vital horizontal cadence.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
