Design a light-mode website section: scholarly warmth meets crisp product engineering through halftone dust, terracotta action, and literary serif accents.
LAYOUT
The hero uses an asymmetric two-column split: text, CTA stack, and friction reducers pinned to the left (spanning roughly 50% width), while the product mockup tilts slightly into a decorative halftone burst on the right. Below, a continuous 1px hairline divider spans the full container width, leading into a balanced 6-column footer grid (brand lockup, four categorized link lists, and newsletter signup), terminating in a split baseline legal strip.
PALETTE (use these exact hex values)
- #FBF9F5 — Canvas Warm Base: Overall page background creating a warm, non-glare editorial atmosphere across hero and footer
- #FFFFFF — Card Pure White: Elevated dashboard preview canvas, input fields, and social pill backgrounds
- #B83A2C — Terracotta Rust: High-intent primary buttons, eyebrow badge text, and newsletter submit button
- #2B6CB0 — Editorial Cerulean: Highlighted italic emphasis in hero headline, primary brand mark, and active indicators
- #18181B — Ink Primary: Primary headings, dominant titles, and high-emphasis brand labels
- #5A5D63 — Graphite Muted: Body copy, supporting explanations, checkmark microcopy, and sub-footer links
- #E8E4DC — Hairline Border: Footer rule separator, input borders, secondary button strokes, and mockup card borders
- #93BDE6 — Halftone Mist: Decorative stipple spray and watercolor textured halo framing the interface mockup
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Georgia Pro, Freight Text), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 17px body-lg, 20px subheading, 52px display. Tracking -0.02em. The voice is intellectual, dependable, and quietly self-assured. Newsreader provides literary authority and academic charm, while Plus Jakarta Sans delivers crisp, legible legibility for modern software workflows. For open-source replacements, Instrument Serif paired with Inter preserves the exact poise.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled strictly through soft ambient illumination rather than harsh layered stacks. The main software mockup floats on a 0 16px 48px rgba(15, 23, 42, 0.07) diffusion shadow with a 1px border stroke, gently peeling away from the organic stipple background. The rest of the interface remains completely flat to reinforce an archival, editorial page aesthetic.
IMAGERY
Visual assets combine crisp vector application wireframes with organic printmaking techniques: fine cyan/royal halftone dot arrays, painterly edge bleeding, and lithographic stippling. Photographic human imagery is absent; the focus is entirely on tactile print artifacts colliding with high-precision SaaS interfaces.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the juxtaposition of an editorial book serif containing a single colored italic emphasis ('one prompt') anchored beside a software card breaking through a blue stipple and watercolor halo. To execute correctly, ensure the halftone pattern softly clips into the warm canvas background without harsh raster edges, and reserve the cerulean blue exclusively for that single literary phrase.
MUST
- Pair rich high-contrast serif display typography with clean geometric sans-serif for UI chrome.
- Use a specific single-phrase italic blue highlight within large editorial titles.
- Ground calls-to-action in warm terracotta (#B83A2C) rather than generic vibrant red or corporate blue.
- Keep footer column headers in rigid 11px bold uppercase with generous letter spacing.
AVOID
- Never use pitch black (#000000) for body text; rely on soft ink (#18181B) or graphite (#5A5D63).
- Avoid cold blue-gray borders; all dividers must lean warm (#E8E4DC).
- Do not round buttons to full pills; adhere strictly to the balanced 8px soft-corner radius.
- Do not highlight more than three words in blue italic within any single headline.
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 中尝试 
