nike
Design System Overview
A bold, energetic ecommerce interface inspired by Nike’s athletic brand identity.
The design should feel modern, confident, and performance-oriented. The experience combines strong editorial imagery with clean retail layouts to create a balance between brand storytelling and product discovery.
The interface prioritizes large visuals, confident typography, and clean white surfaces. Product imagery and athletes should dominate the visual hierarchy.
The design should feel premium yet accessible, with generous whitespace and highly scannable product grids.
Color System
The interface uses a high-contrast palette built around white surfaces and strong black accents.
Primary background color is #ffffff.
Secondary background surfaces such as section dividers and promotional blocks should use #f5f5f5.
Product cards and content modules may use white or #f5f5f5 depending on layout context.
Primary text color is #111111.
Secondary text such as category labels and metadata should use #6e6e6e.
Muted helper text may use #9a9a9a.
Borders and subtle separators use #e5e5e5.
Primary brand accent color is #000000, used for navigation text, buttons, and emphasis.
Occasional highlight colors may come from product imagery or campaign visuals rather than the interface itself.
The color system should remain minimal so that product visuals dominate the experience.
Typography
Typography should be bold, modern, and athletic.
Hero headlines should appear large and confident, often using uppercase styling.
Section headings should feel strong and editorial.
Body text should be simple and highly readable.
Product names should appear clean and straightforward.
Hierarchy should emphasize:
Hero messaging Section titles Product names Supporting descriptions
Typography should reinforce the feeling of speed, performance, and movement.
Layout
The layout is image-driven and spacious.
Content sections appear in a vertical flow and are separated by generous whitespace.
Major sections include:
Navigation header Hero promotional banner Featured promotional grid Sport category browsing Product spotlight grid Footer
The layout should alternate between:
Large immersive images Multi-column product grids Editorial brand sections
Images should always feel dominant within the layout.
Navigation
Navigation should feel minimal and clean.
The Nike logo appears on the top left.
Primary navigation links appear centered and include sections such as:
New & Featured Men Women Kids Jordan
Utility icons appear on the right side and include:
Search Wishlist Shopping bag
Navigation should remain thin and unobtrusive.
Hero Section
The hero section is the most visually dominant element on the homepage.
It should feature cinematic sports imagery featuring athletes in motion.
Hero messaging appears layered over the image.
The hero title should be large and bold.
Supporting text provides context for the campaign.
Primary call-to-action buttons appear below the headline.
Typical hero actions include:
Shop Watch Notify Me
The hero should communicate energy, speed, and athletic performance.
Featured Content Grid
Featured sections display editorial lifestyle imagery combined with product categories.
Layouts typically use a two-by-two promotional grid.
Each card contains:
Full image Category label Short headline Shop button
Images should fill their containers completely.
Hover states may slightly zoom the image to create engagement.
Shop By Sport
This section highlights sports categories.
Cards include:
Full athlete image Sport label
Common categories include:
Running Training Sportswear Basketball Cricket
Cards should appear evenly spaced with strong imagery.
Product Spotlight Section
This section displays iconic or trending products.
Products appear in a dense multi-column grid.
Each product card includes:
Product image Product name Category label
Images should be centered and consistent in scale.
Hover states may slightly enlarge the product image.
The grid should allow quick scanning.
Product Card Design
Product cards should be simple and product-focused.
Each card contains:
Product image Product name Price Optional category label
Images should dominate the card.
Text should remain subtle and minimal.
Spacing should remain consistent across the grid.
Product Page Structure
Product pages should prioritize product imagery and purchase actions.
The page layout should include:
Large product gallery on the left Product information panel on the right
Product gallery should support:
Image thumbnails Zoom interaction Swipe on mobile
Product information includes:
Product name Price Color selection Size selection Add to cart button
Additional sections may include:
Product description Material details Reviews Recommended products
The layout should remain clean and easy to scan.
Cart and Checkout Design
The cart interface should feel lightweight and quick.
Cart drawer appears from the right side of the screen.
Cart items display:
Product image Name Size Price Quantity selector
Primary checkout button appears clearly at the bottom of the cart.
Checkout pages should follow a step-based flow:
Shipping information Delivery options Payment information Order summary
The checkout experience should minimize friction and distractions.
Responsive Behavior Rules
The interface should adapt smoothly across screen sizes.
Desktop layouts use wide grids and large imagery.
Tablet layouts reduce grid columns and adjust spacing.
Mobile layouts prioritize vertical stacking and simplified navigation.
Images should remain dominant across all breakpoints.
Navigation may collapse into a mobile menu on smaller screens.
Content density should decrease slightly on mobile to maintain readability.
Mobile Layout Changes
On mobile devices the layout becomes single column.
Navigation collapses into a hamburger menu.
Hero text scales down but remains bold and visible.
Featured grids stack vertically.
Product grids reduce to two columns.
Product pages place the gallery above product information.
Cart and checkout flows should remain easy to navigate with large touch targets.
Interaction Patterns
Hover states provide subtle feedback such as image zoom or link underline.
Buttons should feel responsive and tactile.
Transitions should be quick and smooth.
Interactions should support both mouse and touch environments.
Micro-interactions
Image zoom on hover should scale images to 1.05.
Buttons may display a subtle pulse animation when first appearing on screen.
Badges or promotional labels may perform a subtle bounce animation every five seconds.
Animations should remain minimal and tasteful.
Motion Guidelines
Motion should feel fast, smooth, and athletic.
Transitions should reinforce user actions rather than distract from them.
Typical animation duration should remain between 150ms and 300ms.
Scrolling should feel fluid.
Product hover animations should feel lightweight and responsive.
Motion should reflect the idea of movement and performance.
Accessibility
All images should include descriptive alt text.
Color contrast should maintain a minimum ratio of 4.5:1.
Focus states should remain clearly visible on all interactive elements.
Buttons and links should remain accessible via keyboard navigation.
Touch targets should remain large enough for comfortable mobile interaction.
The interface should prioritize usability for all users.
Visual Style
The visual style should feel:
athletic modern confident premium
Avoid unnecessary decoration.
Use imagery, typography, and whitespace to communicate the brand.
Products and athletes should always remain the primary focus.
Tone and Personality
The interface should communicate:
performance confidence movement inspiration
The experience should inspire users to explore sports, products, and athletic lifestyle content.
The overall design should feel unmistakably Nike.