Design a light-mode web interface screen: clean engineering precision cushioned by warm clay neutrals and tactile isometric hardware storytelling.
LAYOUT
A split asymmetrical hero section housed within a floating rounded 32px perimeter container. The left 50% stacks category metadata, display title, descriptive narrative, dual CTAs, and a three-step horizontal progress cluster. The right 50% gives full floor space to an expansive isometric hardware render, while the bottom shelf is grounded by a self-contained four-column feature ribbon.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary interior app container canvas and clean background layer
- #F6F4EE — Parchment Outer: Warm off-white viewport surround providing ambient framing warmth
- #F9F8F5 — Muted Oat Panel: Fill color for bottom feature card and secondary container blocks
- #1A1C1E — Obsidian Black: Primary typography, top CTA background, and active navigation indicators
- #B4533C — Terracotta Rust: Emphasized headline keyword, primary hero CTA button, and community badge
- #6C727D — Graphite Grey: Body copy, subtitles, metadata details, and secondary button text
- #E8E6DF — Hairline Neutral: Outlines for badges, bottom tray boundary, and category chips
- #5E7A68 — Sage Green: Circular icon badge background for beginner track feature
- #4A607A — Slate Steel: Circular icon badge background for hands-on project feature
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.025em for display, 0.01em for labels. Technical clarity meets editorial warmth through geometric neo-grotesque proportions. Plus Jakarta Sans provides clean legibility in dense captions while maintaining friendly roundness in large display sizes. Inter or SF Pro Display can substitute without losing the precise Silicon Valley industrial aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, airy density.
DEPTH
Depth is communicated through diffuse, photorealistic ambient occlusion shadows within the isometric render rather than CSS elevation on UI surfaces. Flat surfaces remain crisp with subtle 1px border boundaries (#E8E6DF) and soft value differences between white and warm oat (#F9F8F5).
IMAGERY
Clean, isometric 3D modeling characterized by soft matte ceramic materials, precise microchip architecture, and miniature human figures in laboratory attire. Avoid generic corporate vector flat art, hyper-realistic macro photography, or dark mode cyberpunk circuit board graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious synthesis of clinical semiconductor engineering and warm terracotta humanism, epitomized by the single terracotta keyword in the display title matching the primary pill CTA and lower dock badge.
MUST
- Use a singular keyword in terracotta (#B4533C) within the main headline to establish immediate focal cadence.
- Enforce 999px fully rounded pill geometries on all high-level action buttons.
- Frame technical diagrams and illustrations with isometric clay-like renders rather than flat vector drawings.
- Maintain at least 48px of breathing space between the headline column and graphic focal point.
AVOID
- Never use pure electric blues, vibrant cyans, or sci-fi neon glows in technical assets.
- Do not introduce sharp 0px corners on interactive buttons or container cards.
- Never fill the entire background with saturated hues; keep the primary canvas pure white (#FFFFFF).
- Avoid heavy, dark drop shadows; depth must rely on ambient, diffuse soft contact occlusion.
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 中尝试 
