Design a light-mode web interface screen: structured architectural grids colliding with high-contrast crimson blocks, cobalt accents, and cinematic editorial imagery.
LAYOUT
The layout is divided into rigorous asymmetric modules anchored to a 12-column grid. The top fold juxtaposes a generous text-heavy left hero with a compact 2x2 grid of service tiles on the right. Below, an expansive edge-to-edge dark cinematic showcase spans the page, followed by an inverted balance: a dual-card media stack on the left against an editorial mission statement on the right.
PALETTE (use these exact hex values)
- #ffffff — Canvas Base: Primary light page background and card fill across all editorial text sections
- #1a64e8 — Cobalt Blue: High-priority action items, primary CTA buttons, and interactive category badges
- #be3446 — Crimson Carmine: Hero feature service block, media banner, section overlines, and headline terminal period accents
- #eef4fd — Ice Blue Tint: Subtle cool surface background for the digital products service quadrant
- #f7f9fb — Pale Neutral Tint: Whisper-light neutral surface for top-left branding service card
- #11141a — Deep Onyx: Dominant typography color for headlines, titles, and logo mark
- #5d6675 — Slate Neutral: Subtitles, secondary body copy, footer links, and descriptive paragraphs
- #e5e9f0 — Border Hairline: Card outlines, divider rules, and secondary ghost button boundaries
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 38px heading, 54px display. Tracking -0.03em at display, 0.08em at overline. The typographic tone is authoritative, cultured, and contemporary European editorial design. The grotesque sans-serif (reminiscent of Plus Jakarta Sans or General Sans) projects modern rigor while tight display tracking creates tension against generous, readable body leading. Licensing an authentic neo-grotesque with clean geometry and round terminal punctuation is critical to maintaining the studio feel.
GEOMETRY & SPACING
Corner radii — cards 6px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat and architectural rather than layered with elevation shadows. Contrast is achieved through direct surface color changes (crimson against white, soft ice blue against neutral white) and hairline 1px borders (#e5e9f0). Photography acts as the single window of illusionistic depth within an otherwise graphic, planographic space.
IMAGERY
Imagery follows high-end fashion and art editorial aesthetics, featuring dramatic low-key portraits saturated in warm amber and deep shadow. Complementary vector graphics are rendered exclusively in delicate, fine-line ink-style illustrations (single stroke weight, monochrome line work). Stock photography or glossy corporate 3D renders would completely break the gallery-like atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the asymmetric 2x2 service matrix where precisely one quadrant is flooded in solid, high-intensity crimson while the remaining three remain delicate white or pale tint. This controlled pop of color balances the opposite text column and creates an unmistakable editorial rhythm that prevents the minimalist grid from feeling sterile. Misusing it by coloring more than one tile destroys the intentional focal tension.
MUST
- Terminate major display headlines with a distinct crimson full stop (#be3446) for brand punctuation.
- Alternate service quadrant backgrounds between pale tint, solid crimson, and clean white.
- Pair delicate 1px line-art illustrations strictly with bold grotesque typographic weights.
- Keep button and card border radii restrained to 4px–6px for an architectural, crisp feel.
AVOID
- Do not use heavy multi-colored drop shadows; rely on flat background tints and hairline borders.
- Do not round card corners into soft pills; reserve rounded pill shapes strictly for small tag badges if needed.
- Do not allow generic stock photography; maintain high-contrast, moody editorial imagery in banner zones.
- Do not set display headlines in light weights; hero messaging requires bold to heavy presence.
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 中尝试 
