Design a light-mode website section: crisp high-trust b2b saas balancing mechanical utility with luminous blue precision.
LAYOUT
The layout uses a two-zone structural cadence. The top zone splits evenly into a left-aligned editorial stack (pill, display title, descriptive paragraph, dual CTA, trust badges) and a right-aligned application viewport. The bottom zone delivers an exhaustive 6-column horizontal directory capped by a hairline divider and finished with an inline legal bar.
PALETTE (use these exact hex values)
- #FFFFFF — Pristine Canvas: Base canvas background for footer, dashboard card, and input fields.
- #F4F7FB — Atmospheric Tint: Soft cool gradient surface across hero container and subtle chip backgrounds.
- #0B63F6 — Electric Brand Blue: Primary interactive CTAs, active links, logo icon, and highlight accents.
- #EFF6FF — Blue Wash: Background fill for announcement pills, badges, and selected navigation states.
- #0F172A — Charcoal Slate: Display headlines, column titles, logo wordmark, and prominent data points.
- #475569 — Cool Muted Slate: Body copy, feature descriptions, and standard navigation link items.
- #94A3B8 — Steel Gray: Copyright text, input placeholder strings, and metadata labels.
- #E2E8F0 — Subtle Hairline: Dividers, card outlines, input borders, and badge perimeters.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, General Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px subheading, 15px body, 17px body-lg, 24px heading, 46px display. Tracking -0.02em at display, -0.01em at body, 0.04em at caps. The typographic tone is architectural, rational, and institutional, communicating manufacturing reliability through Inter's neutral neo-grotesque curves. Negative display letter-spacing adds corporate polish, while generous body line-height (1.5) ensures immediate legibility for complex enterprise terminology.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through precise 1px outline strokes (#E2E8F0) paired with an ultra-soft, low-opacity drop shadow (0 12px 32px -4px rgba(15, 23, 42, 0.05)). Floating elements never appear detached; they read as clean planar sheets resting directly upon the tinted foundation.
IMAGERY
Visual presentation is strictly interface-as-illustration: real, functional-looking ERP dashboards featuring high-density telemetry, sparklines, and metric cards. Photorealistic photography, 3D clay illustrations, or abstract organic shapes are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The left-anchored hero composition directly adjacent to an unadorned, hyper-dense live telemetry card. The identity relies entirely on balancing enterprise trust signals (ISO badges, ERP metrics) with Silicon Valley SaaS minimalism (vibrant blue CTA, pill tags, clean white space).
MUST
- Anchor primary calls-to-action using solid #0B63F6 with pure white typography.
- Maintain hairline 1px borders (#E2E8F0) between disparate card modules and dashboard widgets.
- Pair bold slate headlines (-0.02em letter spacing) with neutral gray body copy (#475569).
- Keep footer column headers in #0F172A at 14px with medium/semi-bold weights.
AVOID
- Do not apply heavy multi-stop drop shadows; rely on 1px borders and low-opacity diffusion.
- Do not use saturated primary colors outside of the brand blue (#0B63F6).
- Avoid centering hero headlines or CTA pairings; preserve strict left alignment.
- Do not remove the subtle cool-gray hero tint (#F4F7FB) that separates hero from footer.
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 中尝试 
