Design a dark-mode web interface screen: luminescent cyan beacons guiding affluent buyers through midnight architectural realms.
LAYOUT
The viewport is anchored on the left by a persistent 240px vertical sidebar housing navigation and upsell modules. The main canvas flows from a global search and profile header into a two-column hero section (text search and statistics on the left, full-height featured card on the right). Below, a horizontal social-proof logo ticker precedes a three-column property grid, resolving into a balanced two-column analytics and value proposition section.
PALETTE (use these exact hex values)
- #050b11 — Canvas Void: Deepest background layer across the entire application canvas and sidebar.
- #0b1520 — Panel Slate: Elevated card backgrounds, market chart container, and search input fill.
- #162a3b — Border Subtle: Subtle 1px structural framing on cards, dividers, and inactive borders.
- #00c2cb — Luminous Cyan: Primary interactive accent, active card strokes, key search CTA buttons, and highlighted words.
- #f43f5e — Crimson Ruby: Featured badge backgrounds, popular tags, and select metric category icon backplates.
- #10b981 — Emerald Growth: Positive stat percentages, market indicators, and security trust badges.
- #ffffff — Text Pure White: High-priority titles, prices, headline text, and active icon glyphs.
- #7e9bb4 — Text Mist Slate: Body descriptions, secondary labels, inactive nav items, and metadata specs.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.03em on display, 0.01em on uppercase microcopy. The typography relies on Plus Jakarta Sans to project a modern, ultra-clean, and technologically sophisticated real estate authority. Large display sizes feature tight negative tracking (-0.03em) that makes architectural headlines feel bespoke and premium. In lowercase microcopy and badges, slightly expanded letter-spacing ensures effortless legibility against the deep dark canvas.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through luminance contrast and precise 1px surface borders rather than blurred drop shadows. Elevated elements stand out by graduating from the #050b11 canvas to #0b1520 surface tiles, framed with faint cyan-tinted borders (#162a3b). Highlighted components feature a faint outer cyan glow and crisp #00c2cb stroke lines.
IMAGERY
Photography exclusively captures modern architectural residences during the twilight or blue hour, with glowing warm interior lighting through expansive glass panes. Imagery must be shot straight-on or at dramatic low angles, emphasizing cubic geometry and illuminated spaces. Daytime, overly filtered, or chaotic street-level photos are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the 'Architectural Twilight Glow'—pairing warm, dusk-lit residential photography with cold electric cyan (#00c2cb) accent strokes and data curves against a deep obsidian canvas. This balance conveys elite luxury without feeling traditional. It is commonly misused by scattering cyan everywhere, diluting its function as an exclusive focus indicator.
MUST
- Reserve luminous cyan (#00c2cb) strictly for high-priority user actions, active states, and focal keywords.
- Maintain high contrast by rendering all primary card titles and numeric values in pure white (#ffffff).
- Keep card border widths exactly at 1px, shifting from #162a3b to #00c2cb only on active or hovered states.
- Use warm twilight or dusk exterior photography to create rich contrast against the cool dark cyan UI background.
AVOID
- Do not introduce warm yellow or orange accents that compete with the cyan/ruby brand balance.
- Do not use solid bright fills for tags or badges; use low-opacity tinted fills with high-contrast text.
- Do not clutter card imagery with excessive overlaid chips; limit to a single top tag and heart action.
- Do not set secondary text in low-contrast dark gray; keep it at or above #7e9bb4 for legibility.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2160:3824. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
