Design a light-mode mobile app interface screen: private banking polish applied to prestige insurance with serene typography and pillared cards.
LAYOUT
The mobile layout follows an editorial single-column scroll with rhythmic horizontal carousels. Top utility bar leads into an expansive 380px-tall hero showcase with integrated carousel pagination. A 28px vertical gap transitions to 'Explore our cover' with an overflowing horizontal tray of tall rounded category tiles, followed by structured lifestyle cards.
PALETTE (use these exact hex values)
- #ffffff — Pure White: Primary background canvas, button fills, and unselected card base surfaces.
- #0e2540 — Deep Navy: Header text, brand logo, active icons, and primary category accent elements.
- #ebf3fa — Soft Ice Blue: Selected category card background fill providing subtle interactive hierarchy.
- #eef2f6 — Porcelain Border: Delicate single-pixel stroke around unselected cards and header icon buttons.
- #1d232c — Charcoal Slate: Section titles, hero titles, and primary readable labels.
- #6b7785 — Muted Slate: Supporting descriptions, hero subtext, and unselected item labels.
- #66c1b1 — Aqua Mint: Icon container tint for motor insurance product category.
- #ee786e — Coral Rose: Icon container tint for overseas property product category.
- #408be0 — Azure Blue: Icon container tint for marine insurance product category.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 32px display. Tracking -0.02em at titles, 0.08em at uppercase labels. The typographic system delivers an aura of quiet wealth and private wealth management. It blends modern, highly legible geometric sans (resembling Inter or SF Pro) for interactive clarity with timeless, refined serif flourishes (resembling Baskerville) for heritage prestige. If unavailable, pair Plus Jakarta Sans with Cormorant Garamond.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved almost entirely without standard drop shadows. Contrast between card surfaces, micro-borders of 1px in #eef2f6, and soft pastel surface fills (#ebf3fa) establishes visual planes. The hero card uses photographic depth with natural shadows under the car rather than UI box-shadows.
IMAGERY
Photography depicts aspirational ultra-luxury lifestyle assets: exotic luxury tourers, Alpine roads, bespoke yachts, and high-end overseas villas. Images feature rich saturation, pristine lighting, and deep cinematic tones. Flat vector stock graphics or casual snapshots are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the 24px rounded cinematic hero card featuring deep navy gradient masking paired directly below with the distinct soft-blue pillared category tiles. This transition from atmospheric grand touring photography to structured, candy-tinted micro-badges defines the bespoke private-client aesthetic.
MUST
- Keep card corner radii generous, strictly between 16px and 24px for all content blocks.
- Use pastel-tinted saturated circular badges to house icons inside category navigation cards.
- Pair clean geometric sans body copy with classical serif typography for heritage brand elements.
- Retain ample whitespace above and below section headings with minimum 24px spacing.
AVOID
- Do not introduce sharp 0px corners or harsh hard-edge geometric containers anywhere.
- Avoid heavy dark drop shadows; convey separation using hairline borders (#eef2f6) and color contrast.
- Never use generic unbranded bright blue for action buttons—default to solid white or deep navy.
- Do not set full body copy or lengthy paragraphs in serif typography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub