CURATED · OPEN · FREE

Nomad

A premium e-commerce experience for high-end tech accessories, grounded in utility and refined aesthetics.

01

Identity DNA

Apple-style product retail with a rugged, travel-focused twist.

02

Color

High-contrast monochrome base with photographic heroes and no primary brand accent color.

03

Typography

grotesque-sans · inconsolata

• display56px · 700
• heading24px · 700
• body16px · 400
• caption14px · 400
• overline12px · 700

04

Spacing

Linear spacing scale based on 4px increments, used generously for large layouts.

05

Surfaces

1px solid rgba(0, 0, 0, 1.0)

0px 6px 6px -3px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px inset rgba(0, 0, 0, 0.1)

06

Layout

Full-width image hero followed by a centered quote section and a grid of product cards.

07

Motion & Interaction

Fade-in/out for overlays and modals (opacity 0.2s) · Smooth hover transitions for interactive elements (0.15s)

Subtle opacity or color shift on buttons and links. · Immediate visual feedback via standard button states.

08

Components

• button Rounded pill-shaped or soft-curve buttons with high-contrast solid fills or simple text links.
• card Rounded-corner product cards with subtle inset or drop shadows, often featuring grid or image backgrounds.
• chip None visible in the primary viewport.
• input Standard form fields with soft rounded corners and inset shadows.
• hero Full-bleed photographic image with a dark gradient overlay and massive, tightly tracked sans-serif typography.

09

Voice & Don'ts

• Tone Confident, premium, and utility-focused.
• Headlines Minimalist, large, tightly tracked sans-serif statements.
• CTAs Direct, clear, and action-oriented.

• Don't use a vibrant primary accent color — screenshot shows a strictly monochrome palette without a dominant hue.
• Don't use decorative serif fonts for main headlines — screenshot shows tight, bold grotesque-sans for display text.
• Don't apply soft, circular border-radii to main UI elements — screenshot shows a mix of sharp corners and pill-shaped buttons.
• Don't use heavy, colorful drop shadows — screenshot shows very subtle, almost invisible drop shadows or inset outlines.
• Don't center all body copy — screenshot shows center-aligned hero text but standard left-aligned body copy elsewhere.
• Don't use thin, light weights for primary text — screenshot shows mostly regular (400) and bold (700) weights.
• Avoid: Avoid overly casual or playful language.
• Avoid: Avoid complex gradients or decorative flourishes.
• Avoid: Avoid low-contrast text.
• Avoid: Avoid cluttered UI or excessive UI chrome.
• Avoid: Avoid using a dominant vibrant accent color.
• Avoid: Avoid decorative serifs in primary headlines.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko