Design a light-mode web interface screen: street-level skate heritage distilled into stark condensed typography, tarmac blacks, and electric cobalt navigational triggers.
LAYOUT
The page follows a deliberate alternation between dark full-bleed storytelling and crisp, light utility grids. It opens with an expansive dark photographic hero, moves to an airy centered product grid framed by hairline borders, breaks into an asymmetric 50/50 dual promo lockup, and continues into an editorial split featuring journal cards alongside technical bullet points. It anchors on a deep soot-black four-column footer with integrated email capture.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background for the navigation bar, product grid, and lower split card canvas.
- #111317 — Tarmac Dark: Deep soot background for hero container, secondary promo block, and the full-width footer.
- #F8F9FA — Subtle Gray Surface: Background fill for product cards and secondary callout blocks.
- #165DF5 — Cobalt Signal: Exclusive accent for primary action buttons, active tab underlines, badges, and icon fills.
- #0D0E11 — Carbon Text: Primary high-contrast typography color for headings, titles, and nav links on light surfaces.
- #6B7280 — Muted Ash Text: Secondary copy, inactive tabs, pricing labels, and metadata strings.
- #E5E7EB — Border Hairline: Clean structure borders defining product card tiles, divider lines, and card containers.
- #EF4444 — Alert Crimson: Micro badge indicator for shopping cart count in header.
TYPOGRAPHY
Typeface Barlow Condensed (or Oswald,Bebas Neue,DIN Condensed), weights 700/800. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 38px heading-lg, 64px display. Tracking -0.01em at display, 0.05em on caps subheads. The typographic tone is punchy, industrial, and unpretentious. The condensed uppercase display font delivers the raw energy of skate deck graphics, street posters, and athletic sportswear banners. Paired with a neutral, highly engineered geometric sans for pricing and transactional labels, the combination feels utilitarian, durable, and street-credible without sacrificing e-commerce clarity.
GEOMETRY & SPACING
Corner radii — cards 8px, links 0px, inputs 2px, buttons 2px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is communicated purely through high-contrast tonal containment and crisp 1px borders rather than simulated drop shadows. The hero and promo blocks rely on photographic light-and-shadow within the imagery itself to create volume. The interface remains resolutely flat, structural, and tactile, evoking printed zine and technical spec sheet geometry.
IMAGERY
Photography is gritty, sharp, and authentic to skate culture, split into two modes: hyper-detailed macro closeups of vulcanized rubber and canvas in natural sunlight, and dramatic monochrome/desaturated action shots of skaters mid-trick. Isolated product shots must be clean, crisp, and shot at consistent flat profile angles. Cheerful, corporate, or overly staged studio stock photography would immediately violate the brand ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the stark collision of ultra-condensed black uppercase headlines with electric cobalt-blue technical triggers against tarmac-dark and white surfaces. To execute it correctly, keep the cobalt footprint strictly limited to actionable moments (underlines, button backgrounds, mini badges) while allowing the tall display typography to do the heavy emotional lifting.
MUST
- Keep display headlines strictly in condensed uppercase sans-serif with tight negative line-height.
- Reserve the cobalt hex #165DF5 exclusively for interactive CTAs, active indicators, and focus points.
- Ensure footwear imagery in catalog tiles is strictly isolated on transparent or pure white backdrops.
- Use near-sharp 2px border radius on action buttons to maintain a technical, utilitarian silhouette.
AVOID
- Do not use cobalt #165DF5 as an arbitrary background fill for wide section wrappers.
- Do not introduce rounded organic shapes, pastel tones, or bubbly button radii above 8px.
- Do not set running body copy or lengthy paragraph descriptions in condensed display type.
- Do not use colored dropshadows or glossy glassmorphic layers anywhere on the interface.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2192:3760. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
