Design a light-mode website section: editorial serif authority grounded by deep pine telemetry and high-density algorithmic surfaces.
LAYOUT
The viewport uses an asymmetrical 40/60 two-column split. The left column runs vertically from category overline to serif title, introductory text, a 4-up metric proof strip, and a stack of three feature cards. The right column is entirely occupied by the simulated SaaS application container, which itself splits into a 220px left navigation rail and a multi-row analytical workspace concluding in a bottom terminal drawer.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Outer presentation canvas framing the marketing layout and embedded application mockup.
- #FFFFFF — Panel White: Background for dashboard interior cards, metric wells, and feature callout rows.
- #092625 — Deep Pine: Structural anchor color for sidebar navigation, terminal backdrop, action buttons, and feature icon squares.
- #133736 — Pine Rail Active: Active navigation states and elevated sub-surfaces within the dark sidebar.
- #10B981 — Telemetry Emerald: Positive trend deltas, system health indicators, sparklines, and workflow completion pills.
- #0F172A — Charcoal Black: Primary display serif titles, card headlines, and critical metric numbers.
- #64748B — Muted Slate: Body paragraphs, metric subtitles, table labels, and timestamp metadata.
- #E2E8F0 — Hairline Rule: Dividing lines between metric stats, dashboard container borders, and card outlines.
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif,Source Serif 4,Playfair Display), weights 400/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.02em. The voice is intellectual, mathematically rigorous, and enterprise-grade. The Newsreader serif provides editorial heritage reminiscent of high-end financial journalism, reassuring executive buyers, while Inter and JetBrains Mono immediately signal technical accuracy and engineering competence. Licensing can be substituted seamlessly with Instrument Serif and Geist without sacrificing tonal poise.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is handled through architectural nesting rather than exaggerated blur. The exterior dashboard window casts a wide, low-opacity ambient shadow (0 24px 48px -12px rgba(10,38,37,0.12)), while internal modules are strictly flat panels defined by 1px borders (#E2E8F0). The dark navigation and console surfaces provide depth through chromatic value contrast rather than z-index elevation.
IMAGERY
This design contains zero decorative lifestyle photography or abstract 3D illustrations. All visual interest is generated through functional UI artifacts: interactive pipeline diagrams, responsive chart lines, metric sparklines, and syntax-highlighted code. Any supplementary imagery must take the form of actual product telemetry or monochromatic technical schematics.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an editorial book-serif headline with a deep-pine SaaS mock containing an embedded visual pipeline and terminal console. This move instantly distinguishes enterprise AI infrastructure from consumer wrappers. Misuse occurs when either softening the console into a generic screenshot or replacing the pine-green palette with standard slate.
MUST
- Pair high-contrast editorial serif headings exclusively with clean, neutral sans-serif data points.
- Use deep pine (#092625) instead of neutral gray or pure black for dark UI surfaces and icons.
- Keep emerald (#10B981) restricted to positive deltas, operational statuses, and data chart paths.
- Apply subtle 1px border dividers (#E2E8F0) between metrics and dashboard compartments.
AVOID
- Do not render the main headline in a sans-serif or geometric display typeface.
- Do not use high-saturation corporate blues; pine teal provides the distinct thematic identity.
- Do not use dark mode across the entire canvas; the outer background must stay crisp and light.
- Do not apply heavy drop shadows to interior dashboard widgets; use flat white cards with 1px borders.
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 中尝试 
