Design a light-mode website section: crisp laboratory white space punctuated by saturated metric telemetry and chromatic card rails for mission-critical tooling.
LAYOUT
The layout is divided into three vertical acts. The top tier splits into an asymmetric split: a left-hand headline block (approx 40% width) balanced against four tight horizontal metric stat cards (approx 60% width). The middle tier expands into an equal four-column card array detailing core capability vectors. The bottom tier seals the section with a wide, single-row integration dock spanning the entire 1240px container.
PALETTE (use these exact hex values)
- #f8fafd — Laboratory Canvas: ambient viewport background establishing low-glare technical whitespace
- #ffffff — Elevated Pure White: structural fill for feature cards, metric tiles, and integrated bottom bar
- #e2e8f0 — Subtle Wire Border: 1px exterior boundary for all surface containers and stat cards
- #0f172a — Deep Slate Title: hero headlines, section titles, and high-emphasis stat metric values
- #64748b — Technical Slate Body: supporting paragraphs, stat sublabels, and checklist narrative copy
- #1d63ed — Telemetry Blue: primary brand accents, development lane top border, and velocity metrics
- #e11d68 — Defect Rose: risk lane top border, shield badge fill, and defect reduction metric
- #0891b2 — Signal Teal: cost reduction stat, code badge, and quality column indicator
- #5b21b6 — Firmware Indigo: coverage stat, finance badge, and total-cost column indicator
- #7c3aed — Eyebrow Orchid: all-caps category kicker at the top left of the section
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 42px display. Tracking -0.025em for display, 0.08em for uppercase badges. The typography speaks with the understated, objective voice of high-assurance engineering documentation. Inter or similar neutral neo-grotesques deliver clear numerical fidelity and readable micro-copy across complex terms like MCUs, SoCs, and RTOS. Display weights maintain compact letter spacing, projecting computational precision.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1240px container, comfortable density.
DEPTH
Depth is kept extremely restrained to preserve a technical hardware manual aesthetic. Surfaces rely on 1px crisp borders (#e2e8f0) complemented by faint ambient shadows (0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(15, 23, 42, 0.03)). Zero dramatic z-plane layering is present.
IMAGERY
There is no photographic imagery. Visual storytelling relies entirely on precise 16-20px outline SVG iconography (clocks, shields, code brackets, dollar signs, sparkles) contained in rounded 36px frosted square frames. Illustrative flourishes or 3D renders would break the clean diagnostic ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the category-coded 3px top border rail paired with identical-hued thin outline checkmarks and soft icon frames across four parallel columns. To use it correctly, each column must own a single semantic hue that recurs across all iconographic and telemetry elements inside that column. Misusing it by introducing multi-colored gradients or mismatched checkmark colors destroys the modular taxonomy.
MUST
- Assign a dedicated chromatic accent (blue, rose, teal, indigo) consistently to each column's top border, icon, and checkmark glyphs.
- Use 14px border radii for cards and 10px for internal square icon badges.
- Reserve the saturated #1d63ed blue for actionable or emphasized headline punctuation.
- Maintain high whitespace around metric values with at least 16px padding between stat and labels.
AVOID
- Do not use dark backgrounds; the system relies strictly on crisp lab white and slate tints.
- Do not mix accent colors within a single feature column or stat card.
- Never drop the 3px colored top border on the four main feature cards; it is their primary spatial anchor.
- Avoid heavy drop shadows; keep elevation to subtle ambient blur (y=2px, blur=8px, #000000 4%).
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 中尝试 
