Design a light-mode web interface screen: sunlit linen paper framing curated creative culture through razor-sharp geometry and rust-toned focal anchors.
LAYOUT
The page flows from an airy navigation bar into an expansive hero masthead balanced by contour line art. A hairline-bounded utility strip introduces an asymmetric split grid (60/40) featuring one dominant vertical card and two stacked horizontal cards. This transitions into a three-column uniform card matrix, broken by a grounding stone-colored newsletter band, and concludes with a four-column thumbnail footer feed.
PALETTE (use these exact hex values)
- #F9F8F5 — Linen Base: dominant page background providing tactile editorial warmth across all viewports
- #1A1A1A — Charcoal Ink: masthead, article headlines, primary iconography, and button fills
- #B85D43 — Terracotta Rust: featured story highlights, featured action circular button, and active link underline
- #D9D7D0 — Stone Muted: background fill for the mid-page newsletter banner block
- #76736E — Muted Slate: publication dates, secondary categories, deck copy, and passive metadata
- #E5E3DC — Hairline Border: structural grid dividing lines, filter bar limits, and outline circle buttons
TYPOGRAPHY
Typeface General Sans (or Plus Jakarta Sans, Neue Haas Grotesk, Inter), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 84px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typography is disciplined, architectural, and gallery-literate. By deploying a single refined geometric grotesque (such as General Sans or Neue Haas Grotesk) across dramatic scales—from monumental title displays to hairline tracked captions—the system channels classic Swiss modernist publishing without ever needing a serif.
GEOMETRY & SPACING
Corner radii — cards 0px, links 0px, inputs 2px, buttons 999px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1360px container, airy density.
DEPTH
Depth is communicated entirely through 2D architectural spatial layout, hairline rules, and tonal surface variation. Shadows are strictly eliminated (box-shadow: none). Visual layer hierarchy arises from photographic density and the flat #D9D7D0 stone newsletter panel set against the warm #F9F8F5 linen canvas.
IMAGERY
Editorial, documentary-style, and fine-art photography showcasing human craft, studio spaces, sculptural forms, and tactile textures. Imagery emphasizes natural ambient lighting, earth-toned palettes, and muted contrasts. High-saturation stock photos, tech gadgets, or 3D renders are entirely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an oversized, condensed architectural display masthead against ultra-delicate spiral contour line drawings, punctuated exclusively by crisp 0px square imagery and circular terracotta arrow medallions. Losing the hairline contour art or softening image corners would collapse it into a standard corporate blog.
MUST
- Maintain strict 0px corner radii on all photography, illustration cards, and structural grid panels.
- Reserve the terracotta rust hue (#B85D43) strictly for active states, featured story elements, and focal action buttons.
- Use hairline 1px borders (#E5E3DC) with generous whitespace to delineate horizontal filtering sections.
- Emphasize the linen background (#F9F8F5) by ensuring ample breathing room around dense typography blocks.
AVOID
- Never apply rounded corners or soft border-radii to editorial article images.
- Do not use drop shadows, blurred elevations, or skeuomorphic depth anywhere on the interface.
- Avoid pure white (#FFFFFF) backgrounds except inside bounded form inputs on tinted surfaces.
- Never use generic high-saturation accent colors like electric blue or neon green.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1856:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
