Design a dark-mode web interface screen: sculptural architectural minimalism alternating between deep matte carbon and warm travertine chalk surfaces.
LAYOUT
The page flows vertically through expansive horizontal architectural blocks. It opens with an asymmetric split hero (left typography on deep dark carbon, right dual-photographic portal), drops into an integrated three-column property card grid with a dramatic inverted center card, transitions to a warm travertine editorial split module, and concludes with a four-up Instagram square grid and minimalist footer. Whitespace is generous, structured by a strict 1440px container.
PALETTE (use these exact hex values)
- #1c1c1c — Matte Carbon: Primary hero and inverted card background delivering architectural presence
- #eae6e1 — Travertine Chalk: Light mode section background and card canvas evoking natural limestone
- #ffffff — Pure White: Primary text on dark carbon backgrounds and crisp clean accents
- #121212 — Charcoal Black: Primary typography, architectural wireframe line art, and dark text
- #8d4c38 — Terracotta Rust: Primary call-to-action buttons in header and hero, conveying warmth
- #343d3b — Dark Forest Slate: Secondary high-priority CTA button surface on light backgrounds
- #757371 — Muted Stone: Secondary metadata, specs, sub-captions, and body paragraphs
- #d3cfca — Hairline Border: Delicate input outlines, Instagram button strokes, and structural dividers
TYPOGRAPHY
Typeface Helvetica Neue (or Inter, Neue Haas Grotesk, Roboto), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 38px heading-lg, 56px display. Tracking -0.02em at display, 0.08em at uppercase tracking. The typographic voice is quiet, disciplined, and modernist—echoing the precision of mid-century Scandinavian architectural monographs. A neutral grotesque (akin to Helvetica Neue or Neue Haas Grotesk) conveys industrial craftsmanship and restraint without distracting personality. For web substitution, standard Inter or Roboto with tight display tracking and uppercase micro-caps preserves this technical elegance.
GEOMETRY & SPACING
Corner radii — cards 0px, links 999px, inputs 0px, buttons 0px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1440px container, airy density.
DEPTH
Elevation is entirely flat and architectural, relying on crisp tonal boundaries and planar overlaps rather than simulated drop shadows. Depth is created strictly through visual contrast between dark carbon (#1c1c1c) planes, warm chalk (#eae6e1) surfaces, and deep photography. Floating badges sit flush against glass and imagery using semi-translucent backdrops rather than elevation blurs.
IMAGERY
Photography is strictly architectural, moody, and Scandinavian, celebrating brutalist matte black steel, raw concrete, skylights, and warm natural firelight. Compositions are rectilinear, devoid of high-key lifestyle saturation, focused on materials and quiet interior spaces. People, when present, are captured in natural, un-staged motion and subordinate to the room's architecture.
SIGNATURE DETAIL — the thing that makes this design itself
The rhythmic three-column accommodation card grid where the middle shelter card is dramatically inverted to solid matte carbon (#1c1c1c) flanked by travertine (#eae6e1) cards, each headlined by a fine-line architectural wireframe CAD illustration. This instantly translates industrial physical product design into a digital browsing experience. It is broken if cards receive rounded corners, shadows, or photo thumbnails instead of schematics.
MUST
- Maintain strict zero border-radius on all layout boxes, cards, inputs, and primary buttons.
- Alternate cleanly between deep matte carbon (#1c1c1c) and travertine stone (#eae6e1) section blocks.
- Use CAD-style architectural line drawings for property previews rather than standard photography thumbnails.
- Keep typography strictly neutral sans-serif with tracked uppercase labels for subheads.
AVOID
- Never apply drop shadows or box shadows; depth is communicated solely through plane overlap and tone.
- Do not round corners on buttons or structural cards; rounding breaks the architectural rigour.
- Never use saturated or bright primary colors like royal blue or neon red.
- Avoid decorative script or expressive serif typography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2080:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试