Design a light-mode mobile app interface screen: warm alabaster interiors layered with deep burgundy accents and editorial serif typography.
LAYOUT
The layout progresses vertically as an editorial catalog. It begins with a photographic hero section establishing tone, transitioning directly into a floating lead capture panel that integrates trust points. Following the primary conversion card, a horizontal commitment banner anchors credibility, leading into a numbered, horizontal scrolling visual gallery ('02 Innovation & Quality').
PALETTE (use these exact hex values)
- #F7F4F0 — Warm Linen Canvas: Global background tone simulating warm interior wall plaster and neutral light.
- #FFFFFF — Pure Studio White: Floating card background, circular badge fills, and form field base surfaces.
- #4A1E24 — Bordeaux Wine: Primary interactive touchpoints, hero CTA buttons, and italicized accent headlines.
- #222021 — Charcoal Black: Dominant text color for display headings, primary titles, and high-emphasis labels.
- #7A7471 — Muted Umber: Supporting descriptions, form placeholders, and supplementary feature notes.
- #E7E2DC — Linen Hairline: Form input strokes, subtle card borders, and icon circular outlines.
- #D8C7B5 — Oatmeal Warmth: Subtle decorative typography accents like ampersands and secondary highlights.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Canela, EB Garamond), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.015em at display sizes. The typography balances heritage artisanship with contemporary architectural precision. The display serif (resembling Cormorant Garamond) provides a literary, bespoke craftsmanship aesthetic, emphasized by dual-tone headline coloring. The clean geometric sans companion ensures that form labels, numbers, and value propositions remain crisp, utilitarian, and effortlessly legible on mobile screens.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 999px. Spacing on a 4px unit, 16px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created using soft, naturalistic ambient lighting rather than layered physical heights. Elevated white cards (#FFFFFF) float over the warm plaster canvas (#F7F4F0) using an ultra-diffuse shadow (box-shadow: 0 12px 36px -8px rgba(34, 32, 33, 0.06)). No high-contrast directional shadows or glossy skeuomorphic bevels are permitted.
IMAGERY
Photography emphasizes tranquil, sun-drenched Scandinavian and mid-century architectural spaces showcasing natural hardwood floors, linen upholstery, ceramics, and warm wood cabinetry. Compositions are cropped organically into rounded rectangles with soft light and neutral color balances. Neon, harsh flash photography, or staged corporate stock imagery is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone editorial headline styling paired with deep wine (#4A1E24) pill buttons over a warm plaster canvas. The first half of a headline appears in charcoal while the second half switches to rich wine, instantly conveying architectural luxury. A common misuse is applying this burgundy accent to entire paragraphs rather than confining it to isolated focal phrases and single primary actions.
MUST
- Reserve deep wine #4A1E24 exclusively for primary buttons, numbered badges, and key headline emphasis words.
- Pair Cormorant Garamond display headings with clean, airy geometric sans-serif for inputs and descriptions.
- Use generous 24px corner radii for white content container cards.
- Incorporate clean, single-pixel line weight iconography inside round 44px circular badges.
AVOID
- Do not use saturated primary colors like cobalt blue, bright red, or emerald green anywhere.
- Do not use sharp 0px corners; all cards, inputs, and badges must remain smoothly curved.
- Do not render small body copy or form inputs in serif typography; preserve serifs for display roles only.
- Do not apply heavy, pitch-black drop shadows; keep elevation soft and diffuse.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1616:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试