Design a light-mode website section: mission-critical mechanical engineering tooling delivered through warm editorial ivory and rich crimson accents.
LAYOUT
The section is organized vertically in two major zones on an ivory foundation: an elevated hero CTA card on top and an open structured footer below. The hero card uses a 50/50 two-column layout, balancing strong typography on the left against a rich application preview on the right. Below the card, a hairline horizontal border introduces a multi-column footer containing an identity block, newsletter form, four categorized link lists, and a legal bottom rail.
PALETTE (use these exact hex values)
- #F8F6F2 — Canvas Warm: Outer background canvas framing the hero CTA and hosting the main footer columns
- #FFFFFF — Surface White: Background for the primary CTA container card and the floating UI specification preview
- #BA332A — Brand Crimson: Primary interactive button fills, newsletter submit button, and uppercase tracking kickers
- #141413 — Text Primary: Display headlines, logo wordmark, primary links, and high-emphasis interface text
- #63625D — Text Secondary: Body paragraphs, navigation link items in the footer columns, and contextual labels
- #94928C — Text Muted: Copyright text, placeholder inputs, and secondary file metadata annotations
- #EAE6DF — Border Subtle: Dividers, container borders, input field outlines, and code panel vertical splitters
- #16A34A — Success Green: Trust checkmark icons and passing spec status indicators within the preview frame
TYPOGRAPHY
Typeface Geist Sans (or Inter,SF Pro Text,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typographic tone is authoritative, clean, and unmistakably technical without feeling hostile. Geist Sans or Inter provides an unadorned, objective scaffold for the bold headlines, while Geist Mono brings the cadence of command-line tools into the product preview.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is remarkably subtle, relying heavily on flat planar hierarchy and delicate 1px borders (#EAE6DF). The single prominent shadow belongs to the IDE preview window inside the CTA card, rendered with a light ambient diffusion (0 12px 32px rgba(0, 0, 0, 0.05)) to lift it slightly off the white substrate.
IMAGERY
The visual language rejects decorative stock photography entirely in favor of an authentic software interface preview. The mock screenshot acts as documentation, displaying realistic engineering files (e.g., 'spec.md', 'calc.ipynb', pump housing specs) with accurate syntax styling.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the juxtaposition of an architect's ivory canvas with an engineering terminal button sporting the crimson fill and '>_' prompt prefix.
MUST
- Retain the warm ivory canvas (#F8F6F2) to prevent the interface from looking cold and clinical.
- Reserve Brand Crimson (#BA332A) strictly for active buttons, kickers, and prominent anchor links.
- Use uppercase tracking with generous letter-spacing (0.08em) on all category eyebrows.
- Combine sans-serif headlines with monospaced accents inside code snippets and technical indicators.
AVOID
- Do not use pure black (#000000); use softened charcoal (#141413) to preserve warmth.
- Do not set full section backgrounds to crimson; color must act as an intentional accent.
- Do not omit the terminal prompt symbol ('>_') from the primary CTA button label.
- Do not apply heavy drop shadows; depth is strictly achieved through soft ambient diffusion.
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 中尝试 
