Design a light-mode website section: precision thermal engineering framed like an architectural monograph against warm vapor gradients.
LAYOUT
The hero layout follows an asymmetrical three-column balance inside a 1360px grid. The left column (approx. 45% width) holds the text hierarchy and CTAs. The center column holds the tall, prominent dark hardware preview card. The right column stacks two white modular data cards, creating an information density balance that leads the eye naturally across proof points.
PALETTE (use these exact hex values)
- #FAF9F6 — Canvas Warm Base: Primary light canvas background setting an organic paper-like architectural warmth
- #FFFFFF — Card Surface Clean: Metric cards, navigation floating elements, and stat panels
- #092A28 — Deep Thermal Teal: Primary brand anchor used on CTA buttons, primary text, and rich imagery frames
- #111818 — Text Primary Obsidian: Main headline typography, prominent stat values, and heavy labels
- #586260 — Text Secondary Slate: Body copy descriptions, unit qualifiers, and metadata notes
- #FF4425 — Thermal Red Core: Lower corner ambient heat aura, logo accent dot, and warning status markers
- #38C28A — Cooling Mint Accent: Data highlight callouts, metric multiplier accents, and progress indicators
- #ECEAE4 — Border Subtle: Hairline division borders across cards and list items
TYPOGRAPHY
Typeface Instrument Serif (or Playfair Display, Canela, Roslindale), weights 400. Sizes 10px caption, 12px body-sm, 15px body, 18px subheading, 32px heading, 40px heading-lg, 72px display. Tracking -0.03em. The voice is that of high-end mechanical engineering meeting luxury editorial design. The alternating sans-to-italic-serif headline delivers poetic finality, while dense tabular numerals provide undeniable scientific credibility. Substitutes must maintain this exact dialectic of cold technical sans and expressive serif italic.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is strictly surface-drawn and architectural. Drop shadows are intentionally absent; surfaces distinguish themselves through soft paper tint versus pure white planes, bounded by 1px borders (#ECEAE4). Subtle depth emerges through photographic content and soft radial corner gradients.
IMAGERY
Photographs depict precision-milled metallic cooling hardware bathed in directional teal light and technical shadow. Diagrams rely on delicate stippled dot matrices, such as the wireframe point-cloud globe. Stock lifestyle imagery or cartoon vectors are entirely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden typographic pivot in the hero headline from modern upright sans to expressive, slanted serif italic on 'Use less Everything.', directly paired with an ambient thermal glow in the bottom corner. Misusing it involves making the entire headline italic or applying it to utilitarian subheads.
MUST
- Switch to an elegant serif italic only on the closing cadence words of the headline.
- Keep card backgrounds stark white (#FFFFFF) with delicate #ECEAE4 borders over the tinted background.
- Use deep teal (#092A28) rather than pure black for dark interactive elements.
- Pair stark high-efficiency numbers (36px+) with concise two-word subtitles.
AVOID
- Do not use harsh 100% black buttons; always keep them in saturated dark teal.
- Do not render the entire display headline in italic; the contrast comes from mixed styles.
- Avoid heavy drop shadows; cards rely purely on hairline 1px borders and surface change.
- Never replace the warm cream paper base (#FAF9F6) with sterile cold hex white.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
