Design a light-mode website section: warm editorial ceramic warmth grounding high-density technical developer infrastructure.
LAYOUT
The layout is divided into two major horizontal sections: a dual-column CTA split and a 6-column modular footer. The upper section balances a left-aligned text conversion block (occupying roughly 45% width) against a high-density dashboard card (55% width). A subtle 1px horizontal rule cleanly separates the hero from the footer, which organizes brand identity and social links on the far left, four categorized link columns in the center, and a newsletter capture form on the far right. The design terminates in a bottom-bar legal row spanning copyright on the left and utility links on the right.
PALETTE (use these exact hex values)
- #FCF8F3 — Alabaster Cream: Global background canvas providing an editorial, warm paper foundation across CTA and footer
- #FFFFFF — Pure Card Surface: Background for floating dashboard preview card, stat containers, and form inputs
- #C83D31 — Terracotta Red: Primary action button fill, logo mark glyph, newsletter submit button, and eyebrow text
- #111418 — Deep Onyx: Primary headings, brand wordmark, metric counters, and table data values
- #645E57 — Muted Umber: Secondary copy, footer category links, table headers, and supporting microcopy
- #16A34A — Telemetry Emerald: Compression ratio statistics, progress bars, verification checkmarks, and delta badges
- #EAE4DA — Sandstone Border: Dividers, secondary button outline, table separators, and card perimeters
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 26px heading, 42px display. Tracking -0.025em at display, +0.08em at micro-caps. The typographic tone is authoritative, highly technical, yet approachable due to the warmth of the palette and the rounded geometries of the grotesque typeface. Heavy display weights (700) project enterprise reliability, while tabular numeric spacing ensures financial and volumetric telemetry align with strict mechanical precision. Inter or Plus Jakarta Sans are optimal drop-in typefaces, offering the necessary tall x-height and open counters.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through color contrast rather than heavy shadowing, setting crisp white surface cards (#FFFFFF) atop the creamy alabaster background (#FCF8F3). The dashboard card uses an ultra-subtle, warm-tinted box shadow (0 12px 32px -8px rgba(100, 70, 40, 0.05)) paired with a 1px sandstone border (#EAE4DA) to lift softly off the canvas. Internal data cells and inputs use 1px stroke outlines without shadows to maintain a flat, structured data-sheet aesthetic.
IMAGERY
No photographic imagery is present; the visual weight is carried entirely by UI telemetry simulation and technical UI components. The dashboard preview features miniature colored icon pills (indigo, purple, cyan, peach) representing individual autonomous agents, paired with geometric data charts and clean tabular numbers. Decorative elements are restricted to faint, organic hairline background wave contours that weave subtly behind the hero card.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature of this design is the juxtaposition of an organic, ceramic-toned cream background (#FCF8F3) with a hyper-crisp, white developer dashboard mockup accented in terracotta red and emerald green. This bridges the gap between cold developer tools and warm editorial typography. It is commonly misused by defaulting back to pure white or stark cool greys, which immediately strips the design of its proprietary tactile warmth.
MUST
- Anchor high-value actions with the warm terracotta red (#C83D31) to sustain emotional energy.
- Use uppercase tracking (+0.08em) strictly on 11px category markers and eyebrow headings.
- Keep card surfaces pure white (#FFFFFF) to pop against the warm alabaster canvas (#FCF8F3).
- Pair emerald green numbers (#16A34A) exclusively with positive metrics, deltas, and progress bars.
AVOID
- Do not switch the canvas to cold pure white or sterile blue-grey backgrounds.
- Do not use dark, heavy dropshadows; rely on diffused, low-opacity warm-toned elevation.
- Do not use terracotta red for secondary or tertiary buttons; reserve it strictly for key triggers.
- Do not use standard underline styling on navigation links; maintain clean tabular vertical spacing.
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 中尝试 
