Design a dark-mode mobile app interface screen: quiet monolithic drama balancing obsidian architectural shadows against warm gallery parchment sheets.
LAYOUT
The screen follows a progressive reveal rhythm from top to bottom. A sticky or high-priority chrome header with monogram and menu anchors the top edge, followed by a left-aligned display headline and burgundy CTA set against an architectural silhouette. Directly underneath, an equidistant three-column metric bar bridges the hero before transitioning cleanly into a warm parchment sheet featuring serialized '01, 02, 03' catalog-style horizontal list rows.
PALETTE (use these exact hex values)
- #0e0e10 — Obsidian Deep: Dominant background canvas for the hero section and full-bleed photography blend
- #f4f3ef — Gallery Parchment: Overlapping drawer bottom sheet surface displaying primary architectural navigation rows
- #63242a — Crimson Wine: Primary action button background fill and punctuation accent dot
- #47181c — Crimson Wine Dark: Inner circular container inside the CTA button holding the directional arrow
- #f5efe6 — Champagne Bone: Hero serif typography, primary logo mark, and metric numbers
- #9c9a95 — Muted Ash: Hero subheadings, metric labels, and metric wireframe icons
- #141416 — Charcoal Black: Primary serif section titles on light parchment sheet
- #706e6a — Parchment Slate: Secondary descriptive body copy within bottom sheet rows
- #e5e2db — Warm Hairline Border: Fine horizontal divider lines between navigation rows on the light sheet
- #28282b — Dark Hairline Divider: Fine vertical divider lines separating hero metrics
TYPOGRAPHY
Typeface Cormorant Garamond (or Editorial New, Playfair Display, Ogg), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 20px subheading, 24px heading, 48px display. Tracking -0.02em at display, normal at titles. The typographic pairing speaks with the hushed authority of a luxury monograph or architecture biennial catalogue. Cormorant Garamond delivers high contrast, sharp serifs, and sculptural ascenders that echo classical structural columns, while Inter or a similar clean grotesque balances the layout with Swiss readability. If Cormorant is unavailable, Editorial New or Playfair Display are suitable alternatives provided they are rendered with tight tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 48px between sections, 390px container, comfortable density.
DEPTH
Depth is created via tactile layering rather than heavy ambient lighting. The parchment content sheet physically slides over the dark atmospheric background using an exaggerated 32px top radius, while thumbnail interaction cues use a crisp 32px white circle with a 4px soft shadow (0 4px 10px rgba(0,0,0,0.12)) to lift off photographic cards.
IMAGERY
Photography focuses on brutalist, monolithic, and high-end interior architecture characterized by cast concrete, sharp angular shadows, fluted surfaces, and neutral linen palettes. The hero uses dramatic chiaroscuro exterior angles blended into pure black, while content thumbnails showcase warm, minimalist interior compositions. Bright lifestyle photography, stock human portraits, or colorful flat vector illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the tactile 'sheet overlay' gesture where a warm, light parchment gallery drawer (#f4f3ef, 32px radius) emerges over an obsidian brutalist photograph (#0e0e10), puncturing the dark mood with editorial brightness. It transforms the screen from an immersive architectural moodboard into an organized monograph index. Misusing it involves making the background and drawer the same shade or removing the high-contrast tonal boundary.
MUST
- Use Cormorant Garamond exclusively for numeric counters and titles to sustain editorial elegance.
- Maintain strict monochrome photography in the hero and warm natural stone tones in cards.
- Retain the 32px top radius on the parchment sheet to anchor the tactile drawer motif.
- Limit the crimson wine tone (#63242a) strictly to primary CTA elements and small index dots.
AVOID
- Do not introduce bright saturated primary colors like blue, yellow, or vivid green anywhere.
- Avoid boxy 90-degree corners on bottom sheets or thumbnail images; keep curves at 16-32px.
- Do not set long multi-paragraph body text in the Cormorant serif font.
- Do not remove the vertical hairline dividers in the metric strip, which mimic architectural mullions.
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 
