Design a dark-mode mobile app interface screen: monumental editorial restraint applied to heavy industrial engineering in deep obsidian and burnished gold.
LAYOUT
The mobile layout adheres to a single-column stacked vertical rhythm with embedded horizontal scrolling trays. A sticky or top-level app bar leads into an atmospheric hero section featuring full-bleed photography with a bottom gradient dissolve. Below the fold, discrete section wrappers hold two-tier headers, followed by 4-column horizontal overflow cards for core values and 3-column photo cards for operational capabilities.
PALETTE (use these exact hex values)
- #111417 — Deep Obsidian: Primary mobile background canvas behind hero imagery and card containers
- #14181D — Slate Void: Contained section wrapper surfaces providing subtle layering over the base canvas
- #1B2026 — Card Trench: Individual card background for values, service items, and header circular actions
- #252B33 — Subtle Seam: One-pixel structural borders for cards, carousel containers, and secondary action pills
- #5E1B22 — Cabernet Crimson: Primary call-to-action button fill and footer banner accent background
- #C8A882 — Sand Dune: Eyebrow labels, outline iconography, service action buttons, and active carousel dots
- #FFFFFF — Chalk White: Dominant headlines, hero display titles, and prominent button text
- #8D99A6 — Dust Mongoose: Supporting subheads, card descriptions, and inactive pagination indicators
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Miller Display, EB Garamond), weights 400/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 22px heading, 28px heading-lg, 34px display. Tracking -0.015em at display, 0 at heading. The typographical pairing merges high-end editorial refinement with industrial dependability. Cormorant Garamond's sharp serifs evoke established heritage, authority, and prestige reminiscent of sovereign financial institutions or luxury watchmakers. Inter balances this with stark, legible precision for technical reassurance; Cormorant can be substituted with Playfair Display if needed.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, tight density.
DEPTH
Elevation is entirely flat and architectural, eschewing fuzzy drop shadows in favor of tonal separation. Layers build from the obsidian base (#111417) up to slate container surfaces (#14181D) and card surfaces (#1B2026). Crisp 1px borders (#252B33) carve visual boundaries between foreground elements and canvas.
IMAGERY
Photography emphasizes authentic heavy extraction machinery, mining haulers, welding fabrication, and underground infrastructure under low-key cinematic lighting. Images are graded with deep charcoal shadows, desaturated cool tones, and warm tungsten highlights. Stock corporate office photography or overly sterile equipment mockups are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The singular design move is the pairing of delicate, luxury-editorial serif display typography and fine sand outline icons directly against gritty, heavy-duty mining machinery. This intentional tension subverts expected construction design conventions, framing heavy mining as an elite, high-precision engineering discipline. It is ruined if sans-serif fonts are substituted for the main headlines or if generic yellow hazard accents are added.
MUST
- Use sand (#C8A882) strictly for category eyebrows, iconography strokes, and focal navigation cues.
- Pair Cormorant Garamond for titles with crisp Inter for body text to maintain elite industrial gravitas.
- Enclose value items in cards bordered with a precise 1px stroke of #252B33 on 12px border radii.
- Maintain high photographic contrast featuring authentic heavy machinery surrounded by dark, rugged terrain.
AVOID
- Do not use high-saturation safety yellows or orange tones typical of construction clichés.
- Never render long-form body paragraphs or technical specifications in Cormorant Garamond.
- Do not apply heavy drop shadows; depth is strictly communicated via border contrast and layered values.
- Avoid pill radiuses (>16px) on primary square cards; maintain architectural 12px geometry.
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. 在 DraPub 中尝试 
